feat: 删除drawModeHandler, 改为调用element的render

Author: EGyoung

packages/board-core/src/plugins/draw/index.ts

@@ -1,8 +1,7 @@
 import { initContextAttrs } from "@e-board/board-utils";
 import { eBoardContainer } from "../../common/IocContainer";
 import { IModelService, IModeService, IEventService } from "../../services";
-import { IConfigService, IModel } from "../../services";
-import { IRenderService } from "../../services/renderService/type";
+import { IConfigService } from "../../services";
 import { ITransformService } from "../../services/transformService/type";
 import { IBoard, IPluginInitParams } from "../../types";
 import { IPlugin } from "../type";
@@ -13,7 +12,6 @@ class DrawPlugin implements IPlugin {
   private disposeList: (() => void)[] = [];
   private configService = eBoardContainer.get<IConfigService>(IConfigService);
   private modelService = eBoardContainer.get<IModelService>(IModelService);
-  private renderService = eBoardContainer.get<IRenderService>(IRenderService);
   private transformService = eBoardContainer.get<ITransformService>(ITransformService);
 
 
@@ -90,7 +88,6 @@ class DrawPlugin implements IPlugin {
   public init({ board }: IPluginInitParams) {
     this.board = board;
     this.initDrawMode();
-    this.registerLineDrawHandler();
 
   }
 
@@ -110,33 +107,6 @@ class DrawPlugin implements IPlugin {
     });
   }
 
-  private registerLineDrawHandler() {
-    this.renderService.registerDrawModelHandler("line", this.drawLineModelHandler);
-  }
-
-  private drawLineModelHandler = (model: IModel, ctx?: CanvasRenderingContext2D, useWorldCoords = false) => {
-    const context = this.board.getCtx();
-    if (!context) return;
-    context.save()
-    const toScreenPoint = useWorldCoords
-      ? (point: { x: number; y: number }) => point
-      : (point: { x: number; y: number }) => this.transformPoint(point);
-    model.points?.forEach((point, index) => {
-      const transformedPoint = toScreenPoint(point);
-      if (index === 0) {
-        context.moveTo(transformedPoint.x, transformedPoint.y);
-      } else if (index < 2) {
-        context.lineTo(transformedPoint.x, transformedPoint.y);
-      } else {
-        const p1 = toScreenPoint(model.points![index - 1]);
-        const p2 = toScreenPoint(point);
-        const midPointX = (p1.x + p2.x) / 2;
-        const midPointY = (p1.y + p2.y) / 2;
-        context.quadraticCurveTo(p1.x, p1.y, midPointX, midPointY);
-      }
-    });
-    context.restore()
-  };
 
   private getCanvasPoint(clientX: number, clientY: number) {
     const canvas = this.board.getCanvas();
@@ -194,7 +164,6 @@ class DrawPlugin implements IPlugin {
 
   public dispose() {
     this.disposeList.forEach(dispose => dispose());
-    this.renderService.unregisterDrawModelHandler("line");
   }
 }
 

packages/board-core/src/plugins/drawShape/index.ts

@@ -2,25 +2,17 @@ import { initContextAttrs } from "@e-board/board-utils";
 import { eBoardContainer } from "../../common/IocContainer";
 import { IModelService, IModeService, IEventService } from "../../services";
 import { IConfigService, IModel } from "../../services";
-import { IRenderService } from "../../services/renderService/type";
 import { ITransformService } from "../../services/transformService/type";
 import { IBoard, IPluginInitParams } from "../../types";
 import { IPlugin } from "../type";
 
 const CURRENT_MODE = "drawShape";
 
-
-type IShapeRectangle = {
-  width: number;
-  height: number;
-}
-
 class DrawShapePlugin implements IPlugin {
   private board!: IBoard;
   private disposeList: (() => void)[] = [];
   private configService = eBoardContainer.get<IConfigService>(IConfigService);
   private modelService = eBoardContainer.get<IModelService>(IModelService);
-  private renderService = eBoardContainer.get<IRenderService>(IRenderService);
   private transformService = eBoardContainer.get<ITransformService>(ITransformService);
   private lastPoint = { x: 0, y: 0 };
 
@@ -94,7 +86,6 @@ class DrawShapePlugin implements IPlugin {
   public init({ board }: IPluginInitParams) {
     this.board = board;
     this.initDrawMode();
-    this.registerShapeDrawHandler();
   }
 
   private initDrawMode() {
@@ -113,44 +104,6 @@ class DrawShapePlugin implements IPlugin {
     });
   }
 
-  private registerShapeDrawHandler() {
-    // 钜形
-    this.renderService.registerDrawModelHandler("rectangle", this.drawRectangleModelHandler);
-  }
-
-  private drawRectangleModelHandler = (
-    model: IModel<IShapeRectangle>,
-    _: any,
-    isViewChanged: boolean = false
-  ) => {
-    const context = this.board.getCtx();
-    if (!context) return;
-    const [point] = model.points!;
-    if (isViewChanged) {
-      context.rect(
-        point.x,
-        point.y,
-        model.width,
-        model.height
-      )
-    } else {
-      const transformedPoint = this.transformPoint({ x: point.x, y: point.y });
-      const zoom = this.transformService.getView().zoom;
-
-      // 绘制矩形
-      context.rect(
-        transformedPoint.x,
-        transformedPoint.y,
-        model.width * zoom,
-        model.height * zoom
-      );
-    }
-
-    if (model.options?.fillStyle) {
-      context.fillStyle = model.options.fillStyle;
-      context.fill();
-    }
-  };
 
   private getCanvasPoint(clientX: number, clientY: number) {
     const canvas = this.board.getCanvas();
@@ -208,7 +161,6 @@ class DrawShapePlugin implements IPlugin {
 
   public dispose() {
     this.disposeList.forEach(dispose => dispose());
-    this.renderService.unregisterDrawModelHandler("rectangle");
   }
 }
 

packages/board-core/src/plugins/drawShape/type.ts

@@ -1,23 +1 @@
-export interface ILine {
-  id: string;
-  points: { x: number; y: number }[];
-}
 
-export interface TextLayoutInfo {
-  lines: string[];
-  lineHeight: number;
-  fontSize: number;
-  fontFamily: string;
-  textAlign: string;
-  paddingTop: number;
-  paddingLeft: number;
-  dpr: number;  // 设备像素比
-}
-
-export interface IRectangleModel {
-  width: number;
-  height: number;
-  text?: string;
-  textLayout?: TextLayoutInfo;
-  fillStyle?: string;
-}

packages/board-core/src/plugins/picture/index.ts

@@ -1,6 +1,5 @@
 import { eBoardContainer } from "../../common/IocContainer";
 import { IConfigService, IModelService } from "../../services";
-import { IRenderService } from "../../services/renderService/type";
 import { ITransformService } from "../../services/transformService/type";
 import { IBoard, IPluginInitParams } from "../../types";
 import { IPlugin } from "../type";
@@ -17,7 +16,6 @@ class PicturePlugin implements IPlugin {
     private board!: IBoard;
     private disposeList: (() => void)[] = [];
     private modelService = eBoardContainer.get<IModelService>(IModelService);
-    private renderService = eBoardContainer.get<IRenderService>(IRenderService);
     private transformService = eBoardContainer.get<ITransformService>(ITransformService);
     private configService = eBoardContainer.get<IConfigService>(IConfigService);
     private imageCache = new Map<string, HTMLImageElement>();
@@ -27,7 +25,6 @@ class PicturePlugin implements IPlugin {
 
     public init({ board }: IPluginInitParams) {
         this.board = board;
-        this.registerPictureDrawHandler();
     }
 
     public insertImage = (
@@ -98,47 +95,8 @@ class PicturePlugin implements IPlugin {
         return this.transformService.transformPoint(point, inverse);
     }
 
-    private registerPictureDrawHandler() {
-        this.renderService.registerDrawModelHandler("picture", this.drawPictureModelHandler);
-    }
-
-    private drawPictureModelHandler = (model: PictureModel, _: any, useWorldCoords = false) => {
-        const context = this.board.getCtx();
-        if (!context || !model.imageData || !model.points) return;
-
-        context.save();
-
-        let img = this.imageCache.get(model.id);
-        if (!img) {
-            img = new Image();
-            img.src = model.imageData;
-            this.imageCache.set(model.id, img);
-        }
-
-        if (img.complete) {
-            const zoom = this.transformService.getView().zoom;
-            const transformedPos = useWorldCoords ? model.points[0] : this.transformPoint(model.points[0]);
-            const width = useWorldCoords ? (model.width || img.width) : (model.width || img.width) * zoom;
-            const height = useWorldCoords ? (model.height || img.height) : (model.height || img.height) * zoom;
-
-            // 将图片中心对齐到指定位置，而不是左上角
-            const drawX = transformedPos.x
-            const drawY = transformedPos.y
-
-            context.drawImage(img, drawX, drawY, width, height);
-        } else {
-            img.onload = () => {
-                this.renderService.reRender();
-            };
-        }
-
-        context.restore();
-    };
-
-
     public dispose() {
         this.disposeList.forEach(dispose => dispose());
-        this.renderService.unregisterDrawModelHandler("picture");
         this.imageCache.clear();
     }
 }

packages/board-core/src/services/renderService/index.ts

@@ -4,15 +4,16 @@ import { IModelService, ModelChangeType, BoundingBox, IModel } from '../modelSer
 import { ITransformService } from "../transformService/type";
 
 
-import { IDrawModelHandler, IRenderService, Range, View } from "./type";
+import { IRenderService, Range, View } from "./type";
 import { TileManager } from "./tileManager";
 import { Emitter, initContextAttrs } from '@e-board/board-utils';
+import { IElementService } from "../elementService/type";
 
 
 class RenderService implements IRenderService {
   private board!: IBoard;
   private modelService = eBoardContainer.get<IModelService>(IModelService);
-  private modelHandler = new Map<string, IDrawModelHandler>();
+  private elementService = eBoardContainer.get<IElementService>(IElementService);
   private readonly _renderStart = new Emitter<void>();
   private readonly _renderEnd = new Emitter<void>();
   public onRenderStart = this._renderStart.event;
@@ -178,16 +179,7 @@ class RenderService implements IRenderService {
   }
 
 
-  public registerDrawModelHandler(key: string, handler: IDrawModelHandler) {
-    this.modelHandler.set(key, handler);
-  }
-
-  public unregisterDrawModelHandler(key: string) {
-    this.modelHandler.delete(key);
-  }
-
   public dispose(): void {
-    this.modelHandler = new Map();
     this.disposeList.forEach(dispose => dispose());
     RenderService.transformService = null;
   }
@@ -244,8 +236,6 @@ class RenderService implements IRenderService {
       };
     }
 
-
-
     if (!this.currentRanges) {
       context.clearRect(0, 0, canvas.width, canvas.height);
       if (isViewChange) {
@@ -263,7 +253,6 @@ class RenderService implements IRenderService {
         );
       }
 
-
       // 同时清空交互画布，避免重叠
       if (interactionCtx) {
         interactionCtx.clearRect(0, 0, interactionCtx.canvas.width, interactionCtx.canvas.height);
@@ -310,19 +299,16 @@ class RenderService implements IRenderService {
           continue;
         }
       }
-      const handler = this.modelHandler.get(model.type);
-      if (handler) {
+      const comp = this.elementService.getElement(model.type);
+      if (!comp) continue;
+      const renderHandler = new comp.render(this.board);
+      if (renderHandler) {
         context.beginPath();
         initContextAttrs(context, { zoom }, model.options);
-        handler(model, context as any, !!useWorldCoords);
+        renderHandler.render(model, context as any, !!useWorldCoords);
         context.stroke();
       }
-
-
     }
-
-
-
     context.restore();
     this.currentRanges = null;
     this._renderEnd.fire();

packages/board-core/src/services/renderService/type.ts

@@ -9,9 +9,6 @@ export type Range = {
     maxY: number
 }
 
-export interface IDrawModelHandler {
-    (model: any, ctx?: CanvasRenderingContext2D, useWorldCoords?: boolean): void;
-}
 export interface View {
     x: number;
     y: number;