refactor(common): extract buildClipboardData and insertClipboardData

.changeset/bright-otters-battle.md

@@ -0,0 +1,10 @@
+---
+'@plait/common': minor
+'@plait/draw': minor
+---
+
+extract buildClipboardData and insertClipboardData to common and support scalable fun
+
+rewrite buildClipboardData and insertClipboardData by basic method
+
+fix copy arrow-line error

packages/angular-board/src/board/board.component.ts

@@ -82,7 +82,6 @@ import { BOARD_TO_COMPONENT } from '../utils/weak-maps';
 import { withAngular } from '../plugins/with-angular';
 import { withImage, withText } from '@plait/common';
 import { OnChangeData } from '../plugins/angular-board';
-import { VectorPenPointerType } from '@plait/draw';
 
 const ElementLowerHostClass = 'element-lower-host';
 const ElementHostClass = 'element-host';

packages/common/src/utils/clipboard.ts

@@ -0,0 +1,41 @@
+import { idCreator, PlaitBoard, PlaitElement, Point, Transforms } from '@plait/core';
+
+export const buildClipboardData = (
+    board: PlaitBoard,
+    elements: PlaitElement[],
+    startPoint: Point,
+    elementBuilder?: (element: PlaitElement) => PlaitElement | undefined
+) => {
+    return elements.map(element => {
+        const newElement = elementBuilder && elementBuilder(element);
+        if (newElement) {
+            return newElement;
+        }
+        if (element.points) {
+            const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
+            return { ...element, points };
+        }
+        return element;
+    });
+};
+
+export const insertClipboardData = (
+    board: PlaitBoard,
+    elements: PlaitElement[],
+    startPoint: Point,
+    elementHandler?: (element: PlaitElement, idsMap: Record<string, string>) => void
+) => {
+    const idsMap: Record<string, string> = {};
+    elements.forEach(element => {
+        idsMap[element.id] = idCreator();
+    });
+    elements.forEach(element => {
+        element.id = idsMap[element.id];
+        elementHandler && elementHandler(element, idsMap);
+        if (element.points) {
+            element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]) as [Point, Point];
+        }
+        Transforms.insertNode(board, element, [board.children.length]);
+    });
+    Transforms.addSelectionWithTemporaryElements(board, elements);
+};

packages/common/src/utils/index.ts

@@ -15,3 +15,4 @@ export * from './rotate';
 export * from './elements';
 export * from './animate';
 export * from './stroke';
+export * from './clipboard';

packages/core/src/utils/element.ts

@@ -61,7 +61,7 @@ export function getElementById<T extends PlaitElement = PlaitElement>(
     id: string,
     dataSource?: PlaitElement[]
 ): T | undefined {
-    const cachedElement = getElementMap(board).get(id);
+    const cachedElement = !dataSource && getElementMap(board).get(id);
     if (cachedElement) {
         return cachedElement as T;
     }

packages/draw/src/utils/clipboard.ts

@@ -1,16 +1,12 @@
-import { PlaitBoard, Point, Transforms, getElementById, idCreator } from '@plait/core';
-import { PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitShapeElement } from '../interfaces';
-import { PlaitImage } from '../interfaces/image';
+import { PlaitBoard, PlaitElement, Point, Transforms, getElementById, idCreator } from '@plait/core';
+import { buildClipboardData as basicBuildClipboard, insertClipboardData as basicInsertClipboard } from '@plait/common';
+import { PlaitArrowLine, PlaitDrawElement, PlaitGeometry } from '../interfaces';
 import { getConnectionPoint } from './arrow-line/arrow-line-common';
 import { PlaitTable } from '../interfaces/table';
 import { updateCellIds, updateRowOrColumnIds } from './table';
 
 export const buildClipboardData = (board: PlaitBoard, elements: PlaitDrawElement[], startPoint: Point) => {
-    return elements.map(element => {
-        if (PlaitDrawElement.isShapeElement(element)) {
-            const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
-            return { ...element, points } as PlaitGeometry;
-        }
+    return basicBuildClipboard(board, elements, startPoint, (element: PlaitElement) => {
         if (PlaitDrawElement.isArrowLine(element)) {
             let source = { ...element.source };
             let target = { ...element.target };
@@ -35,17 +31,12 @@ export const buildClipboardData = (board: PlaitBoard, elements: PlaitDrawElement
             points = points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
             return { ...element, points, source, target } as PlaitArrowLine;
         }
-        return element;
+        return undefined;
     });
 };
 
 export const insertClipboardData = (board: PlaitBoard, elements: PlaitDrawElement[], startPoint: Point) => {
-    const idsMap: Record<string, string> = {};
-    elements.forEach(element => {
-        idsMap[element.id] = idCreator();
-    });
-    elements.forEach(element => {
-        element.id = idsMap[element.id];
+    basicInsertClipboard(board, elements, startPoint, (element: PlaitElement, idsMap: Record<string, string>) => {
         if (PlaitDrawElement.isArrowLine(element)) {
             if (element.source.boundId) {
                 const boundElement = elements.find(item => [element.source.boundId, idsMap[element.source.boundId!]].includes(item.id));
@@ -65,8 +56,5 @@ export const insertClipboardData = (board: PlaitBoard, elements: PlaitDrawElemen
             updateRowOrColumnIds(element as PlaitTable, 'column');
             updateCellIds(element.cells);
         }
-        element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]) as [Point, Point];
-        Transforms.insertNode(board, element, [board.children.length]);
     });
-    Transforms.addSelectionWithTemporaryElements(board, elements);
 };

packages/draw/src/utils/index.ts

@@ -13,3 +13,4 @@ export * from './table-selected';
 export * from './swimlane';
 export * from './line';
 export * from './vector-line';
+export * from './clipboard';