fix show hide animate

demos/gallery-webIndex.html

@@ -82,7 +82,8 @@
         id: 'mountNode',             // dom id
         height: window.innerHeight,
         layout: {
-          processer: force
+          processer: force,
+          auto: 'once'
         },
         plugins: [nodeSizeMapper, nodeColorMapper, edgeSizeMapper, template],
         animate: true,
@@ -117,7 +118,7 @@
           return b.weight - a.weight;
         }
       });
-      graph.read(data);
+      graph.read(data, true);
       setInterval(() => {
         if (document.visibilityState === 'visible') {
           let layouts = [circle, dagre, force, grid, spiral];
@@ -125,7 +126,7 @@
             return layout !== graph.getLayout();
           });
           const layout = layouts[parseInt(layouts.length * Math.random())];
-          graph.changeLayout(layout);
+          graph.changeLayout(layout, true);
         }
       }, 2000);
     });

demos/test.html

@@ -52,6 +52,13 @@
       roots: [{
         label: 'root',
         children: [{
+          label: 'child1',
+          children: [
+            {
+              label: 'child\n1.1'
+            }
+          ]
+        }, {
           label: 'child2'
         }]
       }]

src/controller/animate.js

@@ -7,10 +7,6 @@ const Base = require('./base');
 const Util = require('../util/');
 
 class Controller extends Base {
-  constructor(cfg) {
-    super(cfg);
-    this._init();
-  }
   getDefaultCfg() {
     return {
       graph: null,
@@ -18,32 +14,12 @@ class Controller extends Base {
       stash1: {}
     };
   }
-  _init() {
-    const graph = this.graph;
-    graph.on('afteritemdraw', ({ item }) => {
-      this.cache(item, this.stash1);
-    });
-    graph.on('afteritemhide', ({ item }) => {
-      this.stash1[item.id].visible = false;
-    });
-    graph.on('afteritemshow', ({ item }) => {
-      this.stash1[item.id].visible = true;
-    });
-    graph.on('afteritemdestroy', ({ item }) => {
-      const group = item.getGraphicGroup();
-      delete this.stash1[group.gid];
-      group.deepEach(element => {
-        const id = element.gid;
-        delete this.stash1[id];
-      });
-    });
-  }
-  cacheGraph() {
+  cacheGraph(stashType) {
     const graph = this.graph;
     const items = graph.getItems();
-    this.stash0 = {};
+    this[stashType] = {};
     items.forEach(item => {
-      this.cache(item, this.stash0);
+      this.cache(item, this[stashType]);
     });
   }
   cache(item, stash) {
@@ -92,12 +68,12 @@ class Controller extends Base {
           }
         }
       } else {
-        enterElements.push(k);
+        subStash1.element.isItemContainer && enterElements.push(k);
       }
     });
     Util.each(stash0, (v, k) => {
       if (!stash1[k]) {
-        leaveElements.push(k);
+        stash1[k].element.isItemContainer && leaveElements.push(k);
       }
     });
     this.enterElements = enterElements;
@@ -116,6 +92,11 @@ class Controller extends Base {
     const showElements = this.showElements;
     const stash0 = this.stash0;
     const stash1 = this.stash1;
+    // console.log('enterElements ==> ', enterElements);
+    // console.log('leaveElements ==> ', leaveElements);
+    // console.log('updateElements ==> ', updateElements);
+    // console.log('hideElements ==> ', hideElements);
+    // console.log('showElements ==> ', showElements);
 
     enterElements.forEach(elementId => {
       const subStash1 = stash1[elementId];
@@ -151,7 +132,7 @@ class Controller extends Base {
       const subStash1 = stash1[elementId];
       const hideAnimate = subStash1.hideAnimate;
       if (hideAnimate) {
-        subStash1.item.show();
+        subStash1.element.show();
         hideAnimate(subStash1.item);
       }
     });

src/item/item.js

@@ -63,7 +63,13 @@ class Item {
        * is item
        * @type {boolean}
        */
-      isItem: true
+      isItem: true,
+
+      /**
+       * visible - not group visible
+       * @type {boolean}
+       */
+      visible: true
     };
     Util.mix(this, defaultCfg, cfg);
     this._init();
@@ -214,8 +220,7 @@ class Item {
     this.collapsedParent = getCollapsedParent(this.model, dataMap);
   }
   isVisible() {
-    const group = this.group;
-    return group.get('visible');
+    return this.visible;
   }
   hide() {
     const group = this.group;
@@ -224,6 +229,7 @@ class Item {
       item: this
     });
     group.hide();
+    this.visible = false;
     graph.emit('afteritemhide', {
       item: this
     });
@@ -235,6 +241,7 @@ class Item {
       item: this
     });
     group.show();
+    this.visible = true;
     graph.emit('afteritemshow', {
       item: this
     });

src/mixin/animate.js

@@ -16,47 +16,25 @@ Mixin.CFG = {
   animate: false,
 
   _showAnimate(item) {
-    const group = item.getGraphicGroup();
     if (!item.getKeyShape()) return;
-    const box = item.getBBox();
-    const centerX = (box.minX + box.maxX) / 2;
-    const centerY = (box.minY + box.maxY) / 2;
-    Util.scaleIn(group, centerX, centerY);
+    Util.scaleIn(item);
   },
 
   _hideAnimate(item) {
     const group = item.getGraphicGroup();
-    if (!item.getKeyShape()) {
-      group.hide();
-      return;
-    }
-    const box = item.getBBox();
-    const centerX = (box.minX + box.maxX) / 2;
-    const centerY = (box.minY + box.maxY) / 2;
-    Util.scaleOut(group, centerX, centerY, () => {
-      group.hide();
+    Util.scaleOut(item, () => {
+      !item.visible && group.hide();
     });
   },
 
   _enterAnimate(item) {
-    const group = item.getGraphicGroup();
     if (!item.getKeyShape()) return;
-    const box = item.getBBox();
-    const centerX = (box.minX + box.maxX) / 2;
-    const centerY = (box.minY + box.maxY) / 2;
-    Util.scaleIn(group, centerX, centerY);
+    Util.scaleIn(item);
   },
 
   _leaveAnimate(item) {
     const group = item.getGraphicGroup();
-    if (!item.getKeyShape()) {
-      group.remove();
-      return;
-    }
-    const box = item.getBBox();
-    const centerX = (box.minX + box.maxX) / 2;
-    const centerY = (box.minY + box.maxY) / 2;
-    Util.scaleOut(group, centerX, centerY, () => {
+    Util.scaleOut(item, () => {
       group.remove();
     });
   },

src/mixin/draw.js

@@ -15,11 +15,12 @@ Mixin.AUGMENT = {
       eventNames.forEach(eventName => {
         this.on('before' + eventName, ({ animate }) => {
           if (animate && animateController) {
-            animateController.cacheGraph();
+            animateController.cacheGraph('stash0');
           }
         });
         this.on('after' + eventName, ({ animate }) => {
           if (animate && animateController) {
+            animateController.cacheGraph('stash1');
             animateController.run();
           } else {
             this.draw();

src/tree.js

@@ -57,7 +57,9 @@ class Tree extends Graph {
     const dataMap = this.get('_dataMap');
     const nodes = [];
     const edges = [];
-
+    if (!roots) {
+      throw new Error('please set data.roots!');
+    }
     roots.forEach(root => {
       Util.traverseTree(root, (child, parent) => {
         if (!child.id) {
@@ -244,10 +246,7 @@ class Tree extends Graph {
         } else {
           item.deepEach(child => {
             child.show();
-            child.getEdges(edge => {
-              const model = edge.getModel();
-              return model.target === child.id;
-            }).forEach(edge => {
+            child.getInEdges().forEach(edge => {
               edge.show();
             });
           }, parent => {

src/util/animate.js

@@ -3,20 +3,22 @@ const Global = require('../global');
 module.exports = {
   /**
    * scale in animate
-   * @param  {object}  element g element
-   * @param  {object}  x to x
-   * @param  {object}  y to y
+   * @param  {object}  item - graph item
    * @param  {function} callback callback when animate finshed
    */
-  scaleIn(element, x, y, callback) {
-    const m = element.getMatrix();
+  scaleIn(item, callback) {
+    const group = item.getGraphicGroup();
+    const box = item.getBBox();
+    const x = (box.minX + box.maxX) / 2;
+    const y = (box.minY + box.maxY) / 2;
+    const m = group.getMatrix();
     const s = m[0];
-    element.transform([
+    group.transform([
       [ 't', -x, -y ],
       [ 's', 0.01 / s, 0.01 / s ],
       [ 't', x, y ]
     ]);
-    element && !element.get('destroyed') && element.animate({
+    group.animate({
       transform: [
         [ 't', -x, -y ],
         [ 's', 100 * s, 100 * s ],
@@ -26,15 +28,17 @@ module.exports = {
   },
   /**
    * scale out animate
-   * @param  {object}  element g element
-   * @param  {object}  x to x
-   * @param  {object}  y to y
+   * @param  {object}  item - graph item
    * @param  {function} callback callback when animate finshed
    */
-  scaleOut(element, x, y, callback) {
-    const m = element.getMatrix();
+  scaleOut(item, callback) {
+    const group = item.getGraphicGroup();
+    const box = item.getBBox();
+    const x = (box.minX + box.maxX) / 2;
+    const y = (box.minY + box.maxY) / 2;
+    const m = group.getMatrix();
     const s = m[0];
-    element && !element.get('destroyed') && element.animate({
+    group.animate({
       transform: [
         [ 't', -x, -y ],
         [ 's', 0.01 / s, 0.01 / s ],