@antv/g-plugin-html-renderer - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

dist/index.esm.js

@@ -1,2 +0,9 @@
-import { __extends, __spreadArray, __read } from 'tslib';
+/*!
+ * @antv/g-plugin-html-renderer
+ * @description A G plugin for rendering HTML
+ * @version 2.1.1
+ * @date 10/23/2024, 7:14:03 AM
+ * @author AntVis
+ * @docs https://g.antv.antgroup.com/
+ */
 import { CanvasEvent, ElementEvent, RenderReason, isCSSRGB, isPattern, Shape, AbstractRendererPlugin } from '@antv/g-lite';
@@ -6,290 +13,276 @@ import { isNil, isNumber, isString } from '@antv/util';
 var CANVAS_CAMERA_ID = 'g-canvas-camera';
-var HTMLRenderingPlugin = /** @class */ (function () {
-    function HTMLRenderingPlugin() {
-        this.displayObjectHTMLElementMap = new WeakMap();
-    }
-    /**
-     * ! The reason for adding `offset` is that the `transform-origin` coordinate system of DOM is the local coordinate system of the element, while the `transform-origin` coordinate system of canvas drawing is the local coordinate system of the element's parent element. At the same time, the `transform` attribute value of the DOM element does not include `transform-origin`.
-     */
-    HTMLRenderingPlugin.prototype.joinTransformMatrix = function (matrix, offset) {
-        if (offset === void 0) { offset = [0, 0, 0]; }
-        return "matrix(".concat([
-            matrix[0],
-            matrix[1],
-            matrix[4],
-            matrix[5],
-            matrix[12] + offset[0],
-            matrix[13] + offset[1],
-        ].join(','), ")");
+class HTMLRenderingPlugin {
+  constructor() {
+    this.displayObjectHTMLElementMap = new WeakMap();
+  }
+  /**
+   * ! The reason for adding `offset` is that the `transform-origin` coordinate system of DOM is the local coordinate system of the element, while the `transform-origin` coordinate system of canvas drawing is the local coordinate system of the element's parent element. At the same time, the `transform` attribute value of the DOM element does not include `transform-origin`.
+   */
+  joinTransformMatrix(matrix) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0, 0];
+    return "matrix(".concat([matrix[0], matrix[1], matrix[4], matrix[5], matrix[12] + offset[0], matrix[13] + offset[1]].join(','), ")");
+  }
+  apply(context, runtime) {
+    var camera = context.camera,
+      renderingContext = context.renderingContext,
+      renderingService = context.renderingService;
+    this.context = context;
+    var canvas = renderingContext.root.ownerDocument.defaultView;
+    var nativeHTMLMap = canvas.context.eventService.nativeHTMLMap;
+    var setTransform = (object, $el) => {
+      $el.style.transform = this.joinTransformMatrix(object.getWorldTransform(), object.getOrigin());
     };
-    HTMLRenderingPlugin.prototype.apply = function (context, runtime) {
-        var _this = this;
-        var camera = context.camera, renderingContext = context.renderingContext, renderingService = context.renderingService;
-        this.context = context;
-        var canvas = renderingContext.root.ownerDocument.defaultView;
-        var nativeHTMLMap = canvas.context.eventService.nativeHTMLMap;
-        var setTransform = function (object, $el) {
-            $el.style.transform = _this.joinTransformMatrix(object.getWorldTransform(), object.getOrigin());
-        };
-        var handleMounted = function (e) {
-            var object = e.target;
-            if (object.nodeName === Shape.HTML) {
-                if (!_this.$camera) {
-                    _this.$camera = _this.createCamera(camera);
-                }
-                // create DOM element
-                var $el = _this.getOrCreateEl(object);
-                _this.$camera.appendChild($el);
-                Object.keys(object.attributes).forEach(function (name) {
-                    _this.updateAttribute(name, object);
-                });
-                setTransform(object, $el);
-                nativeHTMLMap.set($el, object);
-            }
-        };
-        var handleUnmounted = function (e) {
-            var object = e.target;
-            if (object.nodeName === Shape.HTML && _this.$camera) {
-                var $el = _this.getOrCreateEl(object);
-                if ($el) {
-                    $el.remove();
-                    nativeHTMLMap.delete($el);
-                }
-            }
-        };
-        var handleAttributeChanged = function (e) {
-            var object = e.target;
-            if (object.nodeName === Shape.HTML) {
-                var attrName = e.attrName;
-                _this.updateAttribute(attrName, object);
-            }
-        };
-        var handleBoundsChanged = function (e) {
-            var object = e.target;
-            var nodes = object.nodeName === Shape.FRAGMENT ? object.childNodes : [object];
-            nodes.forEach(function (node) {
-                if (node.nodeName === Shape.HTML) {
-                    var $el = _this.getOrCreateEl(node);
-                    setTransform(node, $el);
-                }
-            });
-        };
-        var handleCanvasResize = function () {
-            if (_this.$camera) {
-                var _a = _this.context.config, width = _a.width, height = _a.height;
-                _this.$camera.parentElement.style.width = "".concat(width || 0, "px");
-                _this.$camera.parentElement.style.height = "".concat(height || 0, "px");
-            }
-        };
-        renderingService.hooks.init.tap(HTMLRenderingPlugin.tag, function () {
-            canvas.addEventListener(CanvasEvent.RESIZE, handleCanvasResize);
-            canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
-            canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
-            canvas.addEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
-            canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
+    var handleMounted = e => {
+      var object = e.target;
+      if (object.nodeName === Shape.HTML) {
+        if (!this.$camera) {
+          this.$camera = this.createCamera(camera);
+        }
+
+        // create DOM element
+        var $el = this.getOrCreateEl(object);
+        this.$camera.appendChild($el);
+        Object.keys(object.attributes).forEach(name => {
+          this.updateAttribute(name, object);
         });
-        renderingService.hooks.endFrame.tap(HTMLRenderingPlugin.tag, function () {
-            if (_this.$camera &&
-                renderingContext.renderReasons.has(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(CanvasEvent.RESIZE, handleCanvasResize);
-            canvas.removeEventListener(ElementEvent.MOUNTED, handleMounted);
-            canvas.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
-            canvas.removeEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
-            canvas.removeEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
-        });
+        setTransform(object, $el);
+        nativeHTMLMap.set($el, object);
+      }
     };
-    HTMLRenderingPlugin.prototype.createCamera = function (camera) {
-        var _a = this.context.config, doc = _a.document, width = _a.width, height = _a.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) {
-                // fix @see https://github.com/antvis/G/issues/1702
-                var $cameraContainer = (doc || document).createElement('div');
-                // HTML elements should not overflow with canvas @see https://github.com/antvis/G/issues/1163
-                $cameraContainer.style.overflow = 'hidden';
-                $cameraContainer.style.pointerEvents = 'none';
-                $cameraContainer.style.position = 'absolute';
-                $cameraContainer.style.left = "0px";
-                $cameraContainer.style.top = "0px";
-                $cameraContainer.style.width = "".concat(width || 0, "px");
-                $cameraContainer.style.height = "".concat(height || 0, "px");
-                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 = "".concat($canvas.offsetLeft || 0, "px");
-                $camera.style.top = "".concat($canvas.offsetTop || 0, "px");
-                $camera.style.transformOrigin = 'left top';
-                $camera.style.transform = this.joinTransformMatrix(camera.getOrthoMatrix());
-                $camera.style.pointerEvents = 'none';
-                $camera.style.width = "100%";
-                $camera.style.height = "100%";
-                $cameraContainer.appendChild($camera);
-                $container.appendChild($cameraContainer);
-            }
-            return $existedCamera;
+    var handleUnmounted = e => {
+      var object = e.target;
+      if (object.nodeName === Shape.HTML && this.$camera) {
+        var $el = this.getOrCreateEl(object);
+        if ($el) {
+          $el.remove();
+          nativeHTMLMap.delete($el);
         }
-        return null;
+      }
     };
-    HTMLRenderingPlugin.prototype.getOrCreateEl = function (object) {
-        var doc = this.context.config.document;
-        var $existedElement = this.displayObjectHTMLElementMap.get(object);
-        if (!$existedElement) {
-            $existedElement = (doc || document).createElement('div');
-            object.parsedStyle.$el = $existedElement;
-            this.displayObjectHTMLElementMap.set(object, $existedElement);
-            if (object.id) {
-                $existedElement.id = object.id;
-            }
-            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['will-change'] = 'transform';
-            $existedElement.style.transform = this.joinTransformMatrix(object.getWorldTransform(), object.getOrigin());
-        }
-        return $existedElement;
+    var handleAttributeChanged = e => {
+      var object = e.target;
+      if (object.nodeName === Shape.HTML) {
+        var attrName = e.attrName;
+        this.updateAttribute(attrName, object);
+      }
     };
-    HTMLRenderingPlugin.prototype.updateAttribute = function (name, object) {
-        var $el = this.getOrCreateEl(object);
-        switch (name) {
-            case 'innerHTML':
-                var innerHTML = object.parsedStyle.innerHTML;
-                if (isString(innerHTML)) {
-                    $el.innerHTML = innerHTML;
-                }
-                else {
-                    $el.innerHTML = '';
-                    $el.appendChild(innerHTML);
-                }
-                break;
-            case 'x':
-                $el.style.left = "".concat(object.parsedStyle.x, "px");
-                break;
-            case 'y':
-                $el.style.top = "".concat(object.parsedStyle.y, "px");
-                break;
-            case 'transformOrigin':
-                var transformOrigin = object.parsedStyle.transformOrigin;
-                $el.style['transform-origin'] = "".concat(transformOrigin[0].buildCSSText(null, null, ''), " ").concat(transformOrigin[1].buildCSSText(null, null, ''));
-                break;
-            case 'width':
-                var width = object.parsedStyle.width;
-                $el.style.width = isNumber(width)
-                    ? "".concat(width, "px")
-                    : width.toString();
-                break;
-            case 'height':
-                var height = object.parsedStyle.height;
-                $el.style.height = isNumber(height)
-                    ? "".concat(height, "px")
-                    : height.toString();
-                break;
-            case 'zIndex':
-                var zIndex = object.parsedStyle.zIndex;
-                $el.style['z-index'] = "".concat(zIndex);
-                break;
-            case 'visibility':
-                var visibility = object.parsedStyle.visibility;
-                $el.style.visibility = visibility;
-                break;
-            case 'pointerEvents':
-                var _a = object.parsedStyle.pointerEvents, pointerEvents = _a === void 0 ? 'auto' : _a;
-                $el.style.pointerEvents = pointerEvents;
-                break;
-            case 'opacity':
-                var opacity = object.parsedStyle.opacity;
-                $el.style.opacity = "".concat(opacity);
-                break;
-            case 'fill':
-                var fill = object.parsedStyle.fill;
-                var color = '';
-                if (isCSSRGB(fill)) {
-                    if (fill.isNone) {
-                        color = 'transparent';
-                    }
-                    else {
-                        color = object.getAttribute('fill');
-                    }
-                }
-                else if (Array.isArray(fill)) {
-                    color = object.getAttribute('fill');
-                }
-                else if (isPattern(fill)) ;
-                $el.style.background = color;
-                break;
-            case 'stroke':
-                var stroke = object.parsedStyle.stroke;
-                var borderColor = '';
-                if (isCSSRGB(stroke)) {
-                    if (stroke.isNone) {
-                        borderColor = 'transparent';
-                    }
-                    else {
-                        borderColor = object.getAttribute('stroke');
-                    }
-                }
-                else if (Array.isArray(stroke)) {
-                    borderColor = object.getAttribute('stroke');
-                }
-                else if (isPattern(stroke)) ;
-                $el.style['border-color'] = borderColor;
-                $el.style['border-style'] = 'solid';
-                break;
-            case 'lineWidth':
-                var lineWidth = object.parsedStyle.lineWidth;
-                $el.style['border-width'] = "".concat(lineWidth || 0, "px");
-                break;
-            case 'lineDash':
-                $el.style['border-style'] = 'dashed';
-                break;
-            case 'filter':
-                var filter = object.style.filter;
-                $el.style.filter = filter;
-                break;
-            default:
-                if (!isNil(object.style[name]) && object.style[name] !== '') {
-                    $el.style[name] = object.style[name];
-                }
+    var handleBoundsChanged = e => {
+      var object = e.target;
+      var nodes = object.nodeName === Shape.FRAGMENT ? object.childNodes : [object];
+      nodes.forEach(node => {
+        if (node.nodeName === Shape.HTML) {
+          var $el = this.getOrCreateEl(node);
+          setTransform(node, $el);
         }
+      });
     };
-    HTMLRenderingPlugin.tag = 'HTMLRendering';
-    return HTMLRenderingPlugin;
-}());
+    var handleCanvasResize = () => {
+      if (this.$camera) {
+        var _this$context$config = this.context.config,
+          width = _this$context$config.width,
+          height = _this$context$config.height;
+        this.$camera.parentElement.style.width = "".concat(width || 0, "px");
+        this.$camera.parentElement.style.height = "".concat(height || 0, "px");
+      }
+    };
+    renderingService.hooks.init.tap(HTMLRenderingPlugin.tag, () => {
+      canvas.addEventListener(CanvasEvent.RESIZE, handleCanvasResize);
+      canvas.addEventListener(ElementEvent.MOUNTED, handleMounted);
+      canvas.addEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
+      canvas.addEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
+      canvas.addEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
+    });
+    renderingService.hooks.endFrame.tap(HTMLRenderingPlugin.tag, () => {
+      if (this.$camera && renderingContext.renderReasons.has(RenderReason.CAMERA_CHANGED)) {
+        this.$camera.style.transform = this.joinTransformMatrix(camera.getOrthoMatrix());
+      }
+    });
+    renderingService.hooks.destroy.tap(HTMLRenderingPlugin.tag, () => {
+      // remove camera
+      if (this.$camera) {
+        this.$camera.remove();
+      }
+      canvas.removeEventListener(CanvasEvent.RESIZE, handleCanvasResize);
+      canvas.removeEventListener(ElementEvent.MOUNTED, handleMounted);
+      canvas.removeEventListener(ElementEvent.UNMOUNTED, handleUnmounted);
+      canvas.removeEventListener(ElementEvent.ATTR_MODIFIED, handleAttributeChanged);
+      canvas.removeEventListener(ElementEvent.BOUNDS_CHANGED, handleBoundsChanged);
+    });
+  }
+  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("#".concat(cameraId));
+      if (!$existedCamera) {
+        // fix @see https://github.com/antvis/G/issues/1702
+        var $cameraContainer = (doc || document).createElement('div');
+        // HTML elements should not overflow with canvas @see https://github.com/antvis/G/issues/1163
+        $cameraContainer.style.overflow = 'hidden';
+        $cameraContainer.style.pointerEvents = 'none';
+        $cameraContainer.style.position = 'absolute';
+        $cameraContainer.style.left = "0px";
+        $cameraContainer.style.top = "0px";
+        $cameraContainer.style.width = "".concat(width || 0, "px");
+        $cameraContainer.style.height = "".concat(height || 0, "px");
+        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 = "".concat($canvas.offsetLeft || 0, "px");
+        $camera.style.top = "".concat($canvas.offsetTop || 0, "px");
+        $camera.style.transformOrigin = 'left top';
+        $camera.style.transform = this.joinTransformMatrix(camera.getOrthoMatrix());
+        $camera.style.pointerEvents = 'none';
+        $camera.style.width = "100%";
+        $camera.style.height = "100%";
+        $cameraContainer.appendChild($camera);
+        $container.appendChild($cameraContainer);
+      }
+      return $existedCamera;
+    }
+    return null;
+  }
+  getOrCreateEl(object) {
+    var doc = this.context.config.document;
+    var $existedElement = this.displayObjectHTMLElementMap.get(object);
+    if (!$existedElement) {
+      $existedElement = (doc || document).createElement('div');
+      object.parsedStyle.$el = $existedElement;
+      this.displayObjectHTMLElementMap.set(object, $existedElement);
+      if (object.id) {
+        $existedElement.id = object.id;
+      }
+      if (object.name) {
+        $existedElement.setAttribute('name', object.name);
+      }
+      if (object.className) {
+        $existedElement.className = object.className;
+      }
 
-var Plugin = /** @class */ (function (_super) {
-    __extends(Plugin, _super);
-    function Plugin() {
-        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
-        _this.name = 'html-renderer';
-        return _this;
+      // use absolute position
+      $existedElement.style.position = 'absolute';
+      // @see https://github.com/antvis/G/issues/1150
+      $existedElement.style['will-change'] = 'transform';
+      $existedElement.style.transform = this.joinTransformMatrix(object.getWorldTransform(), object.getOrigin());
     }
-    Plugin.prototype.init = function () {
-        this.addRenderingPlugin(new HTMLRenderingPlugin());
-    };
-    Plugin.prototype.destroy = function () {
-        this.removeAllRenderingPlugins();
-    };
-    return Plugin;
-}(AbstractRendererPlugin));
+    return $existedElement;
+  }
+  updateAttribute(name, object) {
+    var $el = this.getOrCreateEl(object);
+    switch (name) {
+      case 'innerHTML':
+        var innerHTML = object.parsedStyle.innerHTML;
+        if (isString(innerHTML)) {
+          $el.innerHTML = innerHTML;
+        } else {
+          $el.innerHTML = '';
+          $el.appendChild(innerHTML);
+        }
+        break;
+      case 'x':
+        $el.style.left = "".concat(object.parsedStyle.x, "px");
+        break;
+      case 'y':
+        $el.style.top = "".concat(object.parsedStyle.y, "px");
+        break;
+      case 'transformOrigin':
+        var transformOrigin = object.parsedStyle.transformOrigin;
+        $el.style['transform-origin'] = "".concat(transformOrigin[0].buildCSSText(null, null, ''), " ").concat(transformOrigin[1].buildCSSText(null, null, ''));
+        break;
+      case 'width':
+        var width = object.parsedStyle.width;
+        $el.style.width = isNumber(width) ? "".concat(width, "px") : width.toString();
+        break;
+      case 'height':
+        var height = object.parsedStyle.height;
+        $el.style.height = isNumber(height) ? "".concat(height, "px") : height.toString();
+        break;
+      case 'zIndex':
+        var zIndex = object.parsedStyle.zIndex;
+        $el.style['z-index'] = "".concat(zIndex);
+        break;
+      case 'visibility':
+        var visibility = object.parsedStyle.visibility;
+        $el.style.visibility = visibility;
+        break;
+      case 'pointerEvents':
+        var _object$parsedStyle$p = object.parsedStyle.pointerEvents,
+          pointerEvents = _object$parsedStyle$p === void 0 ? 'auto' : _object$parsedStyle$p;
+        $el.style.pointerEvents = pointerEvents;
+        break;
+      case 'opacity':
+        var opacity = object.parsedStyle.opacity;
+        $el.style.opacity = "".concat(opacity);
+        break;
+      case 'fill':
+        var fill = object.parsedStyle.fill;
+        var color = '';
+        if (isCSSRGB(fill)) {
+          if (fill.isNone) {
+            color = 'transparent';
+          } else {
+            color = object.getAttribute('fill');
+          }
+        } else if (Array.isArray(fill)) {
+          color = object.getAttribute('fill');
+        } else if (isPattern(fill)) ;
+        $el.style.background = color;
+        break;
+      case 'stroke':
+        var stroke = object.parsedStyle.stroke;
+        var borderColor = '';
+        if (isCSSRGB(stroke)) {
+          if (stroke.isNone) {
+            borderColor = 'transparent';
+          } else {
+            borderColor = object.getAttribute('stroke');
+          }
+        } else if (Array.isArray(stroke)) {
+          borderColor = object.getAttribute('stroke');
+        } else if (isPattern(stroke)) ;
+        $el.style['border-color'] = borderColor;
+        $el.style['border-style'] = 'solid';
+        break;
+      case 'lineWidth':
+        var lineWidth = object.parsedStyle.lineWidth;
+        $el.style['border-width'] = "".concat(lineWidth || 0, "px");
+        break;
+      case 'lineDash':
+        $el.style['border-style'] = 'dashed';
+        break;
+      case 'filter':
+        var filter = object.style.filter;
+        $el.style.filter = filter;
+        break;
+      default:
+        if (!isNil(object.style[name]) && object.style[name] !== '') {
+          $el.style[name] = object.style[name];
+        }
+    }
+  }
+}
+HTMLRenderingPlugin.tag = 'HTMLRendering';
 
+class Plugin extends AbstractRendererPlugin {
+  constructor() {
+    super(...arguments);
+    this.name = 'html-renderer';
+  }
+  init() {
+    this.addRenderingPlugin(new HTMLRenderingPlugin());
+  }
+  destroy() {
+    this.removeAllRenderingPlugins();
+  }
+}
+
 export { Plugin };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -0,4 +1,11 @@
+/*!
+ * @antv/g-plugin-html-renderer
+ * @description A G plugin for rendering HTML
+ * @version 2.1.1
+ * @date 10/23/2024, 7:14:03 AM
+ * @author AntVis
+ * @docs https://g.antv.antgroup.com/
+ */
 'use strict';
 
-var tslib = require('tslib');
 var gLite = require('@antv/g-lite');
@@ -8,290 +15,276 @@ var util = require('@antv/util');
 var CANVAS_CAMERA_ID = 'g-canvas-camera';
-var HTMLRenderingPlugin = /** @class */ (function () {
-    function HTMLRenderingPlugin() {
-        this.displayObjectHTMLElementMap = new WeakMap();
-    }
-    /**
-     * ! The reason for adding `offset` is that the `transform-origin` coordinate system of DOM is the local coordinate system of the element, while the `transform-origin` coordinate system of canvas drawing is the local coordinate system of the element's parent element. At the same time, the `transform` attribute value of the DOM element does not include `transform-origin`.
-     */
-    HTMLRenderingPlugin.prototype.joinTransformMatrix = function (matrix, offset) {
-        if (offset === void 0) { offset = [0, 0, 0]; }
-        return "matrix(".concat([
-            matrix[0],
-            matrix[1],
-            matrix[4],
-            matrix[5],
-            matrix[12] + offset[0],
-            matrix[13] + offset[1],
-        ].join(','), ")");
+class HTMLRenderingPlugin {
+  constructor() {
+    this.displayObjectHTMLElementMap = new WeakMap();
+  }
+  /**
+   * ! The reason for adding `offset` is that the `transform-origin` coordinate system of DOM is the local coordinate system of the element, while the `transform-origin` coordinate system of canvas drawing is the local coordinate system of the element's parent element. At the same time, the `transform` attribute value of the DOM element does not include `transform-origin`.
+   */
+  joinTransformMatrix(matrix) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0, 0];
+    return "matrix(".concat([matrix[0], matrix[1], matrix[4], matrix[5], matrix[12] + offset[0], matrix[13] + offset[1]].join(','), ")");
+  }
+  apply(context, runtime) {
+    var camera = context.camera,
+      renderingContext = context.renderingContext,
+      renderingService = context.renderingService;
+    this.context = context;
+    var canvas = renderingContext.root.ownerDocument.defaultView;
+    var nativeHTMLMap = canvas.context.eventService.nativeHTMLMap;
+    var setTransform = (object, $el) => {
+      $el.style.transform = this.joinTransformMatrix(object.getWorldTransform(), object.getOrigin());
     };
-    HTMLRenderingPlugin.prototype.apply = function (context, runtime) {
-        var _this = this;
-        var camera = context.camera, renderingContext = context.renderingContext, renderingService = context.renderingService;
-        this.context = context;
-        var canvas = renderingContext.root.ownerDocument.defaultView;
-        var nativeHTMLMap = canvas.context.eventService.nativeHTMLMap;
-        var setTransform = function (object, $el) {
-            $el.style.transform = _this.joinTransformMatrix(object.getWorldTransform(), object.getOrigin());
-        };
-        var handleMounted = function (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);
-                Object.keys(object.attributes).forEach(function (name) {
-                    _this.updateAttribute(name, object);
-                });
-                setTransform(object, $el);
-                nativeHTMLMap.set($el, object);
-            }
-        };
-        var handleUnmounted = function (e) {
-            var object = e.target;
-            if (object.nodeName === gLite.Shape.HTML && _this.$camera) {
-                var $el = _this.getOrCreateEl(object);
-                if ($el) {
-                    $el.remove();
-                    nativeHTMLMap.delete($el);
-                }
-            }
-        };
-        var handleAttributeChanged = function (e) {
-            var object = e.target;
-            if (object.nodeName === gLite.Shape.HTML) {
-                var attrName = e.attrName;
-                _this.updateAttribute(attrName, object);
-            }
-        };
-        var handleBoundsChanged = function (e) {
-            var object = e.target;
-            var nodes = object.nodeName === gLite.Shape.FRAGMENT ? object.childNodes : [object];
-            nodes.forEach(function (node) {
-                if (node.nodeName === gLite.Shape.HTML) {
-                    var $el = _this.getOrCreateEl(node);
-                    setTransform(node, $el);
-                }
-            });
-        };
-        var handleCanvasResize = function () {
-            if (_this.$camera) {
-                var _a = _this.context.config, width = _a.width, height = _a.height;
-                _this.$camera.parentElement.style.width = "".concat(width || 0, "px");
-                _this.$camera.parentElement.style.height = "".concat(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);
+    var 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);
+        Object.keys(object.attributes).forEach(name => {
+          this.updateAttribute(name, object);
         });
-        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);
-        });
+        setTransform(object, $el);
+        nativeHTMLMap.set($el, object);
+      }
     };
-    HTMLRenderingPlugin.prototype.createCamera = function (camera) {
-        var _a = this.context.config, doc = _a.document, width = _a.width, height = _a.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) {
-                // fix @see https://github.com/antvis/G/issues/1702
-                var $cameraContainer = (doc || document).createElement('div');
-                // HTML elements should not overflow with canvas @see https://github.com/antvis/G/issues/1163
-                $cameraContainer.style.overflow = 'hidden';
-                $cameraContainer.style.pointerEvents = 'none';
-                $cameraContainer.style.position = 'absolute';
-                $cameraContainer.style.left = "0px";
-                $cameraContainer.style.top = "0px";
-                $cameraContainer.style.width = "".concat(width || 0, "px");
-                $cameraContainer.style.height = "".concat(height || 0, "px");
-                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 = "".concat($canvas.offsetLeft || 0, "px");
-                $camera.style.top = "".concat($canvas.offsetTop || 0, "px");
-                $camera.style.transformOrigin = 'left top';
-                $camera.style.transform = this.joinTransformMatrix(camera.getOrthoMatrix());
-                $camera.style.pointerEvents = 'none';
-                $camera.style.width = "100%";
-                $camera.style.height = "100%";
-                $cameraContainer.appendChild($camera);
-                $container.appendChild($cameraContainer);
-            }
-            return $existedCamera;
+    var handleUnmounted = e => {
+      var object = e.target;
+      if (object.nodeName === gLite.Shape.HTML && this.$camera) {
+        var $el = this.getOrCreateEl(object);
+        if ($el) {
+          $el.remove();
+          nativeHTMLMap.delete($el);
         }
-        return null;
+      }
     };
-    HTMLRenderingPlugin.prototype.getOrCreateEl = function (object) {
-        var doc = this.context.config.document;
-        var $existedElement = this.displayObjectHTMLElementMap.get(object);
-        if (!$existedElement) {
-            $existedElement = (doc || document).createElement('div');
-            object.parsedStyle.$el = $existedElement;
-            this.displayObjectHTMLElementMap.set(object, $existedElement);
-            if (object.id) {
-                $existedElement.id = object.id;
-            }
-            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['will-change'] = 'transform';
-            $existedElement.style.transform = this.joinTransformMatrix(object.getWorldTransform(), object.getOrigin());
-        }
-        return $existedElement;
+    var handleAttributeChanged = e => {
+      var object = e.target;
+      if (object.nodeName === gLite.Shape.HTML) {
+        var attrName = e.attrName;
+        this.updateAttribute(attrName, object);
+      }
     };
-    HTMLRenderingPlugin.prototype.updateAttribute = function (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 'x':
-                $el.style.left = "".concat(object.parsedStyle.x, "px");
-                break;
-            case 'y':
-                $el.style.top = "".concat(object.parsedStyle.y, "px");
-                break;
-            case 'transformOrigin':
-                var transformOrigin = object.parsedStyle.transformOrigin;
-                $el.style['transform-origin'] = "".concat(transformOrigin[0].buildCSSText(null, null, ''), " ").concat(transformOrigin[1].buildCSSText(null, null, ''));
-                break;
-            case 'width':
-                var width = object.parsedStyle.width;
-                $el.style.width = util.isNumber(width)
-                    ? "".concat(width, "px")
-                    : width.toString();
-                break;
-            case 'height':
-                var height = object.parsedStyle.height;
-                $el.style.height = util.isNumber(height)
-                    ? "".concat(height, "px")
-                    : height.toString();
-                break;
-            case 'zIndex':
-                var zIndex = object.parsedStyle.zIndex;
-                $el.style['z-index'] = "".concat(zIndex);
-                break;
-            case 'visibility':
-                var visibility = object.parsedStyle.visibility;
-                $el.style.visibility = visibility;
-                break;
-            case 'pointerEvents':
-                var _a = object.parsedStyle.pointerEvents, pointerEvents = _a === void 0 ? 'auto' : _a;
-                $el.style.pointerEvents = pointerEvents;
-                break;
-            case 'opacity':
-                var opacity = object.parsedStyle.opacity;
-                $el.style.opacity = "".concat(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'] = "".concat(lineWidth || 0, "px");
-                break;
-            case 'lineDash':
-                $el.style['border-style'] = 'dashed';
-                break;
-            case 'filter':
-                var filter = object.style.filter;
-                $el.style.filter = filter;
-                break;
-            default:
-                if (!util.isNil(object.style[name]) && object.style[name] !== '') {
-                    $el.style[name] = object.style[name];
-                }
+    var handleBoundsChanged = e => {
+      var object = e.target;
+      var nodes = object.nodeName === gLite.Shape.FRAGMENT ? object.childNodes : [object];
+      nodes.forEach(node => {
+        if (node.nodeName === gLite.Shape.HTML) {
+          var $el = this.getOrCreateEl(node);
+          setTransform(node, $el);
         }
+      });
     };
-    HTMLRenderingPlugin.tag = 'HTMLRendering';
-    return HTMLRenderingPlugin;
-}());
+    var handleCanvasResize = () => {
+      if (this.$camera) {
+        var _this$context$config = this.context.config,
+          width = _this$context$config.width,
+          height = _this$context$config.height;
+        this.$camera.parentElement.style.width = "".concat(width || 0, "px");
+        this.$camera.parentElement.style.height = "".concat(height || 0, "px");
+      }
+    };
+    renderingService.hooks.init.tap(HTMLRenderingPlugin.tag, () => {
+      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, () => {
+      if (this.$camera && renderingContext.renderReasons.has(gLite.RenderReason.CAMERA_CHANGED)) {
+        this.$camera.style.transform = this.joinTransformMatrix(camera.getOrthoMatrix());
+      }
+    });
+    renderingService.hooks.destroy.tap(HTMLRenderingPlugin.tag, () => {
+      // 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);
+    });
+  }
+  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("#".concat(cameraId));
+      if (!$existedCamera) {
+        // fix @see https://github.com/antvis/G/issues/1702
+        var $cameraContainer = (doc || document).createElement('div');
+        // HTML elements should not overflow with canvas @see https://github.com/antvis/G/issues/1163
+        $cameraContainer.style.overflow = 'hidden';
+        $cameraContainer.style.pointerEvents = 'none';
+        $cameraContainer.style.position = 'absolute';
+        $cameraContainer.style.left = "0px";
+        $cameraContainer.style.top = "0px";
+        $cameraContainer.style.width = "".concat(width || 0, "px");
+        $cameraContainer.style.height = "".concat(height || 0, "px");
+        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 = "".concat($canvas.offsetLeft || 0, "px");
+        $camera.style.top = "".concat($canvas.offsetTop || 0, "px");
+        $camera.style.transformOrigin = 'left top';
+        $camera.style.transform = this.joinTransformMatrix(camera.getOrthoMatrix());
+        $camera.style.pointerEvents = 'none';
+        $camera.style.width = "100%";
+        $camera.style.height = "100%";
+        $cameraContainer.appendChild($camera);
+        $container.appendChild($cameraContainer);
+      }
+      return $existedCamera;
+    }
+    return null;
+  }
+  getOrCreateEl(object) {
+    var doc = this.context.config.document;
+    var $existedElement = this.displayObjectHTMLElementMap.get(object);
+    if (!$existedElement) {
+      $existedElement = (doc || document).createElement('div');
+      object.parsedStyle.$el = $existedElement;
+      this.displayObjectHTMLElementMap.set(object, $existedElement);
+      if (object.id) {
+        $existedElement.id = object.id;
+      }
+      if (object.name) {
+        $existedElement.setAttribute('name', object.name);
+      }
+      if (object.className) {
+        $existedElement.className = object.className;
+      }
 
-var Plugin = /** @class */ (function (_super) {
-    tslib.__extends(Plugin, _super);
-    function Plugin() {
-        var _this = _super.apply(this, tslib.__spreadArray([], tslib.__read(arguments), false)) || this;
-        _this.name = 'html-renderer';
-        return _this;
+      // use absolute position
+      $existedElement.style.position = 'absolute';
+      // @see https://github.com/antvis/G/issues/1150
+      $existedElement.style['will-change'] = 'transform';
+      $existedElement.style.transform = this.joinTransformMatrix(object.getWorldTransform(), object.getOrigin());
     }
-    Plugin.prototype.init = function () {
-        this.addRenderingPlugin(new HTMLRenderingPlugin());
-    };
-    Plugin.prototype.destroy = function () {
-        this.removeAllRenderingPlugins();
-    };
-    return Plugin;
-}(gLite.AbstractRendererPlugin));
+    return $existedElement;
+  }
+  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 'x':
+        $el.style.left = "".concat(object.parsedStyle.x, "px");
+        break;
+      case 'y':
+        $el.style.top = "".concat(object.parsedStyle.y, "px");
+        break;
+      case 'transformOrigin':
+        var transformOrigin = object.parsedStyle.transformOrigin;
+        $el.style['transform-origin'] = "".concat(transformOrigin[0].buildCSSText(null, null, ''), " ").concat(transformOrigin[1].buildCSSText(null, null, ''));
+        break;
+      case 'width':
+        var width = object.parsedStyle.width;
+        $el.style.width = util.isNumber(width) ? "".concat(width, "px") : width.toString();
+        break;
+      case 'height':
+        var height = object.parsedStyle.height;
+        $el.style.height = util.isNumber(height) ? "".concat(height, "px") : height.toString();
+        break;
+      case 'zIndex':
+        var zIndex = object.parsedStyle.zIndex;
+        $el.style['z-index'] = "".concat(zIndex);
+        break;
+      case 'visibility':
+        var visibility = object.parsedStyle.visibility;
+        $el.style.visibility = visibility;
+        break;
+      case 'pointerEvents':
+        var _object$parsedStyle$p = object.parsedStyle.pointerEvents,
+          pointerEvents = _object$parsedStyle$p === void 0 ? 'auto' : _object$parsedStyle$p;
+        $el.style.pointerEvents = pointerEvents;
+        break;
+      case 'opacity':
+        var opacity = object.parsedStyle.opacity;
+        $el.style.opacity = "".concat(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'] = "".concat(lineWidth || 0, "px");
+        break;
+      case 'lineDash':
+        $el.style['border-style'] = 'dashed';
+        break;
+      case 'filter':
+        var filter = object.style.filter;
+        $el.style.filter = filter;
+        break;
+      default:
+        if (!util.isNil(object.style[name]) && object.style[name] !== '') {
+          $el.style[name] = object.style[name];
+        }
+    }
+  }
+}
+HTMLRenderingPlugin.tag = 'HTMLRendering';
 
+class Plugin extends gLite.AbstractRendererPlugin {
+  constructor() {
+    super(...arguments);
+    this.name = 'html-renderer';
+  }
+  init() {
+    this.addRenderingPlugin(new HTMLRenderingPlugin());
+  }
+  destroy() {
+    this.removeAllRenderingPlugins();
+  }
+}
+
 exports.Plugin = Plugin;
 //# sourceMappingURL=index.js.map

dist/index.umd.min.js

@@ -1,2 +0,10 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).G=e.G||{},e.G.HTMLRenderer={}),e.window.G)}(this,(function(e,t){"use strict";var r=function(e,t){return r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},r(e,t)};"function"==typeof SuppressedError&&SuppressedError;var n=function(e){return null==e},a={}.toString,o=function(e,t){return a.call(e)==="[object "+t+"]"},i=function(e){return o(e,"Number")},s=function(){function e(){this.displayObjectHTMLElementMap=new WeakMap}return e.prototype.joinTransformMatrix=function(e,t){return void 0===t&&(t=[0,0,0]),"matrix(".concat([e[0],e[1],e[4],e[5],e[12]+t[0],e[13]+t[1]].join(","),")")},e.prototype.apply=function(r,n){var a=this,o=r.camera,i=r.renderingContext,s=r.renderingService;this.context=r;var l=i.root.ownerDocument.defaultView,c=l.context.eventService.nativeHTMLMap,p=function(e,t){t.style.transform=a.joinTransformMatrix(e.getWorldTransform(),e.getOrigin())},d=function(e){var r=e.target;if(r.nodeName===t.Shape.HTML){a.$camera||(a.$camera=a.createCamera(o));var n=a.getOrCreateEl(r);a.$camera.appendChild(n),Object.keys(r.attributes).forEach((function(e){a.updateAttribute(e,r)})),p(r,n),c.set(n,r)}},y=function(e){var r=e.target;if(r.nodeName===t.Shape.HTML&&a.$camera){var n=a.getOrCreateEl(r);n&&(n.remove(),c.delete(n))}},f=function(e){var r=e.target;r.nodeName===t.Shape.HTML&&a.updateAttribute(e.attrName,r)},u=function(e){var r=e.target;(r.nodeName===t.Shape.FRAGMENT?r.childNodes:[r]).forEach((function(e){if(e.nodeName===t.Shape.HTML){var r=a.getOrCreateEl(e);p(e,r)}}))},v=function(){if(a.$camera){var e=a.context.config,t=e.height;a.$camera.parentElement.style.width="".concat(e.width||0,"px"),a.$camera.parentElement.style.height="".concat(t||0,"px")}};s.hooks.init.tap(e.tag,(function(){l.addEventListener(t.CanvasEvent.RESIZE,v),l.addEventListener(t.ElementEvent.MOUNTED,d),l.addEventListener(t.ElementEvent.UNMOUNTED,y),l.addEventListener(t.ElementEvent.ATTR_MODIFIED,f),l.addEventListener(t.ElementEvent.BOUNDS_CHANGED,u)})),s.hooks.endFrame.tap(e.tag,(function(){a.$camera&&i.renderReasons.has(t.RenderReason.CAMERA_CHANGED)&&(a.$camera.style.transform=a.joinTransformMatrix(o.getOrthoMatrix()))})),s.hooks.destroy.tap(e.tag,(function(){a.$camera&&a.$camera.remove(),l.removeEventListener(t.CanvasEvent.RESIZE,v),l.removeEventListener(t.ElementEvent.MOUNTED,d),l.removeEventListener(t.ElementEvent.UNMOUNTED,y),l.removeEventListener(t.ElementEvent.ATTR_MODIFIED,f),l.removeEventListener(t.ElementEvent.BOUNDS_CHANGED,u)}))},e.prototype.createCamera=function(e){var t=this.context.config,r=t.document,n=t.width,a=t.height,o=this.context.contextService.getDomElement(),i=o.parentNode;if(i){var s="g-canvas-camera",l=i.querySelector("#"+s);if(!l){var c=(r||document).createElement("div");c.style.overflow="hidden",c.style.pointerEvents="none",c.style.position="absolute",c.style.left="0px",c.style.top="0px",c.style.width="".concat(n||0,"px"),c.style.height="".concat(a||0,"px");var p=(r||document).createElement("div");l=p,p.id=s,p.style.position="absolute",p.style.left="".concat(o.offsetLeft||0,"px"),p.style.top="".concat(o.offsetTop||0,"px"),p.style.transformOrigin="left top",p.style.transform=this.joinTransformMatrix(e.getOrthoMatrix()),p.style.pointerEvents="none",p.style.width="100%",p.style.height="100%",c.appendChild(p),i.appendChild(c)}return l}return null},e.prototype.getOrCreateEl=function(e){var t=this.context.config.document,r=this.displayObjectHTMLElementMap.get(e);return r||(r=(t||document).createElement("div"),e.parsedStyle.$el=r,this.displayObjectHTMLElementMap.set(e,r),e.id&&(r.id=e.id),e.name&&r.setAttribute("name",e.name),e.className&&(r.className=e.className),r.style.position="absolute",r.style["will-change"]="transform",r.style.transform=this.joinTransformMatrix(e.getWorldTransform(),e.getOrigin())),r},e.prototype.updateAttribute=function(e,r){var a=this.getOrCreateEl(r);switch(e){case"innerHTML":var s=r.parsedStyle.innerHTML;o(s,"String")?a.innerHTML=s:(a.innerHTML="",a.appendChild(s));break;case"x":a.style.left="".concat(r.parsedStyle.x,"px");break;case"y":a.style.top="".concat(r.parsedStyle.y,"px");break;case"transformOrigin":var l=r.parsedStyle.transformOrigin;a.style["transform-origin"]="".concat(l[0].buildCSSText(null,null,"")," ").concat(l[1].buildCSSText(null,null,""));break;case"width":var c=r.parsedStyle.width;a.style.width=i(c)?"".concat(c,"px"):""+c;break;case"height":var p=r.parsedStyle.height;a.style.height=i(p)?"".concat(p,"px"):""+p;break;case"zIndex":a.style["z-index"]="".concat(r.parsedStyle.zIndex);break;case"visibility":a.style.visibility=r.parsedStyle.visibility;break;case"pointerEvents":var d=r.parsedStyle.pointerEvents;a.style.pointerEvents=void 0===d?"auto":d;break;case"opacity":a.style.opacity="".concat(r.parsedStyle.opacity);break;case"fill":var y=r.parsedStyle.fill,f="";t.isCSSRGB(y)?f=y.isNone?"transparent":r.getAttribute("fill"):Array.isArray(y)?f=r.getAttribute("fill"):t.isPattern(y),a.style.background=f;break;case"stroke":var u=r.parsedStyle.stroke,v="";t.isCSSRGB(u)?v=u.isNone?"transparent":r.getAttribute("stroke"):Array.isArray(u)?v=r.getAttribute("stroke"):t.isPattern(u),a.style["border-color"]=v,a.style["border-style"]="solid";break;case"lineWidth":a.style["border-width"]="".concat(r.parsedStyle.lineWidth||0,"px");break;case"lineDash":a.style["border-style"]="dashed";break;case"filter":a.style.filter=r.style.filter;break;default:n(r.style[e])||""===r.style[e]||(a.style[e]=r.style[e])}},e.tag="HTMLRendering",e}(),l=function(e){function t(){var t=e.apply(this,function(e,t,r){if(r||2===arguments.length)for(var n,a=0,o=t.length;o>a;a++)!n&&a in t||(n||(n=Array.prototype.slice.call(t,0,a)),n[a]=t[a]);return e.concat(n||Array.prototype.slice.call(t))}([],function(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,a,o=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)i.push(n.value)}catch(e){a={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(a)throw a.error}}return i}(arguments),!1))||this;return t.name="html-renderer",t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+t+" is not a constructor or null");function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e),t.prototype.init=function(){this.addRenderingPlugin(new s)},t.prototype.destroy=function(){this.removeAllRenderingPlugins()},t}(t.AbstractRendererPlugin);e.Plugin=l}));
+/*!
+ * @antv/g-plugin-html-renderer
+ * @description A G plugin for rendering HTML
+ * @version 2.1.1
+ * @date 10/23/2024, 7:14:03 AM
+ * @author AntVis
+ * @docs https://g.antv.antgroup.com/
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@antv/g-lite")):"function"==typeof define&&define.amd?define(["exports","@antv/g-lite"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).G=e.G||{},e.G.HTMLRenderer={}),e.window.G)}(this,(function(e,t){"use strict";var r=function(e){return null==e},a={}.toString,n=function(e,t){return a.call(e)==="[object "+t+"]"},i=function(e){return n(e,"Number")};class s{constructor(){this.displayObjectHTMLElementMap=new WeakMap}joinTransformMatrix(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0,0];return"matrix(".concat([e[0],e[1],e[4],e[5],e[12]+t[0],e[13]+t[1]].join(","),")")}apply(e,r){var a=e.camera,n=e.renderingContext,i=e.renderingService;this.context=e;var l=n.root.ownerDocument.defaultView,o=l.context.eventService.nativeHTMLMap,c=(e,t)=>{t.style.transform=this.joinTransformMatrix(e.getWorldTransform(),e.getOrigin())},d=e=>{var r=e.target;if(r.nodeName===t.Shape.HTML){this.$camera||(this.$camera=this.createCamera(a));var n=this.getOrCreateEl(r);this.$camera.appendChild(n),Object.keys(r.attributes).forEach((e=>{this.updateAttribute(e,r)})),c(r,n),o.set(n,r)}},h=e=>{var r=e.target;if(r.nodeName===t.Shape.HTML&&this.$camera){var a=this.getOrCreateEl(r);a&&(a.remove(),o.delete(a))}},p=e=>{var r=e.target;r.nodeName===t.Shape.HTML&&this.updateAttribute(e.attrName,r)},m=e=>{var r=e.target;(r.nodeName===t.Shape.FRAGMENT?r.childNodes:[r]).forEach((e=>{if(e.nodeName===t.Shape.HTML){var r=this.getOrCreateEl(e);c(e,r)}}))},y=()=>{if(this.$camera){var e=this.context.config,t=e.height;this.$camera.parentElement.style.width="".concat(e.width||0,"px"),this.$camera.parentElement.style.height="".concat(t||0,"px")}};i.hooks.init.tap(s.tag,(()=>{l.addEventListener(t.CanvasEvent.RESIZE,y),l.addEventListener(t.ElementEvent.MOUNTED,d),l.addEventListener(t.ElementEvent.UNMOUNTED,h),l.addEventListener(t.ElementEvent.ATTR_MODIFIED,p),l.addEventListener(t.ElementEvent.BOUNDS_CHANGED,m)})),i.hooks.endFrame.tap(s.tag,(()=>{this.$camera&&n.renderReasons.has(t.RenderReason.CAMERA_CHANGED)&&(this.$camera.style.transform=this.joinTransformMatrix(a.getOrthoMatrix()))})),i.hooks.destroy.tap(s.tag,(()=>{this.$camera&&this.$camera.remove(),l.removeEventListener(t.CanvasEvent.RESIZE,y),l.removeEventListener(t.ElementEvent.MOUNTED,d),l.removeEventListener(t.ElementEvent.UNMOUNTED,h),l.removeEventListener(t.ElementEvent.ATTR_MODIFIED,p),l.removeEventListener(t.ElementEvent.BOUNDS_CHANGED,m)}))}createCamera(e){var t=this.context.config,r=t.document,a=t.width,n=t.height,i=this.context.contextService.getDomElement(),s=i.parentNode;if(s){var l="g-canvas-camera",o=s.querySelector("#".concat(l));if(!o){var c=(r||document).createElement("div");c.style.overflow="hidden",c.style.pointerEvents="none",c.style.position="absolute",c.style.left="0px",c.style.top="0px",c.style.width="".concat(a||0,"px"),c.style.height="".concat(n||0,"px");var d=(r||document).createElement("div");o=d,d.id=l,d.style.position="absolute",d.style.left="".concat(i.offsetLeft||0,"px"),d.style.top="".concat(i.offsetTop||0,"px"),d.style.transformOrigin="left top",d.style.transform=this.joinTransformMatrix(e.getOrthoMatrix()),d.style.pointerEvents="none",d.style.width="100%",d.style.height="100%",c.appendChild(d),s.appendChild(c)}return o}return null}getOrCreateEl(e){var t=this.context.config.document,r=this.displayObjectHTMLElementMap.get(e);return r||(r=(t||document).createElement("div"),e.parsedStyle.$el=r,this.displayObjectHTMLElementMap.set(e,r),e.id&&(r.id=e.id),e.name&&r.setAttribute("name",e.name),e.className&&(r.className=e.className),r.style.position="absolute",r.style["will-change"]="transform",r.style.transform=this.joinTransformMatrix(e.getWorldTransform(),e.getOrigin())),r}updateAttribute(e,a){var s=this.getOrCreateEl(a);switch(e){case"innerHTML":var l=a.parsedStyle.innerHTML;n(l,"String")?s.innerHTML=l:(s.innerHTML="",s.appendChild(l));break;case"x":s.style.left="".concat(a.parsedStyle.x,"px");break;case"y":s.style.top="".concat(a.parsedStyle.y,"px");break;case"transformOrigin":var o=a.parsedStyle.transformOrigin;s.style["transform-origin"]="".concat(o[0].buildCSSText(null,null,"")," ").concat(o[1].buildCSSText(null,null,""));break;case"width":var c=a.parsedStyle.width;s.style.width=i(c)?"".concat(c,"px"):""+c;break;case"height":var d=a.parsedStyle.height;s.style.height=i(d)?"".concat(d,"px"):""+d;break;case"zIndex":s.style["z-index"]="".concat(a.parsedStyle.zIndex);break;case"visibility":s.style.visibility=a.parsedStyle.visibility;break;case"pointerEvents":var h=a.parsedStyle.pointerEvents;s.style.pointerEvents=void 0===h?"auto":h;break;case"opacity":s.style.opacity="".concat(a.parsedStyle.opacity);break;case"fill":var p=a.parsedStyle.fill,m="";t.isCSSRGB(p)?m=p.isNone?"transparent":a.getAttribute("fill"):Array.isArray(p)?m=a.getAttribute("fill"):t.isPattern(p),s.style.background=m;break;case"stroke":var y=a.parsedStyle.stroke,v="";t.isCSSRGB(y)?v=y.isNone?"transparent":a.getAttribute("stroke"):Array.isArray(y)?v=a.getAttribute("stroke"):t.isPattern(y),s.style["border-color"]=v,s.style["border-style"]="solid";break;case"lineWidth":s.style["border-width"]="".concat(a.parsedStyle.lineWidth||0,"px");break;case"lineDash":s.style["border-style"]="dashed";break;case"filter":s.style.filter=a.style.filter;break;default:r(a.style[e])||""===a.style[e]||(s.style[e]=a.style[e])}}}s.tag="HTMLRendering";e.Plugin=class extends t.AbstractRendererPlugin{constructor(){super(...arguments),this.name="html-renderer"}init(){this.addRenderingPlugin(new s)}destroy(){this.removeAllRenderingPlugins()}}}));
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "@antv/g-plugin-html-renderer",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A G plugin for rendering HTML",
@@ -20,3 +20,3 @@ "keywords": [
   "exports": {
-    "types": "./dist/index.d.ts",
+    "types": "./types/index.d.ts",
     "import": "./dist/index.esm.js",
@@ -28,6 +28,7 @@ "default": "./dist/index.js"
   "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "types": "types/index.d.ts",
   "files": [
     "package.json",
     "dist",
+    "types",
     "LICENSE",
@@ -38,5 +39,6 @@ "README.md"
     "@antv/util": "^3.3.5",
+    "@babel/runtime": "^7.25.6",
     "gl-matrix": "^3.4.3",
     "tslib": "^2.5.3",
-    "@antv/g-lite": "2.1.0"
+    "@antv/g-lite": "2.1.1"
   },
@@ -47,3 +49,4 @@ "publishConfig": {
   "scripts": {
-    "build": "npm run clean && rollup -c",
+    "build:types": "tsc --emitDeclarationOnly --noCheck",
+    "build": "npm run clean && npm run build:types && rollup -c",
     "clean": "rimraf dist",
@@ -50,0 +53,0 @@ "sync": "tnpm sync",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107228

increased by19.73%

Number of package files

15

increased by25%

Worsened metrics

Dependency count

5

increased by25%

Lines of code

624

decreased by-2.35%

Dependency changes

• + Added@babel/runtime@^7.25.6

• + Added@antv/g-lite@2.1.1(transitive)

• + Added@babel/runtime@7.26.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removed@antv/g-lite@2.1.0(transitive)

• Updated@antv/g-lite@2.1.1