@plait/core 0.55.0 → 0.56.0

package/fesm2022/plait-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { IterableDiffers, inject, ViewContainerRef, Directive, Input, Injectable, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Output, HostBinding, ViewChild, ContentChildren } from '@angular/core';
+import { IterableDiffers, inject, ViewContainerRef, ChangeDetectorRef, Directive, Input, Injectable, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Output, HostBinding, ViewChild, ContentChildren } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { timer, Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, tap } from 'rxjs/operators';
@@ -30,6 +30,7 @@ const BOARD_TO_IS_SELECTION_MOVING = new WeakMap();
 const BOARD_TO_TEMPORARY_ELEMENTS = new WeakMap();
 const BOARD_TO_MOVING_ELEMENT = new WeakMap();
 const PATH_REFS = new WeakMap();
+const ELEMENT_TO_REF = new WeakMap();
 
 var PlaitPointerType;
 (function (PlaitPointerType) {
@@ -278,7 +279,7 @@ const getHitElementByPoint = (board, point, match = () => true) => {
         if (hitElement) {
             return;
         }
-        if (PlaitBoard.isBoard(node) || !match(node)) {
+        if (PlaitBoard.isBoard(node) || !match(node) || !PlaitElement.hasMounted(node)) {
             return;
         }
         if (board.isHit(node, point)) {
@@ -544,26 +545,6 @@ function createRect(rectangle, options) {
 const setStrokeLinecap = (g, value) => {
     g.setAttribute('stroke-linecap', value);
 };
-const setAngleForG = (g, centerPoint, angle) => {
-    if (angle === 0) {
-        g.removeAttribute('transform');
-        return;
-    }
-    var centerX = centerPoint[0];
-    var centerY = centerPoint[1];
-    let cosTheta = Math.cos(angle);
-    let sinTheta = Math.sin(angle);
-    let transformMatrix = [
-        cosTheta,
-        sinTheta,
-        -sinTheta,
-        cosTheta,
-        centerX * (1 - cosTheta) + centerY * sinTheta,
-        centerY * (1 - cosTheta) - centerX * sinTheta
-    ];
-    let matrix = 'matrix(' + transformMatrix.join(',') + ')';
-    g.setAttribute('transform', `${matrix}`);
-};
 const setPathStrokeLinecap = (g, value) => {
     g.querySelectorAll('path').forEach(path => {
         path.setAttribute('stroke-linecap', value);
@@ -681,7 +662,8 @@ class ListRender {
                     newComponentRefs.push(componentRef);
                     newContexts.push(context);
                 }
-                if (record.item === this.children[0]) {
+                // item might has been changed, so need to compare the id
+                if (record.item === this.children[0] || record.item.id === this.children[0]?.id) {
                     currentIndexForFirstElement = record.currentIndex;
                 }
             });
@@ -731,7 +713,7 @@ const trackBy = (index, element) => {
     return element.id;
 };
 const createPluginComponent = (componentType, context, viewContainerRef, childrenContext) => {
-    const componentRef = viewContainerRef.createComponent(componentType);
+    const componentRef = viewContainerRef.createComponent(componentType, { injector: viewContainerRef.injector });
     const instance = componentRef.instance;
     instance.context = context;
     componentRef.changeDetectorRef.detectChanges();
@@ -847,6 +829,7 @@ class PlaitPluginElementComponent {
             const containerG = this.getContainerG();
             NODE_TO_G.set(this.element, elementG);
             NODE_TO_CONTAINER_G.set(this.element, containerG);
+            ELEMENT_TO_REF.set(this.element, this.ref);
             this.updateListRender();
             this.cdr.markForCheck();
             if (hasOnContextChanged(this)) {
@@ -865,6 +848,7 @@ class PlaitPluginElementComponent {
             }
             NODE_TO_G.set(this.element, this._g);
             NODE_TO_CONTAINER_G.set(this.element, this._containerG);
+            ELEMENT_TO_REF.set(this.element, this.ref);
         }
     }
     get context() {
@@ -885,9 +869,10 @@ class PlaitPluginElementComponent {
     getElementG() {
         return this._g;
     }
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor(ref) {
+        this.ref = ref;
         this.viewContainerRef = inject(ViewContainerRef);
+        this.cdr = inject(ChangeDetectorRef);
         this.initialized = false;
     }
     ngOnInit() {
@@ -915,6 +900,9 @@ class PlaitPluginElementComponent {
             }
         }
     }
+    getRef() {
+        return this.ref;
+    }
     updateListRender() {
         if (this.hasChildren) {
             if (!this.listRender) {
@@ -950,15 +938,18 @@ class PlaitPluginElementComponent {
         if (NODE_TO_CONTAINER_G.get(this.element) === this._containerG) {
             NODE_TO_CONTAINER_G.delete(this.element);
         }
+        if (ELEMENT_TO_REF.get(this.element) === this.ref) {
+            ELEMENT_TO_REF.set(this.element, this.ref);
+        }
         removeSelectedElement(this.board, this.element);
         this.getContainerG().remove();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { context: [{
+        }], ctorParameters: () => [{ type: undefined }], propDecorators: { context: [{
                 type: Input
             }] } });
 const ELEMENT_TO_COMPONENT = new WeakMap();
@@ -1051,6 +1042,41 @@ function getNearestPointBetweenPointAndSegments(point, points, isClose = true) {
     }
     return result;
 }
+function getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation = 0) {
+    const rectangleClient = {
+        x: center[0] - rx,
+        y: center[1] - ry,
+        height: ry * 2,
+        width: rx * 2
+    };
+    // https://stackoverflow.com/a/46007540/232122
+    const px = Math.abs(point[0] - rectangleClient.x - rectangleClient.width / 2);
+    const py = Math.abs(point[1] - rectangleClient.y - rectangleClient.height / 2);
+    let tx = 0.707;
+    let ty = 0.707;
+    const a = Math.abs(rectangleClient.width) / 2;
+    const b = Math.abs(rectangleClient.height) / 2;
+    [0, 1, 2, 3].forEach(x => {
+        const xx = a * tx;
+        const yy = b * ty;
+        const ex = ((a * a - b * b) * tx ** 3) / a;
+        const ey = ((b * b - a * a) * ty ** 3) / b;
+        const rx = xx - ex;
+        const ry = yy - ey;
+        const qx = px - ex;
+        const qy = py - ey;
+        const r = Math.hypot(ry, rx);
+        const q = Math.hypot(qy, qx);
+        tx = Math.min(1, Math.max(0, ((qx * r) / q + ex) / a));
+        ty = Math.min(1, Math.max(0, ((qy * r) / q + ey) / b));
+        const t = Math.hypot(ty, tx);
+        tx /= t;
+        ty /= t;
+    });
+    const signX = point[0] > center[0] ? 1 : -1;
+    const signY = point[1] > center[1] ? 1 : -1;
+    return [center[0] + a * tx * signX, center[1] + b * ty * signY];
+}
 function rotate(x1, y1, x2, y2, angle) {
     // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
     // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
@@ -2361,9 +2387,11 @@ const debounce = (func, wait, options) => {
 };
 const getElementsIndices = (board, elements) => {
     sortElements(board, elements);
-    return elements.map(item => {
+    return elements
+        .map(item => {
         return board.children.map(item => item.id).indexOf(item.id);
-    });
+    })
+        .filter(item => item >= 0);
 };
 const getHighestIndexOfElement = (board, elements) => {
     const indices = getElementsIndices(board, elements);
@@ -3172,7 +3200,7 @@ const toContiguousGroups = (board, array) => {
                     return true;
                 });
             let isPartialSelectGroupElement = false;
-            if (previousElement.groupId || (currentElement.groupId && previousElement.groupId !== currentElement.groupId)) {
+            if (previousElement?.groupId || (currentElement?.groupId && previousElement?.groupId !== currentElement?.groupId)) {
                 let isPartialSelectPreviousGroup = false;
                 let isPartialSelectCurrentElement = false;
                 if (previousElement.groupId) {
@@ -3422,6 +3450,29 @@ const getAngleBetweenPoints = (startPoint, endPoint, centerPoint) => {
     const endAngle = (5 * Math.PI) / 2 + Math.atan2(endPoint[1] - centerPoint[1], endPoint[0] - centerPoint[0]);
     return normalizeAngle(endAngle - startAngle);
 };
+const getAngleByElement = (element) => {
+    return element?.angle;
+};
+const setAngleForG = (g, centerPoint, angle) => {
+    if (angle === 0) {
+        g.removeAttribute('transform');
+        return;
+    }
+    var centerX = centerPoint[0];
+    var centerY = centerPoint[1];
+    let cosTheta = Math.cos(angle);
+    let sinTheta = Math.sin(angle);
+    let transformMatrix = [
+        cosTheta,
+        sinTheta,
+        -sinTheta,
+        cosTheta,
+        centerX * (1 - cosTheta) + centerY * sinTheta,
+        centerY * (1 - cosTheta) - centerX * sinTheta
+    ];
+    let matrix = 'matrix(' + transformMatrix.join(',') + ')';
+    g.setAttribute('transform', `${matrix}`);
+};
 
 function isSelectionMoving(board) {
     return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
@@ -3589,14 +3640,14 @@ const getRectangleByGroup = (board, group, recursion) => {
     const elementsInGroup = getAllElementsInGroup(board, group, recursion);
     return getRectangleByElements(board, elementsInGroup, false);
 };
-const getGroupByElement = (board, element, recursion, source) => {
-    const group = (source || board.children).find(item => item.id === element?.groupId);
+const getGroupByElement = (board, element, recursion, originElements) => {
+    const group = (originElements || board.children).find(item => item.id === element?.groupId);
     if (!group) {
         return recursion ? [] : null;
     }
     if (recursion) {
         const groups = [group];
-        const grandGroups = getGroupByElement(board, group, recursion, source);
+        const grandGroups = getGroupByElement(board, group, recursion, originElements);
         if (grandGroups.length) {
             groups.push(...grandGroups);
         }
@@ -3623,14 +3674,14 @@ const getElementsInGroupByElement = (board, element) => {
     }
 };
 const isSelectedElementOrGroup = (board, element, elements) => {
-    const selectedElements = elements || getSelectedElements(board);
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
     if (PlaitGroupElement.isGroup(element)) {
         return isSelectedAllElementsInGroup(board, element, elements);
     }
     return selectedElements.map(item => item.id).includes(element.id);
 };
 const isSelectedAllElementsInGroup = (board, group, elements) => {
-    const selectedElements = elements || getSelectedElements(board);
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
     const elementsInGroup = getElementsInGroup(board, group, true);
     return elementsInGroup.every(item => selectedElements.map(element => element.id).includes(item.id));
 };
@@ -3643,8 +3694,8 @@ const filterSelectedGroups = (board, groups, elements) => {
     });
     return selectedGroups;
 };
-const getSelectedGroups = (board, elements) => {
-    const highestSelectedGroups = getHighestSelectedGroups(board, elements);
+const getSelectedGroups = (board, elements, originElements) => {
+    const highestSelectedGroups = getHighestSelectedGroups(board, elements, originElements);
     const groups = [];
     highestSelectedGroups.forEach(item => {
         groups.push(item);
@@ -3653,20 +3704,20 @@ const getSelectedGroups = (board, elements) => {
     });
     return groups;
 };
-const getHighestSelectedGroup = (board, element, elements) => {
-    const hitElementGroups = getGroupByElement(board, element, true, elements);
+const getHighestSelectedGroup = (board, element, elements, originElements) => {
+    const hitElementGroups = getGroupByElement(board, element, true, originElements);
     const selectedGroups = filterSelectedGroups(board, hitElementGroups, elements);
     if (selectedGroups.length) {
         return selectedGroups[selectedGroups.length - 1];
     }
     return null;
 };
-const getHighestSelectedGroups = (board, elements) => {
+const getHighestSelectedGroups = (board, elements, originElements) => {
     let result = [];
-    const selectedElements = elements || getSelectedElements(board);
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
     selectedElements.forEach(item => {
         if (item.groupId) {
-            const group = getHighestSelectedGroup(board, item, elements);
+            const group = getHighestSelectedGroup(board, item, elements, originElements);
             if (group && !result.includes(group)) {
                 result.push(group);
             }
@@ -3676,7 +3727,7 @@ const getHighestSelectedGroups = (board, elements) => {
 };
 const getSelectedIsolatedElements = (board, elements) => {
     let result = [];
-    const selectedElements = elements || getSelectedElements(board);
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
     selectedElements
         .filter(item => !PlaitGroupElement.isGroup(item))
         .forEach(item => {
@@ -3700,12 +3751,15 @@ const getHighestSelectedElements = (board, elements) => {
     return [...getHighestSelectedGroups(board, elements), ...getSelectedIsolatedElements(board, elements)];
 };
 const createGroupRectangleG = (board, elements) => {
-    const selectedElements = getSelectedElements(board);
-    const groupRectangleG = createG();
+    const selectedElementIds = getSelectedElements(board).map(item => item.id);
+    let groupRectangleG = null;
     const isMoving = isSelectionMoving(board);
     elements.forEach(item => {
-        const isRender = (!selectedElements.includes(item) && !isMoving) || isMoving;
+        const isRender = (!selectedElementIds.includes(item.id) && !isMoving) || isMoving;
         if (item.groupId && isRender) {
+            if (!groupRectangleG) {
+                groupRectangleG = createG();
+            }
             const elements = getElementsInGroupByElement(board, item);
             const rectangle = getRectangleByElements(board, elements, false);
             const rectangleG = drawRectangle(board, rectangle, {
@@ -3748,9 +3802,9 @@ const canAddGroup = (board, elements) => {
     }
     return false;
 };
-const canRemoveGroup = (board, elements) => {
-    const selectedGroups = getHighestSelectedGroups(board, elements);
-    const selectedElements = elements || getSelectedElements(board);
+const canRemoveGroup = (board, elements, originElements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements, originElements);
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
     return selectedElements.length > 0 && selectedGroups.length > 0;
 };
 const getEditingGroup = (board, element) => {
@@ -3788,15 +3842,17 @@ const setFragment = (board, type, clipboardData) => {
     const clipboardContext = board.buildFragment(null, rectangle, type);
     clipboardContext && setClipboardData(clipboardData, clipboardContext);
 };
-const duplicateElements = (board, elements) => {
-    const selectedElements = elements || getSelectedElements(board);
-    const rectangle = getRectangleByElements(board, selectedElements, false);
-    const clipboardContext = board.buildFragment(null, rectangle, 'copy');
-    clipboardContext &&
+const duplicateElements = (board, elements, point) => {
+    const targetElements = elements?.length ? elements : getSelectedElements(board);
+    const targetRectangle = getRectangleByElements(board, targetElements, false);
+    const clipboardContext = board.buildFragment(null, targetRectangle, 'copy', targetElements);
+    const stringifiedContext = clipboardContext && JSON.stringify(clipboardContext);
+    const clonedContext = stringifiedContext && JSON.parse(stringifiedContext);
+    clonedContext &&
         board.insertFragment({
-            ...clipboardContext,
+            ...clonedContext,
             text: undefined
-        }, [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2]);
+        }, point || [targetRectangle.x + targetRectangle.width / 2, targetRectangle.y + targetRectangle.height / 2]);
 };
 
 const SNAP_TOLERANCE = 2;
@@ -4016,6 +4072,9 @@ const PlaitElement = {
     getComponent(value) {
         return ELEMENT_TO_COMPONENT.get(value);
     },
+    getElementRef(value) {
+        return ELEMENT_TO_REF.get(value);
+    },
     getElementG(value) {
         const g = NODE_TO_G.get(value);
         if (!g) {
@@ -4482,7 +4541,7 @@ function createBoard(children, options) {
         globalKeyDown: (event) => { },
         keyUp: (event) => { },
         dblClick: (event) => { },
-        buildFragment: (clipboardContext) => clipboardContext,
+        buildFragment: (clipboardContext, rectangle, type, originData) => clipboardContext,
         insertFragment: () => { },
         deleteFragment: (elements) => {
             CoreTransforms.removeElements(board, elements);
@@ -5103,7 +5162,7 @@ function isVerticalCross(rectangle, other) {
 }
 
 function withMoving(board) {
-    const { pointerDown, pointerMove, globalPointerUp, globalPointerMove } = board;
+    const { pointerDown, pointerMove, globalPointerUp, globalPointerMove, globalKeyDown, keyUp } = board;
     let offsetX = 0;
     let offsetY = 0;
     let isPreventDefault = false;
@@ -5114,6 +5173,31 @@ function withMoving(board) {
     let selectedTargetElements = null;
     let hitTargetElement = undefined;
     let isHitSelectedTarget = undefined;
+    let pendingNodesG = null;
+    board.globalKeyDown = (event) => {
+        if (!PlaitBoard.isReadonly(board)) {
+            if (isKeyHotkey('option', event)) {
+                event.preventDefault();
+                if (startPoint && activeElements.length && !PlaitBoard.hasBeenTextEditing(board)) {
+                    pendingNodesG = drawPendingNodesG(board, activeElements, offsetX, offsetY);
+                    pendingNodesG && PlaitBoard.getElementActiveHost(board).append(pendingNodesG);
+                }
+            }
+        }
+        globalKeyDown(event);
+    };
+    board.keyUp = (event) => {
+        if (!PlaitBoard.isReadonly(board)) {
+            if (event.altKey && pendingNodesG && startPoint && activeElements.length && !PlaitBoard.hasBeenTextEditing(board)) {
+                event.preventDefault();
+                const currentElements = updatePoints(board, activeElements, offsetX, offsetY);
+                PlaitBoard.getBoardContainer(board).classList.add('element-moving');
+                cacheMovingElements(board, currentElements);
+            }
+        }
+        pendingNodesG?.remove();
+        keyUp(event);
+    };
     board.pointerDown = (event) => {
         if (PlaitBoard.isReadonly(board) ||
             !PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
@@ -5159,6 +5243,7 @@ function withMoving(board) {
                 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];
@@ -5187,9 +5272,15 @@ function withMoving(board) {
                     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);
+                    if (event.altKey) {
+                        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);
+                    }
                 });
             }
         }
@@ -5209,6 +5300,11 @@ function withMoving(board) {
         globalPointerMove(event);
     };
     board.globalPointerUp = event => {
+        if (event.altKey && activeElements.length) {
+            const validElements = getValidElements(board, activeElements);
+            const rectangle = getRectangleByElements(board, validElements, false);
+            duplicateElements(board, validElements, [rectangle.x + offsetX, rectangle.y + offsetY]);
+        }
         isPreventDefault = false;
         hitTargetElement = undefined;
         selectedTargetElements = null;
@@ -5221,6 +5317,7 @@ function withMoving(board) {
     };
     function cancelMove(board) {
         snapG?.remove();
+        pendingNodesG?.remove();
         startPoint = null;
         activeElementsRectangle = null;
         offsetX = 0;
@@ -5284,8 +5381,12 @@ function getSelectedTargetElements(board) {
     targetElements.push(...relatedElements);
     return targetElements;
 }
-function updatePoints(board, targetElements, offsetX, offsetY) {
-    const validElements = targetElements.filter(element => !PlaitGroupElement.isGroup(element) && board.children.findIndex(item => item.id === element.id) > -1);
+function getValidElements(board, activeElements) {
+    const validElements = [...activeElements].filter(element => !PlaitGroupElement.isGroup(element) && board.children.findIndex(item => item.id === element.id) > -1);
+    return validElements;
+}
+function updatePoints(board, activeElements, offsetX, offsetY) {
+    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]);
@@ -5298,6 +5399,41 @@ function updatePoints(board, targetElements, offsetX, offsetY) {
     });
     return currentElements;
 }
+function drawPendingNodesG(board, activeElements, offsetX, offsetY) {
+    let pendingNodesG = null;
+    const elements = [];
+    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);
+            }
+            const angle = getAngleByElement(item);
+            angle && setAngleForG(movingG, RectangleClient.getCenterPoint(rectangle), angle);
+            pendingNodesG.append(movingG);
+        }
+    });
+    return pendingNodesG;
+}
 
 const withOptions = (board) => {
     const pluginOptions = new Map();
@@ -5430,7 +5566,7 @@ const withHotkey = (board) => {
         if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0) {
             if (isKeyHotkey('mod+d', event)) {
                 event.preventDefault();
-                duplicateElements(board, selectedElements);
+                duplicateElements(board);
                 return;
             }
         }
@@ -5475,6 +5611,7 @@ const withHotkey = (board) => {
 
 class PlaitContextService {
     constructor() {
+        this._stable = new Subject();
         this.uploadingFiles = [];
     }
     getUploadingFile(url) {
@@ -5486,6 +5623,12 @@ class PlaitContextService {
     removeUploadingFile(fileEntry) {
         this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
     }
+    onStable() {
+        return this._stable.asObservable();
+    }
+    nextStable() {
+        this._stable.next('');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService }); }
 }
@@ -5495,19 +5638,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
 
 function withRelatedFragment(board) {
     const { buildFragment } = board;
-    board.buildFragment = (clipboardContext, rectangle, type) => {
-        const relatedFragment = board.getRelatedFragment([]);
-        if (!clipboardContext) {
-            clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
-        }
-        else {
-            clipboardContext = addClipboardContext(clipboardContext, {
-                text: '',
-                type: WritableClipboardType.elements,
-                elements: relatedFragment
-            });
+    board.buildFragment = (clipboardContext, rectangle, type, originData) => {
+        let relatedFragment = board.getRelatedFragment(originData || []);
+        if (relatedFragment) {
+            if (originData?.length) {
+                relatedFragment = relatedFragment.filter(item => !originData.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, originData);
     };
     return board;
 }
@@ -5557,6 +5707,7 @@ class PlaitBoardComponent {
         this.plaitPlugins = [];
         this.plaitChange = new EventEmitter();
         this.plaitBoardInitialized = new EventEmitter();
+        this.contextService = inject(PlaitContextService);
         this.trackBy = (index, element) => {
             return element.id;
         };
@@ -5620,10 +5771,13 @@ class PlaitBoardComponent {
         if (this.hasInitialized) {
             const valueChange = changes['plaitValue'];
             const options = changes['plaitOptions'];
-            if (valueChange)
+            if (valueChange) {
                 this.board.children = valueChange.currentValue;
-            if (options)
+                this.updateListRender();
+            }
+            if (options) {
                 this.board.options = options.currentValue;
+            }
             this.cdr.markForCheck();
         }
     }
@@ -5760,6 +5914,7 @@ class PlaitBoardComponent {
     }
     updateListRender() {
         this.listRender.update(this.board.children, this.initializeChildrenContext());
+        this.contextService.nextStable();
     }
     initializeChildrenContext() {
         return {
@@ -6182,5 +6337,5 @@ const isDebug = (key) => {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitContextService, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getBarPoint, getBoardRectangle, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, isSnapPoint, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
+export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitContextService, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, isSnapPoint, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map