@plait/core 0.56.2 → 0.58.0

package/fesm2022/plait-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { IterableDiffers, inject, ViewContainerRef, ChangeDetectorRef, Directive, Input, Injectable, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Output, HostBinding, ViewChild, ContentChildren } from '@angular/core';
+import { Directive, Input, Injectable, IterableDiffers, EventEmitter, inject, ElementRef, Component, ChangeDetectionStrategy, Output, HostBinding, ViewChild, ContentChildren } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { timer, Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, tap } from 'rxjs/operators';
@@ -42,51 +42,6 @@ var PlaitPointerType;
  * Extendable Custom Types Interface
  */
 
-function depthFirstRecursion(node, callback, recursion, isReverse) {
-    if (!recursion || recursion(node)) {
-        let children = [];
-        if (node.children) {
-            children = [...node.children];
-        }
-        children = isReverse ? children.reverse() : children;
-        children.forEach(child => {
-            depthFirstRecursion(child, callback, recursion);
-        });
-    }
-    callback(node);
-}
-const getIsRecursionFunc = (board) => {
-    return (element) => {
-        if (PlaitBoard.isBoard(element) || board.isRecursion(element)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    };
-};
-
-const SELECTION_BORDER_COLOR = '#6698FF';
-const SELECTION_FILL_COLOR = '#6698FF25'; // opacity 0.25
-const Selection = {
-    isCollapsed(selection) {
-        if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-};
-
-const sortElements = (board, elements, ascendingOrder = true) => {
-    return [...elements].sort((a, b) => {
-        const pathA = PlaitBoard.findPath(board, a);
-        const pathB = PlaitBoard.findPath(board, b);
-        return ascendingOrder ? pathA[0] - pathB[0] : pathB[0] - pathA[0];
-    });
-};
-
 const RectangleClient = {
     isHit: (origin, target) => {
         return RectangleClient.isHitX(origin, target) && RectangleClient.isHitY(origin, target);
@@ -244,122 +199,371 @@ const RectangleClient = {
     }
 };
 
-var PlaitPluginKey;
-(function (PlaitPluginKey) {
-    PlaitPluginKey["withSelection"] = "withSelection";
-})(PlaitPluginKey || (PlaitPluginKey = {}));
-
-const getHitElementsBySelection = (board, selection, match = () => true) => {
-    const newSelection = selection || board.selection;
-    const rectangleHitElements = [];
-    if (!newSelection) {
-        return [];
+// https://stackoverflow.com/a/6853926/232122
+function distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) {
+    const A = x - x1;
+    const B = y - y1;
+    const C = x2 - x1;
+    const D = y2 - y1;
+    const dot = A * C + B * D;
+    const lenSquare = C * C + D * D;
+    let param = -1;
+    if (lenSquare !== 0) {
+        // in case of 0 length line
+        param = dot / lenSquare;
     }
-    const isCollapsed = Selection.isCollapsed(newSelection);
-    if (isCollapsed) {
-        const hitElement = getHitElementByPoint(board, newSelection.anchor, match);
-        if (hitElement) {
-            return [hitElement];
-        }
-        else {
-            return [];
-        }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
     }
-    depthFirstRecursion(board, node => {
-        if (!PlaitBoard.isBoard(node) && match(node) && board.isRectangleHit(node, newSelection)) {
-            rectangleHitElements.push(node);
-        }
-    }, getIsRecursionFunc(board), true);
-    return rectangleHitElements;
-};
-const getHitElementByPoint = (board, point, match = () => true) => {
-    let hitElement = undefined;
-    let hitInsideElement = undefined;
-    depthFirstRecursion(board, node => {
-        if (hitElement) {
-            return;
-        }
-        if (PlaitBoard.isBoard(node) || !match(node) || !PlaitElement.hasMounted(node)) {
-            return;
-        }
-        if (board.isHit(node, point)) {
-            hitElement = node;
-            return;
-        }
-        /**
-         * 需要增加场景测试
-         * hitInsideElement 存的是第一个符合 isInsidePoint 的元素
-         * 当有元素符合 isHit 时结束遍历，并返回 hitElement
-         * 当所有元素都不符合 isHit ，则返回第一个符合 isInsidePoint 的元素
-         * 这样保证最上面的元素优先被探测到；
-         */
-        if (!hitInsideElement && board.isInsidePoint(node, point)) {
-            hitInsideElement = node;
-        }
-    }, getIsRecursionFunc(board), true);
-    return hitElement || hitInsideElement;
-};
-const getHitSelectedElements = (board, point) => {
-    const selectedElements = getSelectedElements(board);
-    const targetRectangle = selectedElements.length > 0 && getRectangleByElements(board, selectedElements, false);
-    const isInTargetRectangle = targetRectangle && RectangleClient.isPointInRectangle(targetRectangle, point);
-    if (isInTargetRectangle) {
-        return selectedElements;
+    else if (param > 1) {
+        xx = x2;
+        yy = y2;
     }
     else {
-        return [];
+        xx = x1 + param * C;
+        yy = y1 + param * D;
     }
-};
-const cacheSelectedElements = (board, selectedElements) => {
-    const sortedElements = sortElements(board, selectedElements);
-    BOARD_TO_SELECTED_ELEMENT.set(board, sortedElements);
-};
-const getSelectedElements = (board) => {
-    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
-};
-const addSelectedElement = (board, element) => {
-    let elements = [];
-    if (Array.isArray(element)) {
-        elements.push(...element);
+    const dx = x - xx;
+    const dy = y - yy;
+    return Math.hypot(dx, dy);
+}
+function getNearestPointBetweenPointAndSegment(point, linePoints) {
+    const x = point[0], y = point[1], x1 = linePoints[0][0], y1 = linePoints[0][1], x2 = linePoints[1][0], y2 = linePoints[1][1];
+    const A = x - x1;
+    const B = y - y1;
+    const C = x2 - x1;
+    const D = y2 - y1;
+    const dot = A * C + B * D;
+    const lenSquare = C * C + D * D;
+    let param = -1;
+    if (lenSquare !== 0) {
+        // in case of 0 length line
+        param = dot / lenSquare;
+    }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
+    }
+    else if (param > 1) {
+        xx = x2;
+        yy = y2;
     }
     else {
-        elements.push(element);
+        xx = x1 + param * C;
+        yy = y1 + param * D;
     }
-    const selectedElements = getSelectedElements(board);
-    cacheSelectedElements(board, [...selectedElements, ...elements]);
-};
-const removeSelectedElement = (board, element, isRemoveChildren = false) => {
-    const selectedElements = getSelectedElements(board);
-    if (selectedElements.includes(element)) {
-        const targetElements = [];
-        if (board.isRecursion(element) && isRemoveChildren) {
-            depthFirstRecursion(element, node => {
-                targetElements.push(node);
-            }, node => board.isRecursion(node));
+    return [xx, yy];
+}
+function distanceBetweenPointAndSegments(points, point) {
+    const len = points.length;
+    let distance = Infinity;
+    for (let i = 0; i < len - 1; i++) {
+        const p = points[i];
+        const p2 = points[i + 1];
+        const currentDistance = distanceBetweenPointAndSegment(point[0], point[1], p[0], p[1], p2[0], p2[1]);
+        if (currentDistance < distance) {
+            distance = currentDistance;
         }
-        else {
-            targetElements.push(element);
+    }
+    return distance;
+}
+function getNearestPointBetweenPointAndSegments(point, points, isClose = true) {
+    const len = points.length;
+    let distance = Infinity;
+    let result = point;
+    for (let i = 0; i < len; i++) {
+        const p = points[i];
+        if (i === len - 1 && !isClose)
+            continue;
+        const p2 = i === len - 1 ? points[0] : points[i + 1];
+        const currentDistance = distanceBetweenPointAndSegment(point[0], point[1], p[0], p[1], p2[0], p2[1]);
+        if (currentDistance < distance) {
+            distance = currentDistance;
+            result = getNearestPointBetweenPointAndSegment(point, [p, p2]);
         }
-        const newSelectedElements = selectedElements.filter(value => !targetElements.includes(value));
-        cacheSelectedElements(board, newSelectedElements);
     }
-};
-const clearSelectedElement = (board) => {
-    cacheSelectedElements(board, []);
-};
-const isSelectedElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    return !!selectedElements.find(value => value === element);
-};
-const temporaryDisableSelection = (board) => {
-    const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
-    board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isDisabledSelect: true
+    return result;
+}
+function getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation = 0) {
+    const rectangleClient = {
+        x: center[0] - rx,
+        y: center[1] - ry,
+        height: ry * 2,
+        width: rx * 2
+    };
+    // https://stackoverflow.com/a/46007540/232122
+    const px = Math.abs(point[0] - rectangleClient.x - rectangleClient.width / 2);
+    const py = Math.abs(point[1] - rectangleClient.y - rectangleClient.height / 2);
+    let tx = 0.707;
+    let ty = 0.707;
+    const a = Math.abs(rectangleClient.width) / 2;
+    const b = Math.abs(rectangleClient.height) / 2;
+    [0, 1, 2, 3].forEach(x => {
+        const xx = a * tx;
+        const yy = b * ty;
+        const ex = ((a * a - b * b) * tx ** 3) / a;
+        const ey = ((b * b - a * a) * ty ** 3) / b;
+        const rx = xx - ex;
+        const ry = yy - ey;
+        const qx = px - ex;
+        const qy = py - ey;
+        const r = Math.hypot(ry, rx);
+        const q = Math.hypot(qy, qx);
+        tx = Math.min(1, Math.max(0, ((qx * r) / q + ex) / a));
+        ty = Math.min(1, Math.max(0, ((qy * r) / q + ey) / b));
+        const t = Math.hypot(ty, tx);
+        tx /= t;
+        ty /= t;
     });
-    setTimeout(() => {
-        board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
-    }, 0);
-};
+    const signX = point[0] > center[0] ? 1 : -1;
+    const signY = point[1] > center[1] ? 1 : -1;
+    return [center[0] + a * tx * signX, center[1] + b * ty * signY];
+}
+function rotate(x1, y1, x2, y2, angle) {
+    // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
+    // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
+    // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
+    return [(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2];
+}
+function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+    return Math.hypot(dx, dy);
+}
+// https://stackoverflow.com/questions/5254838/calculating-distance-between-a-point-and-a-rectangular-box-nearest-point
+function distanceBetweenPointAndRectangle(x, y, rect) {
+    var dx = Math.max(rect.x - x, 0, x - (rect.x + rect.width));
+    var dy = Math.max(rect.y - y, 0, y - (rect.y + rect.height));
+    return Math.sqrt(dx * dx + dy * dy);
+}
+const isLineHitLine = (a, b, c, d) => {
+    const crossProduct = (v1, v2) => v1[0] * v2[1] - v1[1] * v2[0];
+    const ab = [b[0] - a[0], b[1] - a[1]];
+    const ac = [c[0] - a[0], c[1] - a[1]];
+    const ad = [d[0] - a[0], d[1] - a[1]];
+    const ca = [a[0] - c[0], a[1] - c[1]];
+    const cb = [b[0] - c[0], b[1] - c[1]];
+    const cd = [d[0] - c[0], d[1] - c[1]];
+    return crossProduct(ab, ac) * crossProduct(ab, ad) <= 0 && crossProduct(cd, ca) * crossProduct(cd, cb) <= 0;
+};
+const isPolylineHitRectangle = (points, rectangle, isClose = true) => {
+    const rectanglePoints = RectangleClient.getCornerPoints(rectangle);
+    const len = points.length;
+    for (let i = 0; i < len; i++) {
+        if (i === len - 1 && !isClose)
+            continue;
+        const p1 = points[i];
+        const p2 = points[(i + 1) % len];
+        const isHit = isLineHitLine(p1, p2, rectanglePoints[0], rectanglePoints[1]) ||
+            isLineHitLine(p1, p2, rectanglePoints[1], rectanglePoints[2]) ||
+            isLineHitLine(p1, p2, rectanglePoints[2], rectanglePoints[3]) ||
+            isLineHitLine(p1, p2, rectanglePoints[3], rectanglePoints[0]);
+        if (isHit || isPointInPolygon(p1, rectanglePoints) || isPointInPolygon(p2, rectanglePoints)) {
+            return true;
+        }
+    }
+    return false;
+};
+//https://stackoverflow.com/questions/22521982/check-if-point-is-inside-a-polygon
+const isPointInPolygon = (point, points) => {
+    // ray-casting algorithm based on
+    // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
+    const x = point[0], y = point[1];
+    let inside = false;
+    for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
+        let xi = points[i][0], yi = points[i][1];
+        let xj = points[j][0], yj = points[j][1];
+        let intersect = yi > y != yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+        if (intersect)
+            inside = !inside;
+    }
+    return inside;
+};
+const isPointInEllipse = (point, center, rx, ry, angle = 0) => {
+    const cosAngle = Math.cos(angle);
+    const sinAngle = Math.sin(angle);
+    const x1 = (point[0] - center[0]) * cosAngle + (point[1] - center[1]) * sinAngle;
+    const y1 = (point[1] - center[1]) * cosAngle - (point[0] - center[0]) * sinAngle;
+    return (x1 * x1) / (rx * rx) + (y1 * y1) / (ry * ry) <= 1;
+};
+const isPointInRoundRectangle = (point, rectangle, radius, angle = 0) => {
+    const { x: rectX, y: rectY, width, height } = rectangle;
+    const isInRectangle = point[0] >= rectX && point[0] <= rectX + width && point[1] >= rectY && point[1] <= rectY + height;
+    const handleLeftTop = point[0] >= rectX &&
+        point[0] <= rectX + radius &&
+        point[1] >= rectY &&
+        point[1] <= rectY + radius &&
+        Math.hypot(point[0] - (rectX + radius), point[1] - (rectY + radius)) > radius;
+    const handleLeftBottom = point[0] >= rectX &&
+        point[0] <= rectX + radius &&
+        point[1] >= rectY + height &&
+        point[1] <= rectY + height - radius &&
+        Math.hypot(point[0] - (rectX + radius), point[1] - (rectY + height - radius)) > radius;
+    const handleRightTop = point[0] >= rectX + width - radius &&
+        point[0] <= rectX + width &&
+        point[1] >= rectY &&
+        point[1] <= rectY + radius &&
+        Math.hypot(point[0] - (rectX + width - radius), point[1] - (rectY + radius)) > radius;
+    const handleRightBottom = point[0] >= rectX + width - radius &&
+        point[0] <= rectX + width &&
+        point[1] >= rectY + height - radius &&
+        point[1] <= rectY + height &&
+        Math.hypot(point[0] - (rectX + width - radius), point[1] - (rectY + height - radius)) > radius;
+    const isInCorner = handleLeftTop || handleLeftBottom || handleRightTop || handleRightBottom;
+    return isInRectangle && !isInCorner;
+};
+// https://gist.github.com/nicholaswmin/c2661eb11cad5671d816
+const catmullRomFitting = function (points) {
+    const alpha = 0.5;
+    let p0, p1, p2, p3, bp1, bp2, d1, d2, d3, A, B, N, M;
+    var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
+    const result = [];
+    result.push([Math.round(points[0][0]), Math.round(points[0][1])]);
+    var length = points.length;
+    for (var i = 0; i < length - 1; i++) {
+        p0 = i == 0 ? points[0] : points[i - 1];
+        p1 = points[i];
+        p2 = points[i + 1];
+        p3 = i + 2 < length ? points[i + 2] : p2;
+        d1 = Math.sqrt(Math.pow(p0[0] - p1[0], 2) + Math.pow(p0[1] - p1[1], 2));
+        d2 = Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2));
+        d3 = Math.sqrt(Math.pow(p2[0] - p3[0], 2) + Math.pow(p2[1] - p3[1], 2));
+        // Catmull-Rom to Cubic Bezier conversion matrix
+        // A = 2d1^2a + 3d1^a * d2^a + d3^2a
+        // B = 2d3^2a + 3d3^a * d2^a + d2^2a
+        // [   0             1            0          0          ]
+        // [   -d2^2a /N     A/N          d1^2a /N   0          ]
+        // [   0             d3^2a /M     B/M        -d2^2a /M  ]
+        // [   0             0            1          0          ]
+        d3powA = Math.pow(d3, alpha);
+        d3pow2A = Math.pow(d3, 2 * alpha);
+        d2powA = Math.pow(d2, alpha);
+        d2pow2A = Math.pow(d2, 2 * alpha);
+        d1powA = Math.pow(d1, alpha);
+        d1pow2A = Math.pow(d1, 2 * alpha);
+        A = 2 * d1pow2A + 3 * d1powA * d2powA + d2pow2A;
+        B = 2 * d3pow2A + 3 * d3powA * d2powA + d2pow2A;
+        N = 3 * d1powA * (d1powA + d2powA);
+        if (N > 0) {
+            N = 1 / N;
+        }
+        M = 3 * d3powA * (d3powA + d2powA);
+        if (M > 0) {
+            M = 1 / M;
+        }
+        bp1 = [(-d2pow2A * p0[0] + A * p1[0] + d1pow2A * p2[0]) * N, (-d2pow2A * p0[1] + A * p1[1] + d1pow2A * p2[1]) * N];
+        bp2 = [(d3pow2A * p1[0] + B * p2[0] - d2pow2A * p3[0]) * M, (d3pow2A * p1[1] + B * p2[1] - d2pow2A * p3[1]) * M];
+        if (bp1[0] == 0 && bp1[1] == 0) {
+            bp1 = p1;
+        }
+        if (bp2[0] == 0 && bp2[1] == 0) {
+            bp2 = p2;
+        }
+        result.push(bp1, bp2, p2);
+    }
+    return result;
+};
+/**
+ * the result of slope is based on Cartesian coordinate system
+ * x, y are based on the position in the Cartesian coordinate system
+ */
+function getEllipseTangentSlope(x, y, a, b) {
+    if (Math.abs(y) === 0) {
+        return x > 0 ? -Infinity : Infinity;
+    }
+    const k = (-b * b * x) / (a * a * y);
+    return k;
+}
+/**
+ * x, y are based on the position in the Cartesian coordinate system
+ */
+function getVectorFromPointAndSlope(x, y, slope) {
+    if (slope === Infinity) {
+        return [0, -1];
+    }
+    else if (slope === -Infinity) {
+        return [0, 1];
+    }
+    let vector = [1, -slope];
+    if (y < 0) {
+        vector = [-vector[0], -vector[1]];
+    }
+    return vector;
+}
+/**
+ * The DOM likes values to be fixed to 3 decimal places
+ */
+function toDomPrecision(v) {
+    return +v.toFixed(4);
+}
+function toFixed(v) {
+    return +v.toFixed(2);
+}
+/**
+ * Whether two numbers numbers a and b are approximately equal.
+ *
+ * @param a - The first point.
+ * @param b - The second point.
+ * @public
+ */
+function approximately(a, b, precision = 0.000001) {
+    return Math.abs(a - b) <= precision;
+}
+// https://medium.com/@steveruiz/find-the-points-where-a-line-segment-intercepts-an-angled-ellipse-in-javascript-typescript-e451524beece
+function getCrossingPointsBetweenEllipseAndSegment(startPoint, endPoint, cx, cy, rx, ry, segment_only = true) {
+    // If the ellipse or line segment are empty, return no tValues.
+    if (rx === 0 || ry === 0 || (startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1])) {
+        return [];
+    }
+    rx = rx < 0 ? rx : -rx;
+    ry = ry < 0 ? ry : -ry;
+    startPoint[0] -= cx;
+    startPoint[1] -= cy;
+    endPoint[0] -= cx;
+    endPoint[1] -= cy;
+    // Calculate the quadratic parameters.
+    var A = ((endPoint[0] - startPoint[0]) * (endPoint[0] - startPoint[0])) / rx / rx +
+        ((endPoint[1] - startPoint[1]) * (endPoint[1] - startPoint[1])) / ry / ry;
+    var B = (2 * startPoint[0] * (endPoint[0] - startPoint[0])) / rx / rx + (2 * startPoint[1] * (endPoint[1] - startPoint[1])) / ry / ry;
+    var C = (startPoint[0] * startPoint[0]) / rx / rx + (startPoint[1] * startPoint[1]) / ry / ry - 1;
+    // Make a list of t values (normalized points on the line where intersections occur).
+    var tValues = [];
+    // Calculate the discriminant.
+    var discriminant = B * B - 4 * A * C;
+    if (discriminant === 0) {
+        // One real solution.
+        tValues.push(-B / 2 / A);
+    }
+    else if (discriminant > 0) {
+        // Two real solutions.
+        tValues.push((-B + Math.sqrt(discriminant)) / 2 / A);
+        tValues.push((-B - Math.sqrt(discriminant)) / 2 / A);
+    }
+    return (tValues
+        // Filter to only points that are on the segment.
+        .filter(t => !segment_only || (t >= 0 && t <= 1))
+        // Solve for points.
+        .map(t => [startPoint[0] + (endPoint[0] - startPoint[0]) * t + cx, startPoint[1] + (endPoint[1] - startPoint[1]) * t + cy]));
+}
+
+function isInPlaitBoard(board, x, y) {
+    const plaitBoardElement = PlaitBoard.getBoardContainer(board);
+    const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
+    const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
+    return distances === 0;
+}
+function getRealScrollBarWidth(board) {
+    const { hideScrollbar } = board.options;
+    let scrollBarWidth = 0;
+    if (!hideScrollbar) {
+        const viewportContainer = PlaitBoard.getViewportContainer(board);
+        scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
+    }
+    return scrollBarWidth;
+}
 
 /**
  * @license
@@ -540,785 +744,57 @@ function createRect(rectangle, options) {
         const optionKey = key;
         rect.setAttribute(key, `${options[optionKey]}`);
     }
-    return rect;
-}
-const setStrokeLinecap = (g, value) => {
-    g.setAttribute('stroke-linecap', value);
-};
-const setPathStrokeLinecap = (g, value) => {
-    g.querySelectorAll('path').forEach(path => {
-        path.setAttribute('stroke-linecap', value);
-    });
-};
-function createMask() {
-    return document.createElementNS(NS, 'mask');
-}
-function createSVG() {
-    const svg = document.createElementNS(NS, 'svg');
-    return svg;
-}
-function createText(x, y, fill, textContent) {
-    var text = document.createElementNS(NS, 'text');
-    text.setAttribute('x', `${x}`);
-    text.setAttribute('y', `${y}`);
-    text.setAttribute('fill', fill);
-    text.textContent = textContent;
-    return text;
-}
-/**
- * Check if a DOM node is an element node.
- */
-const isDOMElement = (value) => {
-    return isDOMNode(value) && value.nodeType === 1;
-};
-/**
- * Check if a value is a DOM node.
- */
-const isDOMNode = (value) => {
-    return value instanceof window.Node;
-};
-const hasInputOrTextareaTarget = (target) => {
-    if (isDOMElement(target)) {
-        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
-            return true;
-        }
-    }
-    return false;
-};
-const isSecondaryPointer = (event) => {
-    return event.button === POINTER_BUTTON.SECONDARY;
-};
-const isMainPointer = (event) => {
-    return event.button === POINTER_BUTTON.MAIN;
-};
-
-function hasBeforeContextChange(value) {
-    if (value.beforeContextChange) {
-        return true;
-    }
-    return false;
-}
-function hasOnContextChanged(value) {
-    if (value.onContextChanged) {
-        return true;
-    }
-    return false;
-}
-
-class ListRender {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.children = [];
-        this.componentRefs = [];
-        this.contexts = [];
-        this.differ = null;
-        this.initialized = false;
-    }
-    initialize(children, childrenContext) {
-        this.initialized = true;
-        this.children = children;
-        children.forEach((descendant, index) => {
-            NODE_TO_INDEX.set(descendant, index);
-            NODE_TO_PARENT.set(descendant, childrenContext.parent);
-            const context = getContext(this.board, descendant, index, childrenContext.parent);
-            const componentType = getComponentType(this.board, context);
-            const componentRef = createPluginComponent(componentType, context, this.viewContainerRef, childrenContext);
-            this.componentRefs.push(componentRef);
-            this.contexts.push(context);
-        });
-        const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
-        this.differ = newDiffers.find(children).create(trackBy);
-        this.differ.diff(children);
-    }
-    update(children, childrenContext) {
-        if (!this.initialized) {
-            this.initialize(children, childrenContext);
-            return;
-        }
-        if (!this.differ) {
-            throw new Error('Exception: Can not find differ ');
-        }
-        const { board, parent } = childrenContext;
-        const diffResult = this.differ.diff(children);
-        if (diffResult) {
-            const newContexts = [];
-            const newComponentRefs = [];
-            let currentIndexForFirstElement = null;
-            diffResult.forEachItem((record) => {
-                NODE_TO_INDEX.set(record.item, record.currentIndex);
-                NODE_TO_PARENT.set(record.item, childrenContext.parent);
-                const previousContext = record.previousIndex === null ? undefined : this.contexts[record.previousIndex];
-                const context = getContext(board, record.item, record.currentIndex, parent, previousContext);
-                if (record.previousIndex === null) {
-                    const componentType = getComponentType(board, context);
-                    const componentRef = createPluginComponent(componentType, context, this.viewContainerRef, childrenContext);
-                    newContexts.push(context);
-                    newComponentRefs.push(componentRef);
-                }
-                else {
-                    const componentRef = this.componentRefs[record.previousIndex];
-                    componentRef.instance.context = context;
-                    newComponentRefs.push(componentRef);
-                    newContexts.push(context);
-                }
-                // item might has been changed, so need to compare the id
-                if (record.item === this.children[0] || record.item.id === this.children[0]?.id) {
-                    currentIndexForFirstElement = record.currentIndex;
-                }
-            });
-            diffResult.forEachOperation(record => {
-                // removed
-                if (record.currentIndex === null) {
-                    const componentRef = this.componentRefs[record.previousIndex];
-                    componentRef?.destroy();
-                }
-                // moved
-                if (record.previousIndex !== null && record.currentIndex !== null) {
-                    mountOnItemMove(record.item, record.currentIndex, childrenContext, currentIndexForFirstElement);
-                }
-            });
-            this.componentRefs = newComponentRefs;
-            this.contexts = newContexts;
-            this.children = children;
-        }
-        else {
-            const newContexts = [];
-            this.children.forEach((element, index) => {
-                NODE_TO_INDEX.set(element, index);
-                NODE_TO_PARENT.set(element, childrenContext.parent);
-                const previousContext = this.contexts[index];
-                const previousComponentRef = this.componentRefs[index];
-                const context = getContext(board, element, index, parent, previousContext);
-                previousComponentRef.instance.context = context;
-                newContexts.push(context);
-            });
-            this.contexts = newContexts;
-        }
-    }
-    destroy() {
-        this.children.forEach((element, index) => {
-            if (this.componentRefs[index]) {
-                this.componentRefs[index].destroy();
-            }
-        });
-        this.componentRefs = [];
-        this.children = [];
-        this.contexts = [];
-        this.initialized = false;
-        this.differ = null;
-    }
-}
-const trackBy = (index, element) => {
-    return element.id;
-};
-const createPluginComponent = (componentType, context, viewContainerRef, childrenContext) => {
-    const componentRef = viewContainerRef.createComponent(componentType, { injector: viewContainerRef.injector });
-    const instance = componentRef.instance;
-    instance.context = context;
-    componentRef.changeDetectorRef.detectChanges();
-    const g = componentRef.instance.getContainerG();
-    mountElementG(context.index, g, childrenContext);
-    componentRef.instance.initializeListRender();
-    return componentRef;
-};
-const getComponentType = (board, context) => {
-    const result = board.drawElement(context);
-    return result;
-};
-const getContext = (board, element, index, parent, previousContext) => {
-    let isSelected = isSelectedElement(board, element);
-    const previousElement = previousContext && previousContext.element;
-    if (previousElement && previousElement !== element && isSelectedElement(board, previousElement)) {
-        isSelected = true;
-        removeSelectedElement(board, previousElement);
-        addSelectedElement(board, element);
-    }
-    const context = {
-        element: element,
-        parent: parent,
-        board: board,
-        selected: isSelected,
-        index
-    };
-    return context;
-};
-// the g depth of root element：[1]-[2]-[3]-[4]
-// the g depth of root element and children element（the [2] element has children）：
-// [1]-
-// [2]([2-1-1][2-1-2][2-1][2-2][2-3-1][2-3-2][2-3][2])-
-// [3]-
-// [4]
-const mountElementG = (index, g, childrenContext, 
-// for moving scene: the current index for first element before moving
-currentIndexForFirstElement = null) => {
-    const { parent, parentG } = childrenContext;
-    if (PlaitBoard.isBoard(parent)) {
-        if (index > 0) {
-            const previousElement = parent.children[index - 1];
-            const previousContainerG = PlaitElement.getContainerG(previousElement, { suppressThrow: false });
-            previousContainerG.insertAdjacentElement('afterend', g);
-        }
-        else {
-            if (currentIndexForFirstElement !== null) {
-                const firstElement = parent.children[currentIndexForFirstElement];
-                const firstContainerG = firstElement && PlaitElement.getContainerG(firstElement, { suppressThrow: true });
-                if (firstElement && firstContainerG) {
-                    parentG.insertBefore(g, firstContainerG);
-                }
-                else {
-                    throw new Error('fail to mount container on moving');
-                }
-            }
-            else {
-                parentG.append(g);
-            }
-        }
-    }
-    else {
-        if (index > 0) {
-            const previousElement = parent.children[index - 1];
-            const previousElementG = PlaitElement.getElementG(previousElement);
-            previousElementG.insertAdjacentElement('afterend', g);
-        }
-        else {
-            if (currentIndexForFirstElement) {
-                const nextElement = parent.children[currentIndexForFirstElement];
-                const nextPath = nextElement && PlaitBoard.findPath(childrenContext.board, nextElement);
-                const first = nextPath && PlaitNode.first(childrenContext.board, nextPath);
-                const firstContainerG = first && PlaitElement.getContainerG(first, { suppressThrow: false });
-                if (firstContainerG) {
-                    parentG.insertBefore(g, firstContainerG);
-                }
-                else {
-                    throw new Error('fail to mount container on moving');
-                }
-            }
-            else {
-                let parentElementG = PlaitElement.getElementG(parent);
-                parentG.insertBefore(g, parentElementG);
-            }
-        }
-    }
-};
-const mountOnItemMove = (element, index, childrenContext, currentIndexForFirstElement) => {
-    const containerG = PlaitElement.getContainerG(element, { suppressThrow: false });
-    mountElementG(index, containerG, childrenContext, currentIndexForFirstElement);
-    if (element.children && !PlaitElement.isRootElement(element)) {
-        element.children.forEach((child, index) => {
-            mountOnItemMove(child, index, { ...childrenContext, parent: element }, null);
-        });
-    }
-};
-
-class PlaitPluginElementComponent {
-    get hasChildren() {
-        return !!this.element.children;
-    }
-    set context(value) {
-        if (hasBeforeContextChange(this)) {
-            this.beforeContextChange(value);
-        }
-        const previousContext = this._context;
-        this._context = value;
-        if (this.element) {
-            ELEMENT_TO_COMPONENT.set(this.element, this);
-        }
-        if (this.initialized) {
-            const elementG = this.getElementG();
-            const containerG = this.getContainerG();
-            NODE_TO_G.set(this.element, elementG);
-            NODE_TO_CONTAINER_G.set(this.element, containerG);
-            ELEMENT_TO_REF.set(this.element, this.ref);
-            this.updateListRender();
-            this.cdr.markForCheck();
-            if (hasOnContextChanged(this)) {
-                this.onContextChanged(value, previousContext);
-            }
-        }
-        else {
-            if (PlaitElement.isRootElement(this.element) && this.hasChildren) {
-                this._g = createG();
-                this._containerG = createG();
-                this._containerG.append(this._g);
-            }
-            else {
-                this._g = createG();
-                this._containerG = this._g;
-            }
-            NODE_TO_G.set(this.element, this._g);
-            NODE_TO_CONTAINER_G.set(this.element, this._containerG);
-            ELEMENT_TO_REF.set(this.element, this.ref);
-        }
-    }
-    get context() {
-        return this._context;
-    }
-    get element() {
-        return this.context && this.context.element;
-    }
-    get board() {
-        return this.context && this.context.board;
-    }
-    get selected() {
-        return this.context && this.context.selected;
-    }
-    getContainerG() {
-        return this._containerG;
-    }
-    getElementG() {
-        return this._g;
-    }
-    constructor(ref) {
-        this.ref = ref;
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.initialized = false;
-    }
-    ngOnInit() {
-        if (this.element.type) {
-            this.getContainerG().setAttribute(`plait-${this.element.type}`, 'true');
-        }
-        if (this.hasChildren) {
-            if (PlaitElement.isRootElement(this.element)) {
-                this._rootContainerG = this._containerG;
-            }
-            else {
-                const path = PlaitBoard.findPath(this.board, this.element);
-                const rootNode = PlaitNode.get(this.board, path.slice(0, 1));
-                this._rootContainerG = PlaitElement.getContainerG(rootNode, { suppressThrow: false });
-            }
-        }
-        this.getContainerG().setAttribute('plait-data-id', this.element.id);
-        this.initialized = true;
-    }
-    initializeListRender() {
-        if (this.hasChildren) {
-            this.listRender = new ListRender(this.board, this.viewContainerRef);
-            if (this.board.isExpanded(this.element)) {
-                this.listRender.initialize(this.element.children, this.initializeChildrenContext());
-            }
-        }
-    }
-    getRef() {
-        return this.ref;
-    }
-    updateListRender() {
-        if (this.hasChildren) {
-            if (!this.listRender) {
-                throw new Error('incorrectly initialize list render');
-            }
-            if (this.board.isExpanded(this.element)) {
-                this.listRender.update(this.element.children, this.initializeChildrenContext());
-            }
-            else {
-                if (this.listRender.initialized) {
-                    this.listRender.destroy();
-                }
-            }
-        }
-    }
-    initializeChildrenContext() {
-        if (!this._rootContainerG) {
-            throw new Error('can not resolve root container g');
-        }
-        return {
-            board: this.board,
-            parent: this.element,
-            parentG: this._rootContainerG
-        };
-    }
-    ngOnDestroy() {
-        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
-            ELEMENT_TO_COMPONENT.delete(this.element);
-        }
-        if (NODE_TO_G.get(this.element) === this._g) {
-            NODE_TO_G.delete(this.element);
-        }
-        if (NODE_TO_CONTAINER_G.get(this.element) === this._containerG) {
-            NODE_TO_CONTAINER_G.delete(this.element);
-        }
-        if (ELEMENT_TO_REF.get(this.element) === this.ref) {
-            ELEMENT_TO_REF.set(this.element, this.ref);
-        }
-        removeSelectedElement(this.board, this.element);
-        this.getContainerG().remove();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }], propDecorators: { context: [{
-                type: Input
-            }] } });
-const ELEMENT_TO_COMPONENT = new WeakMap();
-
-// https://stackoverflow.com/a/6853926/232122
-function distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) {
-    const A = x - x1;
-    const B = y - y1;
-    const C = x2 - x1;
-    const D = y2 - y1;
-    const dot = A * C + B * D;
-    const lenSquare = C * C + D * D;
-    let param = -1;
-    if (lenSquare !== 0) {
-        // in case of 0 length line
-        param = dot / lenSquare;
-    }
-    let xx, yy;
-    if (param < 0) {
-        xx = x1;
-        yy = y1;
-    }
-    else if (param > 1) {
-        xx = x2;
-        yy = y2;
-    }
-    else {
-        xx = x1 + param * C;
-        yy = y1 + param * D;
-    }
-    const dx = x - xx;
-    const dy = y - yy;
-    return Math.hypot(dx, dy);
-}
-function getNearestPointBetweenPointAndSegment(point, linePoints) {
-    const x = point[0], y = point[1], x1 = linePoints[0][0], y1 = linePoints[0][1], x2 = linePoints[1][0], y2 = linePoints[1][1];
-    const A = x - x1;
-    const B = y - y1;
-    const C = x2 - x1;
-    const D = y2 - y1;
-    const dot = A * C + B * D;
-    const lenSquare = C * C + D * D;
-    let param = -1;
-    if (lenSquare !== 0) {
-        // in case of 0 length line
-        param = dot / lenSquare;
-    }
-    let xx, yy;
-    if (param < 0) {
-        xx = x1;
-        yy = y1;
-    }
-    else if (param > 1) {
-        xx = x2;
-        yy = y2;
-    }
-    else {
-        xx = x1 + param * C;
-        yy = y1 + param * D;
-    }
-    return [xx, yy];
-}
-function distanceBetweenPointAndSegments(points, point) {
-    const len = points.length;
-    let distance = Infinity;
-    for (let i = 0; i < len - 1; i++) {
-        const p = points[i];
-        const p2 = points[i + 1];
-        const currentDistance = distanceBetweenPointAndSegment(point[0], point[1], p[0], p[1], p2[0], p2[1]);
-        if (currentDistance < distance) {
-            distance = currentDistance;
-        }
-    }
-    return distance;
-}
-function getNearestPointBetweenPointAndSegments(point, points, isClose = true) {
-    const len = points.length;
-    let distance = Infinity;
-    let result = point;
-    for (let i = 0; i < len; i++) {
-        const p = points[i];
-        if (i === len - 1 && !isClose)
-            continue;
-        const p2 = i === len - 1 ? points[0] : points[i + 1];
-        const currentDistance = distanceBetweenPointAndSegment(point[0], point[1], p[0], p[1], p2[0], p2[1]);
-        if (currentDistance < distance) {
-            distance = currentDistance;
-            result = getNearestPointBetweenPointAndSegment(point, [p, p2]);
-        }
-    }
-    return result;
-}
-function getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation = 0) {
-    const rectangleClient = {
-        x: center[0] - rx,
-        y: center[1] - ry,
-        height: ry * 2,
-        width: rx * 2
-    };
-    // https://stackoverflow.com/a/46007540/232122
-    const px = Math.abs(point[0] - rectangleClient.x - rectangleClient.width / 2);
-    const py = Math.abs(point[1] - rectangleClient.y - rectangleClient.height / 2);
-    let tx = 0.707;
-    let ty = 0.707;
-    const a = Math.abs(rectangleClient.width) / 2;
-    const b = Math.abs(rectangleClient.height) / 2;
-    [0, 1, 2, 3].forEach(x => {
-        const xx = a * tx;
-        const yy = b * ty;
-        const ex = ((a * a - b * b) * tx ** 3) / a;
-        const ey = ((b * b - a * a) * ty ** 3) / b;
-        const rx = xx - ex;
-        const ry = yy - ey;
-        const qx = px - ex;
-        const qy = py - ey;
-        const r = Math.hypot(ry, rx);
-        const q = Math.hypot(qy, qx);
-        tx = Math.min(1, Math.max(0, ((qx * r) / q + ex) / a));
-        ty = Math.min(1, Math.max(0, ((qy * r) / q + ey) / b));
-        const t = Math.hypot(ty, tx);
-        tx /= t;
-        ty /= t;
-    });
-    const signX = point[0] > center[0] ? 1 : -1;
-    const signY = point[1] > center[1] ? 1 : -1;
-    return [center[0] + a * tx * signX, center[1] + b * ty * signY];
-}
-function rotate(x1, y1, x2, y2, angle) {
-    // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
-    // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
-    // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
-    return [(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2];
-}
-function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
-    const dx = x1 - x2;
-    const dy = y1 - y2;
-    return Math.hypot(dx, dy);
-}
-// https://stackoverflow.com/questions/5254838/calculating-distance-between-a-point-and-a-rectangular-box-nearest-point
-function distanceBetweenPointAndRectangle(x, y, rect) {
-    var dx = Math.max(rect.x - x, 0, x - (rect.x + rect.width));
-    var dy = Math.max(rect.y - y, 0, y - (rect.y + rect.height));
-    return Math.sqrt(dx * dx + dy * dy);
-}
-const isLineHitLine = (a, b, c, d) => {
-    const crossProduct = (v1, v2) => v1[0] * v2[1] - v1[1] * v2[0];
-    const ab = [b[0] - a[0], b[1] - a[1]];
-    const ac = [c[0] - a[0], c[1] - a[1]];
-    const ad = [d[0] - a[0], d[1] - a[1]];
-    const ca = [a[0] - c[0], a[1] - c[1]];
-    const cb = [b[0] - c[0], b[1] - c[1]];
-    const cd = [d[0] - c[0], d[1] - c[1]];
-    return crossProduct(ab, ac) * crossProduct(ab, ad) <= 0 && crossProduct(cd, ca) * crossProduct(cd, cb) <= 0;
-};
-const isPolylineHitRectangle = (points, rectangle, isClose = true) => {
-    const rectanglePoints = RectangleClient.getCornerPoints(rectangle);
-    const len = points.length;
-    for (let i = 0; i < len; i++) {
-        if (i === len - 1 && !isClose)
-            continue;
-        const p1 = points[i];
-        const p2 = points[(i + 1) % len];
-        const isHit = isLineHitLine(p1, p2, rectanglePoints[0], rectanglePoints[1]) ||
-            isLineHitLine(p1, p2, rectanglePoints[1], rectanglePoints[2]) ||
-            isLineHitLine(p1, p2, rectanglePoints[2], rectanglePoints[3]) ||
-            isLineHitLine(p1, p2, rectanglePoints[3], rectanglePoints[0]);
-        if (isHit || isPointInPolygon(p1, rectanglePoints) || isPointInPolygon(p2, rectanglePoints)) {
-            return true;
-        }
-    }
-    return false;
-};
-//https://stackoverflow.com/questions/22521982/check-if-point-is-inside-a-polygon
-const isPointInPolygon = (point, points) => {
-    // ray-casting algorithm based on
-    // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html
-    const x = point[0], y = point[1];
-    let inside = false;
-    for (var i = 0, j = points.length - 1; i < points.length; j = i++) {
-        let xi = points[i][0], yi = points[i][1];
-        let xj = points[j][0], yj = points[j][1];
-        let intersect = yi > y != yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
-        if (intersect)
-            inside = !inside;
-    }
-    return inside;
-};
-const isPointInEllipse = (point, center, rx, ry, angle = 0) => {
-    const cosAngle = Math.cos(angle);
-    const sinAngle = Math.sin(angle);
-    const x1 = (point[0] - center[0]) * cosAngle + (point[1] - center[1]) * sinAngle;
-    const y1 = (point[1] - center[1]) * cosAngle - (point[0] - center[0]) * sinAngle;
-    return (x1 * x1) / (rx * rx) + (y1 * y1) / (ry * ry) <= 1;
-};
-const isPointInRoundRectangle = (point, rectangle, radius, angle = 0) => {
-    const { x: rectX, y: rectY, width, height } = rectangle;
-    const isInRectangle = point[0] >= rectX && point[0] <= rectX + width && point[1] >= rectY && point[1] <= rectY + height;
-    const handleLeftTop = point[0] >= rectX &&
-        point[0] <= rectX + radius &&
-        point[1] >= rectY &&
-        point[1] <= rectY + radius &&
-        Math.hypot(point[0] - (rectX + radius), point[1] - (rectY + radius)) > radius;
-    const handleLeftBottom = point[0] >= rectX &&
-        point[0] <= rectX + radius &&
-        point[1] >= rectY + height &&
-        point[1] <= rectY + height - radius &&
-        Math.hypot(point[0] - (rectX + radius), point[1] - (rectY + height - radius)) > radius;
-    const handleRightTop = point[0] >= rectX + width - radius &&
-        point[0] <= rectX + width &&
-        point[1] >= rectY &&
-        point[1] <= rectY + radius &&
-        Math.hypot(point[0] - (rectX + width - radius), point[1] - (rectY + radius)) > radius;
-    const handleRightBottom = point[0] >= rectX + width - radius &&
-        point[0] <= rectX + width &&
-        point[1] >= rectY + height - radius &&
-        point[1] <= rectY + height &&
-        Math.hypot(point[0] - (rectX + width - radius), point[1] - (rectY + height - radius)) > radius;
-    const isInCorner = handleLeftTop || handleLeftBottom || handleRightTop || handleRightBottom;
-    return isInRectangle && !isInCorner;
-};
-// https://gist.github.com/nicholaswmin/c2661eb11cad5671d816
-const catmullRomFitting = function (points) {
-    const alpha = 0.5;
-    let p0, p1, p2, p3, bp1, bp2, d1, d2, d3, A, B, N, M;
-    var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
-    const result = [];
-    result.push([Math.round(points[0][0]), Math.round(points[0][1])]);
-    var length = points.length;
-    for (var i = 0; i < length - 1; i++) {
-        p0 = i == 0 ? points[0] : points[i - 1];
-        p1 = points[i];
-        p2 = points[i + 1];
-        p3 = i + 2 < length ? points[i + 2] : p2;
-        d1 = Math.sqrt(Math.pow(p0[0] - p1[0], 2) + Math.pow(p0[1] - p1[1], 2));
-        d2 = Math.sqrt(Math.pow(p1[0] - p2[0], 2) + Math.pow(p1[1] - p2[1], 2));
-        d3 = Math.sqrt(Math.pow(p2[0] - p3[0], 2) + Math.pow(p2[1] - p3[1], 2));
-        // Catmull-Rom to Cubic Bezier conversion matrix
-        // A = 2d1^2a + 3d1^a * d2^a + d3^2a
-        // B = 2d3^2a + 3d3^a * d2^a + d2^2a
-        // [   0             1            0          0          ]
-        // [   -d2^2a /N     A/N          d1^2a /N   0          ]
-        // [   0             d3^2a /M     B/M        -d2^2a /M  ]
-        // [   0             0            1          0          ]
-        d3powA = Math.pow(d3, alpha);
-        d3pow2A = Math.pow(d3, 2 * alpha);
-        d2powA = Math.pow(d2, alpha);
-        d2pow2A = Math.pow(d2, 2 * alpha);
-        d1powA = Math.pow(d1, alpha);
-        d1pow2A = Math.pow(d1, 2 * alpha);
-        A = 2 * d1pow2A + 3 * d1powA * d2powA + d2pow2A;
-        B = 2 * d3pow2A + 3 * d3powA * d2powA + d2pow2A;
-        N = 3 * d1powA * (d1powA + d2powA);
-        if (N > 0) {
-            N = 1 / N;
-        }
-        M = 3 * d3powA * (d3powA + d2powA);
-        if (M > 0) {
-            M = 1 / M;
-        }
-        bp1 = [(-d2pow2A * p0[0] + A * p1[0] + d1pow2A * p2[0]) * N, (-d2pow2A * p0[1] + A * p1[1] + d1pow2A * p2[1]) * N];
-        bp2 = [(d3pow2A * p1[0] + B * p2[0] - d2pow2A * p3[0]) * M, (d3pow2A * p1[1] + B * p2[1] - d2pow2A * p3[1]) * M];
-        if (bp1[0] == 0 && bp1[1] == 0) {
-            bp1 = p1;
-        }
-        if (bp2[0] == 0 && bp2[1] == 0) {
-            bp2 = p2;
-        }
-        result.push(bp1, bp2, p2);
-    }
-    return result;
-};
-/**
- * the result of slope is based on Cartesian coordinate system
- * x, y are based on the position in the Cartesian coordinate system
- */
-function getEllipseTangentSlope(x, y, a, b) {
-    if (Math.abs(y) === 0) {
-        return x > 0 ? -Infinity : Infinity;
-    }
-    const k = (-b * b * x) / (a * a * y);
-    return k;
+    return rect;
 }
-/**
- * x, y are based on the position in the Cartesian coordinate system
- */
-function getVectorFromPointAndSlope(x, y, slope) {
-    if (slope === Infinity) {
-        return [0, -1];
-    }
-    else if (slope === -Infinity) {
-        return [0, 1];
-    }
-    let vector = [1, -slope];
-    if (y < 0) {
-        vector = [-vector[0], -vector[1]];
-    }
-    return vector;
+const setStrokeLinecap = (g, value) => {
+    g.setAttribute('stroke-linecap', value);
+};
+const setPathStrokeLinecap = (g, value) => {
+    g.querySelectorAll('path').forEach(path => {
+        path.setAttribute('stroke-linecap', value);
+    });
+};
+function createMask() {
+    return document.createElementNS(NS, 'mask');
 }
-/**
- * The DOM likes values to be fixed to 3 decimal places
- */
-function toDomPrecision(v) {
-    return +v.toFixed(4);
+function createSVG() {
+    const svg = document.createElementNS(NS, 'svg');
+    return svg;
 }
-function toFixed(v) {
-    return +v.toFixed(2);
+function createText(x, y, fill, textContent) {
+    var text = document.createElementNS(NS, 'text');
+    text.setAttribute('x', `${x}`);
+    text.setAttribute('y', `${y}`);
+    text.setAttribute('fill', fill);
+    text.textContent = textContent;
+    return text;
 }
 /**
- * Whether two numbers numbers a and b are approximately equal.
- *
- * @param a - The first point.
- * @param b - The second point.
- * @public
+ * Check if a DOM node is an element node.
  */
-function approximately(a, b, precision = 0.000001) {
-    return Math.abs(a - b) <= precision;
-}
-// https://medium.com/@steveruiz/find-the-points-where-a-line-segment-intercepts-an-angled-ellipse-in-javascript-typescript-e451524beece
-function getCrossingPointsBetweenEllipseAndSegment(startPoint, endPoint, cx, cy, rx, ry, segment_only = true) {
-    // If the ellipse or line segment are empty, return no tValues.
-    if (rx === 0 || ry === 0 || (startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1])) {
-        return [];
-    }
-    rx = rx < 0 ? rx : -rx;
-    ry = ry < 0 ? ry : -ry;
-    startPoint[0] -= cx;
-    startPoint[1] -= cy;
-    endPoint[0] -= cx;
-    endPoint[1] -= cy;
-    // Calculate the quadratic parameters.
-    var A = ((endPoint[0] - startPoint[0]) * (endPoint[0] - startPoint[0])) / rx / rx +
-        ((endPoint[1] - startPoint[1]) * (endPoint[1] - startPoint[1])) / ry / ry;
-    var B = (2 * startPoint[0] * (endPoint[0] - startPoint[0])) / rx / rx + (2 * startPoint[1] * (endPoint[1] - startPoint[1])) / ry / ry;
-    var C = (startPoint[0] * startPoint[0]) / rx / rx + (startPoint[1] * startPoint[1]) / ry / ry - 1;
-    // Make a list of t values (normalized points on the line where intersections occur).
-    var tValues = [];
-    // Calculate the discriminant.
-    var discriminant = B * B - 4 * A * C;
-    if (discriminant === 0) {
-        // One real solution.
-        tValues.push(-B / 2 / A);
-    }
-    else if (discriminant > 0) {
-        // Two real solutions.
-        tValues.push((-B + Math.sqrt(discriminant)) / 2 / A);
-        tValues.push((-B - Math.sqrt(discriminant)) / 2 / A);
-    }
-    return (tValues
-        // Filter to only points that are on the segment.
-        .filter(t => !segment_only || (t >= 0 && t <= 1))
-        // Solve for points.
-        .map(t => [startPoint[0] + (endPoint[0] - startPoint[0]) * t + cx, startPoint[1] + (endPoint[1] - startPoint[1]) * t + cy]));
-}
-
-function isInPlaitBoard(board, x, y) {
-    const plaitBoardElement = PlaitBoard.getBoardContainer(board);
-    const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
-    const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
-    return distances === 0;
-}
-function getRealScrollBarWidth(board) {
-    const { hideScrollbar } = board.options;
-    let scrollBarWidth = 0;
-    if (!hideScrollbar) {
-        const viewportContainer = PlaitBoard.getViewportContainer(board);
-        scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
+const isDOMElement = (value) => {
+    return isDOMNode(value) && value.nodeType === 1;
+};
+/**
+ * Check if a value is a DOM node.
+ */
+const isDOMNode = (value) => {
+    return value instanceof window.Node;
+};
+const hasInputOrTextareaTarget = (target) => {
+    if (isDOMElement(target)) {
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+            return true;
+        }
     }
-    return scrollBarWidth;
-}
+    return false;
+};
+const isSecondaryPointer = (event) => {
+    return event.button === POINTER_BUTTON.SECONDARY;
+};
+const isMainPointer = (event) => {
+    return event.button === POINTER_BUTTON.MAIN;
+};
 
 function createForeignObject(x, y, width, height) {
     var newForeignObject = document.createElementNS(NS, 'foreignObject');
@@ -1602,8 +1078,178 @@ function idCreator(length = 5) {
     for (let i = 0; i < length; i++) {
         key += $chars.charAt(Math.floor(Math.random() * maxPosition));
     }
-    return key;
-}
+    return key;
+}
+
+function depthFirstRecursion(node, callback, recursion, isReverse) {
+    if (!recursion || recursion(node)) {
+        let children = [];
+        if (node.children) {
+            children = [...node.children];
+        }
+        children = isReverse ? children.reverse() : children;
+        children.forEach(child => {
+            depthFirstRecursion(child, callback, recursion);
+        });
+    }
+    callback(node);
+}
+const getIsRecursionFunc = (board) => {
+    return (element) => {
+        if (PlaitBoard.isBoard(element) || board.isRecursion(element)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+};
+
+const SELECTION_BORDER_COLOR = '#6698FF';
+const SELECTION_FILL_COLOR = '#6698FF25'; // opacity 0.25
+const Selection = {
+    isCollapsed(selection) {
+        if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+};
+
+const sortElements = (board, elements, ascendingOrder = true) => {
+    return [...elements].sort((a, b) => {
+        const pathA = PlaitBoard.findPath(board, a);
+        const pathB = PlaitBoard.findPath(board, b);
+        return ascendingOrder ? pathA[0] - pathB[0] : pathB[0] - pathA[0];
+    });
+};
+
+var PlaitPluginKey;
+(function (PlaitPluginKey) {
+    PlaitPluginKey["withSelection"] = "withSelection";
+})(PlaitPluginKey || (PlaitPluginKey = {}));
+
+const getHitElementsBySelection = (board, selection, match = () => true) => {
+    const newSelection = selection || board.selection;
+    const rectangleHitElements = [];
+    if (!newSelection) {
+        return [];
+    }
+    const isCollapsed = Selection.isCollapsed(newSelection);
+    if (isCollapsed) {
+        const hitElement = getHitElementByPoint(board, newSelection.anchor, match);
+        if (hitElement) {
+            return [hitElement];
+        }
+        else {
+            return [];
+        }
+    }
+    depthFirstRecursion(board, node => {
+        if (!PlaitBoard.isBoard(node) && match(node) && board.isRectangleHit(node, newSelection)) {
+            rectangleHitElements.push(node);
+        }
+    }, getIsRecursionFunc(board), true);
+    return rectangleHitElements;
+};
+const getHitElementByPoint = (board, point, match = () => true) => {
+    let hitElement = undefined;
+    let hitInsideElement = undefined;
+    depthFirstRecursion(board, node => {
+        if (hitElement) {
+            return;
+        }
+        if (PlaitBoard.isBoard(node) || !match(node) || !PlaitElement.hasMounted(node)) {
+            return;
+        }
+        if (board.isHit(node, point)) {
+            hitElement = node;
+            return;
+        }
+        /**
+         * 需要增加场景测试
+         * hitInsideElement 存的是第一个符合 isInsidePoint 的元素
+         * 当有元素符合 isHit 时结束遍历，并返回 hitElement
+         * 当所有元素都不符合 isHit ，则返回第一个符合 isInsidePoint 的元素
+         * 这样保证最上面的元素优先被探测到；
+         */
+        if (!hitInsideElement && board.isInsidePoint(node, point)) {
+            hitInsideElement = node;
+        }
+    }, getIsRecursionFunc(board), true);
+    return hitElement || hitInsideElement;
+};
+const getHitSelectedElements = (board, point) => {
+    const selectedElements = getSelectedElements(board);
+    const targetRectangle = selectedElements.length > 0 && getRectangleByElements(board, selectedElements, false);
+    const isInTargetRectangle = targetRectangle && RectangleClient.isPointInRectangle(targetRectangle, point);
+    if (isInTargetRectangle) {
+        return selectedElements;
+    }
+    else {
+        return [];
+    }
+};
+const cacheSelectedElements = (board, selectedElements) => {
+    const sortedElements = sortElements(board, selectedElements);
+    BOARD_TO_SELECTED_ELEMENT.set(board, sortedElements);
+};
+const getSelectedElements = (board) => {
+    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
+};
+const addSelectedElement = (board, element) => {
+    let elements = [];
+    if (Array.isArray(element)) {
+        elements.push(...element);
+    }
+    else {
+        elements.push(element);
+    }
+    const selectedElements = getSelectedElements(board);
+    cacheSelectedElements(board, [...selectedElements, ...elements]);
+};
+const removeSelectedElement = (board, element, isRemoveChildren = false) => {
+    const selectedElements = getSelectedElements(board);
+    if (selectedElements.includes(element)) {
+        const targetElements = [];
+        if (board.isRecursion(element) && isRemoveChildren) {
+            depthFirstRecursion(element, node => {
+                targetElements.push(node);
+            }, node => board.isRecursion(node));
+        }
+        else {
+            targetElements.push(element);
+        }
+        const newSelectedElements = selectedElements.filter(value => !targetElements.includes(value));
+        cacheSelectedElements(board, newSelectedElements);
+    }
+};
+const clearSelectedElement = (board) => {
+    cacheSelectedElements(board, []);
+};
+const isSelectedElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    return !!selectedElements.find(value => value === element);
+};
+const temporaryDisableSelection = (board) => {
+    const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
+    board.setPluginOptions(PlaitPluginKey.withSelection, {
+        isDisabledSelect: true
+    });
+    setTimeout(() => {
+        board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
+    }, 0);
+};
+const isHitSelectedRectangle = (board, point) => {
+    const hitSelectedElements = getHitSelectedElements(board, point);
+    return hitSelectedElements.length > 0;
+};
+const isHitElement = (board, point) => {
+    const hitElement = getHitElementByPoint(board, point);
+    return !!hitElement || isHitSelectedRectangle(board, point);
+};
 
 /**
  * drawRoundRectangle
@@ -3344,14 +2990,14 @@ const rotatePoints = (points, centerPoint, angle) => {
     }
     else {
         return points.map(point => {
-            return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle);
+            return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle || 0);
         });
     }
 };
 const getSelectionAngle = (elements) => {
     let angle = elements[0]?.angle || 0;
     elements.forEach(item => {
-        if (item.angle !== angle && !approximately((item.angle % (Math.PI / 2)) - (angle % (Math.PI / 2)), 0)) {
+        if (item.angle !== angle && !approximately(((item.angle || 0) % (Math.PI / 2)) - (angle % (Math.PI / 2)), 0)) {
             angle = 0;
         }
     });
@@ -3408,7 +3054,7 @@ const rotateAntiPointsByElement = (points, element) => {
     if (hasValidAngle(element)) {
         let rectangle = RectangleClient.getRectangleByPoints(element.points);
         const centerPoint = RectangleClient.getCenterPoint(rectangle);
-        return rotatePoints(points, centerPoint, -element.angle);
+        return rotatePoints(points, centerPoint, element.angle ? -element.angle : 0);
     }
     else {
         return null;
@@ -3420,9 +3066,7 @@ const getRectangleByAngle = (rectangle, angle) => {
         const centerPoint = RectangleClient.getCenterPoint(rectangle);
         return RectangleClient.getRectangleByPoints(rotatePoints(cornerPoints, centerPoint, angle));
     }
-    else {
-        return null;
-    }
+    return rectangle;
 };
 const isAxisChangedByAngle = (angle) => {
     const unitAngle = Math.abs(angle) % Math.PI;
@@ -3441,7 +3085,7 @@ function rotateElements(board, elements, angle) {
         const originAngle = item.angle;
         const points = rotatedDataPoints(item.points, selectionCenterPoint, normalizeAngle(angle));
         const path = PlaitBoard.findPath(board, item);
-        Transforms.setNode(board, { points, angle: normalizeAngle(originAngle + angle) }, path);
+        Transforms.setNode(board, { points, angle: normalizeAngle((originAngle || 0) + angle) }, path);
     });
 }
 const normalizeAngle = (angle) => {
@@ -3871,7 +3515,10 @@ function getSnapRectangles(board, activeElements) {
         recursion: () => true,
         isReverse: false
     });
-    return elements.map(item => getRectangleByAngle(board.getRectangle(item), item.angle) || board.getRectangle(item));
+    return elements.map(item => {
+        const rectangle = board.getRectangle(item);
+        return getRectangleByAngle(rectangle, item.angle || 0);
+    });
 }
 function getBarPoint(point, isHorizontal) {
     return isHorizontal
@@ -4077,9 +3724,6 @@ const PlaitElement = {
             return false;
         }
     },
-    getComponent(value) {
-        return ELEMENT_TO_COMPONENT.get(value);
-    },
     getElementRef(value) {
         return ELEMENT_TO_REF.get(value);
     },
@@ -4332,6 +3976,11 @@ function getRectangleByElements(board, elements, recursion) {
         };
     }
 }
+function getBoundingRectangleByElements(board, elements, recursion) {
+    const rectangle = getRectangleByElements(board, elements, recursion);
+    const angle = getSelectionAngle(elements);
+    return getRectangleByAngle(rectangle, angle);
+}
 function getBoardRectangle(board) {
     return getRectangleByElements(board, board.children, true);
 }
@@ -4399,6 +4048,9 @@ const PlaitBoard = {
     getHost(board) {
         return BOARD_TO_HOST.get(board);
     },
+    getElementLowerHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.lowerHost;
+    },
     getElementHost(board) {
         return BOARD_TO_ELEMENT_HOST.get(board)?.host;
     },
@@ -4414,6 +4066,9 @@ const PlaitBoard = {
     getComponent(board) {
         return BOARD_TO_COMPONENT.get(board);
     },
+    getViewContainerRef(board) {
+        return BOARD_TO_COMPONENT.get(board).viewContainerRef;
+    },
     getBoardContainer(board) {
         return BOARD_TO_ELEMENT_HOST.get(board)?.container;
     },
@@ -4764,10 +4419,7 @@ function withSelection(board) {
             event.preventDefault();
         }
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const selectedElements = getSelectedElements(board);
-        const hitElement = getHitElementByPoint(board, point);
-        const hitSelectedElements = selectedElements.length > 1 ? getHitSelectedElements(board, point) : [];
-        const isHitTarget = hitElement || hitSelectedElements.length > 0;
+        const isHitTarget = isHitElement(board, point);
         const options = board.getPluginOptions(PlaitPluginKey.withSelection);
         if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && !isHitTarget && options.isMultiple && !options.isDisabledSelect) {
             preventTouchMove(board, event, true);
@@ -5272,7 +4924,7 @@ function withMoving(board) {
                         x: activeElementsRectangle.x + offsetX,
                         y: activeElementsRectangle.y + offsetY
                     };
-                    const activeRectangle = getRectangleByAngle(newRectangle, getSelectionAngle(activeElements)) || newRectangle;
+                    const activeRectangle = getRectangleByAngle(newRectangle, getSelectionAngle(activeElements));
                     const ref = getSnapMovingRef(board, activeRectangle, activeElements);
                     offsetX += ref.deltaX;
                     offsetY += ref.deltaY;
@@ -5467,10 +5119,10 @@ class PlaitIslandBaseComponent {
     markForCheck() {
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitIslandBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: PlaitIslandBaseComponent, host: { classAttribute: "plait-island-container" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PlaitIslandBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: PlaitIslandBaseComponent, host: { classAttribute: "plait-island-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitIslandBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PlaitIslandBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -5503,10 +5155,10 @@ class PlaitIslandPopoverBaseComponent {
         this.subscription?.unsubscribe();
         this.islandOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitIslandPopoverBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: PlaitIslandPopoverBaseComponent, inputs: { board: "board" }, host: { classAttribute: "plait-island-popover-container" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PlaitIslandPopoverBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: PlaitIslandPopoverBaseComponent, inputs: { board: "board" }, host: { classAttribute: "plait-island-popover-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitIslandPopoverBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PlaitIslandPopoverBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -5584,92 +5236,299 @@ const withHotkey = (board) => {
             event.preventDefault();
             deleteFragment(board);
         }
-        keyDown(event);
-    };
-    board.keyUp = (event) => {
-        keyUp(event);
-    };
-    board.globalKeyDown = (event) => {
-        if (PlaitBoard.getMovingPointInBoard(board) || PlaitBoard.isMovingPointInBoard(board)) {
-            if (isHotkey(['mod+=', 'mod++'], { byKey: true })(event)) {
-                event.preventDefault();
-                BoardTransforms.updateZoom(board, board.viewport.zoom + 0.1, false);
-                return;
-            }
-            if (isHotkey(['mod+shift+=', 'mod+shift++'], { byKey: true })(event)) {
-                event.preventDefault();
-                BoardTransforms.fitViewport(board);
-                return;
-            }
-            if (isHotkey(['mod+-', 'mod+shift+-'])(event)) {
-                event.preventDefault();
-                BoardTransforms.updateZoom(board, board.viewport.zoom - 0.1);
-                return;
+        keyDown(event);
+    };
+    board.keyUp = (event) => {
+        keyUp(event);
+    };
+    board.globalKeyDown = (event) => {
+        if (PlaitBoard.getMovingPointInBoard(board) || PlaitBoard.isMovingPointInBoard(board)) {
+            if (isHotkey(['mod+=', 'mod++'], { byKey: true })(event)) {
+                event.preventDefault();
+                BoardTransforms.updateZoom(board, board.viewport.zoom + 0.1, false);
+                return;
+            }
+            if (isHotkey(['mod+shift+=', 'mod+shift++'], { byKey: true })(event)) {
+                event.preventDefault();
+                BoardTransforms.fitViewport(board);
+                return;
+            }
+            if (isHotkey(['mod+-', 'mod+shift+-'])(event)) {
+                event.preventDefault();
+                BoardTransforms.updateZoom(board, board.viewport.zoom - 0.1);
+                return;
+            }
+            if (isHotkey(['mod+0', 'mod+shift+0'], { byKey: true })(event)) {
+                event.preventDefault();
+                BoardTransforms.updateZoom(board, 1);
+                return;
+            }
+        }
+        globalKeyDown(event);
+    };
+    return board;
+};
+
+class PlaitContextService {
+    constructor() {
+        this._stable = new Subject();
+        this.uploadingFiles = [];
+    }
+    getUploadingFile(url) {
+        return this.uploadingFiles.find(file => file.url === url);
+    }
+    setUploadingFile(file) {
+        return this.uploadingFiles.push(file);
+    }
+    removeUploadingFile(fileEntry) {
+        this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
+    }
+    onStable() {
+        return this._stable.asObservable();
+    }
+    nextStable() {
+        this._stable.next('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PlaitContextService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PlaitContextService, decorators: [{
+            type: Injectable
+        }] });
+
+function withRelatedFragment(board) {
+    const { buildFragment } = board;
+    board.buildFragment = (clipboardContext, rectangle, operationType, originData) => {
+        let relatedFragment = board.getRelatedFragment(originData || []);
+        if (relatedFragment) {
+            if (originData?.length) {
+                relatedFragment = relatedFragment.filter(item => !originData.map(element => element.id).includes(item.id));
+            }
+            if (relatedFragment.length) {
+                if (!clipboardContext) {
+                    clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
+                }
+                else {
+                    clipboardContext = addClipboardContext(clipboardContext, {
+                        text: '',
+                        type: WritableClipboardType.elements,
+                        elements: relatedFragment
+                    });
+                }
+            }
+        }
+        return buildFragment(clipboardContext, rectangle, operationType, originData);
+    };
+    return board;
+}
+
+class ListRender {
+    constructor(board) {
+        this.board = board;
+        this.children = [];
+        this.instances = [];
+        this.contexts = [];
+        this.differ = null;
+        this.initialized = false;
+    }
+    initialize(children, childrenContext) {
+        this.initialized = true;
+        this.children = children;
+        children.forEach((descendant, index) => {
+            NODE_TO_INDEX.set(descendant, index);
+            NODE_TO_PARENT.set(descendant, childrenContext.parent);
+            const context = getContext(this.board, descendant, index, childrenContext.parent);
+            const componentType = getComponentType(this.board, context);
+            const instance = createPluginComponent(this.board, componentType, context, childrenContext);
+            this.instances.push(instance);
+            this.contexts.push(context);
+        });
+        const newDiffers = PlaitBoard.getViewContainerRef(this.board).injector.get(IterableDiffers);
+        this.differ = newDiffers.find(children).create(trackBy);
+        this.differ.diff(children);
+    }
+    update(children, childrenContext) {
+        if (!this.initialized) {
+            this.initialize(children, childrenContext);
+            return;
+        }
+        if (!this.differ) {
+            throw new Error('Exception: Can not find differ ');
+        }
+        const { board, parent } = childrenContext;
+        const diffResult = this.differ.diff(children);
+        if (diffResult) {
+            const newContexts = [];
+            const newInstances = [];
+            let currentIndexForFirstElement = null;
+            diffResult.forEachItem((record) => {
+                NODE_TO_INDEX.set(record.item, record.currentIndex);
+                NODE_TO_PARENT.set(record.item, childrenContext.parent);
+                const previousContext = record.previousIndex === null ? undefined : this.contexts[record.previousIndex];
+                const context = getContext(board, record.item, record.currentIndex, parent, previousContext);
+                if (record.previousIndex === null) {
+                    const componentType = getComponentType(board, context);
+                    const componentRef = createPluginComponent(board, componentType, context, childrenContext);
+                    newContexts.push(context);
+                    newInstances.push(componentRef);
+                }
+                else {
+                    const instance = this.instances[record.previousIndex];
+                    instance.context = context;
+                    newInstances.push(instance);
+                    newContexts.push(context);
+                }
+                // item might has been changed, so need to compare the id
+                if (record.item === this.children[0] || record.item.id === this.children[0]?.id) {
+                    currentIndexForFirstElement = record.currentIndex;
+                }
+            });
+            diffResult.forEachOperation(record => {
+                // removed
+                if (record.currentIndex === null) {
+                    const componentRef = this.instances[record.previousIndex];
+                    componentRef?.destroy();
+                }
+                // moved
+                if (record.previousIndex !== null && record.currentIndex !== null) {
+                    mountOnItemMove(record.item, record.currentIndex, childrenContext, currentIndexForFirstElement);
+                }
+            });
+            this.instances = newInstances;
+            this.contexts = newContexts;
+            this.children = children;
+        }
+        else {
+            const newContexts = [];
+            this.children.forEach((element, index) => {
+                NODE_TO_INDEX.set(element, index);
+                NODE_TO_PARENT.set(element, childrenContext.parent);
+                const previousContext = this.contexts[index];
+                const previousInstance = this.instances[index];
+                const context = getContext(board, element, index, parent, previousContext);
+                previousInstance.context = context;
+                newContexts.push(context);
+            });
+            this.contexts = newContexts;
+        }
+    }
+    destroy() {
+        this.children.forEach((element, index) => {
+            if (this.instances[index]) {
+                this.instances[index].destroy();
+            }
+        });
+        this.instances = [];
+        this.children = [];
+        this.contexts = [];
+        this.initialized = false;
+        this.differ = null;
+    }
+}
+const trackBy = (index, element) => {
+    return element.id;
+};
+const createPluginComponent = (board, componentType, context, childrenContext) => {
+    // const componentRef = PlaitBoard.getViewContainerRef(board).createComponent(componentType, { injector: PlaitBoard.getViewContainerRef(board).injector });
+    // const instance = componentRef.instance;
+    const instance = new componentType();
+    instance.context = context;
+    instance.initialize();
+    const g = instance.getContainerG();
+    mountElementG(context.index, g, childrenContext);
+    instance.initializeListRender();
+    return instance;
+};
+const getComponentType = (board, context) => {
+    const result = board.drawElement(context);
+    return result;
+};
+const getContext = (board, element, index, parent, previousContext) => {
+    let isSelected = isSelectedElement(board, element);
+    const previousElement = previousContext && previousContext.element;
+    if (previousElement && previousElement !== element && isSelectedElement(board, previousElement)) {
+        isSelected = true;
+        removeSelectedElement(board, previousElement);
+        addSelectedElement(board, element);
+    }
+    const context = {
+        element: element,
+        parent: parent,
+        board: board,
+        selected: isSelected,
+        index
+    };
+    return context;
+};
+// the g depth of root element：[1]-[2]-[3]-[4]
+// the g depth of root element and children element（the [2] element has children）：
+// [1]-
+// [2]([2-1-1][2-1-2][2-1][2-2][2-3-1][2-3-2][2-3][2])-
+// [3]-
+// [4]
+const mountElementG = (index, g, childrenContext, 
+// for moving scene: the current index for first element before moving
+currentIndexForFirstElement = null) => {
+    const { parent, parentG } = childrenContext;
+    if (PlaitBoard.isBoard(parent)) {
+        if (index > 0) {
+            const previousElement = parent.children[index - 1];
+            const previousContainerG = PlaitElement.getContainerG(previousElement, { suppressThrow: false });
+            previousContainerG.insertAdjacentElement('afterend', g);
+        }
+        else {
+            if (currentIndexForFirstElement !== null) {
+                const firstElement = parent.children[currentIndexForFirstElement];
+                const firstContainerG = firstElement && PlaitElement.getContainerG(firstElement, { suppressThrow: true });
+                if (firstElement && firstContainerG) {
+                    parentG.insertBefore(g, firstContainerG);
+                }
+                else {
+                    throw new Error('fail to mount container on moving');
+                }
             }
-            if (isHotkey(['mod+0', 'mod+shift+0'], { byKey: true })(event)) {
-                event.preventDefault();
-                BoardTransforms.updateZoom(board, 1);
-                return;
+            else {
+                parentG.append(g);
             }
         }
-        globalKeyDown(event);
-    };
-    return board;
-};
-
-class PlaitContextService {
-    constructor() {
-        this._stable = new Subject();
-        this.uploadingFiles = [];
-    }
-    getUploadingFile(url) {
-        return this.uploadingFiles.find(file => file.url === url);
-    }
-    setUploadingFile(file) {
-        return this.uploadingFiles.push(file);
-    }
-    removeUploadingFile(fileEntry) {
-        this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
-    }
-    onStable() {
-        return this._stable.asObservable();
-    }
-    nextStable() {
-        this._stable.next('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService, decorators: [{
-            type: Injectable
-        }] });
-
-function withRelatedFragment(board) {
-    const { buildFragment } = board;
-    board.buildFragment = (clipboardContext, rectangle, operationType, originData) => {
-        let relatedFragment = board.getRelatedFragment(originData || []);
-        if (relatedFragment) {
-            if (originData?.length) {
-                relatedFragment = relatedFragment.filter(item => !originData.map(element => element.id).includes(item.id));
-            }
-            if (relatedFragment.length) {
-                if (!clipboardContext) {
-                    clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
+    else {
+        if (index > 0) {
+            const previousElement = parent.children[index - 1];
+            const previousElementG = PlaitElement.getElementG(previousElement);
+            previousElementG.insertAdjacentElement('afterend', g);
+        }
+        else {
+            if (currentIndexForFirstElement) {
+                const nextElement = parent.children[currentIndexForFirstElement];
+                const nextPath = nextElement && PlaitBoard.findPath(childrenContext.board, nextElement);
+                const first = nextPath && PlaitNode.first(childrenContext.board, nextPath);
+                const firstContainerG = first && PlaitElement.getContainerG(first, { suppressThrow: false });
+                if (firstContainerG) {
+                    parentG.insertBefore(g, firstContainerG);
                 }
                 else {
-                    clipboardContext = addClipboardContext(clipboardContext, {
-                        text: '',
-                        type: WritableClipboardType.elements,
-                        elements: relatedFragment
-                    });
+                    throw new Error('fail to mount container on moving');
                 }
             }
+            else {
+                let parentElementG = PlaitElement.getElementG(parent);
+                parentG.insertBefore(g, parentElementG);
+            }
         }
-        return buildFragment(clipboardContext, rectangle, operationType, originData);
-    };
-    return board;
-}
+    }
+};
+const mountOnItemMove = (element, index, childrenContext, currentIndexForFirstElement) => {
+    const containerG = PlaitElement.getContainerG(element, { suppressThrow: false });
+    mountElementG(index, containerG, childrenContext, currentIndexForFirstElement);
+    if (element.children && !PlaitElement.isRootElement(element)) {
+        element.children.forEach((child, index) => {
+            mountOnItemMove(child, index, { ...childrenContext, parent: element }, null);
+        });
+    }
+};
 
+const ElementLowerHostClass = 'element-lower-host';
 const ElementHostClass = 'element-host';
 const ElementUpperHostClass = 'element-upper-host';
 const ElementActiveHostClass = 'element-active-host';
@@ -5721,6 +5580,7 @@ class PlaitBoardComponent {
         };
     }
     ngOnInit() {
+        const elementLowerHost = this.host.querySelector(`.${ElementLowerHostClass}`);
         const elementHost = this.host.querySelector(`.${ElementHostClass}`);
         const elementUpperHost = this.host.querySelector(`.${ElementUpperHostClass}`);
         const elementActiveHost = this.host.querySelector(`.${ElementActiveHostClass}`);
@@ -5745,6 +5605,7 @@ class PlaitBoardComponent {
         BOARD_TO_HOST.set(this.board, this.host);
         IS_BOARD_ALIVE.set(this.board, true);
         BOARD_TO_ELEMENT_HOST.set(this.board, {
+            lowerHost: elementLowerHost,
             host: elementHost,
             upperHost: elementUpperHost,
             activeHost: elementActiveHost,
@@ -5917,7 +5778,7 @@ class PlaitBoardComponent {
         });
     }
     initializeListRender() {
-        this.listRender = new ListRender(this.board, this.viewContainerRef);
+        this.listRender = new ListRender(this.board);
         this.listRender.initialize(this.board.children, this.initializeChildrenContext());
     }
     updateListRender() {
@@ -6020,10 +5881,11 @@ class PlaitBoardComponent {
             this.updateIslands();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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: "17.2.4", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", 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: "17.3.1", 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-lower-host"></g>
                 <g class="element-host"></g>
                 <g class="element-upper-host"></g>
                 <g class="element-active-host"></g>
@@ -6032,13 +5894,14 @@ class PlaitBoardComponent {
         <ng-content></ng-content>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitBoardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: PlaitBoardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-board',
                     template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
+                <g class="element-lower-host"></g>
                 <g class="element-host"></g>
                 <g class="element-upper-host"></g>
                 <g class="element-active-host"></g>
@@ -6087,6 +5950,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 args: [PlaitIslandBaseComponent, { descendants: true }]
             }] } });
 
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasOnContextChanged(value) {
+    if (value.onContextChanged) {
+        return true;
+    }
+    return false;
+}
+
+/**
+ * 基于 element-flavour 实现元素的绘制，取代 Angular 组件
+ */
+class ElementFlavour {
+    get hasChildren() {
+        return !!this.element.children;
+    }
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
+        }
+        const previousContext = this._context;
+        this._context = value;
+        if (this.initialized) {
+            const elementG = this.getElementG();
+            const containerG = this.getContainerG();
+            NODE_TO_G.set(this.element, elementG);
+            NODE_TO_CONTAINER_G.set(this.element, containerG);
+            ELEMENT_TO_REF.set(this.element, this.ref);
+            this.updateListRender();
+            if (hasOnContextChanged(this)) {
+                this.onContextChanged(value, previousContext);
+            }
+        }
+        else {
+            if (PlaitElement.isRootElement(this.element) && this.hasChildren) {
+                this._g = createG();
+                this._containerG = createG();
+                this._containerG.append(this._g);
+            }
+            else {
+                this._g = createG();
+                this._containerG = this._g;
+            }
+            NODE_TO_G.set(this.element, this._g);
+            NODE_TO_CONTAINER_G.set(this.element, this._containerG);
+            ELEMENT_TO_REF.set(this.element, this.ref);
+        }
+    }
+    get context() {
+        return this._context;
+    }
+    get element() {
+        return this.context && this.context.element;
+    }
+    get board() {
+        return this.context && this.context.board;
+    }
+    get selected() {
+        return this.context && this.context.selected;
+    }
+    getContainerG() {
+        return this._containerG;
+    }
+    getElementG() {
+        return this._g;
+    }
+    constructor(ref) {
+        this.ref = ref;
+        this.initialized = false;
+    }
+    initialize() {
+        if (this.element.type) {
+            this.getContainerG().setAttribute(`plait-${this.element.type}`, 'true');
+        }
+        if (this.hasChildren) {
+            if (PlaitElement.isRootElement(this.element)) {
+                this._rootContainerG = this._containerG;
+            }
+            else {
+                const path = PlaitBoard.findPath(this.board, this.element);
+                const rootNode = PlaitNode.get(this.board, path.slice(0, 1));
+                this._rootContainerG = PlaitElement.getContainerG(rootNode, { suppressThrow: false });
+            }
+        }
+        this.getContainerG().setAttribute('plait-data-id', this.element.id);
+        this.initialized = true;
+    }
+    initializeListRender() {
+        if (this.hasChildren) {
+            this.listRender = new ListRender(this.board);
+            if (this.board.isExpanded(this.element)) {
+                this.listRender.initialize(this.element.children, this.initializeChildrenContext());
+            }
+        }
+    }
+    getRef() {
+        return this.ref;
+    }
+    updateListRender() {
+        if (this.hasChildren) {
+            if (!this.listRender) {
+                throw new Error('incorrectly initialize list render');
+            }
+            if (this.board.isExpanded(this.element)) {
+                this.listRender.update(this.element.children, this.initializeChildrenContext());
+            }
+            else {
+                if (this.listRender.initialized) {
+                    this.listRender.destroy();
+                }
+            }
+        }
+    }
+    initializeChildrenContext() {
+        if (!this._rootContainerG) {
+            throw new Error('can not resolve root container g');
+        }
+        return {
+            board: this.board,
+            parent: this.element,
+            parentG: this._rootContainerG
+        };
+    }
+    destroy() {
+        if (NODE_TO_G.get(this.element) === this._g) {
+            NODE_TO_G.delete(this.element);
+        }
+        if (NODE_TO_CONTAINER_G.get(this.element) === this._containerG) {
+            NODE_TO_CONTAINER_G.delete(this.element);
+        }
+        if (ELEMENT_TO_REF.get(this.element) === this.ref) {
+            ELEMENT_TO_REF.set(this.element, this.ref);
+        }
+        removeSelectedElement(this.board, this.element);
+        this.getContainerG().remove();
+        this.listRender?.destroy();
+    }
+}
+
 /**
  * 1.create board instance
  * 2.build fake node weak map
@@ -6345,5 +6351,5 @@ const isDebug = (key) => {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitContextService, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardOperationType, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, isSnapPoint, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
+export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, ElementFlavour, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitContextService, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardOperationType, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getBoundingRectangleByElements, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isHitElement, isHitSelectedRectangle, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, isSnapPoint, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map