@antv/g6/lib/controller/animate.js

graph visualization frame work

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * @fileOverview animate controller
 * @author huangtonger@aliyun.com
 */

var Base = require('./base');
var Util = require('../util/');
var Global = require('../global');

/**
 * depth traversal and copy the graphics
 * @param  {object}   map        the index table
 * @param  {array}    parent     parent
 * @param  {number}   count      element count
 * @return {number}   count      element count
 */
function getElements(map, parent, count) {
  var children = parent.get('children');
  Util.each(children, function (child) {
    count++;
    var id = child.gid;
    if (child.isGroup) {
      count = getElements(map, child, count);
    }
    if (!Util.isNil(id)) {
      var stash = {
        matrixStash: Util.clone(child.getMatrix()),
        element: child
      };
      if (child.isShape) {
        var attrs = child.get('attrs');
        stash.attrsStash = {};
        Util.each(attrs, function (v, k) {
          stash.attrsStash[k] = child.attr(k);
        });
      }
      map[id] = stash;
    }
  });
  return count;
}

function updateAnimate(element, props) {
  element.set('capture', false);
  element.animate(props, Global.updateDuration, Global.updateEasing, function () {
    element.set('capture', true);
  });
}

var Controller = function (_Base) {
  _inherits(Controller, _Base);

  function Controller(cfg) {
    _classCallCheck(this, Controller);

    var _this = _possibleConstructorReturn(this, _Base.call(this, cfg));

    _this._init();
    return _this;
  }

  Controller.prototype._init = function _init() {
    var _this2 = this;

    var graph = this.graph;
    graph.on('afteritemdraw', function (ev) {
      _this2.cacheKeyFrame(ev.item);
    });
  };

  Controller.prototype.cacheKeyFrame = function cacheKeyFrame(item) {
    var keyFrameCache = this.keyFrameCache;
    var group = item.getGraphicGroup();
    if (item.isEdge) {
      group.setMatrix([1, 0, 0, 0, 1, 0, 0, 0, 1]);
    }
    group.deepEach(function (element) {
      var id = element.gid;
      var stash = {
        matrix: Util.clone(element.getMatrix())
      };
      if (element.isItemContainer) {
        stash.enterAnimate = item.getEnterAnimate();
        stash.leaveAnimate = item.getLeaveAnimate();
      }
      if (element.isShape) {
        stash.attrs = element.getAttrs();
      }
      stash.item = item;
      keyFrameCache[id] = stash;
    }, true);
  };

  Controller.prototype._compare = function _compare() {
    var stash0 = this.stash0;
    var stash1 = this.stash1;
    var enterElements = [];
    var leaveElements = [];
    var updateElements = [];

    Util.each(stash1, function (v, k) {
      if (stash0[k]) {
        if (v.element.get('type') === stash0[k].element.get('type')) {
          updateElements.push(k);
        }
      } else {
        enterElements.push(k);
      }
    });
    Util.each(stash0, function (v, k) {
      if (!stash1[k]) {
        leaveElements.push(k);
      }
    });
    this.enterElements = enterElements;
    this.leaveElements = leaveElements;
    this.updateElements = updateElements;
  };

  Controller.prototype._addTween = function _addTween() {
    var enterElements = this.enterElements;
    var leaveElements = this.leaveElements;
    var updateElements = this.updateElements;
    var stash0 = this.stash0;
    var stash1 = this.stash1;
    var keyFrameCache = this.keyFrameCache;

    Util.each(enterElements, function (elementId) {
      var keyFrame = keyFrameCache[elementId];
      var enterAnimate = keyFrame.enterAnimate;
      if (enterAnimate) {
        enterAnimate(keyFrame.item, stash0.element, stash1.element);
      }
    });
    Util.each(leaveElements, function (elementId) {
      var keyFrame = keyFrameCache[elementId];
      var leaveAnimate = keyFrame.leaveAnimate;
      if (leaveAnimate) {
        var e0 = stash0[elementId].element;
        e0.getParent().add(e0);
        leaveAnimate(keyFrame.item, stash0, stash1);
      }
    });
    Util.each(updateElements, function (elementId) {
      var keyFrame = keyFrameCache[elementId];
      var subStash1 = stash1[elementId];
      var subStash0 = stash0[elementId];
      var e1 = subStash1.element;
      var e0 = subStash0.element;
      if (subStash0.attrsStash) {
        e1.attr(subStash0.attrsStash);
      }
      e1.setMatrix(subStash0.matrixStash);
      updateAnimate(e1, Util.mix({}, keyFrame.attrs, { matrix: keyFrame.matrix }));
      if (e0 !== e1) {
        e0.remove();
      }
    });
  };

  Controller.prototype.getDefaultCfg = function getDefaultCfg() {
    return {
      graph: null,
      canvases: null,
      stash0: null,
      stash1: null,
      keyFrameCache: {}
    };
  };

  Controller.prototype.run = function run() {
    if (this.graph.destroyed) {
      return;
    }
    this.updateStash();
    if (this.count < 5000) {
      this._compare();
      this._addTween();
    }
    Util.each(this.canvases, function (canvas) {
      canvas.draw();
    });
  };

  Controller.prototype.updateStash = function updateStash() {
    var canvases = this.canvases;
    var elementsStash = this.elementsStash;
    var elements = {};
    var count = 0;
    elementsStash = elementsStash ? elementsStash : {};
    Util.each(canvases, function (canvas) {
      count += getElements(elements, canvas, 0);
    });
    this.elementsStash = elements;
    this.stash0 = elementsStash;
    this.stash1 = elements;
    this.count = count;
  };

  return Controller;
}(Base);

module.exports = Controller;