@plait/core 0.24.0-next.11 → 0.24.0-next.13

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();
@@ -1245,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) {
@@ -1262,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;
@@ -1293,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);
@@ -1302,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;
@@ -1326,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;
@@ -1759,7 +1830,7 @@ const Point = {
 const Viewport = {
     isViewport: (value) => {
         return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
-    },
+    }
 };
 
 const SAVING = new WeakMap();
@@ -1873,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) {
@@ -2626,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;
 }
@@ -2817,7 +2889,7 @@ function withViewport(board) {
 }
 
 const ALIGN_TOLERANCE = 2;
-class ReactionManager {
+class AlignReaction {
     constructor(board, activeElements, activeRectangle) {
         this.board = board;
         this.activeElements = activeElements;
@@ -2827,7 +2899,7 @@ class ReactionManager {
     getAlignRectangle() {
         const result = [];
         depthFirstRecursion(this.board, node => {
-            if (PlaitBoard.isBoard(node) || this.activeElements.some(element => node.id === element.id) || node.type !== 'geometry') {
+            if (PlaitBoard.isBoard(node) || this.activeElements.some(element => node.id === element.id) || !this.board.isAlign(node)) {
                 return;
             }
             const rectangle = this.board.getRectangle(node);
@@ -2954,17 +3026,27 @@ class ReactionManager {
             }
         }
         const alignDeltaX = deltaX;
+        const alignDeltaY = deltaY;
         this.activeRectangle.x += deltaX;
-        const distributeHorizontalResult = this.alignDistributeHorizontal(alignRectangles);
-        const distributeLines = distributeHorizontalResult.distributeLines;
-        if (distributeHorizontalResult.deltaX) {
-            deltaX = distributeHorizontalResult.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);
         }
@@ -3001,82 +3083,85 @@ class ReactionManager {
             indexY
         };
     }
-    alignDistributeHorizontal(alignRectangles) {
+    alignDistribute(alignRectangles, isHorizontal) {
         let distributeLines = [];
-        let deltaX = 0;
-        const activeRectangleCenterX = this.activeRectangle.x + this.activeRectangle.width / 2;
+        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 => {
-            if (isHorizontalCross(rec, this.activeRectangle) && !RectangleClient.isHit(rec, this.activeRectangle)) {
+            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.x - b.x);
+        rectangles = [...rectangles, this.activeRectangle].sort((a, b) => a[axis] - b[axis]);
         const refArray = [];
         let distributeDistance = 0;
-        let leftIndex = undefined;
-        let rightIndex = undefined;
+        let beforeIndex = undefined;
+        let afterIndex = undefined;
         for (let i = 0; i < rectangles.length; i++) {
             for (let j = i + 1; j < rectangles.length; j++) {
-                const left = rectangles[i];
-                const right = rectangles[j];
-                const distance = right.x - (left.x + left.width);
+                const before = rectangles[i];
+                const after = rectangles[j];
+                const distance = after[axis] - (before[axis] + before[side]);
                 let dif = Infinity;
-                if (refArray[i]?.right) {
-                    refArray[i].right.push({ distance, index: j });
+                if (refArray[i]?.after) {
+                    refArray[i].after.push({ distance, index: j });
                 }
                 else {
-                    refArray[i] = { ...refArray[i], right: [{ distance, index: j }] };
+                    refArray[i] = { ...refArray[i], after: [{ distance, index: j }] };
                 }
-                if (refArray[j]?.left) {
-                    refArray[j].left.push({ distance, index: i });
+                if (refArray[j]?.before) {
+                    refArray[j].before.push({ distance, index: i });
                 }
                 else {
-                    refArray[j] = { ...refArray[j], left: [{ distance, index: i }] };
+                    refArray[j] = { ...refArray[j], before: [{ distance, index: i }] };
                 }
                 //middle
-                let _centerX = (left.x + left.width + right.x) / 2;
-                dif = Math.abs(activeRectangleCenterX - _centerX);
+                let _center = (before[axis] + before[side] + after[axis]) / 2;
+                dif = Math.abs(activeRectangleCenter - _center);
                 if (dif < ALIGN_TOLERANCE) {
-                    distributeDistance = (right.x - (left.x + left.width) - this.activeRectangle.width) / 2;
-                    deltaX = activeRectangleCenterX - _centerX;
-                    leftIndex = i;
-                    rightIndex = j;
+                    distributeDistance = (after[axis] - (before[axis] + before[side]) - this.activeRectangle[side]) / 2;
+                    delta = activeRectangleCenter - _center;
+                    beforeIndex = i;
+                    afterIndex = j;
                 }
-                //right
-                const distanceRight = right.x - (left.x + left.width);
-                _centerX = right.x + right.width + distanceRight + this.activeRectangle.width / 2;
-                dif = Math.abs(activeRectangleCenterX - _centerX);
+                //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;
-                    leftIndex = j;
-                    deltaX = activeRectangleCenterX - _centerX;
+                    beforeIndex = j;
+                    delta = activeRectangleCenter - _center;
                 }
-                //left
-                const distanceLeft = right.x - (left.x + left.width);
-                _centerX = left.x - distanceLeft - this.activeRectangle.width / 2;
-                dif = Math.abs(activeRectangleCenterX - _centerX);
+                //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 = distanceLeft;
-                    rightIndex = i;
-                    deltaX = activeRectangleCenterX - _centerX;
+                    distributeDistance = distanceBefore;
+                    afterIndex = i;
+                    delta = activeRectangleCenter - _center;
                 }
             }
         }
         const activeIndex = rectangles.indexOf(this.activeRectangle);
-        let leftIndexes = [];
-        let rightIndexes = [];
-        if (leftIndex !== undefined) {
-            leftIndexes.push(leftIndex);
-            findRectangle(distributeDistance, refArray[leftIndex], Direction.left, leftIndexes);
-        }
-        if (rightIndex !== undefined) {
-            rightIndexes.push(rightIndex);
-            findRectangle(distributeDistance, refArray[rightIndex], Direction.right, rightIndexes);
-        }
-        if (leftIndexes.length || rightIndexes.length) {
-            const indexArr = [...leftIndexes.reverse(), activeIndex, ...rightIndexes];
-            this.activeRectangle.x -= deltaX;
+        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]]));
             }
@@ -3084,7 +3169,7 @@ class ReactionManager {
         function findRectangle(distance, ref, direction, rectangleIndexes) {
             const arr = ref[direction];
             const index = refArray.indexOf(ref);
-            if ((index === 0 && direction === Direction.left) || (index === refArray.length - 1 && direction === Direction.right))
+            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) {
@@ -3094,22 +3179,29 @@ class ReactionManager {
                 }
             }
         }
-        function getLinePoints(leftRectangle, rightRectangle) {
-            const verticalY = [
-                leftRectangle.y,
-                leftRectangle.y + leftRectangle.height,
-                rightRectangle.y,
-                rightRectangle.y + rightRectangle.height
-            ];
-            const sortArr = verticalY.sort((a, b) => a - b);
-            const y = (sortArr[1] + sortArr[2]) / 2;
-            const line = [
-                [leftRectangle.x + leftRectangle.width + 2, y],
-                [rightRectangle.x - 2, y]
+        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]
             ];
-            return line;
+            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 { deltaX, distributeLines };
+        return { delta, distributeLines };
     }
     drawAlignLines(lines, g) {
         lines.forEach(points => {
@@ -3124,32 +3216,43 @@ class ReactionManager {
         });
     }
     drawDistributeLines(lines, g) {
-        lines.forEach(points => {
-            if (!points.length)
+        lines.forEach(line => {
+            if (!line.length)
                 return;
-            if (points[0][1] === points[1][1]) {
-                const yAlign = PlaitBoard.getRoughSVG(this.board).line(points[0][0], points[0][1], points[1][0], points[1][1], {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: 1
-                });
-                const bar1 = PlaitBoard.getRoughSVG(this.board).line(points[0][0], points[0][1] - 4, points[0][0], points[1][1] + 4, {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: 1
-                });
-                const bar2 = PlaitBoard.getRoughSVG(this.board).line(points[1][0], points[0][1] - 4, points[1][0], points[1][1] + 4, {
+            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(yAlign);
-                g.appendChild(bar1);
-                g.appendChild(bar2);
-            }
+                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;
@@ -3190,13 +3293,13 @@ function withMoving(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 ReactionManager(board, activeElements, activeElementsRectangle);
+                    const reactionManager = new AlignReaction(board, activeElements, activeElementsRectangle);
                     const ref = reactionManager.handleAlign();
                     offsetX -= ref.deltaX;
                     offsetY -= ref.deltaY;
@@ -3361,7 +3464,9 @@ const withHotkey = (board) => {
             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);
         }
@@ -3489,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
@@ -3512,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;
@@ -3526,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"
@@ -3537,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',
@@ -3553,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
@@ -3877,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>
@@ -3887,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,
@@ -3905,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
@@ -3944,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
@@ -4127,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, 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, 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, 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 };
+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