@plait/core 0.55.1 → 0.56.1

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);
@@ -848,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)) {
@@ -866,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() {
@@ -886,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() {
@@ -916,6 +900,9 @@ class PlaitPluginElementComponent {
             }
         }
     }
+    getRef() {
+        return this.ref;
+    }
     updateListRender() {
         if (this.hasChildren) {
             if (!this.listRender) {
@@ -951,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();
@@ -1052,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𝜃+𝑐𝑦.
@@ -2612,6 +2637,13 @@ var WritableClipboardType;
     WritableClipboardType["medias"] = "medias";
     WritableClipboardType["elements"] = "elements";
 })(WritableClipboardType || (WritableClipboardType = {}));
+var WritableClipboardOperationType;
+(function (WritableClipboardOperationType) {
+    WritableClipboardOperationType["copy"] = "copy";
+    WritableClipboardOperationType["cut"] = "cut";
+    WritableClipboardOperationType["duplicate"] = "duplicate";
+    WritableClipboardOperationType["paste"] = "paste";
+})(WritableClipboardOperationType || (WritableClipboardOperationType = {}));
 
 const buildPlaitHtml = (type, data) => {
     const stringifiedClipboard = JSON.stringify({
@@ -3425,6 +3457,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);
@@ -3592,14 +3647,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);
         }
@@ -3626,14 +3681,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));
 };
@@ -3646,8 +3701,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);
@@ -3656,20 +3711,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);
             }
@@ -3679,7 +3734,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 => {
@@ -3754,9 +3809,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,23 +3843,23 @@ const deleteFragment = (board) => {
     const elements = board.getDeletedFragment([]);
     board.deleteFragment(elements);
 };
-const setFragment = (board, type, clipboardData) => {
+const setFragment = (board, operationType, clipboardData) => {
     const selectedElements = getSelectedElements(board);
     const rectangle = getRectangleByElements(board, selectedElements, false);
-    const clipboardContext = board.buildFragment(null, rectangle, type);
+    const clipboardContext = board.buildFragment(null, rectangle, operationType);
     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');
+const duplicateElements = (board, elements, point) => {
+    const targetElements = elements?.length ? elements : getSelectedElements(board);
+    const targetRectangle = getRectangleByElements(board, targetElements, false);
+    const clipboardContext = board.buildFragment(null, targetRectangle, WritableClipboardOperationType.duplicate, targetElements);
     const stringifiedContext = clipboardContext && JSON.stringify(clipboardContext);
     const clonedContext = stringifiedContext && JSON.parse(stringifiedContext);
     clonedContext &&
         board.insertFragment({
             ...clonedContext,
             text: undefined
-        }, [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2]);
+        }, point || [targetRectangle.x + targetRectangle.width / 2, targetRectangle.y + targetRectangle.height / 2], WritableClipboardOperationType.duplicate);
 };
 
 const SNAP_TOLERANCE = 2;
@@ -4024,6 +4079,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) {
@@ -4490,8 +4548,8 @@ function createBoard(children, options) {
         globalKeyDown: (event) => { },
         keyUp: (event) => { },
         dblClick: (event) => { },
-        buildFragment: (clipboardContext) => clipboardContext,
-        insertFragment: () => { },
+        buildFragment: (clipboardContext, rectangle, operationType, originData) => clipboardContext,
+        insertFragment: (clipboardData, targetPoint, operationType) => { },
         deleteFragment: (elements) => {
             CoreTransforms.removeElements(board, elements);
         },
@@ -5111,7 +5169,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;
@@ -5122,6 +5180,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 (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) ||
@@ -5167,6 +5250,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];
@@ -5195,9 +5279,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);
+                    }
                 });
             }
         }
@@ -5217,6 +5307,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;
@@ -5229,6 +5324,7 @@ function withMoving(board) {
     };
     function cancelMove(board) {
         snapG?.remove();
+        pendingNodesG?.remove();
         startPoint = null;
         activeElementsRectangle = null;
         offsetX = 0;
@@ -5292,8 +5388,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]);
@@ -5306,6 +5406,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();
@@ -5438,7 +5573,7 @@ const withHotkey = (board) => {
         if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0) {
             if (isKeyHotkey('mod+d', event)) {
                 event.preventDefault();
-                duplicateElements(board, selectedElements);
+                duplicateElements(board);
                 return;
             }
         }
@@ -5510,19 +5645,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, operationType, 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, operationType, originData);
     };
     return board;
 }
@@ -5636,10 +5778,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();
         }
     }
@@ -5750,7 +5895,7 @@ class PlaitBoardComponent {
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((event) => {
             event.preventDefault();
-            setFragment(this.board, 'copy', event.clipboardData);
+            setFragment(this.board, WritableClipboardOperationType.copy, event.clipboardData);
         });
         fromEvent(document, 'paste')
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
@@ -5759,14 +5904,14 @@ class PlaitBoardComponent {
             if (mousePoint) {
                 const targetPoint = toViewBoxPoint(this.board, toHostPoint(this.board, mousePoint[0], mousePoint[1]));
                 const clipboardData = await getClipboardData(clipboardEvent.clipboardData);
-                this.board.insertFragment(clipboardData, targetPoint);
+                this.board.insertFragment(clipboardData, targetPoint, WritableClipboardOperationType.paste);
             }
         });
         fromEvent(document, 'cut')
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
             .subscribe((event) => {
             event.preventDefault();
-            setFragment(this.board, 'cut', event.clipboardData);
+            setFragment(this.board, WritableClipboardOperationType.cut, event.clipboardData);
             deleteFragment(this.board);
         });
     }
@@ -6199,5 +6344,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, WritableClipboardOperationType, 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