Merge pull request #115 from nicolaserny/improve-defer-init

Improve the div intial size detection

Author: maurelio1234

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-gojs",
-    "version": "4.6.1",
+    "version": "4.6.2",
     "description": "GoJS React integration",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

src/GojsDiagram.test.tsx

@@ -96,8 +96,19 @@ describe('<GojsDiagram />', () => {
     let keyIndex = 0;
 
     beforeEach(() => {
-        Object.defineProperty(Element.prototype, 'clientWidth', { value: 100 });
-        Object.defineProperty(Element.prototype, 'clientHeight', { value: 100 });
+        Element.prototype.getBoundingClientRect = function() {
+            return {
+                width: 100,
+                height: 100,
+                top: 0,
+                left: 0,
+                x: 0,
+                y: 0,
+                toJSON: null,
+                bottom: 0,
+                right: 0
+            };
+        };
         keyIndex = 0;
         const dom = document.body;
         modelChangeCallback = jest.fn();

src/GojsDiagram.tsx

@@ -65,18 +65,22 @@ class GojsDiagram<N extends BaseNodeModel, L extends LinkModel> extends React.Pu
     }
 
     componentDidMount() {
-        let intervalCount = 0;
-        this.mountInterval = setInterval(() => {
-            if (this.divRef.current && this.divRef.current.clientWidth && this.divRef.current.clientHeight) {
-                this.init();
-                clearInterval(this.mountInterval);
-            } else {
-                if (intervalCount > 10) {
+        if (this.divRef.current) {
+            let prevValue = JSON.stringify(this.divRef.current.getBoundingClientRect());
+            this.mountInterval = setInterval(() => {
+                if (this.divRef.current) {
+                    let nextValue = JSON.stringify(this.divRef.current.getBoundingClientRect());
+                    if (nextValue === prevValue) {
+                        clearInterval(this.mountInterval);
+                        this.init();
+                    } else {
+                        prevValue = nextValue;
+                    }
+                } else {
                     clearInterval(this.mountInterval);
                 }
-                intervalCount++;
-            }
-        }, 10);
+            }, 50);
+        }
     }
 
     componentWillUnmount() {