feat(draw): support table copy and paste #WIK-15347

.changeset/spotty-icons-dance.md

@@ -0,0 +1,5 @@
+---
+'@plait/draw': patch
+---
+
+support table copy and paste

packages/draw/src/plugins/with-table.ts

@@ -10,9 +10,19 @@ import {
     getSelectedElements,
     toViewBoxPoint,
     toHostPoint,
-    getHitElementByPoint
+    getHitElementByPoint,
+    WritableClipboardContext,
+    WritableClipboardOperationType,
+    WritableClipboardType,
+    addClipboardContext,
+    createClipboardContext,
+    ClipboardData,
+    Point
 } from '@plait/core';
 import { editCell, getHitCell } from '../utils/table';
+import { getElementsText } from '@plait/common';
+import { getSelectedTableElements } from '../utils';
+import { buildTableClipboardData, insertClipboardTableData } from '../utils/clipboard';
 
 export interface PlaitTableBoard extends PlaitBoard {
     buildTable: (element: PlaitTable) => PlaitTable;
@@ -21,7 +31,17 @@ export interface PlaitTableBoard extends PlaitBoard {
 export const withTable = (board: PlaitBoard) => {
     const tableBoard = board as PlaitTableBoard;
 
-    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, getDeletedFragment, dblClick } = tableBoard;
+    const {
+        drawElement,
+        getRectangle,
+        isRectangleHit,
+        isHit,
+        isMovable,
+        getDeletedFragment,
+        dblClick,
+        buildFragment,
+        insertFragment
+    } = tableBoard;
 
     tableBoard.drawElement = (context: PlaitPluginElementContext) => {
         if (PlaitTableElement.isTable(context.element)) {
@@ -89,5 +109,41 @@ export const withTable = (board: PlaitBoard) => {
         return element;
     };
 
+    tableBoard.buildFragment = (
+        clipboardContext: WritableClipboardContext | null,
+        rectangle: RectangleClient | null,
+        operationType: WritableClipboardOperationType,
+        originData?: PlaitElement[]
+    ) => {
+        const selectedElements = getSelectedTableElements(board, originData);
+        if (selectedElements.length) {
+            // TODO: 执行 getRelatedFragment 获取内部所有关联元素
+            const elements = buildTableClipboardData(selectedElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
+            const text = getElementsText(selectedElements);
+            if (!clipboardContext) {
+                clipboardContext = createClipboardContext(WritableClipboardType.elements, elements, text);
+            } else {
+                clipboardContext = addClipboardContext(clipboardContext, {
+                    text,
+                    type: WritableClipboardType.elements,
+                    elements
+                });
+            }
+        }
+        return buildFragment(clipboardContext, rectangle, operationType, originData);
+    };
+
+    board.insertFragment = (clipboardData: ClipboardData | null, targetPoint: Point, operationType?: WritableClipboardOperationType) => {
+        if (clipboardData?.elements?.length) {
+            const tableElements = clipboardData.elements?.filter(value => PlaitTableElement.isTable(value)) as PlaitTable[];
+            if (clipboardData.elements && clipboardData.elements.length > 0 && tableElements.length > 0) {
+                // TODO: 修改内部关联元素的 tableId
+                insertClipboardTableData(board, tableElements, targetPoint);
+            }
+        }
+
+        insertFragment(clipboardData, targetPoint, operationType);
+    };
+
     return tableBoard;
 };

packages/draw/src/utils/clipboard.ts

@@ -2,6 +2,8 @@ import { PlaitBoard, Point, Transforms, getElementById, idCreator } from '@plait
 import { PlaitDrawElement, PlaitGeometry, PlaitLine } from '../interfaces';
 import { PlaitImage } from '../interfaces/image';
 import { getConnectionPoint } from './line/line-common';
+import { PlaitTable, PlaitTableElement } from '../interfaces/table';
+import { updateCellIds, updateRowOrColumnIds } from './table';
 
 export const buildClipboardData = (board: PlaitBoard, elements: PlaitDrawElement[], startPoint: Point) => {
     return elements.map(element => {
@@ -71,3 +73,25 @@ export const insertClipboardData = (board: PlaitBoard, elements: PlaitDrawElemen
     });
     Transforms.addSelectionWithTemporaryElements(board, elements);
 };
+
+export const buildTableClipboardData = (elements: PlaitTable[], startPoint: Point) => {
+    return elements.map(element => {
+        if (PlaitTableElement.isTable(element)) {
+            const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
+            return { ...element, points };
+        }
+        return element;
+    });
+};
+
+export const insertClipboardTableData = (board: PlaitBoard, elements: PlaitTable[], startPoint: Point) => {
+    elements.forEach(element => {
+        element.id = idCreator();
+        updateRowOrColumnIds(element, 'row');
+        updateRowOrColumnIds(element, '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/selected.ts

@@ -1,6 +1,7 @@
 import { PlaitBoard, PlaitElement, getSelectedElements } from '@plait/core';
 import { PlaitDrawElement, PlaitGeometry, PlaitLine } from '../interfaces';
 import { PlaitImage } from '../interfaces/image';
+import { PlaitTable, PlaitTableElement } from '../interfaces/table';
 
 export const getSelectedDrawElements = (board: PlaitBoard, elements?: PlaitElement[]) => {
     const selectedElements = elements?.length ? elements : getSelectedElements(board);
@@ -26,3 +27,8 @@ export const isSingleSelectSwimlane = (board: PlaitBoard) => {
     const selectedElements = getSelectedElements(board);
     return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isSwimlane(selectedElements[0]);
 };
+
+export const getSelectedTableElements = (board: PlaitBoard, elements?: PlaitElement[]) => {
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
+    return selectedElements.filter(value => PlaitTableElement.isTable(value)) as PlaitTable[];
+};

packages/draw/src/utils/table.ts

@@ -1,9 +1,8 @@
-import { PlaitBoard, Point, RectangleClient } from '@plait/core';
+import { idCreator, PlaitBoard, Point, RectangleClient } from '@plait/core';
 import { PlaitTable, PlaitTableCell, PlaitTableCellWithPoints } from '../interfaces/table';
 import { getTextManage } from '../generators/text.generator';
 import { PlaitTableBoard } from '../plugins/with-table';
 
-
 export function getCellsWithPoints(board: PlaitBoard, element: PlaitTable): PlaitTableCellWithPoints[] {
     const table = (board as PlaitTableBoard).buildTable(element);
     const rectangle = RectangleClient.getRectangleByPoints(table.points);
@@ -107,3 +106,27 @@ export function editCell(cell: PlaitTableCell) {
 export function getTextManageByCell(cell: PlaitTableCell) {
     return getTextManage(cell.id);
 }
+
+export function updateCellIdsByRowOrColumn(cells: PlaitTableCell[], oldId: string, newId: string, type: 'row' | 'column') {
+    const id: 'rowId' | 'columnId' = `${type}Id`;
+    cells.forEach(item => {
+        if (item[id] === oldId) {
+            item[id] = newId;
+        }
+    });
+}
+
+export function updateRowOrColumnIds(element: PlaitTable, type: 'row' | 'column') {
+    element[`${type}s`].forEach(item => {
+        const newId = idCreator();
+        updateCellIdsByRowOrColumn(element.cells, item.id, newId, type);
+        item.id = newId;
+    });
+}
+
+export function updateCellIds(cells: PlaitTableCell[]) {
+    cells.forEach(item => {
+        const newId = idCreator();
+        item.id = newId;
+    });
+}