@plait/core 0.24.0-next.8 → 0.28.0

package/fesm2022/plait-core.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, ElementRef, Output, HostBinding, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { Directive, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, ElementRef, 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';
 import { isKeyHotkey, isHotkey } from 'is-hotkey';
 import produce, { createDraft, finishDraft, isDraft } from 'immer';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { NgFor } from '@angular/common';
 
 // record richtext type status
 const IS_BOARD_CACHE = new WeakMap();
@@ -271,6 +270,7 @@ var ResizeCursorClass;
 
 const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
 const ACTIVE_STROKE_WIDTH = 1;
+const SELECTION_RECTANGLE_CLASS_NAME = 'selection-rectangle';
 
 const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
 const HOST_CLASS_NAME = 'plait-board-container';
@@ -503,6 +503,9 @@ const RectangleClient = {
             [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
             [rectangle.x, rectangle.y + rectangle.height / 2]
         ];
+    },
+    getConnectionPoint: (rectangle, point) => {
+        return [rectangle.x + rectangle.width * point[0], rectangle.y + rectangle.height * point[1]];
     }
 };
 
@@ -1014,6 +1017,7 @@ function drawLinearPath(points, options, closePath) {
     path.setAttribute('stroke', `${options?.stroke}`);
     path.setAttribute('stroke-width', `${options?.strokeWidth}`);
     path.setAttribute('fill', `${options?.fill || 'none'}`);
+    options?.strokeLineDash && path.setAttribute('stroke-dasharray', `${options.strokeLineDash}`);
     g.appendChild(path);
     return g;
 }
@@ -1240,6 +1244,68 @@ const cacheMovingElements = (board, elements) => {
     BOARD_TO_MOVING_ELEMENT.set(board, elements);
 };
 
+const IMAGE_CONTAINER = 'plait-image-container';
+/**
+ * Is element node
+ * @param node
+ * @returns
+ */
+function isElementNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+}
+/**
+ * load image resources
+ * @param url image url
+ * @returns image element
+ */
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('Failed to load image'));
+        img.src = src;
+    });
+}
+/**
+ * create and return canvas and context
+ * @param width canvas width
+ * @param height canvas height
+ * @param fillStyle fill style
+ * @returns canvas and context
+ */
+function createCanvas(width, height, fillStyle = 'transparent') {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = width;
+    canvas.height = height;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    ctx.strokeStyle = '#ffffff';
+    ctx.fillStyle = fillStyle;
+    ctx.fillRect(0, 0, width, height);
+    return {
+        canvas,
+        ctx
+    };
+}
+/**
+ * convert image to base64
+ * @param url image url
+ * @returns image base64
+ */
+function convertImageToBase64(url) {
+    return loadImage(url).then(img => {
+        const { canvas, ctx } = createCanvas(img.width, img.height);
+        ctx?.drawImage(img, 0, 0);
+        return canvas.toDataURL('image/png');
+    });
+}
+/**
+ * clone node style
+ * @param nativeNode source node
+ * @param clonedNode clone node
+ */
 function cloneCSSStyle(nativeNode, clonedNode) {
     const targetStyle = clonedNode.style;
     if (!targetStyle) {
@@ -1257,25 +1323,13 @@ function cloneCSSStyle(nativeNode, clonedNode) {
         });
     }
 }
-function createCanvas(width, height, fillStyle) {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = width;
-    canvas.height = height;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
-    ctx.strokeStyle = '#ffffff';
-    ctx.fillStyle = fillStyle;
-    ctx.fillRect(0, 0, width, height);
-    return {
-        canvas,
-        ctx
-    };
-}
-function isElementNode(node) {
-    return node.nodeType === Node.ELEMENT_NODE;
-}
-function cloneSvg(board, options) {
+/**
+ * clone svg element
+ * @param board board
+ * @param options parameter configuration
+ * @returns clone svg element
+ */
+async function cloneSvg(board, options) {
     const elementHostBox = getRectangleByElements(board, board.children, true);
     const { width, height, x, y } = elementHostBox;
     const { padding = 4, inlineStyleClassNames } = options;
@@ -1288,8 +1342,9 @@ function cloneSvg(board, options) {
     cloneSvgElement.setAttribute('height', `${height}`);
     cloneSvgElement.setAttribute('viewBox', [x - padding, y - padding, width + 2 * padding, height + 2 * padding].join(','));
     if (inlineStyleClassNames) {
-        const sourceNodes = Array.from(sourceSvg.querySelectorAll(inlineStyleClassNames));
-        const cloneNodes = Array.from(cloneSvgElement.querySelectorAll(inlineStyleClassNames));
+        const classNames = inlineStyleClassNames + `,.${IMAGE_CONTAINER}`;
+        const sourceNodes = Array.from(sourceSvg.querySelectorAll(classNames));
+        const cloneNodes = Array.from(cloneSvgElement.querySelectorAll(classNames));
         sourceNodes.forEach((node, index) => {
             const cloneNode = cloneNodes[index];
             const childElements = Array.from(node.querySelectorAll('*')).filter(isElementNode);
@@ -1297,21 +1352,38 @@ function cloneSvg(board, options) {
             sourceNodes.push(...childElements);
             cloneNodes.push(...cloneChildElements);
         });
-        sourceNodes.forEach((node, index) => {
+        // processing styles
+        sourceNodes.map((node, index) => {
             const cloneNode = cloneNodes[index];
             cloneCSSStyle(node, cloneNode);
         });
     }
+    // 使用 Promise.all 等待所有异步操作完成
+    const sourceImageNodes = Array.from(sourceSvg.querySelectorAll(`.${IMAGE_CONTAINER}`));
+    const cloneImageNodes = Array.from(cloneSvgElement.querySelectorAll(`.${IMAGE_CONTAINER}`));
+    await Promise.all(sourceImageNodes.map((_, index) => {
+        return new Promise(resolve => {
+            const cloneNode = cloneImageNodes[index];
+            // processing image
+            const image = cloneNode.querySelector('img');
+            const url = image?.getAttribute('src');
+            if (!url) {
+                return resolve(true);
+            }
+            convertImageToBase64(url).then(base64Image => {
+                image?.setAttribute('src', base64Image);
+                resolve(true);
+            });
+        });
+    }));
     return cloneSvgElement;
 }
-function loadImage(src) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve(img);
-        img.onerror = () => reject(new Error('Failed to load image'));
-        img.src = src;
-    });
-}
+/**
+ * current board transfer pictures
+ * @param board board
+ * @param options parameter configuration
+ * @returns images in the specified format base64
+ */
 async function toImage(board, options) {
     if (!board) {
         return undefined;
@@ -1321,21 +1393,25 @@ async function toImage(board, options) {
     const { width, height } = elementHostBox;
     const ratioWidth = width * ratio;
     const ratioHeight = height * ratio;
-    const cloneSvgElement = cloneSvg(board, options);
+    const cloneSvgElement = await cloneSvg(board, options);
     const { canvas, ctx } = createCanvas(ratioWidth, ratioHeight, fillStyle);
     const svgStr = new XMLSerializer().serializeToString(cloneSvgElement);
     const imgSrc = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
     try {
         const img = await loadImage(imgSrc);
         ctx.drawImage(img, 0, 0, ratioWidth, ratioHeight);
-        const url = canvas.toDataURL('image/png');
-        return url;
+        return canvas.toDataURL('image/png');
     }
     catch (error) {
         console.error('Error converting SVG to image:', error);
         return undefined;
     }
 }
+/**
+ * download the file with the specified name
+ * @param url download url
+ * @param name file name
+ */
 function downloadImage(url, name) {
     const a = document.createElement('a');
     a.href = url;
@@ -1394,7 +1470,7 @@ const isPreventTouchMove = (board) => {
 };
 const preventTouchMove = (board, event, state) => {
     if (state && (event.target instanceof HTMLElement || event.target instanceof SVGElement)) {
-        BOARD_TO_TOUCH_REF.set(board, { state, target: event.target });
+        BOARD_TO_TOUCH_REF.set(board, { state, target: event.target instanceof SVGElement ? event.target : undefined });
     }
     else {
         const ref = BOARD_TO_TOUCH_REF.get(board);
@@ -1412,7 +1488,7 @@ const preventTouchMove = (board, event, state) => {
  */
 const handleTouchTarget = (board) => {
     const touchRef = BOARD_TO_TOUCH_REF.get(board);
-    if (touchRef && !touchRef.target.contains(PlaitBoard.getElementActiveHost(board))) {
+    if (touchRef && touchRef.target && !touchRef.target.contains(PlaitBoard.getElementActiveHost(board))) {
         touchRef.target.style.opacity = '0';
         const host = createG();
         host.appendChild(touchRef.target);
@@ -1754,7 +1830,7 @@ const Point = {
 const Viewport = {
     isViewport: (value) => {
         return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
-    },
+    }
 };
 
 const SAVING = new WeakMap();
@@ -1813,6 +1889,14 @@ const ThemeColors = [
     StarryThemeColor
 ];
 
+var Direction;
+(function (Direction) {
+    Direction["left"] = "left";
+    Direction["top"] = "top";
+    Direction["right"] = "right";
+    Direction["bottom"] = "bottom";
+})(Direction || (Direction = {}));
+
 function getRectangleByElements(board, elements, recursion) {
     const boundaryBox = {
         left: Number.MAX_VALUE,
@@ -1860,9 +1944,9 @@ function getBoardRectangle(board) {
 }
 function getElementById(board, id, dataSource) {
     if (!dataSource) {
-        dataSource = findElements(board, { match: (element) => true, recursion: (element) => true });
+        dataSource = findElements(board, { match: element => true, recursion: element => true });
     }
-    let element = dataSource.find((element) => element.id === id);
+    let element = dataSource.find(element => element.id === id);
     return element;
 }
 function findElements(board, options) {
@@ -2154,19 +2238,209 @@ const NodeTransforms = {
     moveNode
 };
 
+function withSelection(board) {
+    const { pointerDown, globalPointerMove, globalPointerUp, onChange } = board;
+    let start = null;
+    let end = null;
+    let selectionMovingG;
+    let selectionRectangleG;
+    let previousSelectedElements;
+    // prevent text from being selected when user pressed main pointer and is moving
+    let needPreventNativeSelectionWhenMoving = false;
+    board.pointerDown = (event) => {
+        if (event.target instanceof Element && !event.target.closest('.plait-richtext-container')) {
+            needPreventNativeSelectionWhenMoving = true;
+        }
+        if (!isMainPointer(event)) {
+            pointerDown(event);
+            return;
+        }
+        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const range = { anchor: point, focus: point };
+        const hitElements = getHitElements(board, { ranges: [range] });
+        const selectedElements = getSelectedElements(board);
+        if (hitElements.length === 1 && selectedElements.includes(hitElements[0]) && !options.isDisabledSelect) {
+            pointerDown(event);
+            return;
+        }
+        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
+            hitElements.length === 0 &&
+            options.isMultiple &&
+            !options.isDisabledSelect) {
+            selectionRectangleG?.remove();
+            start = point;
+            preventTouchMove(board, event, true);
+        }
+        Transforms.setSelection(board, { ranges: [range] });
+        pointerDown(event);
+    };
+    board.globalPointerMove = (event) => {
+        if (needPreventNativeSelectionWhenMoving) {
+            // prevent text from being selected
+            event.preventDefault();
+        }
+        if (start) {
+            const movedTarget = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const rectangle = RectangleClient.toRectangleClient([start, movedTarget]);
+            selectionMovingG?.remove();
+            if (Math.hypot(rectangle.width, rectangle.height) > 5) {
+                end = movedTarget;
+                throttleRAF(() => {
+                    if (start && end) {
+                        Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
+                    }
+                });
+                setSelectionMoving(board);
+                selectionMovingG = drawRectangle(board, rectangle, {
+                    stroke: SELECTION_BORDER_COLOR,
+                    strokeWidth: 1,
+                    fill: SELECTION_FILL_COLOR,
+                    fillStyle: 'solid'
+                });
+                PlaitBoard.getHost(board).append(selectionMovingG);
+            }
+        }
+        globalPointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        if (start && end) {
+            selectionMovingG?.remove();
+            clearSelectionMoving(board);
+            Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
+        }
+        if (PlaitBoard.isFocus(board)) {
+            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
+            const isInDocument = event.target instanceof Node && document.contains(event.target);
+            const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
+            // Clear selection when mouse board outside area
+            // The framework needs to determine whether the board is focused through selection
+            if (!isInBoard && !start && !isAttachedElement && isInDocument) {
+                Transforms.setSelection(board, null);
+            }
+        }
+        start = null;
+        end = null;
+        needPreventNativeSelectionWhenMoving = false;
+        preventTouchMove(board, event, false);
+        globalPointerUp(event);
+    };
+    board.onChange = () => {
+        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+        if (options.isDisabledSelect) {
+            clearSelectedElement(board);
+        }
+        // calc selected elements entry
+        if (board.pointer !== PlaitPointerType.hand && !options.isDisabledSelect) {
+            try {
+                if (board.operations.find(value => value.type === 'set_selection')) {
+                    selectionRectangleG?.remove();
+                    const temporaryElements = getTemporaryElements(board);
+                    let elements = temporaryElements ? temporaryElements : getHitElements(board);
+                    if (!options.isMultiple && elements.length > 1) {
+                        elements = [elements[0]];
+                    }
+                    cacheSelectedElements(board, elements);
+                    previousSelectedElements = elements;
+                    deleteTemporaryElements(board);
+                    if (!isSelectionMoving(board) && elements.length > 1) {
+                        selectionRectangleG = createSelectionRectangleG(board);
+                    }
+                }
+                else {
+                    // wait node destroy and remove selected element state
+                    setTimeout(() => {
+                        const currentSelectedElements = getSelectedElements(board);
+                        if (currentSelectedElements.length && currentSelectedElements.length > 1) {
+                            if (currentSelectedElements.length !== previousSelectedElements.length ||
+                                currentSelectedElements.some((c, index) => c !== previousSelectedElements[index])) {
+                                selectionRectangleG?.remove();
+                                selectionRectangleG = createSelectionRectangleG(board);
+                                previousSelectedElements = currentSelectedElements;
+                            }
+                        }
+                        else {
+                            selectionRectangleG?.remove();
+                        }
+                    });
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        onChange();
+    };
+    board.setPluginOptions(PlaitPluginKey.withSelection, {
+        isMultiple: true,
+        isDisabledSelect: false
+    });
+    return board;
+}
+function getTemporaryElements(board) {
+    const ref = BOARD_TO_TEMPORARY_ELEMENTS.get(board);
+    if (ref) {
+        return ref.elements;
+    }
+    else {
+        return undefined;
+    }
+}
+function getTemporaryRef(board) {
+    return BOARD_TO_TEMPORARY_ELEMENTS.get(board);
+}
+function deleteTemporaryElements(board) {
+    BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
+}
+function isSelectionMoving(board) {
+    return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
+}
+function setSelectionMoving(board) {
+    PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
+    BOARD_TO_IS_SELECTION_MOVING.set(board, true);
+}
+function clearSelectionMoving(board) {
+    PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
+    BOARD_TO_IS_SELECTION_MOVING.delete(board);
+}
+function createSelectionRectangleG(board) {
+    const elements = getSelectedElements(board);
+    const rectangle = getRectangleByElements(board, elements, false);
+    if (rectangle.width > 0 && rectangle.height > 0 && elements.length > 1) {
+        const selectionRectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: ACTIVE_STROKE_WIDTH,
+            fillStyle: 'solid'
+        });
+        selectionRectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
+        PlaitBoard.getHost(board).append(selectionRectangleG);
+        return selectionRectangleG;
+    }
+    return null;
+}
+
 function setSelection(board, selection) {
     const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
     board.apply(operation);
 }
 const SelectionTransforms = {
     setSelection,
-    setSelectionWithTemporaryElements
+    addSelectionWithTemporaryElements
 };
-function setSelectionWithTemporaryElements(board, elements) {
-    setTimeout(() => {
-        BOARD_TO_TEMPORARY_ELEMENTS.set(board, elements);
+function addSelectionWithTemporaryElements(board, elements) {
+    const timeoutId = setTimeout(() => {
         setSelection(board, { ranges: [] });
-    });
+    }, 0);
+    let ref = getTemporaryRef(board);
+    if (ref) {
+        clearTimeout(ref.timeoutId);
+        const currentElements = ref.elements;
+        ref.elements.push(...elements.filter(element => !currentElements.includes(element)));
+        ref.timeoutId = timeoutId;
+    }
+    else {
+        BOARD_TO_TEMPORARY_ELEMENTS.set(board, { timeoutId, elements });
+    }
 }
 
 function setViewport(board, viewport) {
@@ -2423,14 +2697,15 @@ function createBoard(children, options) {
         isMovable: element => false,
         getRectangle: element => null,
         applyTheme: (element) => { },
-        pointerDown: (pointer) => { },
-        pointerMove: (pointer) => { },
-        pointerUp: (pointer) => { },
-        pointerCancel: (pointer) => { },
-        pointerOut: (pointer) => { },
-        pointerLeave: (pointer) => { },
-        globalPointerMove: (pointer) => { },
-        globalPointerUp: (pointer) => { },
+        isAlign: element => false,
+        pointerDown: pointer => { },
+        pointerMove: pointer => { },
+        pointerUp: pointer => { },
+        pointerCancel: pointer => { },
+        pointerOut: pointer => { },
+        pointerLeave: pointer => { },
+        globalPointerMove: pointer => { },
+        globalPointerUp: pointer => { }
     };
     return board;
 }
@@ -2585,175 +2860,6 @@ function withHandPointer(board) {
     return board;
 }
 
-function withSelection(board) {
-    const { pointerDown, globalPointerMove, globalPointerUp, onChange } = board;
-    let start = null;
-    let end = null;
-    let selectionMovingG;
-    let selectionOuterG;
-    let previousSelectedElements;
-    // prevent text from being selected when user pressed main pointer and is moving
-    let needPreventNativeSelectionWhenMoving = false;
-    board.pointerDown = (event) => {
-        if (event.target instanceof Element && !event.target.closest('.plait-richtext-container')) {
-            needPreventNativeSelectionWhenMoving = true;
-        }
-        if (!isMainPointer(event)) {
-            pointerDown(event);
-            return;
-        }
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const range = { anchor: point, focus: point };
-        const hitElements = getHitElements(board, { ranges: [range] });
-        const selectedElements = getSelectedElements(board);
-        if (hitElements.length === 1 && selectedElements.includes(hitElements[0]) && !options.isDisabledSelect) {
-            pointerDown(event);
-            return;
-        }
-        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
-            hitElements.length === 0 &&
-            options.isMultiple &&
-            !options.isDisabledSelect) {
-            start = point;
-            preventTouchMove(board, event, true);
-        }
-        Transforms.setSelection(board, { ranges: [range] });
-        pointerDown(event);
-    };
-    board.globalPointerMove = (event) => {
-        if (needPreventNativeSelectionWhenMoving) {
-            // prevent text from being selected
-            event.preventDefault();
-        }
-        if (start) {
-            const movedTarget = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const rectangle = RectangleClient.toRectangleClient([start, movedTarget]);
-            selectionMovingG?.remove();
-            if (Math.hypot(rectangle.width, rectangle.height) > 5) {
-                end = movedTarget;
-                throttleRAF(() => {
-                    if (start && end) {
-                        Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
-                    }
-                });
-                setSelectionMoving(board);
-                selectionMovingG = drawRectangle(board, rectangle, {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: 1,
-                    fill: SELECTION_FILL_COLOR,
-                    fillStyle: 'solid'
-                });
-                PlaitBoard.getHost(board).append(selectionMovingG);
-            }
-        }
-        globalPointerMove(event);
-    };
-    board.globalPointerUp = (event) => {
-        if (start && end) {
-            selectionMovingG?.remove();
-            clearSelectionMoving(board);
-            Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
-        }
-        if (PlaitBoard.isFocus(board)) {
-            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
-            const isInDocument = event.target instanceof Node && document.contains(event.target);
-            const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
-            // Clear selection when mouse board outside area
-            // The framework needs to determine whether the board is focused through selection
-            if (!isInBoard && !start && !isAttachedElement && isInDocument) {
-                Transforms.setSelection(board, null);
-            }
-        }
-        start = null;
-        end = null;
-        needPreventNativeSelectionWhenMoving = false;
-        preventTouchMove(board, event, false);
-        globalPointerUp(event);
-    };
-    board.onChange = () => {
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (options.isDisabledSelect) {
-            selectionOuterG?.remove();
-            clearSelectedElement(board);
-        }
-        // calc selected elements entry
-        if (board.pointer !== PlaitPointerType.hand && !options.isDisabledSelect) {
-            try {
-                if (board.operations.find(value => value.type === 'set_selection')) {
-                    selectionOuterG?.remove();
-                    const temporaryElements = getTemporaryElements(board);
-                    let elements = temporaryElements ? temporaryElements : getHitElements(board);
-                    if (!options.isMultiple && elements.length > 1) {
-                        elements = [elements[0]];
-                    }
-                    cacheSelectedElements(board, elements);
-                    previousSelectedElements = elements;
-                    const { width, height } = getRectangleByElements(board, elements, false);
-                    if (width > 0 && height > 0 && elements.length > 1) {
-                        selectionOuterG = createSelectionOuterG(board, elements);
-                        selectionOuterG.classList.add('selection-outer');
-                        PlaitBoard.getHost(board).append(selectionOuterG);
-                    }
-                    deleteTemporaryElements(board);
-                }
-                else {
-                    // wait node destroy and remove selected element state
-                    setTimeout(() => {
-                        const currentSelectedElements = getSelectedElements(board);
-                        if (currentSelectedElements.length && currentSelectedElements.length > 1) {
-                            const selectedElementChange = currentSelectedElements.some(item => !previousSelectedElements.includes(item));
-                            if (selectedElementChange) {
-                                selectionOuterG?.remove();
-                                selectionOuterG = createSelectionOuterG(board, currentSelectedElements);
-                                selectionOuterG.classList.add('selection-outer');
-                                PlaitBoard.getHost(board).append(selectionOuterG);
-                            }
-                        }
-                        else {
-                            selectionOuterG?.remove();
-                        }
-                    });
-                }
-            }
-            catch (error) {
-                console.error(error);
-            }
-        }
-        onChange();
-    };
-    board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isMultiple: true,
-        isDisabledSelect: false
-    });
-    return board;
-}
-function getTemporaryElements(board) {
-    return BOARD_TO_TEMPORARY_ELEMENTS.get(board);
-}
-function deleteTemporaryElements(board) {
-    BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
-}
-function isSelectionMoving(board) {
-    return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
-}
-function setSelectionMoving(board) {
-    PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
-    BOARD_TO_IS_SELECTION_MOVING.set(board, true);
-}
-function clearSelectionMoving(board) {
-    PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
-    BOARD_TO_IS_SELECTION_MOVING.delete(board);
-}
-function createSelectionOuterG(board, selectElements) {
-    const rectangle = getRectangleByElements(board, selectElements, false);
-    return drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
-        stroke: SELECTION_BORDER_COLOR,
-        strokeWidth: ACTIVE_STROKE_WIDTH,
-        fillStyle: 'solid'
-    });
-}
-
 function withViewport(board) {
     const { onChange } = board;
     const throttleUpdate = debounce(() => {
@@ -2782,6 +2888,372 @@ function withViewport(board) {
     return board;
 }
 
+const ALIGN_TOLERANCE = 2;
+class AlignReaction {
+    constructor(board, activeElements, activeRectangle) {
+        this.board = board;
+        this.activeElements = activeElements;
+        this.activeRectangle = activeRectangle;
+        this.alignRectangles = this.getAlignRectangle();
+    }
+    getAlignRectangle() {
+        const result = [];
+        depthFirstRecursion(this.board, node => {
+            if (PlaitBoard.isBoard(node) || this.activeElements.some(element => node.id === element.id) || !this.board.isAlign(node)) {
+                return;
+            }
+            const rectangle = this.board.getRectangle(node);
+            rectangle && result.push(rectangle);
+        }, node => {
+            if (node && (PlaitBoard.isBoard(node) || this.board.isRecursion(node))) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        }, true);
+        return result;
+    }
+    handleAlign() {
+        const alignRectangles = this.getAlignRectangle();
+        const g = createG();
+        let alignLines = [];
+        const offset = 12;
+        let deltaX = 0;
+        let deltaY = 0;
+        let isCorrectX = false;
+        let isCorrectY = false;
+        for (let alignRectangle of alignRectangles) {
+            const closestDistances = this.calculateClosestDistances(this.activeRectangle, alignRectangle);
+            let canDrawHorizontal = false;
+            if (!isCorrectX && closestDistances.absXDistance < ALIGN_TOLERANCE) {
+                deltaX = closestDistances.xDistance;
+                this.activeRectangle.x -= deltaX;
+                isCorrectX = true;
+                canDrawHorizontal = true;
+            }
+            if (closestDistances.absXDistance === 0) {
+                canDrawHorizontal = true;
+            }
+            if (canDrawHorizontal) {
+                const verticalY = [
+                    alignRectangle.y,
+                    alignRectangle.y + alignRectangle.height,
+                    this.activeRectangle.y,
+                    this.activeRectangle.y + this.activeRectangle.height
+                ];
+                const lineTopY = Math.min(...verticalY) - offset;
+                const lineBottomY = Math.max(...verticalY) + offset;
+                const leftLine = [this.activeRectangle.x, lineTopY, this.activeRectangle.x, lineBottomY];
+                const middleLine = [
+                    this.activeRectangle.x + this.activeRectangle.width / 2,
+                    lineTopY,
+                    this.activeRectangle.x + this.activeRectangle.width / 2,
+                    lineBottomY
+                ];
+                const rightLine = [
+                    this.activeRectangle.x + this.activeRectangle.width,
+                    lineTopY,
+                    this.activeRectangle.x + this.activeRectangle.width,
+                    lineBottomY
+                ];
+                const shouldDrawLeftLine = closestDistances.indexX === 0 ||
+                    closestDistances.indexX === 1 ||
+                    (closestDistances.indexX === 2 && this.activeRectangle.width === alignRectangle.width);
+                if (shouldDrawLeftLine && !alignLines[0]) {
+                    alignLines[0] = leftLine;
+                }
+                const shouldDrawRightLine = closestDistances.indexX === 2 ||
+                    closestDistances.indexX === 3 ||
+                    (closestDistances.indexX === 0 && this.activeRectangle.width === alignRectangle.width);
+                if (shouldDrawRightLine && !alignLines[2]) {
+                    alignLines[2] = rightLine;
+                }
+                const shouldDrawMiddleLine = closestDistances.indexX === 4 || (!shouldDrawLeftLine && !shouldDrawRightLine);
+                if (shouldDrawMiddleLine && !alignLines[1]) {
+                    alignLines[1] = middleLine;
+                }
+                isCorrectX = true;
+            }
+            let canDrawVertical = false;
+            if (!isCorrectY && closestDistances.absYDistance < ALIGN_TOLERANCE) {
+                deltaY = closestDistances.yDistance;
+                this.activeRectangle.y -= deltaY;
+                isCorrectY = true;
+                canDrawVertical = true;
+            }
+            if (closestDistances.absYDistance === 0) {
+                canDrawVertical = true;
+            }
+            if (canDrawVertical) {
+                const horizontalX = [
+                    alignRectangle.x,
+                    alignRectangle.x + alignRectangle.width,
+                    this.activeRectangle.x,
+                    this.activeRectangle.x + this.activeRectangle.width
+                ];
+                const lineLeftX = Math.min(...horizontalX) - offset;
+                const lineRightX = Math.max(...horizontalX) + offset;
+                const topLine = [lineLeftX, this.activeRectangle.y, lineRightX, this.activeRectangle.y];
+                const horizontalMiddleLine = [
+                    lineLeftX,
+                    this.activeRectangle.y + this.activeRectangle.height / 2,
+                    lineRightX,
+                    this.activeRectangle.y + this.activeRectangle.height / 2
+                ];
+                const bottomLine = [
+                    lineLeftX,
+                    this.activeRectangle.y + this.activeRectangle.height,
+                    lineRightX,
+                    this.activeRectangle.y + this.activeRectangle.height
+                ];
+                const shouldDrawTopLine = closestDistances.indexY === 0 ||
+                    closestDistances.indexY === 1 ||
+                    (closestDistances.indexY === 2 && this.activeRectangle.height === alignRectangle.height);
+                if (shouldDrawTopLine && !alignLines[3]) {
+                    alignLines[3] = topLine;
+                }
+                const shouldDrawBottomLine = closestDistances.indexY === 2 ||
+                    closestDistances.indexY === 3 ||
+                    (closestDistances.indexY === 0 && this.activeRectangle.width === alignRectangle.width);
+                if (shouldDrawBottomLine && !alignLines[5]) {
+                    alignLines[5] = bottomLine;
+                }
+                const shouldDrawMiddleLine = closestDistances.indexY === 4 || (!shouldDrawTopLine && !shouldDrawBottomLine);
+                if (shouldDrawMiddleLine && !alignLines[4]) {
+                    alignLines[4] = horizontalMiddleLine;
+                }
+            }
+        }
+        const alignDeltaX = deltaX;
+        const alignDeltaY = deltaY;
+        this.activeRectangle.x += deltaX;
+        const distributeHorizontalResult = this.alignDistribute(alignRectangles, true);
+        const distributeVerticalResult = this.alignDistribute(alignRectangles, false);
+        const distributeLines = [...distributeHorizontalResult.distributeLines, ...distributeVerticalResult.distributeLines];
+        if (distributeHorizontalResult.delta) {
+            deltaX = distributeHorizontalResult.delta;
+            if (alignDeltaX !== deltaX) {
+                alignLines[0] = [];
+                alignLines[1] = [];
+                alignLines[2] = [];
+            }
+        }
+        if (distributeVerticalResult.delta) {
+            deltaY = distributeVerticalResult.delta;
+            if (alignDeltaY !== deltaY) {
+                alignLines[3] = [];
+                alignLines[4] = [];
+                alignLines[5] = [];
+            }
+        }
+        if (alignLines.length) {
+            this.drawAlignLines(alignLines, g);
+        }
+        if (distributeLines.length) {
+            this.drawDistributeLines(distributeLines, g);
+        }
+        return { deltaX, deltaY, g };
+    }
+    calculateClosestDistances(activeRectangle, alignRectangle) {
+        const activeRectangleCenter = [activeRectangle.x + activeRectangle.width / 2, activeRectangle.y + activeRectangle.height / 2];
+        const alignRectangleCenter = [alignRectangle.x + alignRectangle.width / 2, alignRectangle.y + alignRectangle.height / 2];
+        const centerXDistance = activeRectangleCenter[0] - alignRectangleCenter[0];
+        const centerYDistance = activeRectangleCenter[1] - alignRectangleCenter[1];
+        const leftToLeft = activeRectangle.x - alignRectangle.x;
+        const leftToRight = activeRectangle.x - (alignRectangle.x + alignRectangle.width);
+        const rightToRight = activeRectangle.x + activeRectangle.width - (alignRectangle.x + alignRectangle.width);
+        const rightToLeft = activeRectangle.x + activeRectangle.width - alignRectangle.x;
+        const topToTop = activeRectangle.y - alignRectangle.y;
+        const topToBottom = activeRectangle.y - (alignRectangle.y + alignRectangle.height);
+        const bottomToTop = activeRectangle.y + activeRectangle.height - alignRectangle.y;
+        const bottomToBottom = activeRectangle.y + activeRectangle.height - (alignRectangle.y + alignRectangle.height);
+        const xDistances = [leftToLeft, leftToRight, rightToRight, rightToLeft, centerXDistance];
+        const yDistances = [topToTop, topToBottom, bottomToBottom, bottomToTop, centerYDistance];
+        const xDistancesAbs = xDistances.map(distance => Math.abs(distance));
+        const yDistancesAbs = yDistances.map(distance => Math.abs(distance));
+        const indexX = xDistancesAbs.indexOf(Math.min(...xDistancesAbs));
+        const indexY = yDistancesAbs.indexOf(Math.min(...yDistancesAbs));
+        return {
+            absXDistance: xDistancesAbs[indexX],
+            xDistance: xDistances[indexX],
+            absYDistance: yDistancesAbs[indexY],
+            yDistance: yDistances[indexY],
+            indexX,
+            indexY
+        };
+    }
+    alignDistribute(alignRectangles, isHorizontal) {
+        let distributeLines = [];
+        let delta = 0;
+        let rectangles = [];
+        const axis = isHorizontal ? 'x' : 'y';
+        const side = isHorizontal ? 'width' : 'height';
+        const activeRectangleCenter = this.activeRectangle[axis] + this.activeRectangle[side] / 2;
+        alignRectangles.forEach(rec => {
+            const isCross = isHorizontal ? isHorizontalCross(rec, this.activeRectangle) : isVerticalCross(rec, this.activeRectangle);
+            if (isCross && !RectangleClient.isHit(rec, this.activeRectangle)) {
+                rectangles.push(rec);
+            }
+        });
+        rectangles = [...rectangles, this.activeRectangle].sort((a, b) => a[axis] - b[axis]);
+        const refArray = [];
+        let distributeDistance = 0;
+        let beforeIndex = undefined;
+        let afterIndex = undefined;
+        for (let i = 0; i < rectangles.length; i++) {
+            for (let j = i + 1; j < rectangles.length; j++) {
+                const before = rectangles[i];
+                const after = rectangles[j];
+                const distance = after[axis] - (before[axis] + before[side]);
+                let dif = Infinity;
+                if (refArray[i]?.after) {
+                    refArray[i].after.push({ distance, index: j });
+                }
+                else {
+                    refArray[i] = { ...refArray[i], after: [{ distance, index: j }] };
+                }
+                if (refArray[j]?.before) {
+                    refArray[j].before.push({ distance, index: i });
+                }
+                else {
+                    refArray[j] = { ...refArray[j], before: [{ distance, index: i }] };
+                }
+                //middle
+                let _center = (before[axis] + before[side] + after[axis]) / 2;
+                dif = Math.abs(activeRectangleCenter - _center);
+                if (dif < ALIGN_TOLERANCE) {
+                    distributeDistance = (after[axis] - (before[axis] + before[side]) - this.activeRectangle[side]) / 2;
+                    delta = activeRectangleCenter - _center;
+                    beforeIndex = i;
+                    afterIndex = j;
+                }
+                //after
+                const distanceRight = after[axis] - (before[axis] + before[side]);
+                _center = after[axis] + after[side] + distanceRight + this.activeRectangle[side] / 2;
+                dif = Math.abs(activeRectangleCenter - _center);
+                if (!distributeDistance && dif < ALIGN_TOLERANCE) {
+                    distributeDistance = distanceRight;
+                    beforeIndex = j;
+                    delta = activeRectangleCenter - _center;
+                }
+                //before
+                const distanceBefore = after[axis] - (before[axis] + before[side]);
+                _center = before[axis] - distanceBefore - this.activeRectangle[side] / 2;
+                dif = Math.abs(activeRectangleCenter - _center);
+                if (!distributeDistance && dif < ALIGN_TOLERANCE) {
+                    distributeDistance = distanceBefore;
+                    afterIndex = i;
+                    delta = activeRectangleCenter - _center;
+                }
+            }
+        }
+        const activeIndex = rectangles.indexOf(this.activeRectangle);
+        let beforeIndexes = [];
+        let afterIndexes = [];
+        if (beforeIndex !== undefined) {
+            beforeIndexes.push(beforeIndex);
+            findRectangle(distributeDistance, refArray[beforeIndex], 'before', beforeIndexes);
+        }
+        if (afterIndex !== undefined) {
+            afterIndexes.push(afterIndex);
+            findRectangle(distributeDistance, refArray[afterIndex], 'after', afterIndexes);
+        }
+        if (beforeIndexes.length || afterIndexes.length) {
+            const indexArr = [...beforeIndexes.reverse(), activeIndex, ...afterIndexes];
+            this.activeRectangle[axis] -= delta;
+            for (let i = 1; i < indexArr.length; i++) {
+                distributeLines.push(getLinePoints(rectangles[indexArr[i - 1]], rectangles[indexArr[i]]));
+            }
+        }
+        function findRectangle(distance, ref, direction, rectangleIndexes) {
+            const arr = ref[direction];
+            const index = refArray.indexOf(ref);
+            if ((index === 0 && direction === 'before') || (index === refArray.length - 1 && direction === 'after'))
+                return;
+            for (let i = 0; i < arr.length; i++) {
+                if (Math.abs(arr[i].distance - distance) < 0.1) {
+                    rectangleIndexes.push(arr[i].index);
+                    findRectangle(distance, refArray[arr[i].index], direction, rectangleIndexes);
+                    return;
+                }
+            }
+        }
+        function getLinePoints(beforeRectangle, afterRectangle) {
+            const oppositeAxis = axis === 'x' ? 'y' : 'x';
+            const oppositeSide = side === 'width' ? 'height' : 'width';
+            const align = [
+                beforeRectangle[oppositeAxis],
+                beforeRectangle[oppositeAxis] + beforeRectangle[oppositeSide],
+                afterRectangle[oppositeAxis],
+                afterRectangle[oppositeAxis] + afterRectangle[oppositeSide]
+            ];
+            const sortArr = align.sort((a, b) => a - b);
+            const average = (sortArr[1] + sortArr[2]) / 2;
+            const offset = 3;
+            return isHorizontal
+                ? [
+                    [beforeRectangle.x + beforeRectangle.width + offset, average],
+                    [afterRectangle.x - offset, average]
+                ]
+                : [
+                    [average, beforeRectangle.y + beforeRectangle.height + offset],
+                    [average, afterRectangle.y - offset]
+                ];
+        }
+        return { delta, distributeLines };
+    }
+    drawAlignLines(lines, g) {
+        lines.forEach(points => {
+            if (!points.length)
+                return;
+            const xAlign = PlaitBoard.getRoughSVG(this.board).line(points[0], points[1], points[2], points[3], {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: 1,
+                strokeLineDash: [4, 4]
+            });
+            g.appendChild(xAlign);
+        });
+    }
+    drawDistributeLines(lines, g) {
+        lines.forEach(line => {
+            if (!line.length)
+                return;
+            let isHorizontal = line[0][1] === line[1][1];
+            const yAlign = PlaitBoard.getRoughSVG(this.board).line(line[0][0], line[0][1], line[1][0], line[1][1], {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: 1
+            });
+            g.appendChild(yAlign);
+            line.forEach(point => {
+                const barPoint = getBarPoint(point, isHorizontal);
+                const bar = PlaitBoard.getRoughSVG(this.board).line(barPoint[0][0], barPoint[0][1], barPoint[1][0], barPoint[1][1], {
+                    stroke: SELECTION_BORDER_COLOR,
+                    strokeWidth: 1
+                });
+                g.appendChild(bar);
+            });
+        });
+    }
+}
+function isHorizontalCross(rectangle, other) {
+    return !(rectangle.y + rectangle.height < other.y || rectangle.y > other.y + other.height);
+}
+function isVerticalCross(rectangle, other) {
+    return !(rectangle.x + rectangle.width < other.x || rectangle.x > other.x + other.width);
+}
+function getBarPoint(point, isHorizontal) {
+    return isHorizontal
+        ? [
+            [point[0], point[1] - 4],
+            [point[0], point[1] + 4]
+        ]
+        : [
+            [point[0] - 4, point[1]],
+            [point[0] + 4, point[1]]
+        ];
+}
+
 function withMoving(board) {
     const { pointerDown, pointerMove, globalPointerUp, globalPointerMove } = board;
     let offsetX = 0;
@@ -2789,6 +3261,7 @@ function withMoving(board) {
     let isPreventDefault = false;
     let startPoint;
     let activeElements = [];
+    let alignG = null;
     board.pointerDown = (event) => {
         const host = BOARD_TO_HOST.get(board);
         const point = transformPoint(board, toPoint(event.x, event.y, host));
@@ -2815,13 +3288,23 @@ function withMoving(board) {
             if (!isPreventDefault) {
                 isPreventDefault = true;
             }
+            alignG?.remove();
             const host = BOARD_TO_HOST.get(board);
             const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
             offsetX = endPoint[0] - startPoint[0];
             offsetY = endPoint[1] - startPoint[1];
-            const offsetBuffer = 5;
-            if (Math.abs(offsetX) > offsetBuffer || Math.abs(offsetY) > offsetBuffer || getMovingElements(board).length > 0) {
+            const tolerance = 5;
+            if (Math.abs(offsetX) > tolerance || Math.abs(offsetY) > tolerance || getMovingElements(board).length > 0) {
                 throttleRAF(() => {
+                    const activeElementsRectangle = getRectangleByElements(board, activeElements, true);
+                    activeElementsRectangle.x += offsetX;
+                    activeElementsRectangle.y += offsetY;
+                    const reactionManager = new AlignReaction(board, activeElements, activeElementsRectangle);
+                    const ref = reactionManager.handleAlign();
+                    offsetX -= ref.deltaX;
+                    offsetY -= ref.deltaY;
+                    alignG = ref.g;
+                    PlaitBoard.getElementActiveHost(board).append(alignG);
                     handleTouchTarget(board);
                     const currentElements = activeElements.map(activeElement => {
                         const points = activeElement.points || [];
@@ -2863,6 +3346,7 @@ function withMoving(board) {
         globalPointerUp(event);
     };
     function cancelMove(board) {
+        alignG?.remove();
         startPoint = null;
         offsetX = 0;
         offsetY = 0;
@@ -2976,11 +3460,13 @@ const withHotkey = (board) => {
                     return false;
                 }
             }, true);
-            Transforms.setSelectionWithTemporaryElements(board, elements);
+            Transforms.addSelectionWithTemporaryElements(board, elements);
             return;
         }
         const selectedElements = getSelectedElements(board);
-        if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0 && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
+        if (!PlaitBoard.isReadonly(board) &&
+            selectedElements.length > 0 &&
+            (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
             event.preventDefault();
             board.deleteFragment(null);
         }
@@ -3108,14 +3594,15 @@ class PlaitElementComponent {
         this.board.destroyElement(this.getContext());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitElementComponent, selector: "plait-element", inputs: { index: "index", element: "element", parent: "parent", board: "board", effect: "effect", parentG: "parentG" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitElementComponent, isStandalone: true, selector: "plait-element", inputs: { index: "index", element: "element", parent: "parent", board: "board", effect: "effect", parentG: "parentG" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-element',
                     template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }]; }, propDecorators: { index: [{
                 type: Input
@@ -3131,7 +3618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 type: Input
             }] } });
 
-class PlaitChildrenElement {
+class PlaitChildrenElementComponent {
     constructor() {
         this.trackBy = (index, element) => {
             return element.id;
@@ -3145,8 +3632,8 @@ class PlaitChildrenElement {
             this.parentG = PlaitBoard.getElementHost(this.board);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitChildrenElement, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitChildrenElement, selector: "plait-children", inputs: { board: "board", parent: "parent", effect: "effect", parentG: "parentG" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitChildrenElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitChildrenElementComponent, isStandalone: true, selector: "plait-children", inputs: { board: "board", parent: "parent", effect: "effect", parentG: "parentG" }, ngImport: i0, template: `
         <plait-element
             *ngFor="let item of parent.children; let index = index; trackBy: trackBy"
             [index]="index"
@@ -3156,9 +3643,9 @@ class PlaitChildrenElement {
             [effect]="effect"
             [parentG]="parentG"
         ></plait-element>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "parent", "board", "effect", "parentG"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "parent", "board", "effect", "parentG"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitChildrenElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitChildrenElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-children',
@@ -3172,7 +3659,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
             [effect]="effect"
             [parentG]="parentG"
         ></plait-element>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgFor, PlaitElementComponent]
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { board: [{
                 type: Input
@@ -3404,7 +3893,7 @@ class PlaitBoardComponent {
             const selectedElements = getSelectedElements(this.board);
             event.preventDefault();
             const rectangle = getRectangleByElements(this.board, selectedElements, false);
-            this.board.setFragment(event.clipboardData, rectangle);
+            this.board.setFragment(event.clipboardData, rectangle, 'copy');
         });
         fromEvent(document, 'paste')
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
@@ -3421,7 +3910,7 @@ class PlaitBoardComponent {
             const selectedElements = getSelectedElements(this.board);
             event.preventDefault();
             const rectangle = getRectangleByElements(this.board, selectedElements, false);
-            this.board.setFragment(event.clipboardData, rectangle);
+            this.board.setFragment(event.clipboardData, rectangle, 'cut');
             this.board.deleteFragment(event.clipboardData);
         });
     }
@@ -3496,7 +3985,7 @@ class PlaitBoardComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, providers: [PlaitContextService], queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitBoardComponent, isStandalone: true, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, providers: [PlaitContextService], queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
                 <g class="element-host"></g>
@@ -3506,7 +3995,7 @@ class PlaitBoardComponent {
             <plait-children [board]="board" [effect]="effect"></plait-children>
         </div>
         <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "component", type: PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitBoardComponent, decorators: [{
             type: Component,
@@ -3524,7 +4013,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
         <ng-content></ng-content>
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [PlaitContextService]
+                    providers: [PlaitContextService],
+                    standalone: true,
+                    imports: [PlaitChildrenElementComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { plaitValue: [{
                 type: Input
@@ -3563,21 +4054,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 args: [PlaitIslandBaseComponent, { descendants: true }]
             }] } });
 
-const COMPONENTS = [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent];
-class PlaitModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: PlaitModule, declarations: [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent], imports: [CommonModule], exports: [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENTS],
-                    imports: [CommonModule],
-                    exports: [...COMPONENTS]
-                }]
-        }] });
-
 /**
  * 1.create board instance
  * 2.build fake node weak map
@@ -3746,5 +4222,5 @@ function createModModifierKeys() {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, 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, CLIP_BOARD_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, 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, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, 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_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, PlaitChildrenElement, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionOuterG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, findElements, getBoardRectangle, getClipboardByKey, getClipboardDataByMedia, getDataFromClipboard, getElementById, getElementHostBBox, getHitElementOfRoot, getHitElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getTextFromClipboard, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isLineHitLine, isMainPointer, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setClipboardDataByMedia, setClipboardDataByText, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateForeignObjectWidth, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
+export { A, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, 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, CLIP_BOARD_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, 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, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, 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_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, PlaitChildrenElementComponent, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionRectangleG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, findElements, getBoardRectangle, getClipboardByKey, getClipboardDataByMedia, getDataFromClipboard, getElementById, getElementHostBBox, getHitElementOfRoot, getHitElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getTemporaryRef, getTextFromClipboard, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isLineHitLine, isMainPointer, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setClipboardDataByMedia, setClipboardDataByText, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateForeignObjectWidth, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map