@antv/g6/lib/extend/g/html.js

graph visualization frame work

/**
 * @fileOverview html shape
 * @author huangtonger@aliyun.com
 */

var Util = require('../../util/');
var G = require('@antv/g');
var Html = function Html(cfg) {
  Html.superclass.constructor.call(this, cfg);
};

Util.extend(Html, G.canvas.Shape);

Html.ATTRS = {
  x: 0,
  y: 0,
  width: 0,
  height: 0
};

Util.augment(Html, {
  canFill: true,
  type: 'html',
  __isPointInFill: function __isPointInFill(x, y) {
    var bbox = this.getBBox();
    var rx = bbox.minX;
    var ry = bbox.minY;
    var width = bbox.maxX - bbox.minX;
    var height = bbox.maxY - bbox.minY;
    return rx <= x && x <= rx + width && ry <= y && y <= ry + height;
  },
  __initHtml: function __initHtml(html) {
    var attrs = this.get('attrs');
    var canvas = this.get('canvas');
    var htmlElementContaniner = canvas.get('htmlElementContaniner');
    // destroy last dom
    if (attrs.html && attrs.html.destroy) {
      attrs.html.destroy();
    }
    html = Util.createDOM(html);
    html.css({
      position: 'absolute',
      padding: '0px',
      margin: '0px',
      visibility: 'hidden'
    });
    attrs.html = html;
    htmlElementContaniner.appendChild(html);
  },
  isPointInPath: function isPointInPath(x, y) {
    return this.__isPointInFill(x, y);
  },
  init: function init() {
    var html = this.attr('html');
    var canvas = this.get('canvas');
    canvas.on('beforedraw', function () {
      html.css({
        visibility: 'hidden'
      });
    });
    this.__initHtml(html);
  },
  getDefaultAttrs: function getDefaultAttrs() {
    return Html.ATTRS;
  },
  attr: function attr(param1, param2) {
    var attrs = this.get('attrs');

    if (Util.isObject(param1)) {
      if (param1.html) {
        this.__initHtml(param1.html);
        delete param1.html;
      }
      Util.mix(attrs, param1);
      if (param1.x !== undefined || param1.y !== undefined || param1.width !== undefined || param1.height !== undefined) {
        this.calculateBox();
      }
      return attrs;
    }
    if (!Util.isNil(param2)) {
      if (param1 === 'html') {
        this.__initHtml(param2);
      } else {
        attrs[param1] = param2;
        if (param1 === 'x' || param1 === 'y' || param1 === 'width' || param1 === 'height') {
          this.calculateBox();
        }
      }
      return this;
    }
    return attrs[param1];
  },
  calculateBox: function calculateBox() {
    var x = this.attr('x');
    var y = this.attr('y');
    var width = this.attr('width');
    var height = this.attr('height');

    return {
      minX: x,
      minY: y,
      maxX: x + width,
      maxY: y + height
    };
  },
  getDrawTotalMatrix: function getDrawTotalMatrix() {
    var canvas = this.get('canvas');
    var m = Util.clone(this.attr('matrix'));
    var parent = this.getParent();
    while (parent !== canvas) {
      Util.mat3.multiply(m, parent.attr('matrix'), m);
      parent = parent.getParent();
    }
    return m;
  },
  getDOM: function getDOM() {
    return this.attr('html');
  },
  applyTransform: function applyTransform() {
    var html = this.attr('html');
    var m = this.getDrawTotalMatrix();
    var x = this.attr('x');
    var y = this.attr('y');
    var width = this.attr('width');
    var height = this.attr('height');
    var halfWidth = width / 2;
    var halfHeight = height / 2;
    var m6 = m[0] * x + m[6] + m[0] * halfWidth - halfWidth;
    var m7 = m[4] * y + m[7] + m[4] * halfHeight - halfHeight;
    html.css({
      transform: 'matrix(' + m[0] + ',' + m[1] + ',' + m[3] + ',' + m[4] + ',' + m6 + ',' + m7 + ')'
    });
  },
  createPath: function createPath() {
    var html = this.attr('html');
    var attrs = this.get('attrs');
    this.applyTransform();
    html.css(Util.mix({
      visibility: 'visible'
    }, attrs));
  },
  remove: function remove(bool) {
    var html = this.attr('html');
    html.css({
      visibility: 'hidden'
    });
    Html.superclass.remove.call(this, bool);
  },
  destroy: function destroy() {
    var html = this.attr('html');
    html && html.destroy();
    Html.superclass.destroy.call(this);
  }
});
G.canvas.Shape.Html = Html;

module.exports = Html;