feat: 给元素添加render

EGyoung · EGyoung · commit 157251079cd3 · 2026-02-13T14:57:40.000+08:00
diff --git a/packages/board-collaboration/src/index.ts b/packages/board-collaboration/src/index.ts
@@ -2,12 +2,15 @@ import type { EBoard, ModelChangeEvent, ModelService } from "@e-board/board-core
 
 class BoardCollaboration {
     private modelService: ModelService
+    // private websocketProvider: WebSocketProvider
     private disposeList: (() => void)[] = [];
     constructor(private board: EBoard) {
         this.modelService = board.getService('modelService')
         this.init()
     }
 
+    // TODO: 初始化websocketProvider, 监听传入的数据，更新modelService中的数据
+
     private init = () => {
         const { dispose } = this.modelService.onModelOperation(
             (operation: ModelChangeEvent) => {
diff --git a/packages/board-core/src/elements/baseElement/baseRender.ts b/packages/board-core/src/elements/baseElement/baseRender.ts
@@ -0,0 +1,15 @@
+import { EBoard } from '../../board'
+import { IShapeRectangle } from '../rectElement/type'
+import { IModel } from '@e-board/board-core'
+class BaseRender<T extends Record<string, any>> {
+    protected board: EBoard
+    constructor(board: EBoard) {
+        this.board = board
+    }
+    public render = (model: IModel<T>, _: any, isViewChanged: boolean = false): void => {
+        throw new Error('render method not implemented')
+    }
+}
+
+
+export { BaseRender }
diff --git a/packages/board-core/src/elements/lineElement/index.ts b/packages/board-core/src/elements/lineElement/index.ts
@@ -1,11 +1,13 @@
 import { IElement } from "../../services";
 import { LineCtrlElement } from "./ctrlElement";
+import { Render } from "./render";
 import SaveInfoProvider from "./saveInfoProvider";
 
-const lineElement: IElement = {
+const lineElement = {
     type: "line",
     ctrlElement: LineCtrlElement,
-    saveInfoProvider: SaveInfoProvider
-}
+    saveInfoProvider: SaveInfoProvider,
+    render: Render
+} satisfies IElement;
 
 export default lineElement;
diff --git a/packages/board-core/src/elements/lineElement/render/index.ts b/packages/board-core/src/elements/lineElement/render/index.ts
@@ -0,0 +1,45 @@
+
+
+
+
+import { IModel } from "@e-board/board-core";
+
+import { BaseRender } from "../../baseElement/baseRender";
+import { ILineModel } from "../type";
+
+
+class Render extends BaseRender<ILineModel> {
+    private transformService = this.board.getService('transformService')
+    public transformPoint(point: { x: number; y: number }, inverse = false) {
+        return this.transformService.transformPoint(point, inverse);
+    }
+    public render = (
+        model: IModel<ILineModel>,
+        _: any,
+        isViewChanged: boolean = false
+    ) => {
+        const context = this.board.getCtx();
+        if (!context) return;
+        context.save()
+        const toScreenPoint = isViewChanged
+            ? (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()
+    };
+}
+
+export { Render }
diff --git a/packages/board-core/src/elements/lineElement/type.ts b/packages/board-core/src/elements/lineElement/type.ts
@@ -0,0 +1,7 @@
+interface IPoint {
+    x: number;
+    y: number;
+}
+export interface ILineModel {
+    points?: IPoint[];
+}
diff --git a/packages/board-core/src/elements/pictureElement/index.ts b/packages/board-core/src/elements/pictureElement/index.ts
@@ -1,11 +1,13 @@
 import { IElement } from "../../services";
 import { PictureCtrlElement } from "./ctrlElement";
+import { Render } from "./render";
 import SaveInfoProvider from "./saveInfoProvider";
 
-const pictureElement: IElement = {
+const pictureElement = {
     type: "picture",
     ctrlElement: PictureCtrlElement,
-    saveInfoProvider: SaveInfoProvider
-}
+    saveInfoProvider: SaveInfoProvider,
+    render: Render
+} satisfies IElement;
 
 export default pictureElement;
diff --git a/packages/board-core/src/elements/pictureElement/render/index.ts b/packages/board-core/src/elements/pictureElement/render/index.ts
@@ -0,0 +1,47 @@
+import { IModel } from "@e-board/board-core";
+import { BaseRender } from "../../baseElement/baseRender";
+import { IPictureModel } from "../type";
+
+class Render extends BaseRender<IPictureModel> {
+    private transformService = this.board.getService('transformService')
+    private renderService = this.board.getService('renderService')
+    private imageCache = new Map<string, HTMLImageElement>();
+    public transformPoint(point: { x: number; y: number }, inverse = false) {
+        return this.transformService.transformPoint(point, inverse);
+    }
+    public render = (model: IModel<IPictureModel>, _: 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();
+    };
+}
+
+
+export { Render }
diff --git a/packages/board-core/src/elements/pictureElement/type.ts b/packages/board-core/src/elements/pictureElement/type.ts
@@ -0,0 +1,6 @@
+
+export interface IPictureModel {
+    imageData?: string;
+    width?: number;
+    height?: number;
+}
diff --git a/packages/board-core/src/elements/rectElement/index.ts b/packages/board-core/src/elements/rectElement/index.ts
@@ -1,11 +1,14 @@
+import { IRectangleModel } from "src/plugins/drawShape/type";
 import { IElement } from "../../services";
 import { RectCtrlElement } from "./ctrlElement";
+import { Render } from "./render";
 import SaveInfoProvider from "./saveInfoProvider";
 
-const rectElement: IElement = {
+const rectElement = {
     type: "rectangle",
     ctrlElement: RectCtrlElement,
-    saveInfoProvider: SaveInfoProvider
-}
+    saveInfoProvider: SaveInfoProvider,
+    render: Render
+} satisfies IElement<IRectangleModel>
 
 export default rectElement;
diff --git a/packages/board-core/src/elements/rectElement/render/index.ts b/packages/board-core/src/elements/rectElement/render/index.ts
@@ -0,0 +1,46 @@
+import { IModel } from "@e-board/board-core";
+
+import { BaseRender } from "../../baseElement/baseRender";
+import { IShapeRectangle } from "../type";
+
+class Render extends BaseRender<IShapeRectangle> {
+  private transformService = this.board.getService('transformService')
+  public transformPoint(point: { x: number; y: number }, inverse = false) {
+    return this.transformService.transformPoint(point, inverse);
+  }
+  public render = (
+    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();
+    }
+  };
+}
+
+export { Render }
diff --git a/packages/board-core/src/elements/rectElement/type.ts b/packages/board-core/src/elements/rectElement/type.ts
@@ -0,0 +1,4 @@
+export type IShapeRectangle = {
+    width: number;
+    height: number;
+}
diff --git a/packages/board-core/src/elements/type.ts b/packages/board-core/src/elements/type.ts
@@ -1,3 +1,4 @@
 export interface IModel { points: { x: number, y: number }[], options: any, id: string }
 export interface IPoint { x: number, y: number }
-export interface IProps { model: IModel }
+export interface IProps { model: IModel }
+
diff --git a/packages/board-core/src/services/elementService/type.ts b/packages/board-core/src/services/elementService/type.ts
@@ -1,16 +1,18 @@
+import { BaseRender } from "src/elements/baseElement/baseRender";
 import type { IServiceInitParams } from "../../types";
 
 export type IElementService = {
   init: (params: IServiceInitParams) => void;
-  registerElement: (shape: IElement) => void;
-  getElement: (type: string) => IElement | undefined;
-  getAllElement: () => IElement[];
+  registerElement: <T extends Record<string, any>>(shape: IElement<T>) => void;
+  getElement: <T extends Record<string, any>>(type: string) => IElement<T> | undefined;
+  getAllElement: <T extends Record<string, any>>() => IElement<T>[];
   dispose: () => void;
 }
 export const IElementService = Symbol("IElementService");
 
-export interface IElement {
+export interface IElement<T extends Record<string, any> = Record<string, any>> {
   type: string;
   ctrlElement: any;
   saveInfoProvider: any
+  render: new (board: any) => BaseRender<T>;
 }
diff --git a/packages/board-core/src/services/modeService/index.ts b/packages/board-core/src/services/modeService/index.ts
@@ -1,8 +1,6 @@
 
 import { IBoard, IServiceInitParams } from "../../types";
 import {
-  IAfterSwitchModeEvent,
-  IBeforeSwitchModeEvent,
   IModeService,
   IModeServiceOptions,
   Mode
diff --git a/packages/board-core/src/services/modelService/type.ts b/packages/board-core/src/services/modelService/type.ts
@@ -45,7 +45,7 @@ export type IPoint = {
 
 export type IModel<T extends Record<string, any> = Record<string, any>> = {
   id: string;
-  type: "line" | string;
+  type: string;
   points?: IPoint[];
   options?: ModelOptions;
   ctrlElement: {
