swOperation/node_modules/@antv/g-plugin-html-renderer/dist/index.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var gLite = require('@antv/g-lite');
var util = require('@antv/util');

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  _setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };
  return _setPrototypeOf(o, p);
}

var HTML_PREFIX = 'g-html-';
var CANVAS_CAMERA_ID = 'g-canvas-camera';
var HTMLRenderingPlugin = /*#__PURE__*/function () {
  function HTMLRenderingPlugin() {
    this.context = void 0;
    /**
     * wrapper for camera
     */
    this.$camera = void 0;
  }
  var _proto = HTMLRenderingPlugin.prototype;
  _proto.joinTransformMatrix = function joinTransformMatrix(matrix) {
    return "matrix(" + [matrix[0], matrix[1], matrix[4], matrix[5], matrix[12], matrix[13]].join(',') + ")";
  };
  _proto.apply = function apply(context) {
    var _this = this;
    var camera = context.camera,
      renderingContext = context.renderingContext,
      renderingService = context.renderingService;
    this.context = context;
    var canvas = renderingContext.root.ownerDocument.defaultView;
    var setTransform = function setTransform(object, $el) {
      $el.style.transform = _this.joinTransformMatrix(object.getWorldTransform());
    };
    var handleMounted = function handleMounted(e) {
      var object = e.target;
      if (object.nodeName === gLite.Shape.HTML) {
        if (!_this.$camera) {
          _this.$camera = _this.createCamera(camera);
        }
        // create DOM element
        var $el = _this.getOrCreateEl(object);
        _this.$camera.appendChild($el);
        // apply documentElement's style
        var attributes = object.ownerDocument.documentElement.attributes;
        Object.keys(attributes).forEach(function (name) {
          $el.style[name] = attributes[name];
        });
        Object.keys(object.attributes).forEach(function (name) {
          _this.updateAttribute(name, object);
        });
        setTransform(object, $el);
        gLite.runtime.nativeHTMLMap.set($el, object);
      }
    };
    var handleUnmounted = function handleUnmounted(e) {
      var object = e.target;
      if (object.nodeName === gLite.Shape.HTML && _this.$camera) {
        var $el = _this.getOrCreateEl(object);
        if ($el) {
          $el.remove();
          gLite.runtime.nativeHTMLMap.delete($el);
        }
        // const existedId = this.getId(object);
        // const $existedElement: HTMLElement | null = this.$camera.querySelector('#' + existedId);
        // if ($existedElement) {
        //   this.$camera.removeChild($existedElement);
        // }
      }
    };

    var handleAttributeChanged = function handleAttributeChanged(e) {
      var object = e.target;
      if (object.nodeName === gLite.Shape.HTML) {
        var attrName = e.attrName;
        _this.updateAttribute(attrName, object);
      }
    };
    var handleBoundsChanged = function handleBoundsChanged(e) {
      var object = e.target;
      if (object.nodeName === gLite.Shape.HTML) {
        var $el = _this.getOrCreateEl(object);
        setTransform(object, $el);
      }
    };
    var handleCanvasResize = function handleCanvasResize() {
      if (_this.$camera) {
        var _this$context$config = _this.context.config,
          width = _this$context$config.width,
          height = _this$context$config.height;
        _this.$camera.style.width = (width || 0) + "px";
        _this.$camera.style.height = (height || 0) + "px";
      }
    };
    renderingService.hooks.init.tap(HTMLRenderingPlugin.tag, function () {
      canvas.addEventListener(gLite.CanvasEvent.RESIZE, handleCanvasResize);
      canvas.addEventListener(gLite.ElementEvent.MOUNTED, handleMounted);
      canvas.addEventListener(gLite.ElementEvent.UNMOUNTED, handleUnmounted);
      canvas.addEventListener(gLite.ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
      canvas.addEventListener(gLite.ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
    });
    renderingService.hooks.endFrame.tap(HTMLRenderingPlugin.tag, function () {
      if (_this.$camera && renderingContext.renderReasons.has(gLite.RenderReason.CAMERA_CHANGED)) {
        _this.$camera.style.transform = _this.joinTransformMatrix(camera.getOrthoMatrix());
      }
    });
    renderingService.hooks.destroy.tap(HTMLRenderingPlugin.tag, function () {
      // remove camera
      if (_this.$camera) {
        _this.$camera.remove();
      }
      canvas.removeEventListener(gLite.CanvasEvent.RESIZE, handleCanvasResize);
      canvas.removeEventListener(gLite.ElementEvent.MOUNTED, handleMounted);
      canvas.removeEventListener(gLite.ElementEvent.UNMOUNTED, handleUnmounted);
      canvas.removeEventListener(gLite.ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
      canvas.removeEventListener(gLite.ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
    });
  };
  _proto.getId = function getId(object) {
    return object.id || HTML_PREFIX + object.entity;
  };
  _proto.createCamera = function createCamera(camera) {
    var _this$context$config2 = this.context.config,
      doc = _this$context$config2.document,
      width = _this$context$config2.width,
      height = _this$context$config2.height;
    var $canvas = this.context.contextService.getDomElement();
    var $container = $canvas.parentNode;
    if ($container) {
      var cameraId = CANVAS_CAMERA_ID;
      var $existedCamera = $container.querySelector('#' + cameraId);
      if (!$existedCamera) {
        var $camera = (doc || document).createElement('div');
        $existedCamera = $camera;
        $camera.id = cameraId;
        // use absolute position
        $camera.style.position = 'absolute';
        // account for DOM element's offset @see https://github.com/antvis/G/issues/1150
        $camera.style.left = ($canvas.offsetLeft || 0) + "px";
        $camera.style.top = ($canvas.offsetTop || 0) + "px";
        $camera.style.transformOrigin = 'left top';
        $camera.style.transform = this.joinTransformMatrix(camera.getOrthoMatrix());
        // HTML elements should not overflow with canvas @see https://github.com/antvis/G/issues/1163
        $camera.style.overflow = 'hidden';
        $camera.style.pointerEvents = 'none';
        $camera.style.width = (width || 0) + "px";
        $camera.style.height = (height || 0) + "px";
        $container.appendChild($camera);
      }
      return $existedCamera;
    }
    return null;
  };
  _proto.getOrCreateEl = function getOrCreateEl(object) {
    var doc = this.context.config.document;
    var existedId = this.getId(object);
    var $existedElement = this.$camera.querySelector('#' + existedId);
    if (!$existedElement) {
      $existedElement = (doc || document).createElement('div');
      object.parsedStyle.$el = $existedElement;
      $existedElement.id = existedId;
      if (object.name) {
        $existedElement.setAttribute('name', object.name);
      }
      if (object.className) {
        $existedElement.className = object.className;
      }
      // use absolute position
      $existedElement.style.position = 'absolute';
      // @see https://github.com/antvis/G/issues/1150
      $existedElement.style.left = "0px";
      $existedElement.style.top = "0px";
      $existedElement.style['will-change'] = 'transform';
      $existedElement.style.transform = this.joinTransformMatrix(object.getWorldTransform());
    }
    return $existedElement;
  };
  _proto.updateAttribute = function updateAttribute(name, object) {
    var $el = this.getOrCreateEl(object);
    switch (name) {
      case 'innerHTML':
        var innerHTML = object.parsedStyle.innerHTML;
        if (util.isString(innerHTML)) {
          $el.innerHTML = innerHTML;
        } else {
          $el.innerHTML = '';
          $el.appendChild(innerHTML);
        }
        break;
      case 'transformOrigin':
        var transformOrigin = object.parsedStyle.transformOrigin;
        $el.style['transform-origin'] = transformOrigin[0].value + " " + transformOrigin[1].value;
        break;
      case 'width':
        if (gLite.runtime.enableCSSParsing) {
          var width = object.computedStyleMap().get('width');
          $el.style.width = width.toString();
        } else {
          var _width = object.parsedStyle.width;
          $el.style.width = util.isNumber(_width) ? _width + "px" : _width.toString();
        }
        break;
      case 'height':
        if (gLite.runtime.enableCSSParsing) {
          var height = object.computedStyleMap().get('height');
          $el.style.height = height.toString();
        } else {
          var _height = object.parsedStyle.height;
          $el.style.height = util.isNumber(_height) ? _height + "px" : _height.toString();
        }
        break;
      case 'zIndex':
        var zIndex = object.parsedStyle.zIndex;
        $el.style['z-index'] = "" + zIndex;
        break;
      case 'visibility':
        var visibility = object.parsedStyle.visibility;
        $el.style.visibility = visibility;
        break;
      case 'pointerEvents':
        var pointerEvents = object.parsedStyle.pointerEvents;
        $el.style.pointerEvents = pointerEvents;
        break;
      case 'opacity':
        var opacity = object.parsedStyle.opacity;
        $el.style.opacity = "" + opacity;
        break;
      case 'fill':
        var fill = object.parsedStyle.fill;
        var color = '';
        if (gLite.isCSSRGB(fill)) {
          if (fill.isNone) {
            color = 'transparent';
          } else {
            color = object.getAttribute('fill');
          }
        } else if (Array.isArray(fill)) {
          color = object.getAttribute('fill');
        } else if (gLite.isPattern(fill)) ;
        $el.style.background = color;
        break;
      case 'stroke':
        var stroke = object.parsedStyle.stroke;
        var borderColor = '';
        if (gLite.isCSSRGB(stroke)) {
          if (stroke.isNone) {
            borderColor = 'transparent';
          } else {
            borderColor = object.getAttribute('stroke');
          }
        } else if (Array.isArray(stroke)) {
          borderColor = object.getAttribute('stroke');
        } else if (gLite.isPattern(stroke)) ;
        $el.style['border-color'] = borderColor;
        $el.style['border-style'] = 'solid';
        break;
      case 'lineWidth':
        var lineWidth = object.parsedStyle.lineWidth;
        $el.style['border-width'] = (lineWidth || 0) + "px";
        break;
      case 'lineDash':
        $el.style['border-style'] = 'dashed';
        break;
      case 'filter':
        var filter = object.style.filter;
        $el.style.filter = filter;
        break;
    }
  };
  return HTMLRenderingPlugin;
}();
HTMLRenderingPlugin.tag = 'HTMLRendering';

var Plugin = /*#__PURE__*/function (_AbstractRendererPlug) {
  _inheritsLoose(Plugin, _AbstractRendererPlug);
  function Plugin() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _AbstractRendererPlug.call.apply(_AbstractRendererPlug, [this].concat(args)) || this;
    _this.name = 'html-renderer';
    return _this;
  }
  var _proto = Plugin.prototype;
  _proto.init = function init() {
    this.addRenderingPlugin(new HTMLRenderingPlugin());
  };
  _proto.destroy = function destroy() {
    this.removeAllRenderingPlugins();
  };
  return Plugin;
}(gLite.AbstractRendererPlugin);

exports.Plugin = Plugin;