@visactor/vrender 0.15.0-alpha.0 → 0.15.0-alpha.10

package/es/core/contributions/window/base-contribution.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/contributions/window/base-contribution.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAgB/C,IAAe,6BAA6B,GAA5C,MAAe,6BAA6B;IAKjD;QACE,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC;IAID,QAAQ,CAAC,EAAkB;QACzB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACxB,CAAC;IAED,SAAS,CAAC,MAAe,EAAE,MAAe;QACxC,IAAI,MAAM,CAAC,GAAG,KAAK,IAAI,CAAC,IAAI,EAAE;YAC5B,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC;IACD,OAAO,CAAC,GAAG,MAAW;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;CAqCF,CAAA;AA3DqB,6BAA6B;IADlD,UAAU,EAAE;;GACS,6BAA6B,CA2DlD;SA3DqB,6BAA6B","file":"base-contribution.js","sourcesContent":["import { injectable } from 'inversify';\nimport { Generator } from '../../../common/generator';\nimport type {\n  ICanvas,\n  IContext2d,\n  IDomRectLike,\n  EnvType,\n  IGlobal,\n  IWindowHandlerContribution,\n  IWindow,\n  IWindowParams\n} from '../../../interface';\nimport type { IBoundsLike } from '@visactor/vutils';\n\ntype OnchangeCbType = (params: { x: number; y: number; width: number; height: number }) => void;\n\n@injectable()\nexport abstract class BaseWindowHandlerContribution implements IWindowHandlerContribution {\n  declare type: EnvType;\n\n  declare _uid: number;\n\n  constructor() {\n    this._uid = Generator.GenAutoIncrementId();\n  }\n\n  protected declare _onChangeCb?: OnchangeCbType;\n\n  onChange(cb: OnchangeCbType) {\n    this._onChangeCb = cb;\n  }\n\n  configure(window: IWindow, global: IGlobal) {\n    if (global.env === this.type) {\n      window.setWindowHandler(this);\n    }\n  }\n  release(...params: any) {\n    this.releaseWindow();\n  }\n  abstract createWindow(params: IWindowParams): void;\n  abstract releaseWindow(): void;\n  abstract setDpr(dpr: number): void;\n  abstract resizeWindow(width: number, height: number): void;\n  abstract getContext(): IContext2d;\n  abstract getWH(): { width: number; height: number };\n  abstract getTitle(): string;\n  abstract getXY(): { x: number; y: number };\n  abstract getNativeHandler(): ICanvas | any;\n  abstract getDpr(): number;\n  abstract clearViewBox(vb: IBoundsLike, color?: string): void;\n  abstract addEventListener<K extends keyof DocumentEventMap>(\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  abstract addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  abstract removeEventListener<K extends keyof DocumentEventMap>(\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | EventListenerOptions\n  ): void;\n  abstract removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions\n  ): void;\n  abstract dispatchEvent(event: any): boolean;\n\n  abstract getStyle(): CSSStyleDeclaration | Record<string, any>;\n  abstract setStyle(style: CSSStyleDeclaration | Record<string, any>): void;\n  abstract getBoundingClientRect(): IDomRectLike;\n}\n"]}
+{"version":3,"sources":["../../src/core/contributions/window/base-contribution.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAgB/C,IAAe,6BAA6B,GAA5C,MAAe,6BAA6B;IAKjD;QACE,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC;IAID,QAAQ,CAAC,EAAkB;QACzB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACxB,CAAC;IAED,SAAS,CAAC,MAAe,EAAE,MAAe;QACxC,IAAI,MAAM,CAAC,GAAG,KAAK,IAAI,CAAC,IAAI,EAAE;YAC5B,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;SAC/B;IACH,CAAC;IACD,OAAO,CAAC,GAAG,MAAW;QACpB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAsCD,SAAS,CAAC,IAAkB;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,eAAe,CAAC,EAAqC;QACnD,OAAO;IACT,CAAC;CACF,CAAA;AAnEqB,6BAA6B;IADlD,UAAU,EAAE;;GACS,6BAA6B,CAmElD;SAnEqB,6BAA6B","file":"base-contribution.js","sourcesContent":["import { injectable } from 'inversify';\nimport { Generator } from '../../../common/generator';\nimport type {\n  ICanvas,\n  IContext2d,\n  IDomRectLike,\n  EnvType,\n  IGlobal,\n  IWindowHandlerContribution,\n  IWindow,\n  IWindowParams\n} from '../../../interface';\nimport type { IBoundsLike } from '@visactor/vutils';\n\ntype OnchangeCbType = (params: { x: number; y: number; width: number; height: number }) => void;\n\n@injectable()\nexport abstract class BaseWindowHandlerContribution implements IWindowHandlerContribution {\n  declare type: EnvType;\n\n  declare _uid: number;\n\n  constructor() {\n    this._uid = Generator.GenAutoIncrementId();\n  }\n\n  protected declare _onChangeCb?: OnchangeCbType;\n\n  onChange(cb: OnchangeCbType) {\n    this._onChangeCb = cb;\n  }\n\n  configure(window: IWindow, global: IGlobal) {\n    if (global.env === this.type) {\n      window.setWindowHandler(this);\n    }\n  }\n  release(...params: any) {\n    this.releaseWindow();\n  }\n  abstract createWindow(params: IWindowParams): void;\n  abstract releaseWindow(): void;\n  abstract setDpr(dpr: number): void;\n  abstract resizeWindow(width: number, height: number): void;\n  abstract getContext(): IContext2d;\n  abstract getWH(): { width: number; height: number };\n  abstract getTitle(): string;\n  abstract getXY(): { x: number; y: number };\n  abstract getNativeHandler(): ICanvas | any;\n  abstract getDpr(): number;\n  abstract clearViewBox(vb: IBoundsLike, color?: string): void;\n  abstract addEventListener<K extends keyof DocumentEventMap>(\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  abstract addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  abstract removeEventListener<K extends keyof DocumentEventMap>(\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | EventListenerOptions\n  ): void;\n  abstract removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions\n  ): void;\n  abstract dispatchEvent(event: any): boolean;\n\n  abstract getStyle(): CSSStyleDeclaration | Record<string, any>;\n  abstract setStyle(style: CSSStyleDeclaration | Record<string, any>): void;\n  abstract getBoundingClientRect(): IDomRectLike;\n\n  isVisible(bbox?: IBoundsLike) {\n    return true;\n  }\n\n  onVisibleChange(cb: (currentVisible: boolean) => void) {\n    return;\n  }\n}\n"]}

package/es/core/contributions/window/browser-contribution.d.ts

@@ -7,6 +7,8 @@ export declare class BrowserWindowHandlerContribution extends BaseWindowHandlerC
     type: EnvType;
     canvas: ICanvas;
     observer?: MutationObserver;
+    protected _canvasIsIntersecting: boolean;
+    protected _onVisibleChangeCb: (currentVisible: boolean) => void;
     get container(): HTMLElement | null;
     constructor(global: IGlobal);
     getTitle(): string;
@@ -19,6 +21,9 @@ export declare class BrowserWindowHandlerContribution extends BaseWindowHandlerC
         y: number;
     };
     createWindow(params: IWindowParams): void;
+    protected postInit(): void;
+    isElementVisible(el: HTMLElement): boolean;
+    protected observerCanvas(): void;
     private createWindowByConfig;
     private createWindowByCanvas;
     releaseWindow(): void;
@@ -34,4 +39,6 @@ export declare class BrowserWindowHandlerContribution extends BaseWindowHandlerC
     setStyle(style: CSSStyleDeclaration | Record<string, any>): void;
     getBoundingClientRect(): IDomRectLike;
     clearViewBox(vb: IBoundsLike, color?: string): void;
+    isVisible(bbox?: IBoundsLike): boolean;
+    onVisibleChange(cb: (currentVisible: boolean) => void): void;
 }

package/es/core/contributions/window/browser-contribution.js

@@ -25,7 +25,7 @@ let BrowserWindowHandlerContribution = class extends BaseWindowHandlerContributi
         return this.canvas.nativeCanvas.parentElement;
     }
     constructor(global) {
-        super(), this.global = global, this.type = "browser";
+        super(), this.global = global, this.type = "browser", this._canvasIsIntersecting = !0;
     }
     getTitle() {
         return this.canvas.id.toString();
@@ -40,7 +40,29 @@ let BrowserWindowHandlerContribution = class extends BaseWindowHandlerContributi
         return this.canvas.nativeCanvas.getBoundingClientRect();
     }
     createWindow(params) {
-        params.canvas ? this.createWindowByCanvas(params) : this.createWindowByConfig(params);
+        params.canvas ? this.createWindowByCanvas(params) : this.createWindowByConfig(params), 
+        this.postInit();
+    }
+    postInit() {
+        try {
+            this.observerCanvas();
+        } catch (err) {
+            console.error("发生错误，该环境不存在IntersectionObserver");
+        }
+    }
+    isElementVisible(el) {
+        const rect = el.getBoundingClientRect(), vWidth = window.innerWidth || document.documentElement.clientWidth, vHeight = window.innerHeight || document.documentElement.clientHeight;
+        return !(rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight);
+    }
+    observerCanvas() {
+        this._canvasIsIntersecting = this.isElementVisible(this.canvas.nativeCanvas);
+        const observer = new IntersectionObserver(((entries, observer) => {
+            entries.forEach((entry => {
+                this._canvasIsIntersecting !== entry.isIntersecting ? (this._canvasIsIntersecting = entry.isIntersecting, 
+                this._onVisibleChangeCb(entry.isIntersecting)) : this._canvasIsIntersecting = entry.isIntersecting;
+            }));
+        }));
+        observer && observer.observe(this.canvas.nativeCanvas);
     }
     createWindowByConfig(params) {
         const nativeCanvas = this.global.createCanvas({
@@ -139,6 +161,12 @@ let BrowserWindowHandlerContribution = class extends BaseWindowHandlerContributi
         context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1), color && (context.fillStyle = color, 
         context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1)), context.nativeContext.restore();
     }
+    isVisible(bbox) {
+        return this._canvasIsIntersecting;
+    }
+    onVisibleChange(cb) {
+        this._onVisibleChangeCb = cb;
+    }
 };
 
 BrowserWindowHandlerContribution.env = "browser", BrowserWindowHandlerContribution = __decorate([ injectable(), __param(0, inject(VGlobal)), __metadata("design:paramtypes", [ Object ]) ], BrowserWindowHandlerContribution);

package/es/core/contributions/window/browser-contribution.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/contributions/window/browser-contribution.ts"],"names":[],"mappings":"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","file":"browser-contribution.js","sourcesContent":["import { inject, injectable } from 'inversify';\nimport { BrowserCanvas } from '../../../canvas/contributions/browser';\nimport { Generator } from '../../../common/generator';\nimport { BaseWindowHandlerContribution } from './base-contribution';\nimport type {\n  IContext2d,\n  ICanvas,\n  IDomRectLike,\n  EnvType,\n  IGlobal,\n  IWindowHandlerContribution,\n  IWindowParams\n} from '../../../interface';\nimport type { IBoundsLike } from '@visactor/vutils';\nimport { VGlobal } from '../../../constants';\n\n@injectable()\nexport class BrowserWindowHandlerContribution\n  extends BaseWindowHandlerContribution\n  implements IWindowHandlerContribution\n{\n  static env: EnvType = 'browser';\n\n  type: EnvType = 'browser';\n\n  canvas: ICanvas;\n\n  observer?: MutationObserver;\n\n  get container(): HTMLElement | null {\n    return this.canvas.nativeCanvas.parentElement;\n  }\n\n  constructor(@inject(VGlobal) private readonly global: IGlobal) {\n    super();\n  }\n\n  getTitle(): string {\n    return this.canvas.id.toString();\n  }\n\n  getWH(): { width: number; height: number } {\n    return {\n      width: this.canvas.width / (this.canvas.dpr || 1),\n      height: this.canvas.height / (this.canvas.dpr || 1)\n    };\n  }\n\n  getXY(): { x: number; y: number } {\n    return this.canvas.nativeCanvas.getBoundingClientRect();\n  }\n\n  createWindow(params: IWindowParams): void {\n    // 如果没有传入canvas，那么就创建一个canvas\n    if (!params.canvas) {\n      this.createWindowByConfig(params);\n    } else {\n      this.createWindowByCanvas(params);\n    }\n\n    // this.bindOnChangeEvent();\n  }\n\n  // private bindOnChangeEvent() {\n  //   const { nativeCanvas } = this.canvas;\n  //   const observer = new MutationObserver((mutations, observer) => {\n  //     mutations.forEach((mutaion) => {\n  //       console.log(mutaion);\n  //     })\n  //   });\n  //   observer.observe(nativeCanvas, { attributes: true, childList: true, subtree: true })\n  // }\n\n  private createWindowByConfig(params: IWindowParams) {\n    // 创建canvas\n    const nativeCanvas = this.global.createCanvas({\n      width: params.width,\n      height: params.height\n    });\n    // 保存到dom中\n    let container: HTMLElement | null;\n    if (typeof params.container === 'string') {\n      container = this.global.getElementById(params.container);\n    } else if (params.container) {\n      container = params.container;\n    } else {\n      container = this.global.getRootElement();\n    }\n    if (!container) {\n      throw new Error('发生错误，containerId可能传入有误');\n    }\n\n    if (!params.offscreen) {\n      container.appendChild(nativeCanvas);\n    } else {\n      container = null;\n    }\n\n    // 绑定\n    const options = {\n      width: params.width,\n      height: params.height,\n      dpr: params.dpr,\n      nativeCanvas,\n      container,\n      id: Generator.GenAutoIncrementId().toString(),\n      canvasControled: true\n    };\n    this.canvas = new BrowserCanvas(options);\n    // 应用位置属性\n    // window上的不需要设置position\n    // this.canvas.applyPosition();\n    // this.canvas.resetStyle(options);\n  }\n  private createWindowByCanvas(params: IWindowParams) {\n    // 获取canvas\n    let canvas: HTMLCanvasElement | null;\n    if (typeof params.canvas === 'string') {\n      canvas = this.global.getElementById(params.canvas) as HTMLCanvasElement | null;\n      if (!canvas) {\n        throw new Error('canvasId 参数不正确，请确认canvas存在并插入dom');\n      }\n    } else {\n      canvas = params!.canvas as HTMLCanvasElement | null;\n    }\n    if (!canvas) {\n      throw new Error('发生错误，传入的canvas不正确');\n    }\n\n    // 如果没有传入wh，或者是不受控制的canvas，那就用canvas的原始wh\n    let width = params.width;\n    let height = params.height;\n    if (width == null || height == null || !params.canvasControled) {\n      const data = canvas.getBoundingClientRect();\n      width = data.width;\n      height = data.height;\n    }\n    // 如果没有dpr，就使用canvas的原始dpr\n    let dpr = params.dpr;\n    if (params.canvasControled === false) {\n      if (dpr) {\n        console.warn('canvasControled为false后，dpr参数将无效');\n      }\n      dpr = null;\n    }\n    if (dpr == null) {\n      const ctx = canvas.getContext('2d');\n      // 兼容XTable\n      dpr = (ctx as any).pixelRatio ?? canvas.width / width;\n    }\n    this.canvas = new BrowserCanvas({\n      width: width,\n      height: height,\n      dpr: dpr,\n      nativeCanvas: canvas,\n      canvasControled: params.canvasControled\n    });\n    // if (params.canvasControled) {\n    //   this.canvas.resetStyle({\n    //     width,\n    //     height,\n    //     dpr\n    //   });\n    // }\n  }\n  releaseWindow(): void {\n    this.canvas.release();\n  }\n  resizeWindow(width: number, height: number): void {\n    this.canvas.resize(width, height);\n  }\n  setDpr(dpr: number): void {\n    this.canvas.dpr = dpr;\n  }\n\n  getContext(): IContext2d {\n    return this.canvas.getContext();\n  }\n  getNativeHandler(): ICanvas {\n    return this.canvas;\n  }\n  getDpr(): number {\n    return this.canvas.dpr;\n  }\n\n  addEventListener<K extends keyof DocumentEventMap>(\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void {\n    return (this.canvas.nativeCanvas as HTMLCanvasElement).addEventListener(type, listener, options);\n  }\n  removeEventListener<K extends keyof DocumentEventMap>(\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | EventListenerOptions\n  ): void;\n  removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions\n  ): void {\n    return (this.canvas.nativeCanvas as HTMLCanvasElement).removeEventListener(type, listener, options);\n  }\n  dispatchEvent(event: any): boolean {\n    return (this.canvas.nativeCanvas as HTMLCanvasElement).dispatchEvent(event);\n  }\n\n  getStyle(): CSSStyleDeclaration | Record<string, any> {\n    return this.canvas.nativeCanvas.style;\n  }\n  setStyle(style: CSSStyleDeclaration | Record<string, any>) {\n    this.canvas.nativeCanvas.style = style;\n  }\n\n  getBoundingClientRect(): IDomRectLike {\n    const c = this.canvas.nativeCanvas as HTMLCanvasElement;\n    const wh = this.getWH();\n    if (!c.parentElement) {\n      return {\n        x: 0,\n        y: 0,\n        width: wh.width,\n        height: wh.height,\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0\n      };\n    }\n    return this.canvas.nativeCanvas.getBoundingClientRect();\n  }\n\n  clearViewBox(vb: IBoundsLike, color?: string): void {\n    const context = this.getContext();\n    const dpr = this.getDpr();\n    context.nativeContext.save();\n    (context.nativeContext as CanvasRenderingContext2D).setTransform(dpr, 0, 0, dpr, 0, 0);\n    context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);\n    if (color) {\n      context.fillStyle = color;\n      context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);\n    }\n    context.nativeContext.restore();\n  }\n}\n"]}
+{"version":3,"sources":["../../src/core/contributions/window/browser-contribution.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,6BAA6B,EAAE,MAAM,qBAAqB,CAAC;AAWpE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAGtC,IAAM,gCAAgC,GAAtC,MAAM,gCACX,SAAQ,6BAA6B;IAcrC,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC;IAChD,CAAC;IAED,YAA8C,MAAe;QAC3D,KAAK,EAAE,CAAC;QADoC,WAAM,GAAN,MAAM,CAAS;QAb7D,SAAI,GAAY,SAAS,CAAC;QAexB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;IACpC,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC;IACnC,CAAC;IAED,KAAK;QACH,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;YACjD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;SACpD,CAAC;IACJ,CAAC;IAED,KAAK;QACH,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAC1D,CAAC;IAED,YAAY,CAAC,MAAqB;QAEhC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;YAClB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;SACnC;aAAM;YACL,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;SACnC;QAED,IAAI,CAAC,QAAQ,EAAE,CAAC;IAGlB,CAAC;IAES,QAAQ;QAChB,IAAI;YACF,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;QAAC,OAAO,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,iCAAiC,CAAC,CAAC;SAClD;IACH,CAAC;IAED,gBAAgB,CAAC,EAAe;QAC9B,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;QACzE,MAAM,OAAO,GAAG,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QAE5E,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,GAAG,MAAM,IAAI,IAAI,CAAC,GAAG,GAAG,OAAO,EAAE;YACjF,OAAO,KAAK,CAAC;SACd;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAES,cAAc;QACtB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAC7E,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YAC9D,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,IAAI,IAAI,CAAC,qBAAqB,KAAK,KAAK,CAAC,cAAc,EAAE;oBACvD,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC;oBAClD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;iBAC/C;qBAAM;oBACL,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC;iBACnD;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO;SACR;QACD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAC7C,CAAC;IAYO,oBAAoB,CAAC,MAAqB;QAEhD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;YAC5C,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,MAAM,EAAE,MAAM,CAAC,MAAM;SACtB,CAAC,CAAC;QAEH,IAAI,SAA6B,CAAC;QAClC,IAAI,OAAO,MAAM,CAAC,SAAS,KAAK,QAAQ,EAAE;YACxC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SAC1D;aAAM,IAAI,MAAM,CAAC,SAAS,EAAE;YAC3B,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;SAC9B;aAAM;YACL,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC;SAC1C;QACD,IAAI,CAAC,SAAS,EAAE;YACd,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;SAC3C;QAED,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;YACrB,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;SACrC;aAAM;YACL,SAAS,GAAG,IAAI,CAAC;SAClB;QAGD,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,GAAG,EAAE,MAAM,CAAC,GAAG;YACf,YAAY;YACZ,SAAS;YACT,EAAE,EAAE,SAAS,CAAC,kBAAkB,EAAE,CAAC,QAAQ,EAAE;YAC7C,eAAe,EAAE,IAAI;SACtB,CAAC;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC;IAK3C,CAAC;IACO,oBAAoB,CAAC,MAAqB;;QAEhD,IAAI,MAAgC,CAAC;QACrC,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,QAAQ,EAAE;YACrC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,CAA6B,CAAC;YAC/E,IAAI,CAAC,MAAM,EAAE;gBACX,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;aACrD;SACF;aAAM;YACL,MAAM,GAAG,MAAO,CAAC,MAAkC,CAAC;SACrD;QACD,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;SACtC;QAGD,IAAI,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QACzB,IAAI,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAC3B,IAAI,KAAK,IAAI,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE;YAC9D,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;YAC5C,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACnB,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;SACtB;QAED,IAAI,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC;QACrB,IAAI,MAAM,CAAC,eAAe,KAAK,KAAK,EAAE;YACpC,IAAI,GAAG,EAAE;gBACP,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;aACjD;YACD,GAAG,GAAG,IAAI,CAAC;SACZ;QACD,IAAI,GAAG,IAAI,IAAI,EAAE;YACf,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAEpC,GAAG,GAAG,MAAC,GAAW,CAAC,UAAU,mCAAI,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;SACvD;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,CAAC;YAC9B,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,GAAG;YACR,YAAY,EAAE,MAAM;YACpB,eAAe,EAAE,MAAM,CAAC,eAAe;SACxC,CAAC,CAAC;IAQL,CAAC;IACD,aAAa;QACX,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;IACxB,CAAC;IACD,YAAY,CAAC,KAAa,EAAE,MAAc;QACxC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IACpC,CAAC;IACD,MAAM,CAAC,GAAW;QAChB,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,CAAC;IACxB,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;IAClC,CAAC;IACD,gBAAgB;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IACD,MAAM;QACJ,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;IACzB,CAAC;IAOD,gBAAgB,CACd,IAAY,EACZ,QAA4C,EAC5C,OAA2C;QAE3C,OAAQ,IAAI,CAAC,MAAM,CAAC,YAAkC,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnG,CAAC;IAMD,mBAAmB,CACjB,IAAY,EACZ,QAA4C,EAC5C,OAAwC;QAExC,OAAQ,IAAI,CAAC,MAAM,CAAC,YAAkC,CAAC,mBAAmB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;IACtG,CAAC;IACD,aAAa,CAAC,KAAU;QACtB,OAAQ,IAAI,CAAC,MAAM,CAAC,YAAkC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9E,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC;IACxC,CAAC;IACD,QAAQ,CAAC,KAAgD;QACvD,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;IACzC,CAAC;IAED,qBAAqB;QACnB,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,YAAiC,CAAC;QACxD,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACxB,IAAI,CAAC,CAAC,CAAC,aAAa,EAAE;YACpB,OAAO;gBACL,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,CAAC;gBACJ,KAAK,EAAE,EAAE,CAAC,KAAK;gBACf,MAAM,EAAE,EAAE,CAAC,MAAM;gBACjB,IAAI,EAAE,CAAC;gBACP,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;aACV,CAAC;SACH;QACD,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAC1D,CAAC;IAED,YAAY,CAAC,EAAe,EAAE,KAAc;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAClC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1B,OAAO,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;QAC5B,OAAO,CAAC,aAA0C,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACvF,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;QAC9D,IAAI,KAAK,EAAE;YACT,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;YAC1B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC;SAC9D;QACD,OAAO,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;IAClC,CAAC;IAED,SAAS,CAAC,IAAkB;QAC1B,OAAO,IAAI,CAAC,qBAAqB,CAAC;IACpC,CAAC;IAED,eAAe,CAAC,EAAqC;QACnD,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC;IAC/B,CAAC;;AAxRM,oCAAG,GAAY,SAAS,CAAC;AAJrB,gCAAgC;IAD5C,UAAU,EAAE;IAoBE,WAAA,MAAM,CAAC,OAAO,CAAC,CAAA;;GAnBjB,gCAAgC,CA6R5C;SA7RY,gCAAgC","file":"browser-contribution.js","sourcesContent":["import { inject, injectable } from 'inversify';\nimport { BrowserCanvas } from '../../../canvas/contributions/browser';\nimport { Generator } from '../../../common/generator';\nimport { BaseWindowHandlerContribution } from './base-contribution';\nimport type {\n  IContext2d,\n  ICanvas,\n  IDomRectLike,\n  EnvType,\n  IGlobal,\n  IWindowHandlerContribution,\n  IWindowParams\n} from '../../../interface';\nimport type { IBoundsLike } from '@visactor/vutils';\nimport { VGlobal } from '../../../constants';\n\n@injectable()\nexport class BrowserWindowHandlerContribution\n  extends BaseWindowHandlerContribution\n  implements IWindowHandlerContribution\n{\n  static env: EnvType = 'browser';\n\n  type: EnvType = 'browser';\n\n  canvas: ICanvas;\n\n  observer?: MutationObserver;\n\n  protected _canvasIsIntersecting: boolean;\n  protected _onVisibleChangeCb: (currentVisible: boolean) => void;\n\n  get container(): HTMLElement | null {\n    return this.canvas.nativeCanvas.parentElement;\n  }\n\n  constructor(@inject(VGlobal) private readonly global: IGlobal) {\n    super();\n    this._canvasIsIntersecting = true;\n  }\n\n  getTitle(): string {\n    return this.canvas.id.toString();\n  }\n\n  getWH(): { width: number; height: number } {\n    return {\n      width: this.canvas.width / (this.canvas.dpr || 1),\n      height: this.canvas.height / (this.canvas.dpr || 1)\n    };\n  }\n\n  getXY(): { x: number; y: number } {\n    return this.canvas.nativeCanvas.getBoundingClientRect();\n  }\n\n  createWindow(params: IWindowParams): void {\n    // 如果没有传入canvas，那么就创建一个canvas\n    if (!params.canvas) {\n      this.createWindowByConfig(params);\n    } else {\n      this.createWindowByCanvas(params);\n    }\n\n    this.postInit();\n\n    // this.bindOnChangeEvent();\n  }\n\n  protected postInit() {\n    try {\n      this.observerCanvas();\n    } catch (err) {\n      console.error('发生错误，该环境不存在IntersectionObserver');\n    }\n  }\n\n  isElementVisible(el: HTMLElement) {\n    const rect = el.getBoundingClientRect();\n    const vWidth = window.innerWidth || document.documentElement.clientWidth;\n    const vHeight = window.innerHeight || document.documentElement.clientHeight;\n\n    if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {\n      return false;\n    }\n\n    return true;\n  }\n\n  protected observerCanvas() {\n    this._canvasIsIntersecting = this.isElementVisible(this.canvas.nativeCanvas);\n    const observer = new IntersectionObserver((entries, observer) => {\n      entries.forEach(entry => {\n        if (this._canvasIsIntersecting !== entry.isIntersecting) {\n          this._canvasIsIntersecting = entry.isIntersecting;\n          this._onVisibleChangeCb(entry.isIntersecting);\n        } else {\n          this._canvasIsIntersecting = entry.isIntersecting;\n        }\n      });\n    });\n    if (!observer) {\n      return;\n    }\n    observer.observe(this.canvas.nativeCanvas);\n  }\n\n  // private bindOnChangeEvent() {\n  //   const { nativeCanvas } = this.canvas;\n  //   const observer = new MutationObserver((mutations, observer) => {\n  //     mutations.forEach((mutaion) => {\n  //       console.log(mutaion);\n  //     })\n  //   });\n  //   observer.observe(nativeCanvas, { attributes: true, childList: true, subtree: true })\n  // }\n\n  private createWindowByConfig(params: IWindowParams) {\n    // 创建canvas\n    const nativeCanvas = this.global.createCanvas({\n      width: params.width,\n      height: params.height\n    });\n    // 保存到dom中\n    let container: HTMLElement | null;\n    if (typeof params.container === 'string') {\n      container = this.global.getElementById(params.container);\n    } else if (params.container) {\n      container = params.container;\n    } else {\n      container = this.global.getRootElement();\n    }\n    if (!container) {\n      throw new Error('发生错误，containerId可能传入有误');\n    }\n\n    if (!params.offscreen) {\n      container.appendChild(nativeCanvas);\n    } else {\n      container = null;\n    }\n\n    // 绑定\n    const options = {\n      width: params.width,\n      height: params.height,\n      dpr: params.dpr,\n      nativeCanvas,\n      container,\n      id: Generator.GenAutoIncrementId().toString(),\n      canvasControled: true\n    };\n    this.canvas = new BrowserCanvas(options);\n    // 应用位置属性\n    // window上的不需要设置position\n    // this.canvas.applyPosition();\n    // this.canvas.resetStyle(options);\n  }\n  private createWindowByCanvas(params: IWindowParams) {\n    // 获取canvas\n    let canvas: HTMLCanvasElement | null;\n    if (typeof params.canvas === 'string') {\n      canvas = this.global.getElementById(params.canvas) as HTMLCanvasElement | null;\n      if (!canvas) {\n        throw new Error('canvasId 参数不正确，请确认canvas存在并插入dom');\n      }\n    } else {\n      canvas = params!.canvas as HTMLCanvasElement | null;\n    }\n    if (!canvas) {\n      throw new Error('发生错误，传入的canvas不正确');\n    }\n\n    // 如果没有传入wh，或者是不受控制的canvas，那就用canvas的原始wh\n    let width = params.width;\n    let height = params.height;\n    if (width == null || height == null || !params.canvasControled) {\n      const data = canvas.getBoundingClientRect();\n      width = data.width;\n      height = data.height;\n    }\n    // 如果没有dpr，就使用canvas的原始dpr\n    let dpr = params.dpr;\n    if (params.canvasControled === false) {\n      if (dpr) {\n        console.warn('canvasControled为false后，dpr参数将无效');\n      }\n      dpr = null;\n    }\n    if (dpr == null) {\n      const ctx = canvas.getContext('2d');\n      // 兼容XTable\n      dpr = (ctx as any).pixelRatio ?? canvas.width / width;\n    }\n    this.canvas = new BrowserCanvas({\n      width: width,\n      height: height,\n      dpr: dpr,\n      nativeCanvas: canvas,\n      canvasControled: params.canvasControled\n    });\n    // if (params.canvasControled) {\n    //   this.canvas.resetStyle({\n    //     width,\n    //     height,\n    //     dpr\n    //   });\n    // }\n  }\n  releaseWindow(): void {\n    this.canvas.release();\n  }\n  resizeWindow(width: number, height: number): void {\n    this.canvas.resize(width, height);\n  }\n  setDpr(dpr: number): void {\n    this.canvas.dpr = dpr;\n  }\n\n  getContext(): IContext2d {\n    return this.canvas.getContext();\n  }\n  getNativeHandler(): ICanvas {\n    return this.canvas;\n  }\n  getDpr(): number {\n    return this.canvas.dpr;\n  }\n\n  addEventListener<K extends keyof DocumentEventMap>(\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | AddEventListenerOptions\n  ): void;\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions\n  ): void {\n    return (this.canvas.nativeCanvas as HTMLCanvasElement).addEventListener(type, listener, options);\n  }\n  removeEventListener<K extends keyof DocumentEventMap>(\n    type: K,\n    listener: (this: Document, ev: DocumentEventMap[K]) => any,\n    options?: boolean | EventListenerOptions\n  ): void;\n  removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions\n  ): void {\n    return (this.canvas.nativeCanvas as HTMLCanvasElement).removeEventListener(type, listener, options);\n  }\n  dispatchEvent(event: any): boolean {\n    return (this.canvas.nativeCanvas as HTMLCanvasElement).dispatchEvent(event);\n  }\n\n  getStyle(): CSSStyleDeclaration | Record<string, any> {\n    return this.canvas.nativeCanvas.style;\n  }\n  setStyle(style: CSSStyleDeclaration | Record<string, any>) {\n    this.canvas.nativeCanvas.style = style;\n  }\n\n  getBoundingClientRect(): IDomRectLike {\n    const c = this.canvas.nativeCanvas as HTMLCanvasElement;\n    const wh = this.getWH();\n    if (!c.parentElement) {\n      return {\n        x: 0,\n        y: 0,\n        width: wh.width,\n        height: wh.height,\n        left: 0,\n        top: 0,\n        right: 0,\n        bottom: 0\n      };\n    }\n    return this.canvas.nativeCanvas.getBoundingClientRect();\n  }\n\n  clearViewBox(vb: IBoundsLike, color?: string): void {\n    const context = this.getContext();\n    const dpr = this.getDpr();\n    context.nativeContext.save();\n    (context.nativeContext as CanvasRenderingContext2D).setTransform(dpr, 0, 0, dpr, 0, 0);\n    context.clearRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);\n    if (color) {\n      context.fillStyle = color;\n      context.fillRect(vb.x1, vb.y1, vb.x2 - vb.x1, vb.y2 - vb.y1);\n    }\n    context.nativeContext.restore();\n  }\n\n  isVisible(bbox?: IBoundsLike) {\n    return this._canvasIsIntersecting;\n  }\n\n  onVisibleChange(cb: (currentVisible: boolean) => void) {\n    this._onVisibleChangeCb = cb;\n  }\n}\n"]}

package/es/core/layer.js

@@ -95,12 +95,12 @@ export class Layer extends Group {
     }
     prepare(dirtyBounds, params) {}
     combineTo(target, params) {
-        var _a;
+        var _a, _b, _c;
         this.offscreen && (this.layerHandler.drawTo(target, [ this ], Object.assign({
             background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
             renderService: params.renderService,
-            x: this.stage.x,
-            y: this.stage.y,
+            x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
+            y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
             width: this.viewWidth,
             height: this.viewHeight,
             stage: this.stage,
@@ -113,12 +113,12 @@ export class Layer extends Group {
         }));
     }
     drawTo(target, params) {
-        var _a;
+        var _a, _b, _c;
         this.layerHandler.drawTo(target, [ this ], Object.assign({
             background: null !== (_a = params.background) && void 0 !== _a ? _a : this.background,
             renderService: params.renderService,
-            x: this.stage.x,
-            y: this.stage.y,
+            x: null !== (_b = params.x) && void 0 !== _b ? _b : this.stage.x,
+            y: null !== (_c = params.y) && void 0 !== _c ? _c : this.stage.y,
             width: this.viewWidth,
             height: this.viewHeight,
             stage: this.stage,

package/es/core/layer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/layer.ts"],"names":[],"mappings":"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","file":"layer.js","sourcesContent":["import type { AABBBounds, IBoundsLike } from '@visactor/vutils';\nimport { application } from '../application';\nimport { container } from '../container';\nimport type {\n  IDrawToParams,\n  IGraphic,\n  IGroup,\n  ILayer,\n  ILayerDrawParams,\n  IStage,\n  IGlobal,\n  ILayerHandlerContribution,\n  IDrawContext,\n  ILayerHandlerDrawParams,\n  IDrawContribution,\n  IWindow,\n  ILayerParams\n} from '../interface';\nimport { Theme } from '../graphic/theme';\nimport { Group } from '../graphic/group';\n\nexport const LayerHandlerContribution = Symbol.for('LayerHandlerContribution');\n\ntype BlendMode = 'normal';\n\n// layer需要有多个，对于Canvas来说，layer可以绑定一个canvas或一个ImageData\n// 对于WebGL来说，layer对应一个FrameBuffer\n// 对于Native来说，layer保留一个FrameBufferHandler\nexport class Layer extends Group implements ILayer {\n  declare parent: any;\n\n  declare _dpr: number;\n  declare main: boolean;\n\n  declare readonly virtual: boolean;\n  declare afterDrawCbs: ((l: this) => void)[];\n\n  declare imageData?: ImageData;\n  // 混合模式，用于多图层混合\n  declare blendMode: BlendMode;\n\n  declare background: string;\n  declare opacity: number;\n\n  declare layer: this;\n  declare subLayers: Map<\n    number,\n    { layer: ILayer; group?: IGroup; zIndex: number; drawContribution?: IDrawContribution }\n  >;\n\n  get offscreen(): boolean {\n    return this.layerHandler.offscreen;\n  }\n\n  // stage控制\n  // width: number;\n  // height: number;\n  get width(): number {\n    if (!this.stage) {\n      return 0;\n    }\n    return this.stage.width;\n  }\n  get height(): number {\n    if (!this.stage) {\n      return 0;\n    }\n    return this.stage.height;\n  }\n  get viewWidth(): number {\n    if (!this.stage) {\n      return 0;\n    }\n    return this.stage.viewWidth;\n  }\n  get viewHeight(): number {\n    if (!this.stage) {\n      return 0;\n    }\n    return this.stage.viewHeight;\n  }\n  declare pickable: boolean;\n\n  get dirtyBound(): AABBBounds {\n    // this.getRootNode<any>();\n    throw new Error('暂不支持');\n  }\n\n  get dpr(): number {\n    return this._dpr;\n  }\n\n  declare stage?: IStage;\n  protected declare global: IGlobal;\n  protected declare window: IWindow;\n  protected declare layerHandler: ILayerHandlerContribution;\n\n  constructor(stage: IStage, global: IGlobal, window: IWindow, params: ILayerParams) {\n    super({});\n    this.stage = stage;\n    this.global = global;\n    this.window = window;\n    this.main = params.main;\n    this.layerHandler = container.get<ILayerHandlerContribution>(LayerHandlerContribution);\n    this.layerHandler.init(this, window, {\n      main: params.main,\n      canvasId: params.canvasId,\n      width: this.viewWidth,\n      height: this.viewHeight,\n      zIndex: params.zIndex ?? 0\n    });\n    this.layer = this;\n    this.subLayers = new Map();\n    this.theme = new Theme();\n    this.background = 'rgba(0, 0, 0, 0)';\n    this.virtual = !!params.virtual;\n    this.afterDrawCbs = [];\n  }\n\n  combineSubLayer(removeIncrementalKey: boolean = true) {\n    const subLayers = Array.from(this.subLayers.values()).sort((a, b) => {\n      return a.zIndex - b.zIndex;\n    });\n    this.layerHandler.merge(\n      subLayers.map(l => {\n        if (l.layer.subLayers.size) {\n          l.layer.combineSubLayer(removeIncrementalKey);\n        }\n        return l.layer.getNativeHandler();\n      })\n    );\n    if (removeIncrementalKey) {\n      subLayers.forEach(l => {\n        l.group && (l.group.incremental = 0);\n      });\n    }\n    subLayers.forEach(l => {\n      // l.layer.release();\n      application.layerService.releaseLayer(this.stage, l.layer);\n    });\n    this.subLayers.clear();\n  }\n\n  getNativeHandler(): ILayerHandlerContribution {\n    return this.layerHandler;\n  }\n\n  setStage(stage?: IStage, layer?: ILayer) {\n    super.setStage(stage, this);\n  }\n\n  // 选中图层中的节点\n  pick(x: number, y: number): { graphic?: IGraphic; group?: IGroup } | false {\n    throw new Error('暂不支持');\n  }\n  // 绘制图层\n  render(params: ILayerDrawParams, userParams?: Partial<IDrawContext>) {\n    const stage = this.stage;\n    this.layerHandler.render(\n      [this],\n      {\n        renderService: params.renderService,\n        x: stage.x,\n        y: stage.y,\n        width: this.viewWidth,\n        height: this.viewHeight,\n        stage: this.stage,\n        layer: this,\n        // TODO: 多图层时不应该再用默认background\n        background: params.background ?? this.background,\n        updateBounds: params.updateBounds\n      },\n      userParams\n    );\n    this.afterDrawCbs.forEach(c => c(this));\n  }\n  resize(w: number, h: number) {\n    this.layerHandler.resize(w, h);\n  }\n  resizeView(w: number, h: number) {\n    this.layerHandler.resizeView(w, h);\n  }\n  setDpr(dpr: number) {\n    throw new Error('暂不支持');\n  }\n  afterDraw(cb: (l: this) => void) {\n    this.afterDrawCbs.push(cb);\n  }\n\n  // 动画相关\n  startAnimate(t: number) {\n    throw new Error('暂不支持');\n  }\n\n  setToFrame(t: number) {\n    throw new Error('暂不支持');\n  }\n\n  prepare(dirtyBounds: IBoundsLike, params: ILayerHandlerDrawParams) {\n    return;\n  }\n\n  // 合并到某个target上\n  combineTo(target: IWindow, params: IDrawToParams) {\n    if (this.offscreen) {\n      this.layerHandler.drawTo(target, [this], {\n        // TODO: 多图层时不应该再用默认background\n        background: params.background ?? this.background,\n        renderService: params.renderService,\n        x: this.stage.x,\n        y: this.stage.y,\n        width: this.viewWidth,\n        height: this.viewHeight,\n        stage: this.stage,\n        layer: this,\n        ...params\n      });\n      this.afterDrawCbs.forEach(c => c(this));\n    }\n  }\n\n  release(): void {\n    super.release();\n    this.layerHandler.release();\n    if (this.subLayers) {\n      this.subLayers.forEach(l => {\n        // l.layer.release();\n        application.layerService.releaseLayer(this.stage, l.layer);\n      });\n    }\n  }\n\n  drawTo(target: IWindow, params: IDrawToParams) {\n    this.layerHandler.drawTo(target, [this], {\n      // TODO: 多图层时不应该再用默认background\n      background: params.background ?? this.background,\n      renderService: params.renderService,\n      x: this.stage.x,\n      y: this.stage.y,\n      width: this.viewWidth,\n      height: this.viewHeight,\n      stage: this.stage,\n      layer: this,\n      ...params\n    });\n    this.afterDrawCbs.forEach(c => c(this));\n  }\n}\n"]}
+{"version":3,"sources":["../../src/core/layer.ts"],"names":[],"mappings":"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","file":"layer.js","sourcesContent":["import type { AABBBounds, IBoundsLike } from '@visactor/vutils';\nimport { application } from '../application';\nimport { container } from '../container';\nimport type {\n  IDrawToParams,\n  IGraphic,\n  IGroup,\n  ILayer,\n  ILayerDrawParams,\n  IStage,\n  IGlobal,\n  ILayerHandlerContribution,\n  IDrawContext,\n  ILayerHandlerDrawParams,\n  IDrawContribution,\n  IWindow,\n  ILayerParams\n} from '../interface';\nimport { Theme } from '../graphic/theme';\nimport { Group } from '../graphic/group';\n\nexport const LayerHandlerContribution = Symbol.for('LayerHandlerContribution');\n\ntype BlendMode = 'normal';\n\n// layer需要有多个，对于Canvas来说，layer可以绑定一个canvas或一个ImageData\n// 对于WebGL来说，layer对应一个FrameBuffer\n// 对于Native来说，layer保留一个FrameBufferHandler\nexport class Layer extends Group implements ILayer {\n  declare parent: any;\n\n  declare _dpr: number;\n  declare main: boolean;\n\n  declare readonly virtual: boolean;\n  declare afterDrawCbs: ((l: this) => void)[];\n\n  declare imageData?: ImageData;\n  // 混合模式，用于多图层混合\n  declare blendMode: BlendMode;\n\n  declare background: string;\n  declare opacity: number;\n\n  declare layer: this;\n  declare subLayers: Map<\n    number,\n    { layer: ILayer; group?: IGroup; zIndex: number; drawContribution?: IDrawContribution }\n  >;\n\n  get offscreen(): boolean {\n    return this.layerHandler.offscreen;\n  }\n\n  // stage控制\n  // width: number;\n  // height: number;\n  get width(): number {\n    if (!this.stage) {\n      return 0;\n    }\n    return this.stage.width;\n  }\n  get height(): number {\n    if (!this.stage) {\n      return 0;\n    }\n    return this.stage.height;\n  }\n  get viewWidth(): number {\n    if (!this.stage) {\n      return 0;\n    }\n    return this.stage.viewWidth;\n  }\n  get viewHeight(): number {\n    if (!this.stage) {\n      return 0;\n    }\n    return this.stage.viewHeight;\n  }\n  declare pickable: boolean;\n\n  get dirtyBound(): AABBBounds {\n    // this.getRootNode<any>();\n    throw new Error('暂不支持');\n  }\n\n  get dpr(): number {\n    return this._dpr;\n  }\n\n  declare stage?: IStage;\n  protected declare global: IGlobal;\n  protected declare window: IWindow;\n  protected declare layerHandler: ILayerHandlerContribution;\n\n  constructor(stage: IStage, global: IGlobal, window: IWindow, params: ILayerParams) {\n    super({});\n    this.stage = stage;\n    this.global = global;\n    this.window = window;\n    this.main = params.main;\n    this.layerHandler = container.get<ILayerHandlerContribution>(LayerHandlerContribution);\n    this.layerHandler.init(this, window, {\n      main: params.main,\n      canvasId: params.canvasId,\n      width: this.viewWidth,\n      height: this.viewHeight,\n      zIndex: params.zIndex ?? 0\n    });\n    this.layer = this;\n    this.subLayers = new Map();\n    this.theme = new Theme();\n    this.background = 'rgba(0, 0, 0, 0)';\n    this.virtual = !!params.virtual;\n    this.afterDrawCbs = [];\n  }\n\n  combineSubLayer(removeIncrementalKey: boolean = true) {\n    const subLayers = Array.from(this.subLayers.values()).sort((a, b) => {\n      return a.zIndex - b.zIndex;\n    });\n    this.layerHandler.merge(\n      subLayers.map(l => {\n        if (l.layer.subLayers.size) {\n          l.layer.combineSubLayer(removeIncrementalKey);\n        }\n        return l.layer.getNativeHandler();\n      })\n    );\n    if (removeIncrementalKey) {\n      subLayers.forEach(l => {\n        l.group && (l.group.incremental = 0);\n      });\n    }\n    subLayers.forEach(l => {\n      // l.layer.release();\n      application.layerService.releaseLayer(this.stage, l.layer);\n    });\n    this.subLayers.clear();\n  }\n\n  getNativeHandler(): ILayerHandlerContribution {\n    return this.layerHandler;\n  }\n\n  setStage(stage?: IStage, layer?: ILayer) {\n    super.setStage(stage, this);\n  }\n\n  // 选中图层中的节点\n  pick(x: number, y: number): { graphic?: IGraphic; group?: IGroup } | false {\n    throw new Error('暂不支持');\n  }\n  // 绘制图层\n  render(params: ILayerDrawParams, userParams?: Partial<IDrawContext>) {\n    const stage = this.stage;\n    this.layerHandler.render(\n      [this],\n      {\n        renderService: params.renderService,\n        x: stage.x,\n        y: stage.y,\n        width: this.viewWidth,\n        height: this.viewHeight,\n        stage: this.stage,\n        layer: this,\n        // TODO: 多图层时不应该再用默认background\n        background: params.background ?? this.background,\n        updateBounds: params.updateBounds\n      },\n      userParams\n    );\n    this.afterDrawCbs.forEach(c => c(this));\n  }\n  resize(w: number, h: number) {\n    this.layerHandler.resize(w, h);\n  }\n  resizeView(w: number, h: number) {\n    this.layerHandler.resizeView(w, h);\n  }\n  setDpr(dpr: number) {\n    throw new Error('暂不支持');\n  }\n  afterDraw(cb: (l: this) => void) {\n    this.afterDrawCbs.push(cb);\n  }\n\n  // 动画相关\n  startAnimate(t: number) {\n    throw new Error('暂不支持');\n  }\n\n  setToFrame(t: number) {\n    throw new Error('暂不支持');\n  }\n\n  prepare(dirtyBounds: IBoundsLike, params: ILayerHandlerDrawParams) {\n    return;\n  }\n\n  // 合并到某个target上\n  combineTo(target: IWindow, params: IDrawToParams) {\n    if (this.offscreen) {\n      this.layerHandler.drawTo(target, [this], {\n        // TODO: 多图层时不应该再用默认background\n        background: params.background ?? this.background,\n        renderService: params.renderService,\n        x: params.x ?? this.stage.x,\n        y: params.y ?? this.stage.y,\n        width: this.viewWidth,\n        height: this.viewHeight,\n        stage: this.stage,\n        layer: this,\n        ...params\n      });\n      this.afterDrawCbs.forEach(c => c(this));\n    }\n  }\n\n  release(): void {\n    super.release();\n    this.layerHandler.release();\n    if (this.subLayers) {\n      this.subLayers.forEach(l => {\n        // l.layer.release();\n        application.layerService.releaseLayer(this.stage, l.layer);\n      });\n    }\n  }\n\n  drawTo(target: IWindow, params: IDrawToParams) {\n    this.layerHandler.drawTo(target, [this], {\n      // TODO: 多图层时不应该再用默认background\n      background: params.background ?? this.background,\n      renderService: params.renderService,\n      x: params.x ?? this.stage.x,\n      y: params.y ?? this.stage.y,\n      width: this.viewWidth,\n      height: this.viewHeight,\n      stage: this.stage,\n      layer: this,\n      ...params\n    });\n    this.afterDrawCbs.forEach(c => c(this));\n  }\n}\n"]}

package/es/core/stage.d.ts

@@ -1,6 +1,6 @@
-import type { IBounds, IBoundsLike, IMatrix } from '@visactor/vutils';
+import type { IAABBBounds, IBounds, IBoundsLike, IMatrix } from '@visactor/vutils';
 import { AABBBounds } from '@visactor/vutils';
-import type { IGraphic, IGroup, IExportType, IStage, IStageParams, ILayer, IColor, IOption3D, ICamera, vec3, IDirectionLight, ITicker, IRenderService, IPickerService, IPluginService, ISyncHook, IDrawContext, IWindow, ILayerService } from '../interface';
+import type { IGraphic, IGroup, IExportType, IStage, IStageParams, ILayer, IColor, IOption3D, ICamera, vec3, IDirectionLight, ITicker, IRenderService, IPickerService, IPluginService, ISyncHook, IDrawContext, IWindow, ILayerService, ITimeline, IOptimizeType } from '../interface';
 import type { Layer } from './layer';
 import { Group } from '../graphic';
 export declare class Stage extends Group implements IStage {
@@ -55,12 +55,17 @@ export declare class Stage extends Group implements IStage {
     private readonly eventSystem?;
     protected _beforeRender?: (stage: IStage) => void;
     protected _afterRender?: (stage: IStage) => void;
+    protected _skipRender?: number;
     protected _afterNextRenderCbs?: ((stage: IStage) => void)[];
     protected lastRenderparams?: Partial<IDrawContext>;
     protected interactiveLayer?: ILayer;
     protected supportInteractiveLayer: boolean;
+    protected timeline: ITimeline;
     params: Partial<IStageParams>;
     constructor(params: Partial<IStageParams>);
+    optmize(params?: IOptimizeType): void;
+    protected optmizeRender(skipRenderWithOutRange?: boolean): void;
+    getTimeline(): ITimeline;
     get3dOptions(options: IOption3D): {
         center: {
             x?: number;
@@ -136,8 +141,8 @@ export declare class Stage extends Group implements IStage {
         width: number;
         height: number;
     }): void;
-    renderToNewWindow(fullImage?: boolean): IWindow;
-    toCanvas(fullImage?: boolean): HTMLCanvasElement | null;
+    renderToNewWindow(fullImage?: boolean, viewBox?: IAABBBounds): IWindow;
+    toCanvas(fullImage?: boolean, viewBox?: IAABBBounds): HTMLCanvasElement | null;
     setCursor(mode?: string): void;
     getCursor(): string;
 }

package/es/core/stage.js

@@ -38,6 +38,8 @@ import { VGlobal } from "../constants";
 
 import { LayerService } from "./constants";
 
+import { DefaultTimeline } from "../animate";
+
 const DefaultConfig = {
     WIDTH: 500,
     HEIGHT: 500,
@@ -157,7 +159,20 @@ export class Stage extends Group {
         params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), 
         this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, 
         this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, 
-        this.supportInteractiveLayer = !1 !== params.interactiveLayer;
+        this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline, 
+        this.ticker.addTimeline(this.timeline), this.timeline.pause(), this.optmize(params.optimize);
+    }
+    optmize(params) {
+        this.optmizeRender(null == params ? void 0 : params.skipRenderWithOutRange);
+    }
+    optmizeRender(skipRenderWithOutRange = !0) {
+        skipRenderWithOutRange && (this._skipRender = this.window.isVisible() ? 0 : 1, this.window.onVisibleChange((visible => {
+            visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), 
+            this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1;
+        })));
+    }
+    getTimeline() {
+        return this.timeline;
     }
     get3dOptions(options) {
         const {center: center = {
@@ -294,8 +309,8 @@ export class Stage extends Group {
         this.window.clearViewBox(this._viewBox, color);
     }
     render(layers, params) {
-        this.ticker.start(), this.lastRenderparams = params, this.hooks.beforeRender.call(this), 
-        (layers || this).forEach(((layer, i) => {
+        this.ticker.start(), this.timeline.resume(), this._skipRender || (this.lastRenderparams = params, 
+        this.hooks.beforeRender.call(this), (layers || this).forEach(((layer, i) => {
             layer.render({
                 renderService: this.renderService,
                 background: layer === this.defaultLayer ? this.background : void 0,
@@ -303,7 +318,8 @@ export class Stage extends Group {
             }, Object.assign({
                 renderStyle: this.renderStyle
             }, params));
-        })), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this);
+        })), this.combineLayersToWindow(), this.nextFrameRenderLayerSet.clear(), this.hooks.afterRender.call(this)), 
+        this._skipRender && this._skipRender++;
     }
     combineLayersToWindow() {
         this.forEach(((layer, i) => {
@@ -327,7 +343,7 @@ export class Stage extends Group {
         })));
     }
     _doRenderInThisFrame() {
-        this.nextFrameRenderLayerSet.size && (this.ticker.start(), this.hooks.beforeRender.call(this), 
+        this.timeline.resume(), this.ticker.start(), this.nextFrameRenderLayerSet.size && !this._skipRender && (this.hooks.beforeRender.call(this), 
         this.forEach((layer => {
             this.nextFrameRenderLayerSet.has(layer) && layer.render({
                 renderService: this.renderService,
@@ -336,7 +352,8 @@ export class Stage extends Group {
             }, Object.assign({
                 renderStyle: this.renderStyle
             }, this.lastRenderparams || {}));
-        })), this.combineLayersToWindow(), this.hooks.afterRender.call(this), this.nextFrameRenderLayerSet.clear());
+        })), this.combineLayersToWindow(), this.hooks.afterRender.call(this), this.nextFrameRenderLayerSet.clear()), 
+        this._skipRender && this._skipRender++;
     }
     resizeWindow(w, h, rerender = !0) {
         this.window.resize(w, h), rerender && this.render();
@@ -410,31 +427,36 @@ export class Stage extends Group {
             }));
         }));
     }
-    renderToNewWindow(fullImage = !0) {
+    renderToNewWindow(fullImage = !0, viewBox) {
         const window = container.get(VWindow);
-        return fullImage ? window.create({
+        if (fullImage) window.create({
             width: this.viewWidth,
             height: this.viewHeight,
             dpr: this.window.dpr,
             canvasControled: !0,
             offscreen: !0,
             title: ""
-        }) : window.create({
-            width: Math.min(this.viewWidth, this.window.width - this.x),
-            height: Math.min(this.viewHeight, this.window.height - this.y),
-            dpr: this.window.dpr,
-            canvasControled: !0,
-            offscreen: !0,
-            title: ""
-        }), this.renderTo(window, {
-            x: 0,
-            y: 0,
-            width: window.width,
-            height: window.height
+        }); else {
+            const width = viewBox ? viewBox.width() : Math.min(this.viewWidth, this.window.width - this.x), height = viewBox ? viewBox.height() : Math.min(this.viewHeight, this.window.height - this.y);
+            window.create({
+                width: width,
+                height: height,
+                dpr: this.window.dpr,
+                canvasControled: !0,
+                offscreen: !0,
+                title: ""
+            });
+        }
+        const x = viewBox ? -viewBox.x1 : 0, y = viewBox ? -viewBox.y1 : 0;
+        return this.renderTo(window, {
+            x: x,
+            y: y,
+            width: viewBox ? viewBox.x2 : window.width,
+            height: viewBox ? viewBox.y2 : window.height
         }), window;
     }
-    toCanvas(fullImage = !0) {
-        const c = this.renderToNewWindow(fullImage).getNativeHandler();
+    toCanvas(fullImage = !0, viewBox) {
+        const c = this.renderToNewWindow(fullImage, viewBox).getNativeHandler();
         return c.nativeCanvas ? c.nativeCanvas : null;
     }
     setCursor(mode) {