feat(core): support alt key duplicate #WIK-15159

.changeset/blue-melons-draw.md

@@ -0,0 +1,8 @@
+---
+'@plait/common': minor
+'@plait/core': minor
+'@plait/draw': minor
+'@plait/mind': minor
+---
+
+support alt key duplicate

packages/common/src/plugins/with-group.ts

@@ -74,7 +74,7 @@ export function withGroup(board: PlaitBoard) {
     };
 
     board.getRelatedFragment = (elements: PlaitElement[], originData?: PlaitElement[]) => {
-        const groups = getSelectedGroups(board, originData);
+        const groups = getSelectedGroups(board, elements, originData);
         return getRelatedFragment([...elements, ...groups], originData);
     };
 

packages/core/src/interfaces/board.ts

@@ -60,7 +60,8 @@ export interface PlaitBoard {
     buildFragment: (
         clipboardContext: WritableClipboardContext | null,
         rectangle: RectangleClient | null,
-        type: 'copy' | 'cut'
+        type: 'copy' | 'cut',
+        elements?: PlaitElement[]
     ) => WritableClipboardContext | null;
     insertFragment: (clipboardData: ClipboardData | null, targetPoint: Point) => void;
     deleteFragment: (data: PlaitElement[]) => void;

packages/core/src/plugins/create-board.ts

@@ -9,7 +9,8 @@ import { PathRef, PathRefOptions } from '../interfaces/path-ref';
 import { Path } from '../interfaces/path';
 import { ThemeColorMode } from '../interfaces/theme';
 import { CoreTransforms } from '../transforms/element';
-import { WritableClipboardContext, drawEntireActiveRectangleG, setClipboardData } from '../utils';
+import { WritableClipboardContext, drawEntireActiveRectangleG } from '../utils';
+import { RectangleClient } from '../interfaces';
 
 export function createBoard(children: PlaitElement[], options?: PlaitBoardOptions): PlaitBoard {
     const board: PlaitBoard = {
@@ -95,7 +96,12 @@ export function createBoard(children: PlaitElement[], options?: PlaitBoardOption
         globalKeyDown: (event: KeyboardEvent) => {},
         keyUp: (event: KeyboardEvent) => {},
         dblClick: (event: MouseEvent) => {},
-        buildFragment: (clipboardContext: WritableClipboardContext | null) => clipboardContext,
+        buildFragment: (
+            clipboardContext: WritableClipboardContext | null,
+            rectangle: RectangleClient | null,
+            type: 'copy' | 'cut',
+            elements?: PlaitElement[]
+        ) => clipboardContext,
         insertFragment: () => {},
         deleteFragment: (elements: PlaitElement[]) => {
             CoreTransforms.removeElements(board, elements);

packages/core/src/plugins/with-hotkey.ts

@@ -1,7 +1,7 @@
 import { isHotkey, isKeyHotkey } from 'is-hotkey';
-import { Ancestor, PlaitBoard, PlaitElement, PlaitPluginKey } from '../interfaces';
+import { Ancestor, PlaitBoard, PlaitElement, PlaitPluginKey, Point } from '../interfaces';
 import { BoardTransforms, Transforms } from '../transforms';
-import { deleteFragment, depthFirstRecursion, duplicateElements, getSelectedElements, hotkeys } from '../utils';
+import { deleteFragment, depthFirstRecursion, duplicateElements, getRectangleByElements, getSelectedElements, hotkeys } from '../utils';
 import { PlaitOptionsBoard } from './with-options';
 import { WithPluginOptions } from './with-selection';
 
@@ -60,7 +60,7 @@ export const withHotkey = (board: PlaitBoard) => {
         if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0) {
             if (isKeyHotkey('mod+d', event)) {
                 event.preventDefault();
-                duplicateElements(board, selectedElements);
+                duplicateElements(board);
                 return;
             }
         }

packages/core/src/plugins/with-moving.ts

@@ -1,6 +1,6 @@
 import { PlaitBoard } from '../interfaces/board';
 import { isInPlaitBoard } from '../utils/board';
-import { isMainPointer } from '../utils/dom/common';
+import { createG, isMainPointer } from '../utils/dom/common';
 import { Point } from '../interfaces/point';
 import { Transforms } from '../transforms';
 import { PlaitElement } from '../interfaces/element';
@@ -20,15 +20,19 @@ import {
     hotkeys,
     getElementsInGroupByElement,
     getRectangleByAngle,
-    getSelectionAngle
+    getSelectionAngle,
+    duplicateElements,
+    drawRectangle,
+    depthFirstRecursion
 } from '../utils';
 import { getSnapMovingRef } from '../utils/snap/snap-moving';
-import { PlaitGroupElement, PlaitPointerType, RectangleClient } from '../interfaces';
+import { PlaitGroupElement, PlaitPointerType, RectangleClient, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR } from '../interfaces';
 import { ACTIVE_MOVING_CLASS_NAME, PRESS_AND_MOVE_BUFFER } from '../constants';
 import { addSelectionWithTemporaryElements } from '../transforms/selection';
+import { isKeyHotkey } from 'is-hotkey';
 
 export function withMoving(board: PlaitBoard) {
-    const { pointerDown, pointerMove, globalPointerUp, globalPointerMove } = board;
+    const { pointerDown, pointerMove, globalPointerUp, globalPointerMove, globalKeyDown, keyUp, pointerUp } = board;
 
     let offsetX = 0;
     let offsetY = 0;
@@ -40,6 +44,34 @@ export function withMoving(board: PlaitBoard) {
     let selectedTargetElements: PlaitElement[] | null = null;
     let hitTargetElement: PlaitElement | undefined = undefined;
     let isHitSelectedTarget: boolean | undefined = undefined;
+    let isAltKeyDown: boolean = false;
+    let pendingNodesG: SVGGElement | null = null;
+
+    board.globalKeyDown = (event: KeyboardEvent) => {
+        if (!PlaitBoard.isReadonly(board)) {
+            if (isKeyHotkey('option', event)) {
+                isAltKeyDown = true;
+                if (startPoint && activeElements.length && !PlaitBoard.hasBeenTextEditing(board)) {
+                    pendingNodesG = drawPendingNodesG(board, activeElements, offsetX, offsetY);
+                    pendingNodesG && PlaitBoard.getElementActiveHost(board).append(pendingNodesG);
+                }
+            }
+        }
+        globalKeyDown(event);
+    };
+
+    board.keyUp = (event: KeyboardEvent) => {
+        if (!PlaitBoard.isReadonly(board)) {
+            if (isAltKeyDown && pendingNodesG && startPoint && activeElements.length && !PlaitBoard.hasBeenTextEditing(board)) {
+                const currentElements = updatePoints(board, activeElements, offsetX, offsetY);
+                PlaitBoard.getBoardContainer(board).classList.add('element-moving');
+                cacheMovingElements(board, currentElements as PlaitElement[]);
+            }
+        }
+        isAltKeyDown = false;
+        pendingNodesG?.remove();
+        keyUp(event);
+    };
 
     board.pointerDown = (event: PointerEvent) => {
         if (
@@ -87,6 +119,7 @@ export function withMoving(board: PlaitBoard) {
                 isPreventDefault = true;
             }
             snapG?.remove();
+            pendingNodesG?.remove();
             const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             offsetX = endPoint[0] - startPoint[0];
             offsetY = endPoint[1] - startPoint[1];
@@ -107,7 +140,6 @@ export function withMoving(board: PlaitBoard) {
                         x: activeElementsRectangle.x + offsetX,
                         y: activeElementsRectangle.y + offsetY
                     };
-
                     const activeRectangle = getRectangleByAngle(newRectangle, getSelectionAngle(activeElements)) || newRectangle;
                     const ref = getSnapMovingRef(board, activeRectangle, activeElements);
                     offsetX += ref.deltaX;
@@ -116,9 +148,14 @@ export function withMoving(board: PlaitBoard) {
                     snapG.classList.add(ACTIVE_MOVING_CLASS_NAME);
                     PlaitBoard.getElementActiveHost(board).append(snapG);
                     handleTouchTarget(board);
-                    const currentElements = updatePoints(board, activeElements, offsetX, offsetY);
-                    PlaitBoard.getBoardContainer(board).classList.add('element-moving');
-                    cacheMovingElements(board, currentElements as PlaitElement[]);
+                    if (isAltKeyDown) {
+                        pendingNodesG = drawPendingNodesG(board, activeElements, offsetX, offsetY);
+                        pendingNodesG && PlaitBoard.getElementActiveHost(board).append(pendingNodesG);
+                    } else {
+                        const currentElements = updatePoints(board, activeElements, offsetX, offsetY);
+                        PlaitBoard.getBoardContainer(board).classList.add('element-moving');
+                        cacheMovingElements(board, currentElements as PlaitElement[]);
+                    }
                 });
             }
         }
@@ -139,6 +176,16 @@ export function withMoving(board: PlaitBoard) {
         globalPointerMove(event);
     };
 
+    board.pointerUp = (event: PointerEvent) => {
+        if (isAltKeyDown && activeElements.length) {
+            const validElements = getValidElements(board, activeElements);
+            const rectangle = getRectangleByElements(board, activeElements, false);
+            duplicateElements(board, rectangle, [rectangle.x + offsetX, rectangle.y + offsetY], validElements);
+            return;
+        }
+        pointerUp(event);
+    };
+
     board.globalPointerUp = event => {
         isPreventDefault = false;
         hitTargetElement = undefined;
@@ -153,6 +200,7 @@ export function withMoving(board: PlaitBoard) {
 
     function cancelMove(board: PlaitBoard) {
         snapG?.remove();
+        pendingNodesG?.remove();
         startPoint = null;
         activeElementsRectangle = null;
         offsetX = 0;
@@ -221,10 +269,15 @@ export function getSelectedTargetElements(board: PlaitBoard) {
     return targetElements;
 }
 
-export function updatePoints(board: PlaitBoard, targetElements: PlaitElement[], offsetX: number, offsetY: number) {
-    const validElements = targetElements.filter(
+export function getValidElements(board: PlaitBoard, activeElements: PlaitElement[]) {
+    const validElements = [...activeElements].filter(
         element => !PlaitGroupElement.isGroup(element) && board.children.findIndex(item => item.id === element.id) > -1
     );
+    return validElements;
+}
+
+export function updatePoints(board: PlaitBoard, activeElements: PlaitElement[], offsetX: number, offsetY: number) {
+    const validElements = getValidElements(board, activeElements);
     const currentElements = validElements.map(element => {
         const points = element.points || [];
         const newPoints = points.map(p => [p[0] + offsetX, p[1] + offsetY]) as Point[];
@@ -241,3 +294,41 @@ export function updatePoints(board: PlaitBoard, targetElements: PlaitElement[],
     });
     return currentElements;
 }
+
+export function drawPendingNodesG(board: PlaitBoard, activeElements: PlaitElement[], offsetX: number, offsetY: number) {
+    let pendingNodesG: SVGElement | null = null;
+    const elements: PlaitElement[] = [];
+    const validElements = getValidElements(board, activeElements);
+    validElements.forEach(element => {
+        depthFirstRecursion(
+            element,
+            node => {
+                elements.push(node);
+            },
+            () => true
+        );
+    });
+    elements.forEach(item => {
+        let rectangle = board.getRectangle(item);
+        if (rectangle) {
+            rectangle = {
+                x: rectangle.x + offsetX,
+                y: rectangle.y + offsetY,
+                width: rectangle.width,
+                height: rectangle.height
+            };
+            const movingG = drawRectangle(board, rectangle!, {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: 1,
+                fill: SELECTION_FILL_COLOR,
+                fillStyle: 'solid'
+            });
+            if (!pendingNodesG) {
+                pendingNodesG = createG();
+                pendingNodesG.classList.add(ACTIVE_MOVING_CLASS_NAME);
+            }
+            pendingNodesG!.append(movingG);
+        }
+    });
+    return pendingNodesG;
+}

packages/core/src/plugins/with-related-fragment.ts

@@ -1,30 +1,33 @@
-import { PlaitBoard, RectangleClient } from '../interfaces';
-import {
-    WritableClipboardContext,
-    createClipboardContext,
-    WritableClipboardType,
-    addClipboardContext
-} from '../utils';
+import { PlaitBoard, PlaitElement, RectangleClient } from '../interfaces';
+import { WritableClipboardContext, createClipboardContext, WritableClipboardType, addClipboardContext } from '../utils';
 
 export function withRelatedFragment(board: PlaitBoard) {
     const { buildFragment } = board;
 
     board.buildFragment = (
         clipboardContext: WritableClipboardContext | null,
         rectangle: RectangleClient | null,
-        type: 'copy' | 'cut'
+        type: 'copy' | 'cut',
+        elements?: PlaitElement[]
     ) => {
-        const relatedFragment = board.getRelatedFragment([]);
-        if (!clipboardContext) {
-            clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
-        } else {
-            clipboardContext = addClipboardContext(clipboardContext, {
-                text: '',
-                type: WritableClipboardType.elements,
-                elements: relatedFragment
-            });
+        let relatedFragment = board.getRelatedFragment(elements || []);
+        if (relatedFragment) {
+            if (elements?.length) {
+                relatedFragment = relatedFragment.filter(item => !elements.map(element => element.id).includes(item.id));
+            }
+            if (relatedFragment.length) {
+                if (!clipboardContext) {
+                    clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
+                } else {
+                    clipboardContext = addClipboardContext(clipboardContext, {
+                        text: '',
+                        type: WritableClipboardType.elements,
+                        elements: relatedFragment
+                    });
+                }
+            }
         }
-        return buildFragment(clipboardContext, rectangle, type);
+        return buildFragment(clipboardContext, rectangle, type, elements);
     };
 
     return board;

packages/core/src/utils/fragment.ts

@@ -1,4 +1,4 @@
-import { PlaitBoard, PlaitElement } from '../interfaces';
+import { PlaitBoard, PlaitElement, Point, RectangleClient } from '../interfaces';
 import { setClipboardData } from './clipboard/clipboard';
 import { getRectangleByElements } from './element';
 import { getSelectedElements } from './selected-element';
@@ -15,11 +15,13 @@ export const setFragment = (board: PlaitBoard, type: 'copy' | 'cut', clipboardDa
     clipboardContext && setClipboardData(clipboardData, clipboardContext);
 };
 
-
-export const duplicateElements = (board: PlaitBoard, elements?: PlaitElement[]) => {
-    const selectedElements = elements || getSelectedElements(board);
-    const rectangle = getRectangleByElements(board, selectedElements, false);
-    const clipboardContext = board.buildFragment(null, rectangle, 'copy');
+export const duplicateElements = (board: PlaitBoard, rectangle?: RectangleClient, point?: Point, element?: PlaitElement[]) => {
+    let targetRectangle = rectangle;
+    if (!targetRectangle) {
+        const selectedElements = getSelectedElements(board);
+        targetRectangle = getRectangleByElements(board, selectedElements, false);
+    }
+    const clipboardContext = board.buildFragment(null, targetRectangle, 'copy', element);
     const stringifiedContext = clipboardContext && JSON.stringify(clipboardContext);
     const clonedContext = stringifiedContext && JSON.parse(stringifiedContext);
     clonedContext &&
@@ -28,6 +30,6 @@ export const duplicateElements = (board: PlaitBoard, elements?: PlaitElement[])
                 ...clonedContext,
                 text: undefined
             },
-            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2]
+            point || [targetRectangle.x + targetRectangle.width / 2, targetRectangle.y + targetRectangle.height / 2]
         );
 };