diff --git a/.changeset/bright-otters-battle.md b/.changeset/bright-otters-battle.md new file mode 100644 index 000000000..19fab66e7 --- /dev/null +++ b/.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 diff --git a/packages/angular-board/src/board/board.component.ts b/packages/angular-board/src/board/board.component.ts index 5e61072e1..5f8973565 100644 --- a/packages/angular-board/src/board/board.component.ts +++ b/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'; diff --git a/packages/common/src/utils/clipboard.ts b/packages/common/src/utils/clipboard.ts new file mode 100644 index 000000000..ec4f8fdb0 --- /dev/null +++ b/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) => void +) => { + const idsMap: Record = {}; + 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); +}; diff --git a/packages/common/src/utils/index.ts b/packages/common/src/utils/index.ts index 783d6d725..36ab571a6 100644 --- a/packages/common/src/utils/index.ts +++ b/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'; diff --git a/packages/core/src/utils/element.ts b/packages/core/src/utils/element.ts index 2c365be8f..1048c9321 100644 --- a/packages/core/src/utils/element.ts +++ b/packages/core/src/utils/element.ts @@ -61,7 +61,7 @@ export function getElementById( 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; } diff --git a/packages/draw/src/utils/clipboard.ts b/packages/draw/src/utils/clipboard.ts index 9da057379..a3cd64aa5 100644 --- a/packages/draw/src/utils/clipboard.ts +++ b/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 = {}; - elements.forEach(element => { - idsMap[element.id] = idCreator(); - }); - elements.forEach(element => { - element.id = idsMap[element.id]; + basicInsertClipboard(board, elements, startPoint, (element: PlaitElement, idsMap: Record) => { 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); }; diff --git a/packages/draw/src/utils/index.ts b/packages/draw/src/utils/index.ts index 9bd5105f9..75e2a81b7 100644 --- a/packages/draw/src/utils/index.ts +++ b/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';