Merge pull request #978 from VisActor/feat/window-event

Feat/window event
VisActor · Mar 12, 2024 · 852f1d1 · 852f1d1
2 parents 5060e9a + 1521fef
commit 852f1d1
Show file tree

Hide file tree

Showing 34 changed files with 484 additions and 278 deletions.
diff --git a/packages/vrender-core/src/canvas/empty-context.ts b/packages/vrender-core/src/canvas/empty-context.ts
@@ -1,3 +1,4 @@
+import type { IMatrix } from '@visactor/vutils';
 import { Matrix } from '@visactor/vutils';
 import { injectable } from '../common/inversify-lite';
 import type {
@@ -46,31 +47,32 @@ const globalPoint = { x: 0, y: 0 };
 
 @injectable()
 export class EmptyContext2d implements IContext2d {
-  path: CustomPath2D;
-  canvas: null;
-  stack: Matrix[];
-  protected matrix: Matrix;
-  protected applyedMatrix?: Matrix; // 被应用的matrix
+  declare path: CustomPath2D;
+  declare canvas: null;
+  declare stack: Matrix[];
+  protected declare matrix: Matrix;
+  protected declare applyedMatrix?: Matrix; // 被应用的matrix
   // 属性代理
-  fillStyle: string | CanvasGradient | CanvasPattern;
+  declare fillStyle: string | CanvasGradient | CanvasPattern;
   /**
    * @deprecated font方法不建议使用，请使用setTextStyle
    */
-  font: string;
-  globalAlpha: number;
-  lineCap: string;
-  lineDashOffset: number;
-  lineJoin: string;
-  lineWidth: number;
-  miterLimit: number;
-  shadowBlur: number;
-  shadowColor: string;
-  shadowOffsetX: number;
-  shadowOffsetY: number;
-  strokeStyle: string | CanvasGradient | CanvasPattern;
-  textAlign: string;
-  textBaseline: string;
-  dpr: number;
+  declare font: string;
+  declare globalAlpha: number;
+  declare lineCap: string;
+  declare lineDashOffset: number;
+  declare lineJoin: string;
+  declare lineWidth: number;
+  declare miterLimit: number;
+  declare shadowBlur: number;
+  declare shadowColor: string;
+  declare shadowOffsetX: number;
+  declare shadowOffsetY: number;
+  declare strokeStyle: string | CanvasGradient | CanvasPattern;
+  declare textAlign: string;
+  declare textBaseline: string;
+  declare dpr: number;
+  declare _clearMatrix: IMatrix;
 
   get nativeContext(): any {
     return this.path;
@@ -82,6 +84,7 @@ export class EmptyContext2d implements IContext2d {
     this.dpr = dpr;
     this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
     this.path = new CustomPath2D();
+    this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
   }
 
   getCanvas(): ICanvas {
@@ -542,6 +545,10 @@ export class EmptyContext2d implements IContext2d {
     this.setTransformFromMatrix(initMatrix, setTransform, dpr);
   }
 
+  setClearMatrix(a: number, b: number, c: number, d: number, e: number, f: number) {
+    this._clearMatrix.setValue(a, b, c, d, e, f);
+  }
+
   onlyTranslate(dpr: number = this.dpr): boolean {
     return this.matrix.a === dpr && this.matrix.b === 0 && this.matrix.c === 0 && this.matrix.d === dpr;
   }

diff --git a/packages/vrender-core/src/core/contributions/layerHandler/offscreen2d-contribution.ts b/packages/vrender-core/src/core/contributions/layerHandler/offscreen2d-contribution.ts
@@ -69,9 +69,9 @@ export class OffscreenLayerHandlerContribution implements ILayerHandlerContribut
   render(group: IGroup[], params: ILayerHandlerDrawParams): void {
     params.renderService.render(group, {
       context: this.context,
+      viewBox: params.stage.window.getViewBox(),
+      transMatrix: params.stage.window.getViewBoxTransform(),
       ...params,
-      x: 0,
-      y: 0,
       clear: params.background ?? '#ffffff'
     });
   }
@@ -92,7 +92,11 @@ export class OffscreenLayerHandlerContribution implements ILayerHandlerContribut
     const context = target.getContext();
     const targetDpr = target.dpr;
 
-    const { x = 0, y = 0, width = this.layer.viewWidth, height = this.layer.viewHeight } = params;
+    const { viewBox } = params;
+    const x = viewBox.x1;
+    const y = viewBox.y1;
+    const width = viewBox.width();
+    const height = viewBox.height();
     // 这个context可能是外部的，不要使用内置的状态，直接用原生的context
     context.nativeContext.save();
     context.nativeContext.setTransform(targetDpr, 0, 0, targetDpr, 0, 0);

diff --git a/packages/vrender-core/src/core/contributions/window/base-contribution.ts b/packages/vrender-core/src/core/contributions/window/base-contribution.ts
@@ -10,7 +10,7 @@ import type {
   IWindow,
   IWindowParams
 } from '../../../interface';
-import type { IBoundsLike } from '@visactor/vutils';
+import { AABBBounds, Matrix, type IBounds, type IBoundsLike, type IMatrix } from '@visactor/vutils';
 
 type OnchangeCbType = (params?: { x?: number; y?: number; width?: number; height?: number }) => void;
 
@@ -19,9 +19,13 @@ export abstract class BaseWindowHandlerContribution implements IWindowHandlerCon
   declare type: EnvType;
 
   declare _uid: number;
+  protected viewBox: IBounds;
+  protected modelMatrix: IMatrix;
 
   constructor() {
     this._uid = Generator.GenAutoIncrementId();
+    this.viewBox = new AABBBounds();
+    this.modelMatrix = new Matrix(1, 0, 0, 1, 0, 0);
   }
 
   protected declare _onChangeCb?: OnchangeCbType;
@@ -48,7 +52,7 @@ export abstract class BaseWindowHandlerContribution implements IWindowHandlerCon
   abstract getXY(): { x: number; y: number };
   abstract getNativeHandler(): ICanvas | any;
   abstract getDpr(): number;
-  abstract clearViewBox(vb: IBoundsLike, color?: string): void;
+  abstract clearViewBox(color?: string): void;
   abstract addEventListener<K extends keyof DocumentEventMap>(
     type: K,
     listener: (this: Document, ev: DocumentEventMap[K]) => any,
@@ -89,4 +93,17 @@ export abstract class BaseWindowHandlerContribution implements IWindowHandlerCon
       left: 0
     };
   }
+
+  setViewBox(vb: IBoundsLike) {
+    this.viewBox.setValue(vb.x1, vb.y1, vb.x2, vb.y2);
+  }
+  getViewBox() {
+    return this.viewBox;
+  }
+  setViewBoxTransform(a: number, b: number, c: number, d: number, e: number, f: number) {
+    this.modelMatrix.setValue(a, b, c, d, e, f);
+  }
+  getViewBoxTransform(): IMatrix {
+    return this.modelMatrix;
+  }
 }
diff --git a/packages/vrender-core/src/core/graphic-utils.ts b/packages/vrender-core/src/core/graphic-utils.ts
@@ -24,6 +24,7 @@ import { application } from '../application';
 import { container } from '../container';
 import { VWindow } from './window';
 import { graphicCreator } from '../graphic';
+import { matrixAllocate } from '../allocator/matrix-allocate';
 
 @injectable()
 export class DefaultGraphicUtil implements IGraphicUtil {
@@ -132,7 +133,10 @@ export class DefaultGraphicUtil implements IGraphicUtil {
     const bounds = graphic.AABBBounds;
     const width = bounds.width();
     const height = bounds.height();
+    const x1 = -bounds.x1;
+    const y1 = -bounds.y1;
     window.create({
+      viewBox: { x1, y1, x2: bounds.x2, y2: bounds.y2 },
       width,
       height,
       canvas,
@@ -142,16 +146,12 @@ export class DefaultGraphicUtil implements IGraphicUtil {
       title: ''
     });
 
-    const x = -bounds.x1;
-    const y = -bounds.y1;
     const disableCheckGraphicWidthOutRange = stage.params.optimize.disableCheckGraphicWidthOutRange;
     // 关掉dirtyBounds检测
     stage.params.optimize.disableCheckGraphicWidthOutRange = true;
     stage.defaultLayer.getNativeHandler().drawTo(window, [graphic as any], {
-      x,
-      y,
-      width,
-      height,
+      transMatrix: window.getViewBoxTransform(),
+      viewBox: window.getViewBox(),
       stage,
       layer: stage.defaultLayer,
       renderService: stage.renderService,

diff --git a/packages/vrender-core/src/core/layer.ts b/packages/vrender-core/src/core/layer.ts
@@ -167,17 +167,14 @@ export class Layer extends Group implements ILayer {
   }
   // 绘制图层
   render(params: ILayerDrawParams, userParams?: Partial<IDrawContext>) {
-    const stage = this.stage;
     this.layerHandler.render(
       [this],
       {
         renderService: params.renderService,
-        x: stage.x,
-        y: stage.y,
-        width: this.viewWidth,
-        height: this.viewHeight,
         stage: this.stage,
         layer: this,
+        viewBox: params.viewBox,
+        transMatrix: params.transMatrix,
         // TODO: 多图层时不应该再用默认background
         background: params.background ?? this.background,
         updateBounds: params.updateBounds
@@ -213,24 +210,20 @@ export class Layer extends Group implements ILayer {
     return;
   }
 
-  // 合并到某个target上
-  combineTo(target: IWindow, params: IDrawToParams) {
-    if (this.offscreen) {
-      this.layerHandler.drawTo(target, [this], {
-        // TODO: 多图层时不应该再用默认background
-        background: params.background ?? this.background,
-        renderService: params.renderService,
-        x: params.x ?? this.stage.x,
-        y: params.y ?? this.stage.y,
-        width: this.viewWidth,
-        height: this.viewHeight,
-        stage: this.stage,
-        layer: this,
-        ...params
-      });
-      this.afterDrawCbs.forEach(c => c(this));
-    }
-  }
+  // // 合并到某个target上
+  // combineTo(target: IWindow, params: IDrawToParams) {
+  //   if (this.offscreen) {
+  //     this.layerHandler.drawTo(target, [this], {
+  //       // TODO: 多图层时不应该再用默认background
+  //       background: params.background ?? this.background,
+  //       renderService: params.renderService,
+  //       stage: this.stage,
+  //       layer: this,
+  //       ...params
+  //     });
+  //     this.afterDrawCbs.forEach(c => c(this));
+  //   }
+  // }
 
   release(): void {
     super.release();
@@ -248,10 +241,8 @@ export class Layer extends Group implements ILayer {
       // TODO: 多图层时不应该再用默认background
       background: params.background ?? this.background,
       renderService: params.renderService,
-      x: params.x ?? this.stage.x,
-      y: params.y ?? this.stage.y,
-      width: this.viewWidth,
-      height: this.viewHeight,
+      viewBox: params.viewBox,
+      transMatrix: params.transMatrix,
       stage: this.stage,
       layer: this,
       ...params