@visactor/vrender 0.15.0-alpha.11 → 0.15.0-alpha.13

package/cjs/interface/window.d.ts

@@ -45,6 +45,10 @@ export interface IWindow extends Releaseable, Omit<IEventElement, 'on' | 'off' |
     getBoundingClientRect: () => IDomRectLike;
     isVisible: (bbox?: IBoundsLike) => boolean;
     onVisibleChange: (cb: (currentVisible: boolean) => void) => void;
+    getTopLeft: (baseWindow?: boolean) => {
+        top: number;
+        left: number;
+    };
 }
 export interface IWindowHandlerContribution extends IContribution<IWindow>, Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {
     container?: any;
@@ -73,4 +77,8 @@ export interface IWindowHandlerContribution extends IContribution<IWindow>, Omit
     clearViewBox: (vb: IBoundsLike, color?: string) => void;
     isVisible: (bbox?: IBoundsLike) => boolean;
     onVisibleChange: (cb: (currentVisible: boolean) => void) => void;
+    getTopLeft: (baseWindow?: boolean) => {
+        top: number;
+        left: number;
+    };
 }

package/cjs/interface/window.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interface/window.ts"],"names":[],"mappings":"","file":"window.js","sourcesContent":["// window为内部对象，属性均为stage传入\n\nimport type { IBoundsLike } from '@visactor/vutils';\nimport type { ICanvas } from './canvas';\nimport type { IContext2d } from './context';\nimport type { IDomRectLike, IEventElement, Releaseable } from './common';\nimport type { ISyncHook } from './sync-hook';\nimport type { IContribution } from './contribution';\nimport type { IGlobal } from './global';\n\n// TODO: 参数考虑动态注入，比如CreateWindow是native的专用接口\nexport interface IWindowParams {\n  canvas?: string | HTMLCanvasElement;\n  offscreen?: boolean;\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  dpr: number;\n  container?: string | HTMLElement;\n  canvasControled: boolean;\n  title: string;\n  CreateWindow?: (w: number, h: number, title: string) => void;\n}\n\nexport interface IWindow\n  extends Releaseable,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  hooks: {\n    onChange: ISyncHook<[number, number, number, number]>;\n  };\n  // 窗口的大小\n  width: number;\n  height: number;\n  // // 窗口的位置\n  // x: number;\n  // y: number;\n  // 窗口操作配置\n  resizable: boolean;\n  minHeight: number;\n  minWidth: number;\n  maxHeight: number;\n  maxWidth: number;\n  // 窗口配置\n  title: string;\n  dpr: number;\n  style: CSSStyleDeclaration | Record<string, any>;\n\n  create: (options: IWindowParams) => void;\n  setWindowHandler: (handler: IWindowHandlerContribution) => void;\n  setDpr: (dpr: number) => void;\n  resize: (w: number, h: number) => void;\n  configure: () => void;\n\n  // 获取上下文和canvas，可以是2d也可以是GL\n  getContext: () => IContext2d;\n  getNativeHandler: () => ICanvas;\n  getContainer: () => HTMLElement | any;\n  getImageBuffer: (type?: string) => any;\n\n  clearViewBox: (viewBox: IBoundsLike, color?: string) => void;\n\n  getBoundingClientRect: () => IDomRectLike;\n\n  isVisible: (bbox?: IBoundsLike) => boolean;\n\n  onVisibleChange: (cb: (currentVisible: boolean) => void) => void;\n}\n\nexport interface IWindowHandlerContribution\n  extends IContribution<IWindow>,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  container?: any;\n\n  configure: (window: IWindow, global: IGlobal) => void;\n  createWindow: (params: IWindowParams) => void;\n  releaseWindow: () => void;\n  resizeWindow: (width: number, height: number) => void;\n  setDpr: (dpr: number) => void;\n  getDpr: () => number;\n  getWH: () => { width: number; height: number };\n  getXY: () => { x: number; y: number };\n  getTitle: () => string;\n\n  // 获取上下文和canvas，可以是2d也可以是GL\n  getContext: () => IContext2d;\n  getNativeHandler: () => ICanvas;\n  getImageBuffer?: (type?: string) => any;\n  release: (...params: any) => void;\n\n  getStyle: () => CSSStyleDeclaration | Record<string, any>;\n  setStyle: (s: CSSStyleDeclaration | Record<string, any>) => void;\n\n  getBoundingClientRect: () => IDomRectLike;\n  clearViewBox: (vb: IBoundsLike, color?: string) => void;\n  isVisible: (bbox?: IBoundsLike) => boolean;\n\n  onVisibleChange: (cb: (currentVisible: boolean) => void) => void;\n}\n"]}
+{"version":3,"sources":["../src/interface/window.ts"],"names":[],"mappings":"","file":"window.js","sourcesContent":["// window为内部对象，属性均为stage传入\n\nimport type { IBoundsLike } from '@visactor/vutils';\nimport type { ICanvas } from './canvas';\nimport type { IContext2d } from './context';\nimport type { IDomRectLike, IEventElement, Releaseable } from './common';\nimport type { ISyncHook } from './sync-hook';\nimport type { IContribution } from './contribution';\nimport type { IGlobal } from './global';\n\n// TODO: 参数考虑动态注入，比如CreateWindow是native的专用接口\nexport interface IWindowParams {\n  canvas?: string | HTMLCanvasElement;\n  offscreen?: boolean;\n  width?: number;\n  height?: number;\n  x?: number;\n  y?: number;\n  dpr: number;\n  container?: string | HTMLElement;\n  canvasControled: boolean;\n  title: string;\n  CreateWindow?: (w: number, h: number, title: string) => void;\n}\n\nexport interface IWindow\n  extends Releaseable,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  hooks: {\n    onChange: ISyncHook<[number, number, number, number]>;\n  };\n  // 窗口的大小\n  width: number;\n  height: number;\n  // // 窗口的位置\n  // x: number;\n  // y: number;\n  // 窗口操作配置\n  resizable: boolean;\n  minHeight: number;\n  minWidth: number;\n  maxHeight: number;\n  maxWidth: number;\n  // 窗口配置\n  title: string;\n  dpr: number;\n  style: CSSStyleDeclaration | Record<string, any>;\n\n  create: (options: IWindowParams) => void;\n  setWindowHandler: (handler: IWindowHandlerContribution) => void;\n  setDpr: (dpr: number) => void;\n  resize: (w: number, h: number) => void;\n  configure: () => void;\n\n  // 获取上下文和canvas，可以是2d也可以是GL\n  getContext: () => IContext2d;\n  getNativeHandler: () => ICanvas;\n  getContainer: () => HTMLElement | any;\n  getImageBuffer: (type?: string) => any;\n\n  clearViewBox: (viewBox: IBoundsLike, color?: string) => void;\n\n  getBoundingClientRect: () => IDomRectLike;\n\n  isVisible: (bbox?: IBoundsLike) => boolean;\n\n  onVisibleChange: (cb: (currentVisible: boolean) => void) => void;\n\n  getTopLeft: (baseWindow?: boolean) => { top: number; left: number };\n}\n\nexport interface IWindowHandlerContribution\n  extends IContribution<IWindow>,\n    Omit<IEventElement, 'on' | 'off' | 'once' | 'emit' | 'removeAllListeners'> {\n  container?: any;\n\n  configure: (window: IWindow, global: IGlobal) => void;\n  createWindow: (params: IWindowParams) => void;\n  releaseWindow: () => void;\n  resizeWindow: (width: number, height: number) => void;\n  setDpr: (dpr: number) => void;\n  getDpr: () => number;\n  getWH: () => { width: number; height: number };\n  getXY: () => { x: number; y: number };\n  getTitle: () => string;\n\n  // 获取上下文和canvas，可以是2d也可以是GL\n  getContext: () => IContext2d;\n  getNativeHandler: () => ICanvas;\n  getImageBuffer?: (type?: string) => any;\n  release: (...params: any) => void;\n\n  getStyle: () => CSSStyleDeclaration | Record<string, any>;\n  setStyle: (s: CSSStyleDeclaration | Record<string, any>) => void;\n\n  getBoundingClientRect: () => IDomRectLike;\n  clearViewBox: (vb: IBoundsLike, color?: string) => void;\n  isVisible: (bbox?: IBoundsLike) => boolean;\n\n  onVisibleChange: (cb: (currentVisible: boolean) => void) => void;\n  getTopLeft: (baseWindow?: boolean) => { top: number; left: number };\n}\n"]}

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

@@ -34,7 +34,9 @@ class HtmlAttributePlugin {
     }
     renderGraphicHTML(graphic) {
         const {html: html} = graphic.attribute;
-        if (!html) return;
+        if (!html) return void (graphic.bindDom && graphic.bindDom.size && (graphic.bindDom.forEach((item => {
+            item.dom && item.dom.parentElement.removeChild(item.dom);
+        })), 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;
@@ -58,7 +60,8 @@ class HtmlAttributePlugin {
             dom: nativeDom,
             container: container,
             wrapGroup: wrapGroup
-        })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute");
+        })), wrapGroup.style.pointerEvents = "none", wrapGroup.style.position || (wrapGroup.style.position = "absolute", 
+        nativeContainer.style.position = "relative");
         let left = 0, top = 0;
         if ("position" === anchorType) {
             const matrix = graphic.transMatrix;
@@ -67,7 +70,8 @@ class HtmlAttributePlugin {
             const b = graphic.AABBBounds;
             left = b.x1, top = b.y1;
         }
-        wrapGroup.style.left = `${left}px`, wrapGroup.style.top = `${top}px`;
+        const containerTL = application_1.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`;
     }
 }
 

package/cjs/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  }\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      this.renderGraphicHTML(g);\n    });\n  }\n\n  renderGraphicHTML(graphic: IGraphic) {\n    const { html } = graphic.attribute;\n    if (!html) {\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    // 如果存在了（dom存在，且container没有变化），就跳过\n    if (lastDom && !(container && container !== lastDom.container)) {\n      return;\n    }\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/xml').firstChild as any;\n    } else {\n      nativeDom = dom;\n    }\n    // 获取container的dom，默认为window的container\n    let nativeContainer;\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    const 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    wrapGroup.style.pointerEvents = 'none';\n    // 定位wrapGroup\n    if (!wrapGroup.style.position) {\n      wrapGroup.style.position = 'absolute';\n    }\n    let left: number = 0;\n    let top: number = 0;\n    if (anchorType === 'position') {\n      const matrix = graphic.transMatrix;\n      left = matrix.e;\n      top = matrix.f;\n    } else {\n      const b = graphic.AABBBounds;\n      left = b.x1;\n      top = b.y1;\n    }\n    wrapGroup.style.left = `${left}px`;\n    wrapGroup.style.top = `${top}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: '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  }\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      this.renderGraphicHTML(g);\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    // 如果存在了（dom存在，且container没有变化），就跳过\n    if (lastDom && !(container && container !== lastDom.container)) {\n      return;\n    }\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/xml').firstChild as any;\n    } else {\n      nativeDom = dom;\n    }\n    // 获取container的dom，默认为window的container\n    let nativeContainer;\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    const 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    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    if (anchorType === 'position') {\n      const matrix = graphic.transMatrix;\n      left = matrix.e;\n      top = matrix.f;\n    } else {\n      const b = graphic.AABBBounds;\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/dist/index.js

@@ -6362,6 +6362,24 @@
 	        }
 	        return this.envContribution.createDom(params);
 	    }
+	    getElementTop(dom, baseWindow = false) {
+	        if (!this._env) {
+	            this.setEnv('browser');
+	        }
+	        return this.envContribution.getElementTop(dom, baseWindow);
+	    }
+	    getElementLeft(dom, baseWindow = false) {
+	        if (!this._env) {
+	            this.setEnv('browser');
+	        }
+	        return this.envContribution.getElementLeft(dom, baseWindow);
+	    }
+	    getElementTopLeft(dom, baseWindow = false) {
+	        if (!this._env) {
+	            this.setEnv('browser');
+	        }
+	        return this.envContribution.getElementTopLeft(dom, baseWindow);
+	    }
 	};
 	exports.DefaultGlobal = __decorate([
 	    injectable(),
@@ -20579,6 +20597,7 @@
 	        const handler = container.getNamed(WindowHandlerContribution, global.env);
 	        handler.configure(this, global);
 	        this.actived = true;
+	        this._handler;
 	    }
 	    get style() {
 	        return this._handler.getStyle();
@@ -20645,6 +20664,9 @@
 	    onVisibleChange(cb) {
 	        return this._handler.onVisibleChange(cb);
 	    }
+	    getTopLeft(baseWindow) {
+	        return this._handler.getTopLeft(baseWindow);
+	    }
 	};
 	__decorate([
 	    postConstruct(),
@@ -21869,7 +21891,7 @@
 	            return false;
 	        }
 	        this.tryUpdateAABBBounds();
-	        return this.clipedText !== attribute.text;
+	        return this.clipedText !== attribute.text.toString();
 	    }
 	    get multilineLayout() {
 	        if (!Array.isArray(this.attribute.text)) {
@@ -32098,6 +32120,15 @@
 	            };
 	        });
 	    }
+	    getElementTop(dom, baseWindow) {
+	        return 0;
+	    }
+	    getElementLeft(dom, baseWindow) {
+	        return 0;
+	    }
+	    getElementTopLeft(dom, baseWindow) {
+	        return { top: 0, left: 0 };
+	    }
 	};
 	exports.BaseEnvContribution = __decorate([
 	    injectable()
@@ -32324,6 +32355,38 @@
 	    release(...params) {
 	        return;
 	    }
+	    getElementTop(element, baseWindow) {
+	        let actualTop = element.offsetTop;
+	        let current = element.offsetParent;
+	        while (current !== null) {
+	            actualTop += current.offsetTop;
+	            current = current.offsetParent;
+	        }
+	        return actualTop;
+	    }
+	    getElementLeft(element, baseWindow) {
+	        let actualLeft = element.offsetLeft;
+	        let current = element.offsetParent;
+	        while (current !== null) {
+	            actualLeft += current.offsetLeft;
+	            current = current.offsetParent;
+	        }
+	        return actualLeft;
+	    }
+	    getElementTopLeft(element, baseWindow) {
+	        let actualTop = element.offsetTop;
+	        let actualLeft = element.offsetLeft;
+	        let current = element.offsetParent;
+	        while (current !== null) {
+	            actualTop += current.offsetTop;
+	            actualLeft += current.offsetLeft;
+	            current = current.offsetParent;
+	        }
+	        return {
+	            top: actualTop,
+	            left: actualLeft
+	        };
+	    }
 	};
 	BrowserEnvContribution = __decorate([
 	    injectable(),
@@ -33061,6 +33124,12 @@
 	    onVisibleChange(cb) {
 	        return;
 	    }
+	    getTopLeft(baseWindow) {
+	        return {
+	            top: 0,
+	            left: 0
+	        };
+	    }
 	};
 	exports.BaseWindowHandlerContribution = __decorate([
 	    injectable(),
@@ -33277,6 +33346,9 @@
 	    onVisibleChange(cb) {
 	        this._onVisibleChangeCb = cb;
 	    }
+	    getTopLeft(baseWindow) {
+	        return this.global.getElementTopLeft(this.canvas.nativeCanvas, baseWindow);
+	    }
 	};
 	BrowserWindowHandlerContribution.env = 'browser';
 	BrowserWindowHandlerContribution = __decorate([
@@ -38702,6 +38774,12 @@
 	    renderGraphicHTML(graphic) {
 	        const { html } = graphic.attribute;
 	        if (!html) {
+	            if (graphic.bindDom && graphic.bindDom.size) {
+	                graphic.bindDom.forEach(item => {
+	                    item.dom && item.dom.parentElement.removeChild(item.dom);
+	                });
+	                graphic.bindDom.clear();
+	            }
 	            return;
 	        }
 	        const stage = graphic.stage;
@@ -38747,6 +38825,7 @@
 	        wrapGroup.style.pointerEvents = 'none';
 	        if (!wrapGroup.style.position) {
 	            wrapGroup.style.position = 'absolute';
+	            nativeContainer.style.position = 'relative';
 	        }
 	        let left = 0;
 	        let top = 0;
@@ -38760,8 +38839,12 @@
 	            left = b.x1;
 	            top = b.y1;
 	        }
-	        wrapGroup.style.left = `${left}px`;
-	        wrapGroup.style.top = `${top}px`;
+	        const containerTL = application.global.getElementTopLeft(nativeContainer, false);
+	        const windowTL = stage.window.getTopLeft(false);
+	        const offsetX = left + windowTL.left - containerTL.left;
+	        const offsetTop = top + windowTL.top - containerTL.top;
+	        wrapGroup.style.left = `${offsetX}px`;
+	        wrapGroup.style.top = `${offsetTop}px`;
 	    }
 	}
 
@@ -39546,6 +39629,7 @@
 	        if (this.supportInteractiveLayer && !this.interactiveLayer) {
 	            this.interactiveLayer = this.createLayer();
 	            this.interactiveLayer.name = '_builtin_interactive';
+	            this.nextFrameRenderLayerSet.add(this.interactiveLayer);
 	        }
 	    }
 	    clearViewBox(color) {
@@ -39951,7 +40035,7 @@
 	}
 	const Fragment = Group;
 
-	const version = "0.15.0-alpha.11";
+	const version = "0.15.0-alpha.13";
 
 	exports.ACustomAnimate = ACustomAnimate;
 	exports.ARC3D_NUMBER_TYPE = ARC3D_NUMBER_TYPE;