@antv/g6/lib/shape/nodes/html.js

graph visualization frame work

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

var Shape = require('../shape');
var Util = require('../../util/');

// html node
Shape.registerNode('html', {
  getHtml: function getHtml(item) {
    return item.getModel().html;
  },

  cssSize: true,
  draw: function draw(item) {
    var containerDOM = Util.createDOM('<div class="g6-html-node-container"></div>');
    var group = item.getGraphicGroup();
    var model = item.getModel();
    var size = this.getSize(item);
    var style = this.getStyle(item);
    var canvas = group.get('canvas');
    var htmlElementContaniner = canvas.get('htmlElementContaniner');
    var cssSize = this.cssSize;
    var html = this.getHtml(item);

    if (!html) {
      html = Util.createDOM('<div></div>');
    } else {
      html = Util.createDOM(html);
    }

    containerDOM.css({
      position: 'absolute',
      padding: '0px',
      margin: '0px',
      visibility: 'hidden'
    });
    containerDOM.appendChild(html);
    if (cssSize) {
      htmlElementContaniner.appendChild(containerDOM);
      size[0] = containerDOM.width();
      size[1] = containerDOM.height();
    }
    var x = -size[0] / 2;
    var y = -size[1] / 2;
    var width = size[0];
    var height = size[1];
    var keyShape = group.addShape('rect', {
      attrs: Util.mix({}, style, {
        x: x,
        y: y,
        width: width,
        height: height
      })
    });
    group.addShape('html', {
      attrs: Util.mix({
        x: x,
        y: y,
        width: width,
        height: height,
        html: containerDOM
      }, model.style)
    });
    return keyShape;
  }
});