feat: 抽离转换策略

EGyoung · EGyoung · commit 7343ce071485 · 2026-02-14T13:19:11.000+08:00
diff --git a/packages/board-collaboration/src/index.ts b/packages/board-collaboration/src/index.ts
@@ -1,5 +1,6 @@
-import { OperationSource, type EBoard, type ElementService, type ModelChangeEvent, type ModelService } from "@e-board/board-core";
+import { type EBoard, type ElementService, type ModelChangeEvent, type ModelService } from "@e-board/board-core";
 import { WebSocketProvider, MsgType } from '@e-board/board-websocket';
+import { operationManager } from "./operation/transform";
 const WS_URL = 'ws://localhost:3010/collaboration'; // TODO: 这个配置应该放到app初始化时作为配置传入
 
 class BoardCollaboration {
@@ -9,110 +10,64 @@ class BoardCollaboration {
     private disposeList: (() => void)[] = [];
     private currentUserid = `user-${Math.floor(Math.random() * 1000)}`;
     constructor(private board: EBoard) {
-
         this.modelService = board.getService('modelService')
         this.elementService = this.board.getService('elementService')
-
         this.init()
     }
 
     private init = () => {
         this.websocketProvider = new WebSocketProvider();
+        this.initRemoteConnection();
+        this.initLocalSubscription();
+    }
+
+    private initRemoteConnection = () => {
         try {
-            this.websocketProvider.connect(WS_URL);
-            this.websocketProvider.onMessage((data) => {
-                console
+            this.websocketProvider?.connect(WS_URL);
+            this.websocketProvider?.onMessage((data) => {
                 if (data.type === MsgType.OPERATION) {
                     if (data.senderId === this.currentUserid) return; // 忽略自己发送的消息
-                    const operation = JSON.parse(data.data)
-                    // 外存模型转内存模型
-                    if (operation.operation === 'create') {
-                        const element = this.elementService.getElement(operation.model.type);
-                        if (!element) throw new Error(`Unregistered element type: ${operation.model.type}`);
-                        const saveInfoService = this.board.getService('saveInfoService')
-                        saveInfoService.importSaveInfo(operation.model, OperationSource.REMOTE)
-                    } else if (operation.operation === 'update') {
-                        const modelId = operation.modelId;
-                        // 获取type
-                        const model = this.modelService.getModelById(modelId);
-                        const type = model?.type;
-                        if (!type) throw new Error('Operation missing type');
-                        const element = this.elementService.getElement(type);
-                        if (!element) throw new Error(`Unregistered element type: ${type}`);
-                        this.modelService.updateModel(model.id, operation.updates, OperationSource.REMOTE)
-                    } else if (operation.operation === 'delete') {
-
-                        operation.data.deletedModels.forEach((m: any) => {
-                            const element = this.elementService.getElement(m.type);
-                            if (!element) throw new Error(`Unregistered element type: ${m.type}`);
-                            const model = element.saveInfoProvider.importSaveInfo(m)
-                            this.modelService.deleteModel(model.id, OperationSource.REMOTE)
-                        })
+                    const operationData = JSON.parse(data.data)
+                    const handler = operationManager.getHandler(operationData.operation);
+                    if (handler) {
+                        handler.handleRemote({
+                            data: operationData,
+                            board: this.board,
+                            modelService: this.modelService,
+                            elementService: this.elementService
+                        });
                     } else {
-                        throw new Error(`Unsupported operation type: ${operation.operation}`);
+                        throw new Error(`Unsupported operation type: ${operationData.operation}`);
                     }
                 }
-
             })
         } catch (err) {
             console.error('WebSocket 连接失败:', err);
         }
+    }
 
-
+    private initLocalSubscription = () => {
         const { dispose } = this.modelService.onModelOperation(
             (operation: ModelChangeEvent) => {
-
-                const body: any = {
-                    type: MsgType.OPERATION,
-                    id: `msg-${Date.now()}`,
-                    senderId: this.currentUserid,
-                    timestamp: Date.now()
-                }
                 if (operation.operationSource === 'remote') return; // 忽略远程操作，防止循环广播
 
-                // 内存模型转外存模型
-                if (operation.type === 'create') {
-
-                    const type = operation.model?.type
-                    if (!type) throw new Error('Operation missing type');
-                    const element = this.elementService.getElement(type);
-                    if (!element) throw new Error(`Unregistered element type: ${type}`);
-
-
-
-                    body.data = JSON.stringify({ operation: 'create', model: element.saveInfoProvider.parse(operation.model) })
-                } else if (operation.type === 'update') {
-                    const modelId = operation.modelId;
-                    // 获取type
-                    const model = this.modelService.getModelById(modelId);
-                    const type = model?.type;
-                    if (!type) throw new Error('Operation missing type');
-                    const element = this.elementService.getElement(type);
-                    if (!element) throw new Error(`Unregistered element type: ${type}`);
-
-                    body.data = JSON.stringify({
-                        operation: 'update',
-                        updates: element.saveInfoProvider.parse(operation.updates),
-                        previousState: element.saveInfoProvider.parse(operation.previousState),
-                        modelId: operation.modelId
-                    })
-                } else if (operation.type === 'delete') {
-                    body.data = JSON.stringify({
-                        operation: 'delete',
-                        deletedModels: Array.from(operation.deletedModels?.values() || []).map(m => {
-                            const type = m?.type;
-                            if (!type) throw new Error('Operation missing type');
-                            const element = this.elementService.getElement(type);
-                            if (!element) throw new Error(`Unregistered element type: ${type}`);
-                            return element.saveInfoProvider.parse(m);
-                        }),
-                        modelId: operation.modelId
-                    })
-                } else {
-                    throw new Error(`Unsupported operation type: ${operation.type}`);
+                const handler = operationManager.getHandler(operation.type);
+                if (handler) {
+                    const payload = handler.handleLocal({
+                        operation,
+                        board: this.board,
+                        modelService: this.modelService,
+                        elementService: this.elementService
+                    });
+                    const body: any = {
+                        type: MsgType.OPERATION,
+                        id: `msg-${Date.now()}`,
+                        senderId: this.currentUserid,
+                        timestamp: Date.now(),
+                        data: JSON.stringify(payload)
+                    }
+                    this.websocketProvider?.send(body)
                 }
-                this.websocketProvider?.send(body)
-                console.log('Received operation:', operation);
             }
         )
         this.disposeList.push(dispose);
diff --git a/packages/board-collaboration/src/operation/transform/create.ts b/packages/board-collaboration/src/operation/transform/create.ts
@@ -0,0 +1,27 @@
+import { OperationSource } from "@e-board/board-core";
+import { IOperationHandler } from "./type";
+
+export class CreateHandler implements IOperationHandler {
+    type = 'create';
+
+    handleLocal({ operation, elementService }: any) {
+        const type = operation.model?.type;
+        if (!type) throw new Error('Operation missing type');
+
+        const element = elementService.getElement(type);
+        if (!element) throw new Error(`Unregistered element type: ${type}`);
+
+        return {
+            operation: this.type,
+            model: element.saveInfoProvider.parse(operation.model)
+        };
+    }
+
+    handleRemote({ data, board, elementService }: any) {
+        const element = elementService.getElement(data.model.type);
+        if (!element) throw new Error(`Unregistered element type: ${data.model.type}`);
+
+        const saveInfoService = board.getService('saveInfoService');
+        saveInfoService.importSaveInfo(data.model, OperationSource.REMOTE);
+    }
+}
diff --git a/packages/board-collaboration/src/operation/transform/delete.ts b/packages/board-collaboration/src/operation/transform/delete.ts
@@ -0,0 +1,31 @@
+import { OperationSource } from "@e-board/board-core";
+import { IOperationHandler } from "./type";
+
+export class DeleteHandler implements IOperationHandler {
+    type = 'delete';
+
+    handleLocal({ operation, elementService }: any) {
+        return {
+            operation: this.type,
+            deletedModels: Array.from(operation.deletedModels?.values() || []).map((m: any) => {
+                const type = m?.type;
+                if (!type) throw new Error('Operation missing type');
+                const element = elementService.getElement(type);
+                if (!element) throw new Error(`Unregistered element type: ${type}`);
+                return element.saveInfoProvider.parse(m);
+            }),
+            modelId: operation.modelId
+        };
+    }
+
+    handleRemote({ data, modelService, elementService }: any) {
+        // 修正之前代码里 data.data.deletedModels 的问题，统一使用 data.deletedModels
+        const deletedModels = data.deletedModels || [];
+        deletedModels.forEach((m: any) => {
+            const element = elementService.getElement(m.type);
+            if (!element) throw new Error(`Unregistered element type: ${m.type}`);
+            const model = element.saveInfoProvider.importSaveInfo(m);
+            modelService.deleteModel(model.id, OperationSource.REMOTE);
+        });
+    }
+}
diff --git a/packages/board-collaboration/src/operation/transform/index.ts b/packages/board-collaboration/src/operation/transform/index.ts
@@ -0,0 +1,25 @@
+import { CreateHandler } from "./create";
+import { UpdateHandler } from "./update";
+import { DeleteHandler } from "./delete";
+import { IOperationHandler } from "./type";
+
+class OperationManager {
+    private handlers: Map<string, IOperationHandler> = new Map();
+
+    constructor() {
+        this.register(new CreateHandler());
+        this.register(new UpdateHandler());
+        this.register(new DeleteHandler());
+    }
+
+    register(handler: IOperationHandler) {
+        this.handlers.set(handler.type, handler);
+    }
+
+    getHandler(type: string) {
+        return this.handlers.get(type);
+    }
+}
+
+export const operationManager = new OperationManager();
+export * from "./type";
diff --git a/packages/board-collaboration/src/operation/transform/type.ts b/packages/board-collaboration/src/operation/transform/type.ts
@@ -0,0 +1,17 @@
+import type { EBoard, ModelChangeEvent, ModelService, ElementService } from "@e-board/board-core";
+
+export interface IOperationHandler {
+    type: string;
+    handleLocal(params: {
+        operation: ModelChangeEvent;
+        board: EBoard;
+        modelService: ModelService;
+        elementService: ElementService;
+    }): any;
+    handleRemote(params: {
+        data: any;
+        board: EBoard;
+        modelService: ModelService;
+        elementService: ElementService;
+    }): void;
+}
diff --git a/packages/board-collaboration/src/operation/transform/update.ts b/packages/board-collaboration/src/operation/transform/update.ts
@@ -0,0 +1,31 @@
+import { OperationSource } from "@e-board/board-core";
+import { IOperationHandler } from "./type";
+
+export class UpdateHandler implements IOperationHandler {
+    type = 'update';
+
+    handleLocal({ operation, modelService, elementService }: any) {
+        const modelId = operation.modelId;
+        const model = modelService.getModelById(modelId);
+        const type = model?.type;
+        if (!type) throw new Error('Operation missing type');
+
+        const element = elementService.getElement(type);
+        if (!element) throw new Error(`Unregistered element type: ${type}`);
+
+        return {
+            operation: this.type,
+            updates: element.saveInfoProvider.parse(operation.updates),
+            previousState: element.saveInfoProvider.parse(operation.previousState),
+            modelId: operation.modelId
+        };
+    }
+
+    handleRemote({ data, modelService }: any) {
+        const modelId = data.modelId;
+        const model = modelService.getModelById(modelId);
+        if (!model) return; // 或者抛错
+
+        modelService.updateModel(modelId, data.updates, OperationSource.REMOTE);
+    }
+}
diff --git a/packages/board-core/src/elements/rectElement/saveInfoProvider/index.ts b/packages/board-core/src/elements/rectElement/saveInfoProvider/index.ts
@@ -2,7 +2,7 @@ class SaveInfoProvider {
     static parse(data: any) {
         return {
             type: data.type,
-            points: [...data.points],
+            points: data.points ? [...data.points] : [],
             width: data.width,
             height: data.height,
             options: data.options ? { ...data.options } : undefined,
@@ -14,7 +14,7 @@ class SaveInfoProvider {
         return {
             type: info.type,
             isDrawing: false,
-            points: info.points,
+            points: info.points ? [...info.points] : [],
             width: info.width,
             height: info.height,
             options: info?.options ? { ...info.options } : undefined,
