fix draw bug

demos/graph-animate.html

@@ -25,21 +25,21 @@
       height: window.innerHeight,
       animate: true
     });
-    graph.read(data);
+    graph.read(data, true);
     setTimeout(() => {
       graph.update('node1', {
         x: 50,
         y: 50
-      });
+      }, true);
     }, 1000);
     setTimeout(() => {
       graph.update('node1', {
         x: 200,
         y: 50
-      });
+      }, true);
     }, 1200);
     setTimeout(() => {
-      graph.remove('node1');
+      graph.remove('node1', true);
     }, 2000);
   </script>
 </body>

demos/test.html

@@ -49,40 +49,62 @@
   </style>
   <script>
     const data = {
-      roots: [{
-        label: 'root',
-        children: [{
-          label: 'child1',
-          children: [
-            {
-              label: 'child\n1.1'
-            }
-          ]
-        }, {
-          label: 'child2'
-        }]
+      nodes: [{
+        id: 'node1',
+        x: 100,
+        y: 200
+      }, {
+        id: 'node2',
+        x: 300,
+        y: 200
+      }],
+      edges: [{
+        target: 'node2',
+        source: 'node1'
       }]
     };
-    const tree = new G6.Tree({
+    const graph = new G6.Graph({
       container: 'mountNode',
       width: 500,
       height: 500,
-      animate: true,
-      fitView: 'cc'
+      animate: true
+    }); 
+    graph.read(data);
+    graph.update('node1', {
+      size: 10
     });
-    tree.read(data, true);
-    tree.on('node:click', ({item})=>{
-      const model = item.getModel();
-      const { collapsed } = model;
-      if (collapsed) {
-        tree.update(item, {
-          collapsed: false
-        }, true);
-      } else {
-        tree.update(item, {
-          collapsed: true
-        }, true);
-      }
+    graph.update('node1', {
+      size: 10
+    });
+    graph.update('node1', {
+      size: 10
+    });
+    graph.update('node1', {
+      size: 10
+    });
+    graph.update('node1', {
+      size: 10
+    });
+    graph.update('node1', {
+      size: 10
+    });
+    graph.update('node1', {
+      size: 10
+    });
+    graph.update('node1', {
+      size: 1000
+    });
+    graph.update('node1', {
+      size: 10
+    });
+    graph.update('node1', {
+      y: 10
+    });
+    graph.update('node2', {
+      y: 300
+    }, true);
+    graph.on('click', ()=>{
+      graph.draw();
     });
   </script>
 </body>

src/controller/animate.js

@@ -73,7 +73,7 @@ class Controller extends Base {
     });
     Util.each(stash0, (v, k) => {
       if (!stash1[k]) {
-        stash1[k].element.isItemContainer && leaveElements.push(k);
+        v.element.isItemContainer && leaveElements.push(k);
       }
     });
     this.enterElements = enterElements;

src/graph.js

@@ -502,7 +502,7 @@ class Graph extends Base {
     return item;
   }
   /**
-   * @param {String|Item} item target item
+   * @param {String|Item} item - target item
    * @param {boolean} animate - use animate or not
    * @return {Graph} this
    */

src/mixin/draw.js

@@ -10,24 +10,26 @@ Mixin.AUGMENT = {
   _initDraw() {
     const controllers = this.get('_controllers');
     const animateController = controllers.animate;
-    if (animateController) {
-      const eventNames = [ 'change', 'updatenodeposition' ];
-      eventNames.forEach(eventName => {
+    const eventNames = [ 'change', 'updatenodeposition' ];
+
+    eventNames.forEach(eventName => {
+      if (animateController) {
         this.on('before' + eventName, ({ animate }) => {
           if (animate && animateController) {
             animateController.cacheGraph('stash0');
           }
         });
-        this.on('after' + eventName, ({ animate }) => {
-          if (animate && animateController) {
-            animateController.cacheGraph('stash1');
-            animateController.run();
-          } else {
-            this.draw();
-          }
-        });
+      }
+      this.on('after' + eventName, ({ animate }) => {
+        if (animate && animateController) {
+          animateController.cacheGraph('stash1');
+          animateController.run();
+        } else {
+          this.draw();
+        }
       });
-    }
+    });
+
   },
   draw() {
     const canvas = this.get('_canvas');