@visactor/vrender-core 0.18.5 → 0.18.6

package/es/plugins/builtin-plugin/html-attribute-plugin.js

@@ -7,7 +7,7 @@ import { DefaultAttribute } from "../../graphic";
 export class HtmlAttributePlugin {
     constructor() {
         this.name = "HtmlAttributePlugin", this.activeEvent = "onRegister", this._uid = Generator.GenAutoIncrementId(), 
-        this.key = this.name + this._uid;
+        this.key = this.name + this._uid, this.lastDomContainerSet = new Set, this.currentDomContainerSet = new Set;
     }
     activate(context) {
         this.pluginService = context, context.stage.hooks.afterRender.tap(this.key, (stage => {
@@ -19,15 +19,19 @@ export class HtmlAttributePlugin {
         }));
     }
     deactivate(context) {
-        context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter((item => item.name !== this.key));
+        context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter((item => item.name !== this.key)), 
+        application.graphicService.hooks.onRemove.unTap(this.key), application.graphicService.hooks.onRelease.unTap(this.key), 
+        this.release();
     }
     drawHTML(renderService) {
-        "browser" === application.global.env && renderService.renderTreeRoots.sort(((a, b) => {
+        "browser" === application.global.env && (renderService.renderTreeRoots.sort(((a, b) => {
             var _a, _b;
             return (null !== (_a = a.attribute.zIndex) && void 0 !== _a ? _a : DefaultAttribute.zIndex) - (null !== (_b = b.attribute.zIndex) && void 0 !== _b ? _b : DefaultAttribute.zIndex);
         })).forEach((group => {
             this.renderGroupHTML(group);
-        }));
+        })), this.lastDomContainerSet.forEach((item => {
+            this.currentDomContainerSet.has(item) || item.parentElement && item.parentElement.removeChild(item);
+        })), this.lastDomContainerSet = new Set(this.currentDomContainerSet), this.currentDomContainerSet.clear());
     }
     renderGroupHTML(group) {
         this.renderGraphicHTML(group), group.forEachChildren((g => {
@@ -46,7 +50,7 @@ export class HtmlAttributePlugin {
         })), graphic.bindDom.clear()));
         const stage = graphic.stage;
         if (!stage) return;
-        const {dom: dom, container: container, width: width, height: height, style: style, anchorType: anchorType = "boundsLeftTop"} = html;
+        const {dom: dom, container: container, width: width, height: height, style: style, anchorType: anchorType = "boundsLeftTop", pointerEvents: pointerEvents} = html;
         graphic.bindDom || (graphic.bindDom = new Map);
         const lastDom = graphic.bindDom.get(dom);
         let wrapGroup, nativeContainer;
@@ -70,7 +74,7 @@ export class HtmlAttributePlugin {
                 wrapGroup: wrapGroup
             }));
         } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
-        wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", 
+        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", 
         nativeContainer.style.position = "relative");
         let left = 0, top = 0;
         const b = graphic.globalAABBBounds;
@@ -79,7 +83,16 @@ export class HtmlAttributePlugin {
             left = matrix.e, top = matrix.f;
         } else left = b.x1, top = b.y1;
         const containerTL = application.global.getElementTopLeft(nativeContainer, !1), windowTL = stage.window.getTopLeft(!1), offsetX = left + windowTL.left - containerTL.left, offsetTop = top + windowTL.top - containerTL.top;
-        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`;
+        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`, this.currentDomContainerSet.add(wrapGroup);
+    }
+    release() {
+        "browser" === application.global.env && (this.removeAllDom(this.pluginService.stage.defaultLayer), 
+        this.lastDomContainerSet.clear(), this.currentDomContainerSet.clear());
+    }
+    removeAllDom(g) {
+        this.removeDom(g), g.forEachChildren((item => {
+            item.isContainer && this.removeAllDom(g);
+        }));
     }
 }
 //# sourceMappingURL=html-attribute-plugin.js.map

package/es/plugins/builtin-plugin/html-attribute-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugins/builtin-plugin/html-attribute-plugin.ts"],"names":[],"mappings":"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","file":"html-attribute-plugin.js","sourcesContent":["import { Generator } from '../../common/generator';\nimport type { IGraphic, IPlugin, IPluginService, IRenderService, IDrawContext, IGroup } from '../../interface';\nimport { application } from '../../application';\nimport { DefaultAttribute } from '../../graphic';\n\nexport class HtmlAttributePlugin implements IPlugin {\n  name: 'HtmlAttributePlugin' = 'HtmlAttributePlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  _uid: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this._uid;\n\n  activate(context: IPluginService): void {\n    this.pluginService = context;\n    context.stage.hooks.afterRender.tap(this.key, stage => {\n      if (!(stage && stage === this.pluginService.stage)) {\n        return;\n      }\n\n      this.drawHTML(context.stage.renderService);\n    });\n    application.graphicService.hooks.onRemove.tap(this.key, graphic => {\n      this.removeDom(graphic);\n    });\n    application.graphicService.hooks.onRelease.tap(this.key, graphic => {\n      this.removeDom(graphic);\n    });\n  }\n  deactivate(context: IPluginService): void {\n    context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {\n      return item.name !== this.key;\n    });\n  }\n\n  protected drawHTML(renderService: IRenderService) {\n    if (application.global.env === 'browser') {\n      renderService.renderTreeRoots\n        .sort((a, b) => {\n          return (a.attribute.zIndex ?? DefaultAttribute.zIndex) - (b.attribute.zIndex ?? DefaultAttribute.zIndex);\n        })\n        .forEach(group => {\n          this.renderGroupHTML(group as IGroup);\n        });\n    }\n  }\n\n  renderGroupHTML(group: IGroup) {\n    this.renderGraphicHTML(group);\n    group.forEachChildren((g: IGraphic) => {\n      if (g.isContainer) {\n        this.renderGroupHTML(g as IGroup);\n      } else {\n        this.renderGraphicHTML(g);\n      }\n    });\n  }\n\n  removeDom(graphic: IGraphic) {\n    if (graphic.bindDom && graphic.bindDom.size) {\n      // 删除dom\n      graphic.bindDom.forEach(item => {\n        item.dom && item.dom.parentElement.removeChild(item.dom);\n      });\n      graphic.bindDom.clear();\n    }\n  }\n\n  renderGraphicHTML(graphic: IGraphic) {\n    const { html } = graphic.attribute;\n    if (!html) {\n      if (graphic.bindDom && graphic.bindDom.size) {\n        // 删除dom\n        graphic.bindDom.forEach(item => {\n          item.dom && item.dom.parentElement.removeChild(item.dom);\n        });\n        graphic.bindDom.clear();\n      }\n      return;\n    }\n    const stage = graphic.stage;\n    if (!stage) {\n      return;\n    }\n    const { dom, container, width, height, style, anchorType = 'boundsLeftTop' } = html;\n    if (!graphic.bindDom) {\n      graphic.bindDom = new Map();\n    }\n    const lastDom = graphic.bindDom.get(dom);\n\n    let wrapGroup;\n    // 获取container的dom，默认为window的container\n    let nativeContainer;\n    // 如果存在了（dom存在，且container没有变化），就不做事情\n    if (lastDom && !(container && container !== lastDom.container)) {\n      wrapGroup = lastDom.wrapGroup;\n      nativeContainer = wrapGroup.parentNode;\n    } else {\n      // 清除上一次的dom\n      graphic.bindDom.forEach(({ wrapGroup }) => {\n        application.global.removeDom(wrapGroup);\n      });\n      // 转化这个dom为nativeDOM\n      let nativeDom: HTMLElement;\n      if (typeof dom === 'string') {\n        nativeDom = new DOMParser().parseFromString(dom, 'text/html').firstChild as any;\n        if ((nativeDom as any).lastChild) {\n          nativeDom = (nativeDom as any).lastChild.firstChild;\n        }\n      } else {\n        nativeDom = dom;\n      }\n\n      const _container =\n        container || (stage.params.enableHtmlAttribute === true ? null : stage.params.enableHtmlAttribute);\n      if (_container) {\n        if (typeof _container === 'string') {\n          nativeContainer = application.global.getElementById(_container);\n        } else {\n          nativeContainer = _container;\n        }\n      } else {\n        // nativeContainer = application.global.getRootElement();\n        nativeContainer = graphic.stage.window.getContainer();\n      }\n      // 创建wrapGroup\n      wrapGroup = application.global.createDom({ tagName: 'div', width, height, style, parent: nativeContainer });\n      if (wrapGroup) {\n        wrapGroup.appendChild(nativeDom);\n        graphic.bindDom.set(dom, { dom: nativeDom, container, wrapGroup: wrapGroup as any });\n      }\n    }\n\n    // 事件穿透\n    wrapGroup.style.pointerEvents = 'none';\n    // 定位wrapGroup\n    if (!wrapGroup.style.position) {\n      wrapGroup.style.position = 'absolute';\n      nativeContainer.style.position = 'relative';\n    }\n    let left: number = 0;\n    let top: number = 0;\n    const b = graphic.globalAABBBounds;\n    if (anchorType === 'position' || b.empty()) {\n      const matrix = graphic.globalTransMatrix;\n      left = matrix.e;\n      top = matrix.f;\n    } else {\n      left = b.x1;\n      top = b.y1;\n    }\n    // 查看wrapGroup的位置\n    // const wrapGroupTL = application.global.getElementTopLeft(wrapGroup, false);\n    const containerTL = application.global.getElementTopLeft(nativeContainer, false);\n    const windowTL = stage.window.getTopLeft(false);\n    const offsetX = left + windowTL.left - containerTL.left;\n    const offsetTop = top + windowTL.top - containerTL.top;\n    // wrapGroup.style.transform = `translate(${offsetX}px, ${offsetTop}px)`;\n    wrapGroup.style.left = `${offsetX}px`;\n    wrapGroup.style.top = `${offsetTop}px`;\n  }\n}\n"]}
+{"version":3,"sources":["../src/plugins/builtin-plugin/html-attribute-plugin.ts"],"names":[],"mappings":"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","file":"html-attribute-plugin.js","sourcesContent":["import { Generator } from '../../common/generator';\nimport type { IGraphic, IPlugin, IPluginService, IRenderService, IDrawContext, IGroup } from '../../interface';\nimport { application } from '../../application';\nimport { DefaultAttribute } from '../../graphic';\n\nexport class HtmlAttributePlugin implements IPlugin {\n  name: string = 'HtmlAttributePlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  _uid: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this._uid;\n  lastDomContainerSet: Set<any> = new Set();\n  currentDomContainerSet: Set<any> = new Set();\n\n  activate(context: IPluginService): void {\n    this.pluginService = context;\n    context.stage.hooks.afterRender.tap(this.key, stage => {\n      if (!(stage && stage === this.pluginService.stage)) {\n        return;\n      }\n\n      this.drawHTML(context.stage.renderService);\n    });\n    application.graphicService.hooks.onRemove.tap(this.key, graphic => {\n      this.removeDom(graphic);\n    });\n    application.graphicService.hooks.onRelease.tap(this.key, graphic => {\n      this.removeDom(graphic);\n    });\n  }\n  deactivate(context: IPluginService): void {\n    context.stage.hooks.afterRender.taps = context.stage.hooks.afterRender.taps.filter(item => {\n      return item.name !== this.key;\n    });\n    application.graphicService.hooks.onRemove.unTap(this.key);\n    application.graphicService.hooks.onRelease.unTap(this.key);\n    this.release();\n  }\n\n  protected drawHTML(renderService: IRenderService) {\n    if (application.global.env === 'browser') {\n      renderService.renderTreeRoots\n        .sort((a, b) => {\n          return (a.attribute.zIndex ?? DefaultAttribute.zIndex) - (b.attribute.zIndex ?? DefaultAttribute.zIndex);\n        })\n        .forEach(group => {\n          this.renderGroupHTML(group as IGroup);\n        });\n      // 删掉这次不存在的节点\n      this.lastDomContainerSet.forEach(item => {\n        if (!this.currentDomContainerSet.has(item)) {\n          item.parentElement && item.parentElement.removeChild(item);\n        }\n      });\n      this.lastDomContainerSet = new Set(this.currentDomContainerSet);\n      this.currentDomContainerSet.clear();\n    }\n  }\n\n  renderGroupHTML(group: IGroup) {\n    this.renderGraphicHTML(group);\n    group.forEachChildren((g: IGraphic) => {\n      if (g.isContainer) {\n        this.renderGroupHTML(g as IGroup);\n      } else {\n        this.renderGraphicHTML(g);\n      }\n    });\n  }\n\n  removeDom(graphic: IGraphic) {\n    if (graphic.bindDom && graphic.bindDom.size) {\n      // 删除dom\n      graphic.bindDom.forEach(item => {\n        item.dom && item.dom.parentElement.removeChild(item.dom);\n      });\n      graphic.bindDom.clear();\n    }\n  }\n\n  renderGraphicHTML(graphic: IGraphic) {\n    const { html } = graphic.attribute;\n    if (!html) {\n      if (graphic.bindDom && graphic.bindDom.size) {\n        // 删除dom\n        graphic.bindDom.forEach(item => {\n          item.dom && item.dom.parentElement.removeChild(item.dom);\n        });\n        graphic.bindDom.clear();\n      }\n      return;\n    }\n    const stage = graphic.stage;\n    if (!stage) {\n      return;\n    }\n    const { dom, container, width, height, style, anchorType = 'boundsLeftTop', pointerEvents } = html;\n    if (!graphic.bindDom) {\n      graphic.bindDom = new Map();\n    }\n    const lastDom = graphic.bindDom.get(dom);\n\n    let wrapGroup;\n    // 获取container的dom，默认为window的container\n    let nativeContainer;\n    // 如果存在了（dom存在，且container没有变化），就不做事情\n    if (lastDom && !(container && container !== lastDom.container)) {\n      wrapGroup = lastDom.wrapGroup;\n      nativeContainer = wrapGroup.parentNode;\n    } else {\n      // 清除上一次的dom\n      graphic.bindDom.forEach(({ wrapGroup }) => {\n        application.global.removeDom(wrapGroup);\n      });\n      // 转化这个dom为nativeDOM\n      let nativeDom: HTMLElement;\n      if (typeof dom === 'string') {\n        nativeDom = new DOMParser().parseFromString(dom, 'text/html').firstChild as any;\n        if ((nativeDom as any).lastChild) {\n          nativeDom = (nativeDom as any).lastChild.firstChild;\n        }\n      } else {\n        nativeDom = dom;\n      }\n\n      const _container =\n        container || (stage.params.enableHtmlAttribute === true ? null : stage.params.enableHtmlAttribute);\n      if (_container) {\n        if (typeof _container === 'string') {\n          nativeContainer = application.global.getElementById(_container);\n        } else {\n          nativeContainer = _container;\n        }\n      } else {\n        // nativeContainer = application.global.getRootElement();\n        nativeContainer = graphic.stage.window.getContainer();\n      }\n      // 创建wrapGroup\n      wrapGroup = application.global.createDom({ tagName: 'div', width, height, style, parent: nativeContainer });\n      if (wrapGroup) {\n        wrapGroup.appendChild(nativeDom);\n        graphic.bindDom.set(dom, { dom: nativeDom, container, wrapGroup: wrapGroup as any });\n      }\n    }\n\n    // 事件穿透\n    wrapGroup.style.pointerEvents = pointerEvents || 'none';\n    // 定位wrapGroup\n    if (!wrapGroup.style.position) {\n      wrapGroup.style.position = 'absolute';\n      nativeContainer.style.position = 'relative';\n    }\n    let left: number = 0;\n    let top: number = 0;\n    const b = graphic.globalAABBBounds;\n    if (anchorType === 'position' || b.empty()) {\n      const matrix = graphic.globalTransMatrix;\n      left = matrix.e;\n      top = matrix.f;\n    } else {\n      left = b.x1;\n      top = b.y1;\n    }\n    // 查看wrapGroup的位置\n    // const wrapGroupTL = application.global.getElementTopLeft(wrapGroup, false);\n    const containerTL = application.global.getElementTopLeft(nativeContainer, false);\n    const windowTL = stage.window.getTopLeft(false);\n    const offsetX = left + windowTL.left - containerTL.left;\n    const offsetTop = top + windowTL.top - containerTL.top;\n    // wrapGroup.style.transform = `translate(${offsetX}px, ${offsetTop}px)`;\n    wrapGroup.style.left = `${offsetX}px`;\n    wrapGroup.style.top = `${offsetTop}px`;\n    this.currentDomContainerSet.add(wrapGroup);\n  }\n\n  release() {\n    if (application.global.env === 'browser') {\n      this.removeAllDom(this.pluginService.stage.defaultLayer);\n      this.lastDomContainerSet.clear();\n      this.currentDomContainerSet.clear();\n    }\n  }\n  removeAllDom(g: IGraphic) {\n    this.removeDom(g);\n    g.forEachChildren((item: IGraphic) => {\n      if (item.isContainer) {\n        this.removeAllDom(g);\n      }\n    });\n  }\n}\n"]}

package/es/plugins/builtin-plugin/react-attribute-plugin.d.ts

@@ -0,0 +1,11 @@
+import type { IGraphic, IPlugin, IPluginService } from '../../interface';
+import { HtmlAttributePlugin } from './html-attribute-plugin';
+export declare class ReactAttributePlugin extends HtmlAttributePlugin implements IPlugin {
+    name: 'ReactAttributePlugin';
+    activeEvent: 'onRegister';
+    pluginService: IPluginService;
+    _uid: number;
+    key: string;
+    removeDom(graphic: IGraphic): void;
+    renderGraphicHTML(graphic: IGraphic): void;
+}

package/es/plugins/builtin-plugin/react-attribute-plugin.js

@@ -0,0 +1,63 @@
+import { Generator } from "../../common/generator";
+
+import { application } from "../../application";
+
+import { HtmlAttributePlugin } from "./html-attribute-plugin";
+
+export class ReactAttributePlugin extends HtmlAttributePlugin {
+    constructor() {
+        super(...arguments), this.name = "ReactAttributePlugin", this.activeEvent = "onRegister", 
+        this._uid = Generator.GenAutoIncrementId(), this.key = this.name + this._uid;
+    }
+    removeDom(graphic) {
+        graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach((item => {
+            item.root && item.root.unmount();
+        })), graphic.bindDom.clear());
+    }
+    renderGraphicHTML(graphic) {
+        const {react: react} = graphic.attribute;
+        if (!react) return void (graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach((item => {
+            item.root && item.root.unmount();
+        })), graphic.bindDom.clear()));
+        const stage = graphic.stage;
+        if (!stage) return;
+        const ReactDOM = stage.params.ReactDOM, {element: element, container: container, width: width, height: height, style: style, anchorType: anchorType = "boundsLeftTop", pointerEvents: pointerEvents} = react;
+        if (!(element && ReactDOM && ReactDOM.createRoot)) return;
+        graphic.bindDom || (graphic.bindDom = new Map);
+        const lastDom = graphic.bindDom.get(element);
+        let wrapGroup, nativeContainer;
+        if (!lastDom || container && container !== lastDom.container) {
+            graphic.bindDom.forEach((({wrapGroup: wrapGroup}) => {
+                application.global.removeDom(wrapGroup);
+            }));
+            const _container = container;
+            if (nativeContainer = _container ? "string" == typeof _container ? application.global.getElementById(_container) : _container : graphic.stage.window.getContainer(), 
+            wrapGroup = application.global.createDom({
+                tagName: "div",
+                width: width,
+                height: height,
+                style: style,
+                parent: nativeContainer
+            }), wrapGroup) {
+                const root = ReactDOM.createRoot(wrapGroup);
+                root.render(element), graphic.bindDom.set(element, {
+                    dom: element,
+                    container: container,
+                    wrapGroup: wrapGroup,
+                    root: root
+                });
+            }
+        } else wrapGroup = lastDom.wrapGroup, nativeContainer = wrapGroup.parentNode;
+        wrapGroup.style.pointerEvents = pointerEvents || "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", 
+        nativeContainer.style.position = "relative");
+        let left = 0, top = 0;
+        const b = graphic.globalAABBBounds;
+        if ("position" === anchorType || b.empty()) {
+            const matrix = graphic.globalTransMatrix;
+            left = matrix.e, top = matrix.f;
+        } else left = b.x1, top = b.y1;
+        const containerTL = application.global.getElementTopLeft(nativeContainer, !1), windowTL = stage.window.getTopLeft(!1), offsetX = left + windowTL.left - containerTL.left, offsetTop = top + windowTL.top - containerTL.top;
+        wrapGroup.style.left = `${offsetX}px`, wrapGroup.style.top = `${offsetTop}px`;
+    }
+}
+//# sourceMappingURL=react-attribute-plugin.js.map

package/es/plugins/builtin-plugin/react-attribute-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plugins/builtin-plugin/react-attribute-plugin.ts"],"names":[],"mappings":"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","file":"react-attribute-plugin.js","sourcesContent":["import { Generator } from '../../common/generator';\nimport type { IGraphic, IPlugin, IPluginService, IRenderService, IDrawContext, IGroup } from '../../interface';\nimport { application } from '../../application';\nimport { DefaultAttribute } from '../../graphic';\nimport { HtmlAttributePlugin } from './html-attribute-plugin';\n\nexport class ReactAttributePlugin extends HtmlAttributePlugin implements IPlugin {\n  name: 'ReactAttributePlugin' = 'ReactAttributePlugin';\n  activeEvent: 'onRegister' = 'onRegister';\n  pluginService: IPluginService;\n  _uid: number = Generator.GenAutoIncrementId();\n  key: string = this.name + this._uid;\n\n  removeDom(graphic: IGraphic) {\n    if (graphic.bindDom && graphic.bindDom.size) {\n      // 删除dom\n      graphic.bindDom.forEach(item => {\n        item.root && item.root.unmount();\n      });\n      graphic.bindDom.clear();\n    }\n  }\n\n  renderGraphicHTML(graphic: IGraphic) {\n    const { react } = graphic.attribute;\n    if (!react) {\n      if (graphic.bindDom && graphic.bindDom.size) {\n        // 删除dom\n        graphic.bindDom.forEach(item => {\n          item.root && item.root.unmount();\n        });\n        graphic.bindDom.clear();\n      }\n      return;\n    }\n    const stage = graphic.stage;\n    if (!stage) {\n      return;\n    }\n    const ReactDOM = stage.params.ReactDOM;\n    const { element, container, width, height, style, anchorType = 'boundsLeftTop', pointerEvents } = react;\n    if (!(element && ReactDOM && ReactDOM.createRoot)) {\n      return;\n    }\n\n    if (!graphic.bindDom) {\n      graphic.bindDom = new Map();\n    }\n    const lastDom = graphic.bindDom.get(element);\n\n    let wrapGroup;\n    // 获取container的dom，默认为window的container\n    let nativeContainer;\n    // 如果存在了（dom存在，且container没有变化），就不做事情\n    if (lastDom && !(container && container !== lastDom.container)) {\n      wrapGroup = lastDom.wrapGroup;\n      nativeContainer = wrapGroup.parentNode;\n    } else {\n      // 清除上一次的dom\n      graphic.bindDom.forEach(({ wrapGroup }) => {\n        application.global.removeDom(wrapGroup);\n      });\n\n      const _container = container;\n      if (_container) {\n        if (typeof _container === 'string') {\n          nativeContainer = application.global.getElementById(_container);\n        } else {\n          nativeContainer = _container;\n        }\n      } else {\n        // nativeContainer = application.global.getRootElement();\n        nativeContainer = graphic.stage.window.getContainer();\n      }\n      // 创建wrapGroup\n      wrapGroup = application.global.createDom({ tagName: 'div', width, height, style, parent: nativeContainer });\n      if (wrapGroup) {\n        const root = ReactDOM.createRoot(wrapGroup);\n        root.render(element);\n        // wrapGroup.appendChild(nativeDom);\n        graphic.bindDom.set(element, { dom: element, container, wrapGroup: wrapGroup, root });\n      }\n    }\n\n    // 事件穿透\n    wrapGroup.style.pointerEvents = pointerEvents || 'none';\n    // 定位wrapGroup\n    if (!wrapGroup.style.position) {\n      wrapGroup.style.position = 'absolute';\n      nativeContainer.style.position = 'relative';\n    }\n    let left: number = 0;\n    let top: number = 0;\n    const b = graphic.globalAABBBounds;\n    if (anchorType === 'position' || b.empty()) {\n      const matrix = graphic.globalTransMatrix;\n      left = matrix.e;\n      top = matrix.f;\n    } else {\n      left = b.x1;\n      top = b.y1;\n    }\n    // 查看wrapGroup的位置\n    // const wrapGroupTL = application.global.getElementTopLeft(wrapGroup, false);\n    const containerTL = application.global.getElementTopLeft(nativeContainer, false);\n    const windowTL = stage.window.getTopLeft(false);\n    const offsetX = left + windowTL.left - containerTL.left;\n    const offsetTop = top + windowTL.top - containerTL.top;\n    // wrapGroup.style.transform = `translate(${offsetX}px, ${offsetTop}px)`;\n    wrapGroup.style.left = `${offsetX}px`;\n    wrapGroup.style.top = `${offsetTop}px`;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visactor/vrender-core",
-  "version": "0.18.5",
+  "version": "0.18.6",
   "description": "",
   "sideEffects": [
     "./src/modules.ts",
@@ -34,9 +34,9 @@
     "eslint": "~8.18.0",
     "vite": "3.2.6",
     "typescript": "4.9.5",
+    "@internal/bundler": "0.0.1",
     "@internal/eslint-config": "0.0.1",
-    "@internal/ts-config": "0.0.1",
-    "@internal/bundler": "0.0.1"
+    "@internal/ts-config": "0.0.1"
   },
   "keywords": [
     "VisActor",