@plait/core 0.24.0-next.5 → 0.24.0-next.7

package/fesm2022/plait-core.mjs

@@ -3,8 +3,8 @@ import { Directive, Input, Injectable, Component, ChangeDetectionStrategy, Event
 import rough from 'roughjs/bin/rough';
 import { timer, Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, tap } from 'rxjs/operators';
-import produce, { createDraft, finishDraft, isDraft } from 'immer';
 import { isKeyHotkey, isHotkey } from 'is-hotkey';
+import produce, { createDraft, finishDraft, isDraft } from 'immer';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -30,6 +30,16 @@ const BOARD_TO_MOVING_ELEMENT = new WeakMap();
 const IS_PREVENT_TOUCH_MOVE = new WeakMap();
 const PATH_REFS = new WeakMap();
 
+var PlaitPointerType;
+(function (PlaitPointerType) {
+    PlaitPointerType["hand"] = "hand";
+    PlaitPointerType["selection"] = "selection";
+})(PlaitPointerType || (PlaitPointerType = {}));
+
+/**
+ * Extendable Custom Types Interface
+ */
+
 function depthFirstRecursion(node, callback, recursion, isReverse) {
     if (!recursion || recursion(node)) {
         let children = [];
@@ -54,2073 +64,2080 @@ const getIsRecursionFunc = (board) => {
     };
 };
 
-function getRectangleByElements(board, elements, recursion) {
-    const boundaryBox = {
-        left: Number.MAX_VALUE,
-        top: Number.MAX_VALUE,
-        right: Number.NEGATIVE_INFINITY,
-        bottom: Number.NEGATIVE_INFINITY
-    };
-    const calcRectangleClient = (node) => {
-        const nodeRectangle = board.getRectangle(node);
-        if (nodeRectangle) {
-            boundaryBox.left = Math.min(boundaryBox.left, nodeRectangle.x);
-            boundaryBox.top = Math.min(boundaryBox.top, nodeRectangle.y);
-            boundaryBox.right = Math.max(boundaryBox.right, nodeRectangle.x + nodeRectangle.width);
-            boundaryBox.bottom = Math.max(boundaryBox.bottom, nodeRectangle.y + nodeRectangle.height);
-        }
-    };
-    elements.forEach(element => {
-        if (recursion) {
-            depthFirstRecursion(element, node => calcRectangleClient(node), node => board.isRecursion(node));
+const SELECTION_BORDER_COLOR = '#6698FF';
+const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
+const Selection = {
+    isCollapsed(selection) {
+        if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
+            return true;
         }
         else {
-            calcRectangleClient(element);
+            return false;
         }
-    });
-    if (boundaryBox.left === Number.MAX_VALUE) {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
     }
-    return {
-        x: boundaryBox.left,
-        y: boundaryBox.top,
-        width: boundaryBox.right - boundaryBox.left,
-        height: boundaryBox.bottom - boundaryBox.top
-    };
-}
-function getBoardRectangle(board) {
-    return getRectangleByElements(board, board.children, true);
-}
-function getElementById(board, id) {
-    let element = null;
+};
+
+const getHitElements = (board, selection, match = () => true) => {
+    const realSelection = selection || board.selection;
+    const selectedElements = [];
+    const isCollapsed = realSelection && realSelection.ranges.length === 1 && Selection.isCollapsed(realSelection.ranges[0]);
     depthFirstRecursion(board, node => {
-        if (id === node.id) {
-            element = node;
+        if (selectedElements.length > 0 && isCollapsed) {
+            return;
+        }
+        if (!PlaitBoard.isBoard(node) &&
+            match(node) &&
+            realSelection &&
+            realSelection.ranges.some(range => {
+                return board.isHitSelection(node, range);
+            })) {
+            selectedElements.push(node);
         }
     }, getIsRecursionFunc(board), true);
-    return element;
-}
-
-var ThemeColorMode;
-(function (ThemeColorMode) {
-    ThemeColorMode["default"] = "default";
-    ThemeColorMode["colorful"] = "colorful";
-    ThemeColorMode["soft"] = "soft";
-    ThemeColorMode["retro"] = "retro";
-    ThemeColorMode["dark"] = "dark";
-    ThemeColorMode["starry"] = "starry";
-})(ThemeColorMode || (ThemeColorMode = {}));
-const DefaultThemeColor = {
-    mode: ThemeColorMode.default,
-    boardBackground: '#ffffff',
-    textColor: '#333333'
+    return selectedElements;
 };
-const ColorfulThemeColor = {
-    mode: ThemeColorMode.colorful,
-    boardBackground: '#ffffff',
-    textColor: '#333333'
+const getHitElementOfRoot = (board, rootElements, range) => {
+    const newRootElements = [...rootElements].reverse();
+    return newRootElements.find(item => {
+        return board.isHitSelection(item, range);
+    });
 };
-const SoftThemeColor = {
-    mode: ThemeColorMode.soft,
-    boardBackground: '#f5f5f5',
-    textColor: '#333333'
+const isHitElements = (board, elements, ranges) => {
+    let isIntersectionElements = false;
+    if (elements.length) {
+        elements.map(item => {
+            if (!isIntersectionElements) {
+                isIntersectionElements = ranges.some(range => {
+                    return board.isHitSelection(item, range);
+                });
+            }
+        });
+    }
+    return isIntersectionElements;
 };
-const RetroThemeColor = {
-    mode: ThemeColorMode.retro,
-    boardBackground: '#f9f8ed',
-    textColor: '#333333'
+const cacheSelectedElements = (board, selectedElements) => {
+    BOARD_TO_SELECTED_ELEMENT.set(board, selectedElements);
 };
-const DarkThemeColor = {
-    mode: ThemeColorMode.dark,
-    boardBackground: '#141414',
-    textColor: '#FFFFFF'
+const getSelectedElements = (board) => {
+    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
 };
-const StarryThemeColor = {
-    mode: ThemeColorMode.starry,
-    boardBackground: '#0d2537',
-    textColor: '#FFFFFF'
+const addSelectedElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    cacheSelectedElements(board, [...selectedElements, element]);
 };
-const ThemeColors = [
-    DefaultThemeColor,
-    ColorfulThemeColor,
-    SoftThemeColor,
-    RetroThemeColor,
-    DarkThemeColor,
-    StarryThemeColor
-];
-
-const RectangleClient = {
-    isHit: (origin, target) => {
-        const minX = origin.x < target.x ? origin.x : target.x;
-        const maxX = origin.x + origin.width > target.x + target.width ? origin.x + origin.width : target.x + target.width;
-        const minY = origin.y < target.y ? origin.y : target.y;
-        const maxY = origin.y + origin.height > target.y + target.height ? origin.y + origin.height : target.y + target.height;
-        // float calculate error( eg: 1.4210854715202004e-14 > 0)
-        if (Math.floor(maxX - minX - origin.width - target.width) <= 0 && Math.floor(maxY - minY - origin.height - target.height) <= 0) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    toRectangleClient: (points) => {
-        const xArray = points.map(ele => ele[0]);
-        const yArray = points.map(ele => ele[1]);
-        const xMin = Math.min(...xArray);
-        const xMax = Math.max(...xArray);
-        const yMin = Math.min(...yArray);
-        const yMax = Math.max(...yArray);
-        const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
-        return rect;
-    },
-    getOutlineRectangle: (rectangle, offset) => {
-        return {
-            x: rectangle.x + offset,
-            y: rectangle.y + offset,
-            width: rectangle.width - offset * 2,
-            height: rectangle.height - offset * 2
-        };
-    },
-    isEqual: (rectangle, otherRectangle) => {
-        return (rectangle.x === otherRectangle.x &&
-            rectangle.y === otherRectangle.y &&
-            rectangle.width === otherRectangle.width &&
-            rectangle.height === otherRectangle.height);
-    },
-    getCornerPoints: (rectangle) => {
-        return [
-            [rectangle.x, rectangle.y],
-            [rectangle.x + rectangle.width, rectangle.y],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
-            [rectangle.x, rectangle.y + rectangle.height]
-        ];
-    },
-    getEdgeCenterPoints: (rectangle) => {
-        return [
-            [rectangle.x + rectangle.width / 2, rectangle.y],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
-            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
-            [rectangle.x, rectangle.y + rectangle.height / 2]
-        ];
-    }
+const removeSelectedElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    const newSelectedElements = selectedElements.filter(value => value !== element);
+    cacheSelectedElements(board, newSelectedElements);
+};
+const clearSelectedElement = (board) => {
+    cacheSelectedElements(board, []);
+};
+const isSelectedElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    return !!selectedElements.find(value => value === element);
 };
 
-// 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];
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+const MAC_ENTER = 3;
+const BACKSPACE = 8;
+const TAB = 9;
+const NUM_CENTER = 12;
+const ENTER = 13;
+const SHIFT = 16;
+const CONTROL = 17;
+const ALT = 18;
+const PAUSE = 19;
+const CAPS_LOCK = 20;
+const ESCAPE = 27;
+const SPACE = 32;
+const PAGE_UP = 33;
+const PAGE_DOWN = 34;
+const END = 35;
+const HOME = 36;
+const LEFT_ARROW = 37;
+const UP_ARROW = 38;
+const RIGHT_ARROW = 39;
+const DOWN_ARROW = 40;
+const PLUS_SIGN = 43;
+const PRINT_SCREEN = 44;
+const INSERT = 45;
+const DELETE = 46;
+const ZERO = 48;
+const ONE = 49;
+const TWO = 50;
+const THREE = 51;
+const FOUR = 52;
+const FIVE = 53;
+const SIX = 54;
+const SEVEN = 55;
+const EIGHT = 56;
+const NINE = 57;
+const FF_SEMICOLON = 59; // Firefox (Gecko) fires this for semicolon instead of 186
+const FF_EQUALS = 61; // Firefox (Gecko) fires this for equals instead of 187
+const QUESTION_MARK = 63;
+const AT_SIGN = 64;
+const A = 65;
+const B = 66;
+const C = 67;
+const D = 68;
+const E = 69;
+const F = 70;
+const G = 71;
+const H = 72;
+const I = 73;
+const J = 74;
+const K = 75;
+const L = 76;
+const M = 77;
+const N = 78;
+const O = 79;
+const P = 80;
+const Q = 81;
+const R = 82;
+const S = 83;
+const T = 84;
+const U = 85;
+const V = 86;
+const W = 87;
+const X = 88;
+const Y = 89;
+const Z = 90;
+const META = 91; // WIN_KEY_LEFT
+const MAC_WK_CMD_LEFT = 91;
+const MAC_WK_CMD_RIGHT = 93;
+const CONTEXT_MENU = 93;
+const NUMPAD_ZERO = 96;
+const NUMPAD_ONE = 97;
+const NUMPAD_TWO = 98;
+const NUMPAD_THREE = 99;
+const NUMPAD_FOUR = 100;
+const NUMPAD_FIVE = 101;
+const NUMPAD_SIX = 102;
+const NUMPAD_SEVEN = 103;
+const NUMPAD_EIGHT = 104;
+const NUMPAD_NINE = 105;
+const NUMPAD_MULTIPLY = 106;
+const NUMPAD_PLUS = 107;
+const NUMPAD_MINUS = 109;
+const NUMPAD_PERIOD = 110;
+const NUMPAD_DIVIDE = 111;
+const F1 = 112;
+const F2 = 113;
+const F3 = 114;
+const F4 = 115;
+const F5 = 116;
+const F6 = 117;
+const F7 = 118;
+const F8 = 119;
+const F9 = 120;
+const F10 = 121;
+const F11 = 122;
+const F12 = 123;
+const NUM_LOCK = 144;
+const SCROLL_LOCK = 145;
+const FIRST_MEDIA = 166;
+const FF_MINUS = 173;
+const MUTE = 173; // Firefox (Gecko) fires 181 for MUTE
+const VOLUME_DOWN = 174; // Firefox (Gecko) fires 182 for VOLUME_DOWN
+const VOLUME_UP = 175; // Firefox (Gecko) fires 183 for VOLUME_UP
+const FF_MUTE = 181;
+const FF_VOLUME_DOWN = 182;
+const LAST_MEDIA = 183;
+const FF_VOLUME_UP = 183;
+const SEMICOLON = 186; // Firefox (Gecko) fires 59 for SEMICOLON
+const EQUALS = 187; // Firefox (Gecko) fires 61 for EQUALS
+const COMMA = 188;
+const DASH = 189; // Firefox (Gecko) fires 173 for DASH/MINUS
+const PERIOD = 190;
+const SLASH = 191;
+const APOSTROPHE = 192;
+const TILDE = 192;
+const OPEN_SQUARE_BRACKET = 219;
+const BACKSLASH = 220;
+const CLOSE_SQUARE_BRACKET = 221;
+const SINGLE_QUOTE = 222;
+const MAC_META = 224;
+
+var ResizeCursorClass;
+(function (ResizeCursorClass) {
+    ResizeCursorClass["ew-resize"] = "ew-resize";
+})(ResizeCursorClass || (ResizeCursorClass = {}));
+
+const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
+
+const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
+const HOST_CLASS_NAME = 'plait-board-container';
+const SCROLL_BAR_WIDTH = 20;
+const MAX_RADIUS = 16;
+const POINTER_BUTTON = {
+    MAIN: 0,
+    WHEEL: 1,
+    SECONDARY: 2,
+    TOUCH: -1
+};
+const PRESS_AND_MOVE_BUFFER = 5;
+
+const NS = 'http://www.w3.org/2000/svg';
+function toPoint(x, y, container) {
+    const rect = container.getBoundingClientRect();
+    return [x - rect.x, y - rect.y];
 }
-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 createG() {
+    const newG = document.createElementNS(NS, 'g');
+    return newG;
 }
-function getNearestPointBetweenPointAndSegments(point, points) {
-    const len = points.length;
-    let distance = Infinity;
-    let result = point;
-    for (let i = 0; i < len; i++) {
-        const p = points[i];
-        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]);
-        }
+function createPath() {
+    const newG = document.createElementNS(NS, 'path');
+    return newG;
+}
+function createRect(rectangle, options) {
+    const rect = document.createElementNS(NS, 'rect');
+    rect.setAttribute('x', `${rectangle.x}`);
+    rect.setAttribute('y', `${rectangle.y}`);
+    rect.setAttribute('width', `${rectangle.width}`);
+    rect.setAttribute('height', `${rectangle.height}`);
+    for (let key in options) {
+        const optionKey = key;
+        rect.setAttribute(key, `${options[optionKey]}`);
     }
-    return result;
+    return rect;
 }
-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];
+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 distanceBetweenPointAndPoint(x1, y1, x2, y2) {
-    const dx = x1 - x2;
-    const dy = y1 - y2;
-    return Math.hypot(dx, dy);
+function createSVG() {
+    const svg = document.createElementNS(NS, 'svg');
+    return svg;
 }
-// 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);
+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;
 }
-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;
+/**
+ * Check if a DOM node is an element node.
+ */
+const isDOMElement = (value) => {
+    return isDOMNode(value) && value.nodeType === 1;
 };
-const isPolylineHitRectangle = (points, rectangle) => {
-    const rectanglePoints = RectangleClient.getCornerPoints(rectangle);
-    for (let i = 1; i < points.length; i++) {
-        const isIntersect = isLineHitLine(points[i], points[i - 1], rectanglePoints[0], rectanglePoints[1]) ||
-            isLineHitLine(points[i], points[i - 1], rectanglePoints[1], rectanglePoints[2]) ||
-            isLineHitLine(points[i], points[i - 1], rectanglePoints[2], rectanglePoints[3]) ||
-            isLineHitLine(points[i], points[i - 1], rectanglePoints[3], rectanglePoints[0]);
-        if (isIntersect) {
+/**
+ * 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;
 };
-//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, rotation = 0) => {
-    const cosAngle = Math.cos(rotation);
-    const sinAngle = Math.sin(rotation);
-    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 isSecondaryPointer = (event) => {
+    return event.button === POINTER_BUTTON.SECONDARY;
 };
-const isPointInRoundRectangle = (point, rectangle, radius) => {
-    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;
+const isMainPointer = (event) => {
+    return event.button === POINTER_BUTTON.MAIN;
 };
 
-const PlaitBoard = {
-    isBoard(value) {
-        const cachedIsBoard = IS_BOARD_CACHE.get(value);
-        if (cachedIsBoard !== undefined) {
-            return cachedIsBoard;
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasOnContextChanged(value) {
+    if (value.onContextChanged) {
+        return true;
+    }
+    return false;
+}
+
+class PlaitPluginElementComponent {
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
         }
-        const isBoard = typeof value.onChange === 'function' && typeof value.apply === 'function';
-        IS_BOARD_CACHE.set(value, isBoard);
-        return isBoard;
-    },
-    findPath(board, node) {
-        const path = [];
-        let child = node;
-        while (true) {
-            const parent = NODE_TO_PARENT.get(child);
-            if (parent == null) {
-                if (PlaitBoard.isBoard(child)) {
-                    return path;
-                }
-                else {
-                    break;
-                }
+        const previousContext = this._context;
+        this._context = value;
+        if (this.element) {
+            ELEMENT_TO_COMPONENT.set(this.element, this);
+        }
+        if (this.initialized) {
+            this.cdr.markForCheck();
+            if (hasOnContextChanged(this)) {
+                this.onContextChanged(value, previousContext);
             }
-            const i = NODE_TO_INDEX.get(child);
-            if (i == null) {
-                break;
+        }
+        else {
+            if (PlaitElement.isRootElement(this.element) && this.element.children) {
+                this.g = createG();
+                this.rootG = createG();
+                this.rootG.append(this.g);
+            }
+            else {
+                this.g = createG();
             }
-            path.unshift(i);
-            child = parent;
         }
-        throw new Error(`Unable to find the path for Plait node: ${JSON.stringify(node)}`);
-    },
-    getHost(board) {
-        return BOARD_TO_HOST.get(board);
-    },
-    getElementHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.host;
-    },
-    getElementUpperHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.upperHost;
-    },
-    getElementActiveHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.activeHost;
-    },
-    getRoughSVG(board) {
-        return BOARD_TO_ROUGH_SVG.get(board);
-    },
-    getComponent(board) {
-        return BOARD_TO_COMPONENT.get(board);
-    },
-    getBoardContainer(board) {
-        return PlaitBoard.getComponent(board).nativeElement;
-    },
-    getRectangle(board) {
-        return getRectangleByElements(board, board.children, true);
-    },
-    getViewportContainer(board) {
-        return PlaitBoard.getHost(board).parentElement;
-    },
-    isFocus(board) {
-        return !!board.selection;
-    },
-    isReadonly(board) {
-        return board.options.readonly;
-    },
-    hasBeenTextEditing(board) {
-        return !!IS_TEXT_EDITABLE.get(board);
-    },
-    getPointer(board) {
-        return board.pointer;
-    },
-    isPointer(board, pointer) {
-        return board.pointer === pointer;
-    },
-    isInPointer(board, pointers) {
-        const point = board.pointer;
-        return pointers.includes(point);
-    },
-    getMovingPointInBoard(board) {
-        return BOARD_TO_MOVING_POINT_IN_BOARD.get(board);
-    },
-    isMovingPointInBoard(board) {
-        const point = BOARD_TO_MOVING_POINT.get(board);
-        const rect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-        if (point && distanceBetweenPointAndRectangle(point[0], point[1], rect) === 0) {
-            return true;
+    }
+    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;
+    }
+    get effect() {
+        return this.context && this.context.effect;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.initialized = false;
+    }
+    ngOnInit() {
+        if (this.element.type) {
+            (this.rootG || this.g).setAttribute(`plait-${this.element.type}`, 'true');
         }
-        return false;
-    },
-    getThemeColors(board) {
-        return (board.options.themeColors || ThemeColors);
+        this.initialized = true;
     }
-};
-
-var PlaitPointerType;
-(function (PlaitPointerType) {
-    PlaitPointerType["hand"] = "hand";
-    PlaitPointerType["selection"] = "selection";
-})(PlaitPointerType || (PlaitPointerType = {}));
-
-function isNullOrUndefined(value) {
-    return value === null || value === undefined;
-}
-/**
- * 规范 point
- * @param point
- * @returns point
- */
-function normalizePoint(point) {
-    return Array.isArray(point)
-        ? {
-            x: point[0],
-            y: point[1]
+    ngOnDestroy() {
+        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
+            ELEMENT_TO_COMPONENT.delete(this.element);
         }
-        : point;
+        removeSelectedElement(this.board, this.element);
+        (this.rootG || this.g).remove();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{
+                type: Input
+            }] } });
+const ELEMENT_TO_COMPONENT = new WeakMap();
 
-const Viewport = {
-    isViewport: (value) => {
-        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
-    },
-};
-
-const Path = {
-    /**
-     * Get a list of ancestor paths for a given path.
-     *
-     * The paths are sorted from shallowest to deepest ancestor. However, if the
-     * `reverse: true` option is passed, they are reversed.
-     */
-    ancestors(path, options = {}) {
-        const { reverse = false } = options;
-        let paths = Path.levels(path, options);
-        if (reverse) {
-            paths = paths.slice(1);
+const RectangleClient = {
+    isHit: (origin, target) => {
+        const minX = origin.x < target.x ? origin.x : target.x;
+        const maxX = origin.x + origin.width > target.x + target.width ? origin.x + origin.width : target.x + target.width;
+        const minY = origin.y < target.y ? origin.y : target.y;
+        const maxY = origin.y + origin.height > target.y + target.height ? origin.y + origin.height : target.y + target.height;
+        // float calculate error( eg: 1.4210854715202004e-14 > 0)
+        if (Math.floor(maxX - minX - origin.width - target.width) <= 0 && Math.floor(maxY - minY - origin.height - target.height) <= 0) {
+            return true;
         }
         else {
-            paths = paths.slice(0, -1);
-        }
-        return paths;
-    },
-    /**
-     * Get a list of paths at every level down to a path. Note: this is the same
-     * as `Path.ancestors`, but including the path itself.
-     *
-     * The paths are sorted from shallowest to deepest. However, if the `reverse:
-     * true` option is passed, they are reversed.
-     */
-    levels(path, options = {}) {
-        const { reverse = false } = options;
-        const list = [];
-        for (let i = 0; i <= path.length; i++) {
-            list.push(path.slice(0, i));
-        }
-        if (reverse) {
-            list.reverse();
-        }
-        return list;
-    },
-    parent(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the parent path of the root path [${path}].`);
-        }
-        return path.slice(0, -1);
-    },
-    next(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the next path of a root path [${path}], because it has no next index.`);
-        }
-        const last = path[path.length - 1];
-        return path.slice(0, -1).concat(last + 1);
-    },
-    hasPrevious(path) {
-        return path[path.length - 1] > 0;
-    },
-    previous(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the next path of a root path [${path}], because it has no previous index.`);
+            return false;
         }
-        const last = path[path.length - 1];
-        return path.slice(0, -1).concat(last - 1);
     },
-    /**
-     * Check if a path is an ancestor of another.
-     */
-    isAncestor(path, another) {
-        return path.length < another.length && Path.compare(path, another) === 0;
-    },
-    /**
-     * Compare a path to another, returning an integer indicating whether the path
-     * was before, at, or after the other.
-     *
-     * Note: Two paths of unequal length can still receive a `0` result if one is
-     * directly above or below the other. If you want exact matching, use
-     * [[Path.equals]] instead.
-     */
-    compare(path, another) {
-        const min = Math.min(path.length, another.length);
-        for (let i = 0; i < min; i++) {
-            if (path[i] < another[i])
-                return -1;
-            if (path[i] > another[i])
-                return 1;
-        }
-        return 0;
+    toRectangleClient: (points) => {
+        const xArray = points.map(ele => ele[0]);
+        const yArray = points.map(ele => ele[1]);
+        const xMin = Math.min(...xArray);
+        const xMax = Math.max(...xArray);
+        const yMin = Math.min(...yArray);
+        const yMax = Math.max(...yArray);
+        const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
+        return rect;
     },
-    /**
-     * Check if a path is exactly equal to another.
-     */
-    equals(path, another) {
-        return path.length === another.length && path.every((n, i) => n === another[i]);
+    getOutlineRectangle: (rectangle, offset) => {
+        return {
+            x: rectangle.x + offset,
+            y: rectangle.y + offset,
+            width: rectangle.width - offset * 2,
+            height: rectangle.height - offset * 2
+        };
     },
-    /**
-     * Check if a path ends before one of the indexes in another.
-     */
-    endsBefore(path, another) {
-        const i = path.length - 1;
-        const as = path.slice(0, i);
-        const bs = another.slice(0, i);
-        const av = path[i];
-        const bv = another[i];
-        return Path.equals(as, bs) && av < bv;
+    isEqual: (rectangle, otherRectangle) => {
+        return (rectangle.x === otherRectangle.x &&
+            rectangle.y === otherRectangle.y &&
+            rectangle.width === otherRectangle.width &&
+            rectangle.height === otherRectangle.height);
     },
-    /**
-     * Check if a path is a sibling of another.
-     */
-    isSibling(path, another) {
-        if (path.length !== another.length) {
-            return false;
-        }
-        const as = path.slice(0, -1);
-        const bs = another.slice(0, -1);
-        const al = path[path.length - 1];
-        const bl = another[another.length - 1];
-        return al !== bl && Path.equals(as, bs);
+    getCornerPoints: (rectangle) => {
+        return [
+            [rectangle.x, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+            [rectangle.x, rectangle.y + rectangle.height]
+        ];
     },
-    transform(path, operation) {
-        return produce(path, p => {
-            // PERF: Exit early if the operation is guaranteed not to have an effect.
-            if (!path || path?.length === 0) {
-                return;
-            }
-            if (p === null) {
-                return null;
-            }
-            switch (operation.type) {
-                case 'insert_node': {
-                    const { path: op } = operation;
-                    if (Path.equals(op, p) || Path.endsBefore(op, p) || Path.isAncestor(op, p)) {
-                        p[op.length - 1] += 1;
-                    }
-                    break;
-                }
-                case 'remove_node': {
-                    const { path: op } = operation;
-                    if (Path.equals(op, p) || Path.isAncestor(op, p)) {
-                        return null;
-                    }
-                    else if (Path.endsBefore(op, p)) {
-                        p[op.length - 1] -= 1;
-                    }
-                    break;
-                }
-                case 'move_node': {
-                    const { path: op, newPath: onp } = operation;
-                    // If the old and new path are the same, it's a no-op.
-                    if (Path.equals(op, onp)) {
-                        return;
-                    }
-                    if (Path.isAncestor(op, p) || Path.equals(op, p)) {
-                        const copy = onp.slice();
-                        // op.length <= onp.length is different for slate
-                        // resolve drag from [0, 0] to [0, 3] issue
-                        if (Path.endsBefore(op, onp) && op.length <= onp.length) {
-                            copy[op.length - 1] -= 1;
-                        }
-                        return copy.concat(p.slice(op.length));
-                    }
-                    else if (Path.isSibling(op, onp) && (Path.isAncestor(onp, p) || Path.equals(onp, p))) {
-                        if (Path.endsBefore(op, p)) {
-                            p[op.length - 1] -= 1;
-                        }
-                        else {
-                            p[op.length - 1] += 1;
-                        }
-                    }
-                    else if (Path.endsBefore(onp, p) || Path.equals(onp, p) || Path.isAncestor(onp, p)) {
-                        if (Path.endsBefore(op, p)) {
-                            p[op.length - 1] -= 1;
-                        }
-                        p[onp.length - 1] += 1;
-                    }
-                    else if (Path.endsBefore(op, p)) {
-                        if (Path.equals(onp, p)) {
-                            p[onp.length - 1] += 1;
-                        }
-                        p[op.length - 1] -= 1;
-                    }
-                    break;
-                }
-            }
-            return p;
-        });
+    getEdgeCenterPoints: (rectangle) => {
+        return [
+            [rectangle.x + rectangle.width / 2, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
+            [rectangle.x, rectangle.y + rectangle.height / 2]
+        ];
     }
 };
 
-const PlaitNode = {
-    parent: (board, path) => {
-        const parentPath = Path.parent(path);
-        const p = PlaitNode.get(board, parentPath);
-        return p;
-    },
-    /**
-     * Return a generator of all the ancestor nodes above a specific path.
-     *
-     * By default the order is top-down, from highest to lowest ancestor in
-     * the tree, but you can pass the `reverse: true` option to go bottom-up.
-     */
-    *parents(root, path, options = {}) {
-        for (const p of Path.ancestors(path, options)) {
-            const n = PlaitNode.get(root, p);
-            yield n;
-        }
-    },
-    get(root, path) {
-        let node = root;
-        for (let i = 0; i < path.length; i++) {
-            const p = path[i];
-            if (!node || !node.children || !node.children[p]) {
-                throw new Error(`Cannot find a descendant at path [${path}]`);
-            }
-            node = node.children[p];
-        }
-        return node;
-    },
-    last(board, path) {
-        let n = PlaitNode.get(board, path);
-        while (n && n.children && n.children.length > 0) {
-            const i = n.children.length - 1;
-            n = n.children[i];
-        }
-        return n;
+// 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 applyToDraft = (board, selection, viewport, theme, op) => {
-    switch (op.type) {
-        case 'insert_node': {
-            const { path, node } = op;
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            if (!parent.children || index > parent.children.length) {
-                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
-            }
-            parent.children.splice(index, 0, node);
-            break;
-        }
-        case 'remove_node': {
-            const { path } = op;
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            if (!parent.children || index > parent.children.length) {
-                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
-            }
-            parent.children.splice(index, 1);
-            break;
-        }
-        case 'move_node': {
-            const { path, newPath } = op;
-            if (Path.isAncestor(path, newPath)) {
-                throw new Error(`Cannot move a path [${path}] to new path [${newPath}] because the destination is inside itself.`);
-            }
-            const node = PlaitNode.get(board, path);
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            // This is tricky, but since the `path` and `newPath` both refer to
-            // the same snapshot in time, there's a mismatch. After either
-            // removing the original position, the second step's path can be out
-            // of date. So instead of using the `op.newPath` directly, we
-            // transform `op.path` to ascertain what the `newPath` would be after
-            // the operation was applied.
-            parent.children?.splice(index, 1);
-            const truePath = Path.transform(path, op);
-            const newParent = PlaitNode.get(board, Path.parent(truePath));
-            const newIndex = truePath[truePath.length - 1];
-            newParent.children?.splice(newIndex, 0, node);
-            break;
-        }
-        case 'set_node': {
-            const { path, properties, newProperties } = op;
-            if (path.length === 0) {
-                throw new Error(`Cannot set properties on the root node!`);
-            }
-            const node = PlaitNode.get(board, path);
-            for (const key in newProperties) {
-                const value = newProperties[key];
-                if (value == null) {
-                    delete node[key];
-                }
-                else {
-                    node[key] = value;
-                }
-            }
-            // properties that were previously defined, but are now missing, must be deleted
-            for (const key in properties) {
-                if (!newProperties.hasOwnProperty(key)) {
-                    delete node[key];
-                }
-            }
-            break;
-        }
-        case 'set_viewport': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                viewport = newProperties;
-            }
-            else {
-                if (viewport == null) {
-                    if (!Viewport.isViewport(newProperties)) {
-                        throw new Error(`Cannot apply an incomplete "set_viewport" operation properties ${JSON.stringify(newProperties)} when there is no current viewport.`);
-                    }
-                    viewport = { ...newProperties };
-                }
-                for (const key in newProperties) {
-                    const value = newProperties[key];
-                    if (value == null) {
-                        delete viewport[key];
-                    }
-                    else {
-                        viewport[key] = value;
-                    }
-                }
-            }
-            break;
-        }
-        case 'set_selection': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                selection = newProperties;
-            }
-            else {
-                if (selection === null) {
-                    selection = op.newProperties;
-                }
-                else {
-                    selection.ranges = newProperties.ranges;
-                }
-            }
-            break;
-        }
-        case 'set_theme': {
-            const { newProperties } = op;
-            theme = newProperties;
-            break;
-        }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
     }
-    return { selection, viewport, theme };
-};
-const GeneralTransforms = {
-    /**
-     * Transform the board by an operation.
-     */
-    transform(board, op) {
-        board.children = createDraft(board.children);
-        let viewport = board.viewport && createDraft(board.viewport);
-        let selection = board.selection && createDraft(board.selection);
-        let theme = board.theme && createDraft(board.theme);
-        try {
-            const state = applyToDraft(board, selection, viewport, theme, op);
-            viewport = state.viewport;
-            selection = state.selection;
-            theme = state.theme;
-        }
-        finally {
-            board.children = finishDraft(board.children);
-            if (selection) {
-                board.selection = isDraft(selection) ? finishDraft(selection) : selection;
-            }
-            else {
-                board.selection = null;
-            }
-            board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
-            board.theme = isDraft(theme) ? finishDraft(theme) : theme;
+    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;
         }
     }
-};
-
-function insertNode(board, node, path) {
-    const operation = { type: 'insert_node', node, path };
-    board.apply(operation);
+    return distance;
 }
-function setNode(board, props, path) {
-    const properties = {};
-    const newProperties = {};
-    const node = PlaitNode.get(board, path);
-    for (const k in props) {
-        if (node[k] !== props[k]) {
-            if (node.hasOwnProperty(k)) {
-                properties[k] = node[k];
-            }
-            if (props[k] != null)
-                newProperties[k] = props[k];
+function getNearestPointBetweenPointAndSegments(point, points) {
+    const len = points.length;
+    let distance = Infinity;
+    let result = point;
+    for (let i = 0; i < len; i++) {
+        const p = points[i];
+        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 operation = { type: 'set_node', properties, newProperties, path };
-    board.apply(operation);
+    return result;
 }
-function removeNode(board, path) {
-    const node = PlaitNode.get(board, path);
-    const operation = { type: 'remove_node', path, node };
-    board.apply(operation);
+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 moveNode(board, path, newPath) {
-    const operation = { type: 'move_node', path, newPath };
-    board.apply(operation);
+function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+    return Math.hypot(dx, dy);
 }
-const NodeTransforms = {
-    insertNode,
-    setNode,
-    removeNode,
-    moveNode
-};
-
-function setSelection(board, selection) {
-    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
-    board.apply(operation);
+// 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 SelectionTransforms = {
-    setSelection,
-    setSelectionWithTemporaryElements
+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;
 };
-function setSelectionWithTemporaryElements(board, elements) {
-    setTimeout(() => {
-        BOARD_TO_TEMPORARY_ELEMENTS.set(board, elements);
-        setSelection(board, { ranges: [] });
+const isPolylineHitRectangle = (points, rectangle) => {
+    const rectanglePoints = RectangleClient.getCornerPoints(rectangle);
+    for (let i = 1; i < points.length; i++) {
+        const isIntersect = isLineHitLine(points[i], points[i - 1], rectanglePoints[0], rectanglePoints[1]) ||
+            isLineHitLine(points[i], points[i - 1], rectanglePoints[1], rectanglePoints[2]) ||
+            isLineHitLine(points[i], points[i - 1], rectanglePoints[2], rectanglePoints[3]) ||
+            isLineHitLine(points[i], points[i - 1], rectanglePoints[3], rectanglePoints[0]);
+        if (isIntersect) {
+            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, rotation = 0) => {
+    const cosAngle = Math.cos(rotation);
+    const sinAngle = Math.sin(rotation);
+    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) => {
+    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;
+};
+
+function transformPoints(board, points) {
+    const newPoints = points.map(point => {
+        return transformPoint(board, point);
     });
+    return newPoints;
+}
+function transformPoint(board, point) {
+    const { width, height } = PlaitBoard.getHost(board).getBoundingClientRect();
+    const viewBox = PlaitBoard.getHost(board).viewBox.baseVal;
+    const x = (point[0] / width) * viewBox.width + viewBox.x;
+    const y = (point[1] / height) * viewBox.height + viewBox.y;
+    const newPoint = [x, y];
+    return newPoint;
+}
+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;
 }
 
-function setViewport(board, viewport) {
-    const operation = { type: 'set_viewport', properties: board.viewport, newProperties: viewport };
-    board.apply(operation);
+function createForeignObject(x, y, width, height) {
+    var newForeignObject = document.createElementNS(NS, 'foreignObject');
+    newForeignObject.setAttribute('x', `${x}`);
+    newForeignObject.setAttribute('y', `${y}`);
+    newForeignObject.setAttribute('width', `${width}`);
+    newForeignObject.setAttribute('height', `${height}`);
+    return newForeignObject;
 }
-const ViewportTransforms$1 = {
-    setViewport
+function updateForeignObject(target, width, height, x, y) {
+    const foreignObject = target instanceof SVGForeignObjectElement ? target : target.querySelector('foreignObject');
+    if (foreignObject) {
+        foreignObject.setAttribute('width', `${width}`);
+        foreignObject.setAttribute('height', `${height}`);
+        foreignObject.setAttribute('x', `${x}`);
+        foreignObject.setAttribute('y', `${y}`);
+    }
+}
+function updateForeignObjectWidth(target, width) {
+    const foreignObject = target instanceof SVGForeignObjectElement ? target : target.querySelector('foreignObject');
+    if (foreignObject) {
+        foreignObject.setAttribute('width', `${width}`);
+    }
+}
+
+const IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
+
+const IS_IOS = typeof navigator !== 'undefined' &&
+    typeof window !== 'undefined' &&
+    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+    !window.MSStream;
+const IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+const IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
+const IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent);
+// "modern" Edge was released at 79.x
+const IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
+const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent);
+// Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
+const IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
+
+function isNullOrUndefined(value) {
+    return value === null || value === undefined;
+}
+/**
+ * 规范 point
+ * @param point
+ * @returns point
+ */
+function normalizePoint(point) {
+    return Array.isArray(point)
+        ? {
+            x: point[0],
+            y: point[1]
+        }
+        : point;
+}
+
+/**
+ * Check whether to merge an operation into the previous operation.
+ */
+const shouldMerge = (op, prev) => {
+    if (op.type === 'set_viewport' && op.type === prev?.type) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Check whether an operation needs to be saved to the history.
+ */
+const shouldSave = (op, prev) => {
+    if (op.type === 'set_selection' || op.type === 'set_viewport') {
+        return false;
+    }
+    return true;
+};
+/**
+ * Check whether an operation should clear the redos stack.
+ */
+const shouldClear = (op) => {
+    if (op.type === 'set_selection') {
+        return false;
+    }
+    return true;
+};
+const PlaitHistoryBoard = {
+    /**
+     * Get the saving flag's current value.
+     */
+    isSaving(board) {
+        return SAVING.get(board);
+    },
+    /**
+     * Get the merge flag's current value.
+     */
+    isMerging(board) {
+        return MERGING.get(board);
+    },
+    /**
+     * Apply a series of changes inside a synchronous `fn`, without merging any of
+     * the new operations into previous save point in the history.
+     */
+    withoutMerging(board, fn) {
+        const prev = PlaitHistoryBoard.isMerging(board);
+        MERGING.set(board, false);
+        fn();
+        MERGING.set(board, prev);
+    },
+    /**
+     * Apply a series of changes inside a synchronous `fn`, without saving any of
+     * their operations into the history.
+     */
+    withoutSaving(board, fn) {
+        const prev = PlaitHistoryBoard.isSaving(board);
+        SAVING.set(board, false);
+        fn();
+        SAVING.set(board, prev);
+    }
 };
 
 /**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
+ * Hotkey mappings for each platform.
  */
-const MAC_ENTER = 3;
-const BACKSPACE = 8;
-const TAB = 9;
-const NUM_CENTER = 12;
-const ENTER = 13;
-const SHIFT = 16;
-const CONTROL = 17;
-const ALT = 18;
-const PAUSE = 19;
-const CAPS_LOCK = 20;
-const ESCAPE = 27;
-const SPACE = 32;
-const PAGE_UP = 33;
-const PAGE_DOWN = 34;
-const END = 35;
-const HOME = 36;
-const LEFT_ARROW = 37;
-const UP_ARROW = 38;
-const RIGHT_ARROW = 39;
-const DOWN_ARROW = 40;
-const PLUS_SIGN = 43;
-const PRINT_SCREEN = 44;
-const INSERT = 45;
-const DELETE = 46;
-const ZERO = 48;
-const ONE = 49;
-const TWO = 50;
-const THREE = 51;
-const FOUR = 52;
-const FIVE = 53;
-const SIX = 54;
-const SEVEN = 55;
-const EIGHT = 56;
-const NINE = 57;
-const FF_SEMICOLON = 59; // Firefox (Gecko) fires this for semicolon instead of 186
-const FF_EQUALS = 61; // Firefox (Gecko) fires this for equals instead of 187
-const QUESTION_MARK = 63;
-const AT_SIGN = 64;
-const A = 65;
-const B = 66;
-const C = 67;
-const D = 68;
-const E = 69;
-const F = 70;
-const G = 71;
-const H = 72;
-const I = 73;
-const J = 74;
-const K = 75;
-const L = 76;
-const M = 77;
-const N = 78;
-const O = 79;
-const P = 80;
-const Q = 81;
-const R = 82;
-const S = 83;
-const T = 84;
-const U = 85;
-const V = 86;
-const W = 87;
-const X = 88;
-const Y = 89;
-const Z = 90;
-const META = 91; // WIN_KEY_LEFT
-const MAC_WK_CMD_LEFT = 91;
-const MAC_WK_CMD_RIGHT = 93;
-const CONTEXT_MENU = 93;
-const NUMPAD_ZERO = 96;
-const NUMPAD_ONE = 97;
-const NUMPAD_TWO = 98;
-const NUMPAD_THREE = 99;
-const NUMPAD_FOUR = 100;
-const NUMPAD_FIVE = 101;
-const NUMPAD_SIX = 102;
-const NUMPAD_SEVEN = 103;
-const NUMPAD_EIGHT = 104;
-const NUMPAD_NINE = 105;
-const NUMPAD_MULTIPLY = 106;
-const NUMPAD_PLUS = 107;
-const NUMPAD_MINUS = 109;
-const NUMPAD_PERIOD = 110;
-const NUMPAD_DIVIDE = 111;
-const F1 = 112;
-const F2 = 113;
-const F3 = 114;
-const F4 = 115;
-const F5 = 116;
-const F6 = 117;
-const F7 = 118;
-const F8 = 119;
-const F9 = 120;
-const F10 = 121;
-const F11 = 122;
-const F12 = 123;
-const NUM_LOCK = 144;
-const SCROLL_LOCK = 145;
-const FIRST_MEDIA = 166;
-const FF_MINUS = 173;
-const MUTE = 173; // Firefox (Gecko) fires 181 for MUTE
-const VOLUME_DOWN = 174; // Firefox (Gecko) fires 182 for VOLUME_DOWN
-const VOLUME_UP = 175; // Firefox (Gecko) fires 183 for VOLUME_UP
-const FF_MUTE = 181;
-const FF_VOLUME_DOWN = 182;
-const LAST_MEDIA = 183;
-const FF_VOLUME_UP = 183;
-const SEMICOLON = 186; // Firefox (Gecko) fires 59 for SEMICOLON
-const EQUALS = 187; // Firefox (Gecko) fires 61 for EQUALS
-const COMMA = 188;
-const DASH = 189; // Firefox (Gecko) fires 173 for DASH/MINUS
-const PERIOD = 190;
-const SLASH = 191;
-const APOSTROPHE = 192;
-const TILDE = 192;
-const OPEN_SQUARE_BRACKET = 219;
-const BACKSLASH = 220;
-const CLOSE_SQUARE_BRACKET = 221;
-const SINGLE_QUOTE = 222;
-const MAC_META = 224;
-
-var ResizeCursorClass;
-(function (ResizeCursorClass) {
-    ResizeCursorClass["ew-resize"] = "ew-resize";
-})(ResizeCursorClass || (ResizeCursorClass = {}));
+const HOTKEYS = {
+    bold: 'mod+b',
+    compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
+    moveBackward: 'left',
+    moveForward: 'right',
+    moveUp: 'up',
+    moveDown: 'down',
+    moveWordBackward: 'ctrl+left',
+    moveWordForward: 'ctrl+right',
+    deleteBackward: 'shift?+backspace',
+    deleteForward: 'shift?+delete',
+    extendBackward: 'shift+left',
+    extendForward: 'shift+right',
+    italic: 'mod+i',
+    splitBlock: 'shift?+enter',
+    undo: 'mod+z'
+};
+const APPLE_HOTKEYS = {
+    moveLineBackward: 'opt+up',
+    moveLineForward: 'opt+down',
+    moveWordBackward: 'opt+left',
+    moveWordForward: 'opt+right',
+    deleteBackward: ['ctrl+backspace', 'ctrl+h'],
+    deleteForward: ['ctrl+delete', 'ctrl+d'],
+    deleteLineBackward: 'cmd+shift?+backspace',
+    deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
+    deleteWordBackward: 'opt+shift?+backspace',
+    deleteWordForward: 'opt+shift?+delete',
+    extendLineBackward: 'opt+shift+up',
+    extendLineForward: 'opt+shift+down',
+    redo: 'cmd+shift+z',
+    transposeCharacter: 'ctrl+t'
+};
+const WINDOWS_HOTKEYS = {
+    deleteWordBackward: 'ctrl+shift?+backspace',
+    deleteWordForward: 'ctrl+shift?+delete',
+    redo: ['ctrl+y', 'ctrl+shift+z']
+};
+/**
+ * Create a platform-aware hotkey checker.
+ */
+const create = (key) => {
+    const generic = HOTKEYS[key];
+    const apple = APPLE_HOTKEYS[key];
+    const windows = WINDOWS_HOTKEYS[key];
+    const isGeneric = generic && isKeyHotkey(generic);
+    const isApple = apple && isKeyHotkey(apple);
+    const isWindows = windows && isKeyHotkey(windows);
+    return (event) => {
+        if (isGeneric && isGeneric(event)) {
+            return true;
+        }
+        if (IS_APPLE && isApple && isApple(event)) {
+            return true;
+        }
+        if (!IS_APPLE && isWindows && isWindows(event)) {
+            return true;
+        }
+        return false;
+    };
+};
+/**
+ * Hotkeys.
+ */
+const hotkeys = {
+    isBold: create('bold'),
+    isCompose: create('compose'),
+    isMoveBackward: create('moveBackward'),
+    isMoveForward: create('moveForward'),
+    isMoveUp: create('moveUp'),
+    isMoveDown: create('moveDown'),
+    isDeleteBackward: create('deleteBackward'),
+    isDeleteForward: create('deleteForward'),
+    isDeleteLineBackward: create('deleteLineBackward'),
+    isDeleteLineForward: create('deleteLineForward'),
+    isDeleteWordBackward: create('deleteWordBackward'),
+    isDeleteWordForward: create('deleteWordForward'),
+    isExtendBackward: create('extendBackward'),
+    isExtendForward: create('extendForward'),
+    isExtendLineBackward: create('extendLineBackward'),
+    isExtendLineForward: create('extendLineForward'),
+    isItalic: create('italic'),
+    isMoveLineBackward: create('moveLineBackward'),
+    isMoveLineForward: create('moveLineForward'),
+    isMoveWordBackward: create('moveWordBackward'),
+    isMoveWordForward: create('moveWordForward'),
+    isRedo: create('redo'),
+    isSplitBlock: create('splitBlock'),
+    isTransposeCharacter: create('transposeCharacter'),
+    isUndo: create('undo')
+};
 
-const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
+function idCreator(length = 5) {
+    // remove numeral
+    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+    const maxPosition = $chars.length;
+    let key = '';
+    for (let i = 0; i < length; i++) {
+        key += $chars.charAt(Math.floor(Math.random() * maxPosition));
+    }
+    return key;
+}
 
-const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
-const HOST_CLASS_NAME = 'plait-board-container';
-const SCROLL_BAR_WIDTH = 20;
-const MAX_RADIUS = 16;
-const POINTER_BUTTON = {
-    MAIN: 0,
-    WHEEL: 1,
-    SECONDARY: 2,
-    TOUCH: -1
+/**
+ * drawRoundRectangle
+ */
+function drawRoundRectangle(rs, x1, y1, x2, y2, options, outline = false, borderRadius) {
+    const width = Math.abs(x1 - x2);
+    const height = Math.abs(y1 - y2);
+    let radius = borderRadius || 0;
+    if (radius === 0) {
+        const defaultRadius = Math.min(width, height) / 8;
+        let radius = defaultRadius;
+        if (defaultRadius > MAX_RADIUS) {
+            radius = outline ? MAX_RADIUS + 2 : MAX_RADIUS;
+        }
+    }
+    const point1 = [x1 + radius, y1];
+    const point2 = [x2 - radius, y1];
+    const point3 = [x2, y1 + radius];
+    const point4 = [x2, y2 - radius];
+    const point5 = [x2 - radius, y2];
+    const point6 = [x1 + radius, y2];
+    const point7 = [x1, y2 - radius];
+    const point8 = [x1, y1 + radius];
+    return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, options);
+}
+const drawRectangle = (board, rectangle, options) => {
+    const roughSVG = PlaitBoard.getRoughSVG(board);
+    const rectangleG = roughSVG.rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, options);
+    setStrokeLinecap(rectangleG, 'round');
+    return rectangleG;
 };
-const PRESS_AND_MOVE_BUFFER = 5;
 
-const NS = 'http://www.w3.org/2000/svg';
-function toPoint(x, y, container) {
-    const rect = container.getBoundingClientRect();
-    return [x - rect.x, y - rect.y];
+function arrowPoints(start, end, maxHypotenuseLength = 10, degree = 40) {
+    const width = Math.abs(start[0] - end[0]);
+    const height = Math.abs(start[1] - end[1]);
+    let hypotenuse = Math.hypot(width, height); // 斜边
+    const realRotateLine = hypotenuse > maxHypotenuseLength * 2 ? maxHypotenuseLength : hypotenuse / 2;
+    const rotateWidth = (realRotateLine / hypotenuse) * width;
+    const rotateHeight = (realRotateLine / hypotenuse) * height;
+    const rotatePoint = [
+        end[0] > start[0] ? end[0] - rotateWidth : end[0] + rotateWidth,
+        end[1] > start[1] ? end[1] - rotateHeight : end[1] + rotateHeight
+    ];
+    const pointRight = rotate(rotatePoint[0], rotatePoint[1], end[0], end[1], (degree * Math.PI) / 180);
+    const pointLeft = rotate(rotatePoint[0], rotatePoint[1], end[0], end[1], (-degree * Math.PI) / 180);
+    return { pointLeft, pointRight };
 }
-function createG() {
-    const newG = document.createElementNS(NS, 'g');
-    return newG;
+function drawArrow(rs, start, end, options, maxHypotenuseLength = 10, degree = 40) {
+    const { pointLeft, pointRight } = arrowPoints(start, end, maxHypotenuseLength, degree);
+    const arrowLineLeft = rs.linearPath([pointLeft, end], options);
+    const arrowLineRight = rs.linearPath([pointRight, end], options);
+    return [arrowLineLeft, arrowLineRight];
 }
-function createPath() {
-    const newG = document.createElementNS(NS, 'path');
-    return newG;
+
+function drawCircle(roughSVG, point, diameter, options) {
+    return roughSVG.circle(point[0], point[1], diameter, options);
 }
-function createRect(rectangle, options) {
-    const rect = document.createElementNS(NS, 'rect');
-    rect.setAttribute('x', `${rectangle.x}`);
-    rect.setAttribute('y', `${rectangle.y}`);
-    rect.setAttribute('width', `${rectangle.width}`);
-    rect.setAttribute('height', `${rectangle.height}`);
-    for (let key in options) {
-        const optionKey = key;
-        rect.setAttribute(key, `${options[optionKey]}`);
+
+function drawLine(rs, start, end, options) {
+    return rs.linearPath([start, end], options);
+}
+function drawLinearPath(points, options) {
+    const g = createG();
+    const path = createPath();
+    let polylinePath = '';
+    points.forEach((point, index) => {
+        if (index === 0) {
+            polylinePath += `M ${point[0]} ${point[1]} `;
+        }
+        else {
+            polylinePath += `L ${point[0]} ${point[1]} `;
+        }
+    });
+    path.setAttribute('d', polylinePath);
+    path.setAttribute('stroke', `${options?.stroke}`);
+    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
+    path.setAttribute('fill', `none`);
+    g.appendChild(path);
+    return g;
+}
+function drawBezierPath(points, options) {
+    const g = createG();
+    const path = createPath();
+    let polylinePath = '';
+    for (let i = 0; i < points.length - 3; i += 3) {
+        if (i === 0) {
+            polylinePath += `M ${points[0][0]} ${points[0][1]} `;
+        }
+        else {
+            polylinePath += `C ${points[i + 1][0]} ${points[i + 1][1]}, ${points[i + 2][0]} ${points[i + 2][1]}, ${points[i + 3][0]} ${points[i + 3][1]}`;
+        }
+    }
+    path.setAttribute('d', polylinePath);
+    path.setAttribute('stroke', `${options?.stroke}`);
+    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
+    path.setAttribute('fill', `none`);
+    g.appendChild(path);
+    return g;
+}
+
+const IS_FROM_SCROLLING = new WeakMap();
+const IS_FROM_VIEWPORT_CHANGE = new WeakMap();
+function getViewportContainerRect(board) {
+    const { hideScrollbar } = board.options;
+    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+    const viewportRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
+    return {
+        width: viewportRect.width + scrollBarWidth,
+        height: viewportRect.height + scrollBarWidth
+    };
+}
+function getElementHostBBox(board, zoom) {
+    const childrenRect = getRectangleByElements(board, board.children, true);
+    const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
+    const containerWidth = viewportContainerRect.width / zoom;
+    const containerHeight = viewportContainerRect.height / zoom;
+    let left;
+    let right;
+    let top;
+    let bottom;
+    if (childrenRect.width < containerWidth) {
+        const centerX = childrenRect.x + childrenRect.width / 2;
+        const halfContainerWidth = containerWidth / 2;
+        left = centerX - halfContainerWidth;
+        right = centerX + halfContainerWidth;
+    }
+    else {
+        left = childrenRect.x;
+        right = childrenRect.x + childrenRect.width;
+    }
+    if (childrenRect.height < containerHeight) {
+        const centerY = childrenRect.y + childrenRect.height / 2;
+        const halfContainerHeight = containerHeight / 2;
+        top = centerY - halfContainerHeight;
+        bottom = centerY + halfContainerHeight;
+    }
+    else {
+        top = childrenRect.y;
+        bottom = childrenRect.y + childrenRect.height;
+    }
+    return {
+        left,
+        right,
+        top,
+        bottom
+    };
+}
+/**
+ * 验证缩放比是否符合限制，如果超出限制，则返回合适的缩放比
+ * @param zoom 缩放比
+ * @param minZoom 最小缩放比
+ * @param maxZoom 最大缩放比
+ * @returns 正确的缩放比
+ */
+function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
+    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
+}
+function getViewBox(board, zoom) {
+    const boardContainerRectangle = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
+    const elementHostBBox = getElementHostBBox(board, zoom);
+    const horizontalPadding = boardContainerRectangle.width / 2;
+    const verticalPadding = boardContainerRectangle.height / 2;
+    const viewBox = [
+        elementHostBBox.left - horizontalPadding / zoom,
+        elementHostBBox.top - verticalPadding / zoom,
+        elementHostBBox.right - elementHostBBox.left + (horizontalPadding * 2) / zoom,
+        elementHostBBox.bottom - elementHostBBox.top + (verticalPadding * 2) / zoom
+    ];
+    return viewBox;
+}
+function getViewBoxCenterPoint(board) {
+    const childrenRectangle = getRectangleByElements(board, board.children, true);
+    return [childrenRectangle.x + childrenRectangle.width / 2, childrenRectangle.y + childrenRectangle.height / 2];
+}
+function setSVGViewBox(board, viewBox) {
+    const zoom = board.viewport.zoom;
+    const hostElement = PlaitBoard.getHost(board);
+    hostElement.style.display = 'block';
+    hostElement.style.width = `${viewBox[2] * zoom}px`;
+    hostElement.style.height = `${viewBox[3] * zoom}px`;
+    if (viewBox && viewBox[2] > 0 && viewBox[3] > 0) {
+        hostElement.setAttribute('viewBox', viewBox.join(' '));
+    }
+}
+function updateViewportOffset(board) {
+    const origination = getViewportOrigination(board);
+    if (!origination)
+        return;
+    const { zoom } = board.viewport;
+    const viewBox = getViewBox(board, zoom);
+    const scrollLeft = (origination[0] - viewBox[0]) * zoom;
+    const scrollTop = (origination[1] - viewBox[1]) * zoom;
+    updateViewportContainerScroll(board, scrollLeft, scrollTop);
+}
+function updateViewportContainerScroll(board, left, top, isFromViewportChange = true) {
+    const viewportContainer = PlaitBoard.getViewportContainer(board);
+    if (viewportContainer.scrollLeft !== left || viewportContainer.scrollTop !== top) {
+        viewportContainer.scrollLeft = left;
+        viewportContainer.scrollTop = top;
+        isFromViewportChange && setIsFromViewportChange(board, true);
     }
-    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 initializeViewportContainer(board) {
+    const { width, height } = getViewportContainerRect(board);
+    const viewportContainer = PlaitBoard.getViewportContainer(board);
+    viewportContainer.style.width = `${width}px`;
+    viewportContainer.style.height = `${height}px`;
 }
-function createSVG() {
-    const svg = document.createElementNS(NS, 'svg');
-    return svg;
+function initializeViewBox(board) {
+    const zoom = board.viewport.zoom;
+    const viewBox = getViewBox(board, zoom);
+    setSVGViewBox(board, viewBox);
 }
-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;
+function initializeViewportOffset(board) {
+    if (!board.viewport?.origination) {
+        const zoom = board.viewport.zoom;
+        const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
+        const viewBox = getViewBox(board, zoom);
+        const centerX = viewBox[0] + viewBox[2] / 2;
+        const centerY = viewBox[1] + viewBox[3] / 2;
+        const origination = [centerX - viewportContainerRect.width / 2 / zoom, centerY - viewportContainerRect.height / 2 / zoom];
+        updateViewportOrigination(board, origination);
+        updateViewportOffset(board);
+        return;
+    }
+    updateViewportOffset(board);
 }
-/**
- * Check if a DOM node is an element node.
- */
-const isDOMElement = (value) => {
-    return isDOMNode(value) && value.nodeType === 1;
+const updateViewportOrigination = (board, origination) => {
+    BOARD_TO_VIEWPORT_ORIGINATION.set(board, origination);
 };
-/**
- * Check if a value is a DOM node.
- */
-const isDOMNode = (value) => {
-    return value instanceof window.Node;
+const clearViewportOrigination = (board) => {
+    BOARD_TO_VIEWPORT_ORIGINATION.delete(board);
 };
-const hasInputOrTextareaTarget = (target) => {
-    if (isDOMElement(target)) {
-        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
-            return true;
-        }
+const getViewportOrigination = (board) => {
+    const origination = BOARD_TO_VIEWPORT_ORIGINATION.get(board);
+    if (origination) {
+        return origination;
+    }
+    else {
+        return board.viewport.origination;
     }
-    return false;
-};
-const isSecondaryPointer = (event) => {
-    return event.button === POINTER_BUTTON.SECONDARY;
 };
-const isMainPointer = (event) => {
-    return event.button === POINTER_BUTTON.MAIN;
+const isFromScrolling = (board) => {
+    return !!IS_FROM_SCROLLING.get(board);
 };
-
-/**
- * Extendable Custom Types Interface
- */
-
-const SELECTION_BORDER_COLOR = '#6698FF';
-const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
-const Selection = {
-    isCollapsed(selection) {
-        if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
+const setIsFromScrolling = (board, state) => {
+    IS_FROM_SCROLLING.set(board, state);
 };
-
-const getHitElements = (board, selection, match = () => true) => {
-    const realSelection = selection || board.selection;
-    const selectedElements = [];
-    const isCollapsed = realSelection && realSelection.ranges.length === 1 && Selection.isCollapsed(realSelection.ranges[0]);
-    depthFirstRecursion(board, node => {
-        if (selectedElements.length > 0 && isCollapsed) {
-            return;
-        }
-        if (!PlaitBoard.isBoard(node) &&
-            match(node) &&
-            realSelection &&
-            realSelection.ranges.some(range => {
-                return board.isHitSelection(node, range);
-            })) {
-            selectedElements.push(node);
-        }
-    }, getIsRecursionFunc(board), true);
-    return selectedElements;
+const isFromViewportChange = (board) => {
+    return !!IS_FROM_VIEWPORT_CHANGE.get(board);
 };
-const getHitElementOfRoot = (board, rootElements, range) => {
-    const newRootElements = [...rootElements].reverse();
-    return newRootElements.find(item => {
-        return board.isHitSelection(item, range);
-    });
+const setIsFromViewportChange = (board, state) => {
+    IS_FROM_VIEWPORT_CHANGE.set(board, state);
 };
-const isHitElements = (board, elements, ranges) => {
-    let isIntersectionElements = false;
-    if (elements.length) {
-        elements.map(item => {
-            if (!isIntersectionElements) {
-                isIntersectionElements = ranges.some(range => {
-                    return board.isHitSelection(item, range);
-                });
-            }
+function scrollToRectangle(board, client) { }
+
+let timerId = null;
+const throttleRAF = (fn) => {
+    const scheduleFunc = () => {
+        timerId = requestAnimationFrame(() => {
+            timerId = null;
+            fn();
         });
+    };
+    if (timerId !== null) {
+        cancelAnimationFrame(timerId);
+        timerId = null;
     }
-    return isIntersectionElements;
-};
-const cacheSelectedElements = (board, selectedElements) => {
-    BOARD_TO_SELECTED_ELEMENT.set(board, selectedElements);
+    scheduleFunc();
 };
-const getSelectedElements = (board) => {
-    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
+const debounce = (func, wait, options) => {
+    let timerSubscription = null;
+    return () => {
+        if (timerSubscription && !timerSubscription.closed) {
+            timerSubscription.unsubscribe();
+            timerSubscription = timer(wait).subscribe(() => {
+                func();
+            });
+        }
+        else {
+            if (options?.leading) {
+                func();
+            }
+            timerSubscription = timer(wait).subscribe();
+        }
+    };
 };
-const addSelectedElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    cacheSelectedElements(board, [...selectedElements, element]);
+
+const getMovingElements = (board) => {
+    return BOARD_TO_MOVING_ELEMENT.get(board) || [];
 };
-const removeSelectedElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    const newSelectedElements = selectedElements.filter(value => value !== element);
-    cacheSelectedElements(board, newSelectedElements);
+const addMovingElements = (board, elements) => {
+    const movingElements = getMovingElements(board);
+    const newElements = elements.filter(item => !movingElements.find(movingElement => movingElement.key === item.key));
+    cacheMovingElements(board, [...movingElements, ...newElements]);
 };
-const clearSelectedElement = (board) => {
-    cacheSelectedElements(board, []);
+const removeMovingElements = (board) => {
+    BOARD_TO_MOVING_ELEMENT.delete(board);
 };
-const isSelectedElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    return !!selectedElements.find(value => value === element);
+const cacheMovingElements = (board, elements) => {
+    BOARD_TO_MOVING_ELEMENT.set(board, elements);
 };
 
-function hasBeforeContextChange(value) {
-    if (value.beforeContextChange) {
-        return true;
-    }
-    return false;
-}
-function hasOnContextChanged(value) {
-    if (value.onContextChanged) {
-        return true;
-    }
-    return false;
-}
-
-class PlaitPluginElementComponent {
-    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) {
-            this.cdr.markForCheck();
-            if (hasOnContextChanged(this)) {
-                this.onContextChanged(value, previousContext);
-            }
-        }
-        else {
-            if (PlaitElement.isRootElement(this.element) && this.element.children) {
-                this.g = createG();
-                this.rootG = createG();
-                this.rootG.append(this.g);
-            }
-            else {
-                this.g = createG();
-            }
-        }
-    }
-    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;
-    }
-    get effect() {
-        return this.context && this.context.effect;
-    }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.initialized = false;
+function cloneCSSStyle(nativeNode, clonedNode) {
+    const targetStyle = clonedNode.style;
+    if (!targetStyle) {
+        return;
     }
-    ngOnInit() {
-        if (this.element.type) {
-            (this.rootG || this.g).setAttribute(`plait-${this.element.type}`, 'true');
-        }
-        this.initialized = true;
+    const sourceStyle = window.getComputedStyle(nativeNode);
+    if (sourceStyle.cssText) {
+        targetStyle.cssText = sourceStyle.cssText;
+        targetStyle.transformOrigin = sourceStyle.transformOrigin;
     }
-    ngOnDestroy() {
-        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
-            ELEMENT_TO_COMPONENT.delete(this.element);
-        }
-        removeSelectedElement(this.board, this.element);
-        (this.rootG || this.g).remove();
+    else {
+        Array.from(sourceStyle).forEach(name => {
+            let value = sourceStyle.getPropertyValue(name);
+            targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{
-                type: Input
-            }] } });
-const ELEMENT_TO_COMPONENT = new WeakMap();
-
-function transformPoints(board, points) {
-    const newPoints = points.map(point => {
-        return transformPoint(board, point);
-    });
-    return newPoints;
 }
-function transformPoint(board, point) {
-    const { width, height } = PlaitBoard.getHost(board).getBoundingClientRect();
-    const viewBox = PlaitBoard.getHost(board).viewBox.baseVal;
-    const x = (point[0] / width) * viewBox.width + viewBox.x;
-    const y = (point[1] / height) * viewBox.height + viewBox.y;
-    const newPoint = [x, y];
-    return newPoint;
+function createCanvas(width, height, fillStyle) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = width;
+    canvas.height = height;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    ctx.strokeStyle = '#ffffff';
+    ctx.fillStyle = fillStyle;
+    ctx.fillRect(0, 0, width, height);
+    return {
+        canvas,
+        ctx
+    };
 }
-function isInPlaitBoard(board, x, y) {
-    const plaitBoardElement = PlaitBoard.getBoardContainer(board);
-    const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
-    const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
-    return distances === 0;
+function isElementNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
 }
-function getRealScrollBarWidth(board) {
-    const { hideScrollbar } = board.options;
-    let scrollBarWidth = 0;
-    if (!hideScrollbar) {
-        const viewportContainer = PlaitBoard.getViewportContainer(board);
-        scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
+function cloneSvg(board, options) {
+    const elementHostBox = getRectangleByElements(board, board.children, true);
+    const { width, height, x, y } = elementHostBox;
+    const { padding = 4, inlineStyleClassNames } = options;
+    const sourceSvg = PlaitBoard.getHost(board);
+    const cloneSvgElement = sourceSvg.cloneNode(true);
+    cloneSvgElement.style.width = `${width}px`;
+    cloneSvgElement.style.height = `${height}px`;
+    cloneSvgElement.style.backgroundColor = '';
+    cloneSvgElement.setAttribute('width', `${width}`);
+    cloneSvgElement.setAttribute('height', `${height}`);
+    cloneSvgElement.setAttribute('viewBox', [x - padding, y - padding, width + 2 * padding, height + 2 * padding].join(','));
+    if (inlineStyleClassNames) {
+        const sourceNodes = Array.from(sourceSvg.querySelectorAll(inlineStyleClassNames));
+        const cloneNodes = Array.from(cloneSvgElement.querySelectorAll(inlineStyleClassNames));
+        sourceNodes.forEach((node, index) => {
+            const cloneNode = cloneNodes[index];
+            const childElements = Array.from(node.querySelectorAll('*')).filter(isElementNode);
+            const cloneChildElements = Array.from(cloneNode.querySelectorAll('*')).filter(isElementNode);
+            sourceNodes.push(...childElements);
+            cloneNodes.push(...cloneChildElements);
+        });
+        sourceNodes.forEach((node, index) => {
+            const cloneNode = cloneNodes[index];
+            cloneCSSStyle(node, cloneNode);
+        });
     }
-    return scrollBarWidth;
+    return cloneSvgElement;
 }
-
-function createForeignObject(x, y, width, height) {
-    var newForeignObject = document.createElementNS(NS, 'foreignObject');
-    newForeignObject.setAttribute('x', `${x}`);
-    newForeignObject.setAttribute('y', `${y}`);
-    newForeignObject.setAttribute('width', `${width}`);
-    newForeignObject.setAttribute('height', `${height}`);
-    return newForeignObject;
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('Failed to load image'));
+        img.src = src;
+    });
 }
-function updateForeignObject(target, width, height, x, y) {
-    const foreignObject = target instanceof SVGForeignObjectElement ? target : target.querySelector('foreignObject');
-    if (foreignObject) {
-        foreignObject.setAttribute('width', `${width}`);
-        foreignObject.setAttribute('height', `${height}`);
-        foreignObject.setAttribute('x', `${x}`);
-        foreignObject.setAttribute('y', `${y}`);
+async function toImage(board, options) {
+    if (!board) {
+        return undefined;
     }
-}
-function updateForeignObjectWidth(target, width) {
-    const foreignObject = target instanceof SVGForeignObjectElement ? target : target.querySelector('foreignObject');
-    if (foreignObject) {
-        foreignObject.setAttribute('width', `${width}`);
+    const elementHostBox = getRectangleByElements(board, board.children, true);
+    const { ratio = 2, fillStyle = 'transparent' } = options;
+    const { width, height } = elementHostBox;
+    const ratioWidth = width * ratio;
+    const ratioHeight = height * ratio;
+    const cloneSvgElement = cloneSvg(board, options);
+    const { canvas, ctx } = createCanvas(ratioWidth, ratioHeight, fillStyle);
+    const svgStr = new XMLSerializer().serializeToString(cloneSvgElement);
+    const imgSrc = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
+    try {
+        const img = await loadImage(imgSrc);
+        ctx.drawImage(img, 0, 0, ratioWidth, ratioHeight);
+        const url = canvas.toDataURL('image/png');
+        return url;
+    }
+    catch (error) {
+        console.error('Error converting SVG to image:', error);
+        return undefined;
     }
 }
+function downloadImage(url, name) {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    a.click();
+    a.remove();
+}
 
-const IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
-
-const IS_IOS = typeof navigator !== 'undefined' &&
-    typeof window !== 'undefined' &&
-    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
-    !window.MSStream;
-const IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
-const IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
-const IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent);
-// "modern" Edge was released at 79.x
-const IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
-const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent);
-// Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
-const IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
-
-/**
- * Check whether to merge an operation into the previous operation.
- */
-const shouldMerge = (op, prev) => {
-    if (op.type === 'set_viewport' && op.type === prev?.type) {
-        return true;
+const getClipboardByKey = (key) => {
+    return `application/x-plait-${key}-fragment`;
+};
+const setClipboardData = (data, elements) => {
+    const result = [...elements];
+    const pluginContextResult = getDataFromClipboard(data);
+    if (pluginContextResult) {
+        result.push(...pluginContextResult);
     }
-    return false;
+    const stringObj = JSON.stringify(result);
+    const encoded = window.btoa(encodeURIComponent(stringObj));
+    data?.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
 };
-/**
- * Check whether an operation needs to be saved to the history.
- */
-const shouldSave = (op, prev) => {
-    if (op.type === 'set_selection' || op.type === 'set_viewport') {
-        return false;
+const setClipboardDataByText = (data, text) => {
+    const pluginContextResult = getTextFromClipboard(data);
+    data?.setData(`text/plain`, text + '\n' + pluginContextResult);
+};
+const setClipboardDataByMedia = (data, media, key) => {
+    const stringObj = JSON.stringify(media);
+    const encoded = window.btoa(encodeURIComponent(stringObj));
+    data?.setData(getClipboardByKey(key), encoded);
+};
+const getDataFromClipboard = (data) => {
+    const encoded = data?.getData(`application/${CLIP_BOARD_FORMAT_KEY}`);
+    let nodesData = [];
+    if (encoded) {
+        const decoded = decodeURIComponent(window.atob(encoded));
+        nodesData = JSON.parse(decoded);
     }
-    return true;
+    return nodesData;
 };
-/**
- * Check whether an operation should clear the redos stack.
- */
-const shouldClear = (op) => {
-    if (op.type === 'set_selection') {
-        return false;
+const getTextFromClipboard = (data) => {
+    return (data ? data.getData(`text/plain`) : '');
+};
+const getClipboardDataByMedia = (data, key) => {
+    const encoded = data?.getData(getClipboardByKey(key));
+    let imageItem = null;
+    if (encoded) {
+        const decoded = decodeURIComponent(window.atob(encoded));
+        imageItem = JSON.parse(decoded);
     }
-    return true;
+    return imageItem;
 };
-const PlaitHistoryBoard = {
+
+const isPreventTouchMove = (board) => {
+    return !!IS_PREVENT_TOUCH_MOVE.get(board);
+};
+const preventTouchMove = (board, state) => {
+    IS_PREVENT_TOUCH_MOVE.set(board, state);
+};
+
+const PlaitElement = {
+    isRootElement(value) {
+        const parent = NODE_TO_PARENT.get(value);
+        if (parent && PlaitBoard.isBoard(parent)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    getComponent(value) {
+        return ELEMENT_TO_COMPONENT.get(value);
+    }
+};
+
+const Path = {
     /**
-     * Get the saving flag's current value.
+     * Get a list of ancestor paths for a given path.
+     *
+     * The paths are sorted from shallowest to deepest ancestor. However, if the
+     * `reverse: true` option is passed, they are reversed.
      */
-    isSaving(board) {
-        return SAVING.get(board);
+    ancestors(path, options = {}) {
+        const { reverse = false } = options;
+        let paths = Path.levels(path, options);
+        if (reverse) {
+            paths = paths.slice(1);
+        }
+        else {
+            paths = paths.slice(0, -1);
+        }
+        return paths;
     },
     /**
-     * Get the merge flag's current value.
+     * Get a list of paths at every level down to a path. Note: this is the same
+     * as `Path.ancestors`, but including the path itself.
+     *
+     * The paths are sorted from shallowest to deepest. However, if the `reverse:
+     * true` option is passed, they are reversed.
      */
-    isMerging(board) {
-        return MERGING.get(board);
+    levels(path, options = {}) {
+        const { reverse = false } = options;
+        const list = [];
+        for (let i = 0; i <= path.length; i++) {
+            list.push(path.slice(0, i));
+        }
+        if (reverse) {
+            list.reverse();
+        }
+        return list;
+    },
+    parent(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the parent path of the root path [${path}].`);
+        }
+        return path.slice(0, -1);
+    },
+    next(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the next path of a root path [${path}], because it has no next index.`);
+        }
+        const last = path[path.length - 1];
+        return path.slice(0, -1).concat(last + 1);
+    },
+    hasPrevious(path) {
+        return path[path.length - 1] > 0;
+    },
+    previous(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the next path of a root path [${path}], because it has no previous index.`);
+        }
+        const last = path[path.length - 1];
+        return path.slice(0, -1).concat(last - 1);
     },
     /**
-     * Apply a series of changes inside a synchronous `fn`, without merging any of
-     * the new operations into previous save point in the history.
+     * Check if a path is an ancestor of another.
      */
-    withoutMerging(board, fn) {
-        const prev = PlaitHistoryBoard.isMerging(board);
-        MERGING.set(board, false);
-        fn();
-        MERGING.set(board, prev);
+    isAncestor(path, another) {
+        return path.length < another.length && Path.compare(path, another) === 0;
     },
     /**
-     * Apply a series of changes inside a synchronous `fn`, without saving any of
-     * their operations into the history.
+     * Compare a path to another, returning an integer indicating whether the path
+     * was before, at, or after the other.
+     *
+     * Note: Two paths of unequal length can still receive a `0` result if one is
+     * directly above or below the other. If you want exact matching, use
+     * [[Path.equals]] instead.
      */
-    withoutSaving(board, fn) {
-        const prev = PlaitHistoryBoard.isSaving(board);
-        SAVING.set(board, false);
-        fn();
-        SAVING.set(board, prev);
-    }
-};
-
-/**
- * Hotkey mappings for each platform.
- */
-const HOTKEYS = {
-    bold: 'mod+b',
-    compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
-    moveBackward: 'left',
-    moveForward: 'right',
-    moveUp: 'up',
-    moveDown: 'down',
-    moveWordBackward: 'ctrl+left',
-    moveWordForward: 'ctrl+right',
-    deleteBackward: 'shift?+backspace',
-    deleteForward: 'shift?+delete',
-    extendBackward: 'shift+left',
-    extendForward: 'shift+right',
-    italic: 'mod+i',
-    splitBlock: 'shift?+enter',
-    undo: 'mod+z'
-};
-const APPLE_HOTKEYS = {
-    moveLineBackward: 'opt+up',
-    moveLineForward: 'opt+down',
-    moveWordBackward: 'opt+left',
-    moveWordForward: 'opt+right',
-    deleteBackward: ['ctrl+backspace', 'ctrl+h'],
-    deleteForward: ['ctrl+delete', 'ctrl+d'],
-    deleteLineBackward: 'cmd+shift?+backspace',
-    deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
-    deleteWordBackward: 'opt+shift?+backspace',
-    deleteWordForward: 'opt+shift?+delete',
-    extendLineBackward: 'opt+shift+up',
-    extendLineForward: 'opt+shift+down',
-    redo: 'cmd+shift+z',
-    transposeCharacter: 'ctrl+t'
-};
-const WINDOWS_HOTKEYS = {
-    deleteWordBackward: 'ctrl+shift?+backspace',
-    deleteWordForward: 'ctrl+shift?+delete',
-    redo: ['ctrl+y', 'ctrl+shift+z']
-};
-/**
- * Create a platform-aware hotkey checker.
- */
-const create = (key) => {
-    const generic = HOTKEYS[key];
-    const apple = APPLE_HOTKEYS[key];
-    const windows = WINDOWS_HOTKEYS[key];
-    const isGeneric = generic && isKeyHotkey(generic);
-    const isApple = apple && isKeyHotkey(apple);
-    const isWindows = windows && isKeyHotkey(windows);
-    return (event) => {
-        if (isGeneric && isGeneric(event)) {
-            return true;
-        }
-        if (IS_APPLE && isApple && isApple(event)) {
-            return true;
+    compare(path, another) {
+        const min = Math.min(path.length, another.length);
+        for (let i = 0; i < min; i++) {
+            if (path[i] < another[i])
+                return -1;
+            if (path[i] > another[i])
+                return 1;
         }
-        if (!IS_APPLE && isWindows && isWindows(event)) {
-            return true;
+        return 0;
+    },
+    /**
+     * Check if a path is exactly equal to another.
+     */
+    equals(path, another) {
+        return path.length === another.length && path.every((n, i) => n === another[i]);
+    },
+    /**
+     * Check if a path ends before one of the indexes in another.
+     */
+    endsBefore(path, another) {
+        const i = path.length - 1;
+        const as = path.slice(0, i);
+        const bs = another.slice(0, i);
+        const av = path[i];
+        const bv = another[i];
+        return Path.equals(as, bs) && av < bv;
+    },
+    /**
+     * Check if a path is a sibling of another.
+     */
+    isSibling(path, another) {
+        if (path.length !== another.length) {
+            return false;
         }
-        return false;
-    };
-};
-/**
- * Hotkeys.
- */
-const hotkeys = {
-    isBold: create('bold'),
-    isCompose: create('compose'),
-    isMoveBackward: create('moveBackward'),
-    isMoveForward: create('moveForward'),
-    isMoveUp: create('moveUp'),
-    isMoveDown: create('moveDown'),
-    isDeleteBackward: create('deleteBackward'),
-    isDeleteForward: create('deleteForward'),
-    isDeleteLineBackward: create('deleteLineBackward'),
-    isDeleteLineForward: create('deleteLineForward'),
-    isDeleteWordBackward: create('deleteWordBackward'),
-    isDeleteWordForward: create('deleteWordForward'),
-    isExtendBackward: create('extendBackward'),
-    isExtendForward: create('extendForward'),
-    isExtendLineBackward: create('extendLineBackward'),
-    isExtendLineForward: create('extendLineForward'),
-    isItalic: create('italic'),
-    isMoveLineBackward: create('moveLineBackward'),
-    isMoveLineForward: create('moveLineForward'),
-    isMoveWordBackward: create('moveWordBackward'),
-    isMoveWordForward: create('moveWordForward'),
-    isRedo: create('redo'),
-    isSplitBlock: create('splitBlock'),
-    isTransposeCharacter: create('transposeCharacter'),
-    isUndo: create('undo')
-};
-
-function idCreator(length = 5) {
-    // remove numeral
-    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
-    const maxPosition = $chars.length;
-    let key = '';
-    for (let i = 0; i < length; i++) {
-        key += $chars.charAt(Math.floor(Math.random() * maxPosition));
+        const as = path.slice(0, -1);
+        const bs = another.slice(0, -1);
+        const al = path[path.length - 1];
+        const bl = another[another.length - 1];
+        return al !== bl && Path.equals(as, bs);
+    },
+    transform(path, operation) {
+        return produce(path, p => {
+            // PERF: Exit early if the operation is guaranteed not to have an effect.
+            if (!path || path?.length === 0) {
+                return;
+            }
+            if (p === null) {
+                return null;
+            }
+            switch (operation.type) {
+                case 'insert_node': {
+                    const { path: op } = operation;
+                    if (Path.equals(op, p) || Path.endsBefore(op, p) || Path.isAncestor(op, p)) {
+                        p[op.length - 1] += 1;
+                    }
+                    break;
+                }
+                case 'remove_node': {
+                    const { path: op } = operation;
+                    if (Path.equals(op, p) || Path.isAncestor(op, p)) {
+                        return null;
+                    }
+                    else if (Path.endsBefore(op, p)) {
+                        p[op.length - 1] -= 1;
+                    }
+                    break;
+                }
+                case 'move_node': {
+                    const { path: op, newPath: onp } = operation;
+                    // If the old and new path are the same, it's a no-op.
+                    if (Path.equals(op, onp)) {
+                        return;
+                    }
+                    if (Path.isAncestor(op, p) || Path.equals(op, p)) {
+                        const copy = onp.slice();
+                        // op.length <= onp.length is different for slate
+                        // resolve drag from [0, 0] to [0, 3] issue
+                        if (Path.endsBefore(op, onp) && op.length <= onp.length) {
+                            copy[op.length - 1] -= 1;
+                        }
+                        return copy.concat(p.slice(op.length));
+                    }
+                    else if (Path.isSibling(op, onp) && (Path.isAncestor(onp, p) || Path.equals(onp, p))) {
+                        if (Path.endsBefore(op, p)) {
+                            p[op.length - 1] -= 1;
+                        }
+                        else {
+                            p[op.length - 1] += 1;
+                        }
+                    }
+                    else if (Path.endsBefore(onp, p) || Path.equals(onp, p) || Path.isAncestor(onp, p)) {
+                        if (Path.endsBefore(op, p)) {
+                            p[op.length - 1] -= 1;
+                        }
+                        p[onp.length - 1] += 1;
+                    }
+                    else if (Path.endsBefore(op, p)) {
+                        if (Path.equals(onp, p)) {
+                            p[onp.length - 1] += 1;
+                        }
+                        p[op.length - 1] -= 1;
+                    }
+                    break;
+                }
+            }
+            return p;
+        });
     }
-    return key;
-}
+};
 
-/**
- * drawRoundRectangle
- */
-function drawRoundRectangle(rs, x1, y1, x2, y2, options, outline = false, borderRadius) {
-    const width = Math.abs(x1 - x2);
-    const height = Math.abs(y1 - y2);
-    let radius = borderRadius || 0;
-    if (radius === 0) {
-        const defaultRadius = Math.min(width, height) / 8;
-        let radius = defaultRadius;
-        if (defaultRadius > MAX_RADIUS) {
-            radius = outline ? MAX_RADIUS + 2 : MAX_RADIUS;
+const PlaitNode = {
+    parent: (board, path) => {
+        const parentPath = Path.parent(path);
+        const p = PlaitNode.get(board, parentPath);
+        return p;
+    },
+    /**
+     * Return a generator of all the ancestor nodes above a specific path.
+     *
+     * By default the order is top-down, from highest to lowest ancestor in
+     * the tree, but you can pass the `reverse: true` option to go bottom-up.
+     */
+    *parents(root, path, options = {}) {
+        for (const p of Path.ancestors(path, options)) {
+            const n = PlaitNode.get(root, p);
+            yield n;
+        }
+    },
+    get(root, path) {
+        let node = root;
+        for (let i = 0; i < path.length; i++) {
+            const p = path[i];
+            if (!node || !node.children || !node.children[p]) {
+                throw new Error(`Cannot find a descendant at path [${path}]`);
+            }
+            node = node.children[p];
+        }
+        return node;
+    },
+    last(board, path) {
+        let n = PlaitNode.get(board, path);
+        while (n && n.children && n.children.length > 0) {
+            const i = n.children.length - 1;
+            n = n.children[i];
         }
+        return n;
     }
-    const point1 = [x1 + radius, y1];
-    const point2 = [x2 - radius, y1];
-    const point3 = [x2, y1 + radius];
-    const point4 = [x2, y2 - radius];
-    const point5 = [x2 - radius, y2];
-    const point6 = [x1 + radius, y2];
-    const point7 = [x1, y2 - radius];
-    const point8 = [x1, y1 + radius];
-    return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, options);
-}
-const drawRectangle = (board, rectangle, options) => {
-    const roughSVG = PlaitBoard.getRoughSVG(board);
-    const rectangleG = roughSVG.rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, options);
-    setStrokeLinecap(rectangleG, 'round');
-    return rectangleG;
 };
 
-function arrowPoints(start, end, maxHypotenuseLength = 10, degree = 40) {
-    const width = Math.abs(start[0] - end[0]);
-    const height = Math.abs(start[1] - end[1]);
-    let hypotenuse = Math.hypot(width, height); // 斜边
-    const realRotateLine = hypotenuse > maxHypotenuseLength * 2 ? maxHypotenuseLength : hypotenuse / 2;
-    const rotateWidth = (realRotateLine / hypotenuse) * width;
-    const rotateHeight = (realRotateLine / hypotenuse) * height;
-    const rotatePoint = [
-        end[0] > start[0] ? end[0] - rotateWidth : end[0] + rotateWidth,
-        end[1] > start[1] ? end[1] - rotateHeight : end[1] + rotateHeight
-    ];
-    const pointRight = rotate(rotatePoint[0], rotatePoint[1], end[0], end[1], (degree * Math.PI) / 180);
-    const pointLeft = rotate(rotatePoint[0], rotatePoint[1], end[0], end[1], (-degree * Math.PI) / 180);
-    return { pointLeft, pointRight };
-}
-function drawArrow(rs, start, end, options, maxHypotenuseLength = 10, degree = 40) {
-    const { pointLeft, pointRight } = arrowPoints(start, end, maxHypotenuseLength, degree);
-    const arrowLineLeft = rs.linearPath([pointLeft, end], options);
-    const arrowLineRight = rs.linearPath([pointRight, end], options);
-    return [arrowLineLeft, arrowLineRight];
-}
-
-function drawCircle(roughSVG, point, diameter, options) {
-    return roughSVG.circle(point[0], point[1], diameter, options);
-}
-
-function drawLine(rs, start, end, options) {
-    return rs.linearPath([start, end], options);
-}
-function drawLinearPath(points, options) {
-    const g = createG();
-    const path = createPath();
-    let polylinePath = '';
-    points.forEach((point, index) => {
-        if (index === 0) {
-            polylinePath += `M ${point[0]} ${point[1]} `;
+const isSetViewportOperation = (value) => {
+    return value.type === 'set_viewport';
+};
+const inverse = (op) => {
+    switch (op.type) {
+        case 'insert_node': {
+            return { ...op, type: 'remove_node' };
         }
-        else {
-            polylinePath += `L ${point[0]} ${point[1]} `;
+        case 'remove_node': {
+            return { ...op, type: 'insert_node' };
         }
-    });
-    path.setAttribute('d', polylinePath);
-    path.setAttribute('stroke', `${options?.stroke}`);
-    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
-    path.setAttribute('fill', `none`);
-    g.appendChild(path);
-    return g;
-}
-function drawBezierPath(points, options) {
-    const g = createG();
-    const path = createPath();
-    let polylinePath = '';
-    for (let i = 0; i < points.length - 3; i += 3) {
-        if (i === 0) {
-            polylinePath += `M ${points[0][0]} ${points[0][1]} `;
+        case 'move_node': {
+            const { newPath, path } = op;
+            // PERF: in this case the move operation is a no-op anyways.
+            if (Path.equals(newPath, path)) {
+                return op;
+            }
+            // when operation path is [0,0] -> [0,2], should exec Path.transform to get [0,1] -> [0,0]
+            // shoud not return [0,2] -> [0,0] #WIK-8981
+            // if (Path.isSibling(path, newPath)) {
+            //     return { ...op, path: newPath, newPath: path };
+            // }
+            // If the move does not happen within a single parent it is possible
+            // for the move to impact the true path to the location where the node
+            // was removed from and where it was inserted. We have to adjust for this
+            // and find the original path. We can accomplish this (only in non-sibling)
+            // moves by looking at the impact of the move operation on the node
+            // after the original move path.
+            const inversePath = Path.transform(path, op);
+            const inverseNewPath = Path.transform(Path.next(path), op);
+            return { ...op, path: inversePath, newPath: inverseNewPath };
         }
-        else {
-            polylinePath += `C ${points[i + 1][0]} ${points[i + 1][1]}, ${points[i + 2][0]} ${points[i + 2][1]}, ${points[i + 3][0]} ${points[i + 3][1]}`;
+        case 'set_node': {
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
         }
-    }
-    path.setAttribute('d', polylinePath);
-    path.setAttribute('stroke', `${options?.stroke}`);
-    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
-    path.setAttribute('fill', `none`);
-    g.appendChild(path);
-    return g;
-}
-
-let timerId = null;
-const throttleRAF = (fn) => {
-    const scheduleFunc = () => {
-        timerId = requestAnimationFrame(() => {
-            timerId = null;
-            fn();
-        });
-    };
-    if (timerId !== null) {
-        cancelAnimationFrame(timerId);
-        timerId = null;
-    }
-    scheduleFunc();
-};
-const debounce = (func, wait, options) => {
-    let timerSubscription = null;
-    return () => {
-        if (timerSubscription && !timerSubscription.closed) {
-            timerSubscription.unsubscribe();
-            timerSubscription = timer(wait).subscribe(() => {
-                func();
-            });
+        case 'set_selection': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: null
+                };
+            }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: null,
+                    newProperties: properties
+                };
+            }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
+            }
         }
-        else {
-            if (options?.leading) {
-                func();
+        case 'set_viewport': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: newProperties
+                };
             }
-            timerSubscription = timer(wait).subscribe();
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: properties,
+                    newProperties: properties
+                };
+            }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
+            }
+        }
+        case 'set_theme': {
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
         }
-    };
-};
-
-const getMovingElements = (board) => {
-    return BOARD_TO_MOVING_ELEMENT.get(board) || [];
+    }
 };
-const addMovingElements = (board, elements) => {
-    const movingElements = getMovingElements(board);
-    const newElements = elements.filter(item => !movingElements.find(movingElement => movingElement.key === item.key));
-    cacheMovingElements(board, [...movingElements, ...newElements]);
+const PlaitOperation = {
+    isSetViewportOperation,
+    inverse
 };
-const removeMovingElements = (board) => {
-    BOARD_TO_MOVING_ELEMENT.delete(board);
+
+const Point = {
+    isEquals(point, otherPoint) {
+        return point && otherPoint && point[0] === otherPoint[0] && point[1] === otherPoint[1];
+    }
 };
-const cacheMovingElements = (board, elements) => {
-    BOARD_TO_MOVING_ELEMENT.set(board, elements);
+
+const Viewport = {
+    isViewport: (value) => {
+        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
+    },
 };
 
-function cloneCSSStyle(nativeNode, clonedNode) {
-    const targetStyle = clonedNode.style;
-    if (!targetStyle) {
-        return;
-    }
-    const sourceStyle = window.getComputedStyle(nativeNode);
-    if (sourceStyle.cssText) {
-        targetStyle.cssText = sourceStyle.cssText;
-        targetStyle.transformOrigin = sourceStyle.transformOrigin;
-    }
-    else {
-        Array.from(sourceStyle).forEach(name => {
-            let value = sourceStyle.getPropertyValue(name);
-            targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
-        });
-    }
-}
-function createCanvas(width, height, fillStyle) {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = width;
-    canvas.height = height;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
-    ctx.strokeStyle = '#ffffff';
-    ctx.fillStyle = fillStyle;
-    ctx.fillRect(0, 0, width, height);
-    return {
-        canvas,
-        ctx
-    };
-}
-function isElementNode(node) {
-    return node.nodeType === Node.ELEMENT_NODE;
-}
-function cloneSvg(board, options) {
-    const elementHostBox = getRectangleByElements(board, board.children, true);
-    const { width, height, x, y } = elementHostBox;
-    const { padding = 4, inlineStyleClassNames } = options;
-    const sourceSvg = PlaitBoard.getHost(board);
-    const cloneSvgElement = sourceSvg.cloneNode(true);
-    cloneSvgElement.style.width = `${width}px`;
-    cloneSvgElement.style.height = `${height}px`;
-    cloneSvgElement.style.backgroundColor = '';
-    cloneSvgElement.setAttribute('width', `${width}`);
-    cloneSvgElement.setAttribute('height', `${height}`);
-    cloneSvgElement.setAttribute('viewBox', [x - padding, y - padding, width + 2 * padding, height + 2 * padding].join(','));
-    if (inlineStyleClassNames) {
-        const sourceNodes = Array.from(sourceSvg.querySelectorAll(inlineStyleClassNames));
-        const cloneNodes = Array.from(cloneSvgElement.querySelectorAll(inlineStyleClassNames));
-        sourceNodes.forEach((node, index) => {
-            const cloneNode = cloneNodes[index];
-            const childElements = Array.from(node.querySelectorAll('*')).filter(isElementNode);
-            const cloneChildElements = Array.from(cloneNode.querySelectorAll('*')).filter(isElementNode);
-            sourceNodes.push(...childElements);
-            cloneNodes.push(...cloneChildElements);
-        });
-        sourceNodes.forEach((node, index) => {
-            const cloneNode = cloneNodes[index];
-            cloneCSSStyle(node, cloneNode);
-        });
-    }
-    return cloneSvgElement;
-}
-function loadImage(src) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve(img);
-        img.onerror = () => reject(new Error('Failed to load image'));
-        img.src = src;
-    });
-}
-async function toImage(board, options) {
-    if (!board) {
-        return undefined;
-    }
-    const elementHostBox = getRectangleByElements(board, board.children, true);
-    const { ratio = 2, fillStyle = 'transparent' } = options;
-    const { width, height } = elementHostBox;
-    const ratioWidth = width * ratio;
-    const ratioHeight = height * ratio;
-    const cloneSvgElement = cloneSvg(board, options);
-    const { canvas, ctx } = createCanvas(ratioWidth, ratioHeight, fillStyle);
-    const svgStr = new XMLSerializer().serializeToString(cloneSvgElement);
-    const imgSrc = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
-    try {
-        const img = await loadImage(imgSrc);
-        ctx.drawImage(img, 0, 0, ratioWidth, ratioHeight);
-        const url = canvas.toDataURL('image/png');
-        return url;
-    }
-    catch (error) {
-        console.error('Error converting SVG to image:', error);
-        return undefined;
-    }
-}
-function downloadImage(url, name) {
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = name;
-    a.click();
-    a.remove();
-}
+const SAVING = new WeakMap();
+const MERGING = new WeakMap();
 
-const getClipboardByKey = (key) => {
-    return `application/x-plait-${key}-fragment`;
+var PlaitPluginKey;
+(function (PlaitPluginKey) {
+    PlaitPluginKey["withSelection"] = "withSelection";
+})(PlaitPluginKey || (PlaitPluginKey = {}));
+
+var ThemeColorMode;
+(function (ThemeColorMode) {
+    ThemeColorMode["default"] = "default";
+    ThemeColorMode["colorful"] = "colorful";
+    ThemeColorMode["soft"] = "soft";
+    ThemeColorMode["retro"] = "retro";
+    ThemeColorMode["dark"] = "dark";
+    ThemeColorMode["starry"] = "starry";
+})(ThemeColorMode || (ThemeColorMode = {}));
+const DefaultThemeColor = {
+    mode: ThemeColorMode.default,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
 };
-const setClipboardData = (data, elements) => {
-    const result = [...elements];
-    const pluginContextResult = getDataFromClipboard(data);
-    if (pluginContextResult) {
-        result.push(...pluginContextResult);
-    }
-    const stringObj = JSON.stringify(result);
-    const encoded = window.btoa(encodeURIComponent(stringObj));
-    data?.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
+const ColorfulThemeColor = {
+    mode: ThemeColorMode.colorful,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
 };
-const setClipboardDataByText = (data, text) => {
-    const pluginContextResult = getTextFromClipboard(data);
-    data?.setData(`text/plain`, text + '\n' + pluginContextResult);
+const SoftThemeColor = {
+    mode: ThemeColorMode.soft,
+    boardBackground: '#f5f5f5',
+    textColor: '#333333'
 };
-const setClipboardDataByMedia = (data, media, key) => {
-    const stringObj = JSON.stringify(media);
-    const encoded = window.btoa(encodeURIComponent(stringObj));
-    data?.setData(getClipboardByKey(key), encoded);
+const RetroThemeColor = {
+    mode: ThemeColorMode.retro,
+    boardBackground: '#f9f8ed',
+    textColor: '#333333'
 };
-const getDataFromClipboard = (data) => {
-    const encoded = data?.getData(`application/${CLIP_BOARD_FORMAT_KEY}`);
-    let nodesData = [];
-    if (encoded) {
-        const decoded = decodeURIComponent(window.atob(encoded));
-        nodesData = JSON.parse(decoded);
-    }
-    return nodesData;
+const DarkThemeColor = {
+    mode: ThemeColorMode.dark,
+    boardBackground: '#141414',
+    textColor: '#FFFFFF'
 };
-const getTextFromClipboard = (data) => {
-    return (data ? data.getData(`text/plain`) : '');
+const StarryThemeColor = {
+    mode: ThemeColorMode.starry,
+    boardBackground: '#0d2537',
+    textColor: '#FFFFFF'
 };
-const getClipboardDataByMedia = (data, key) => {
-    const encoded = data?.getData(getClipboardByKey(key));
-    let imageItem = null;
-    if (encoded) {
-        const decoded = decodeURIComponent(window.atob(encoded));
-        imageItem = JSON.parse(decoded);
+const ThemeColors = [
+    DefaultThemeColor,
+    ColorfulThemeColor,
+    SoftThemeColor,
+    RetroThemeColor,
+    DarkThemeColor,
+    StarryThemeColor
+];
+
+function getRectangleByElements(board, elements, recursion) {
+    const boundaryBox = {
+        left: Number.MAX_VALUE,
+        top: Number.MAX_VALUE,
+        right: Number.NEGATIVE_INFINITY,
+        bottom: Number.NEGATIVE_INFINITY
+    };
+    const calcRectangleClient = (node) => {
+        const nodeRectangle = board.getRectangle(node);
+        if (nodeRectangle) {
+            boundaryBox.left = Math.min(boundaryBox.left, nodeRectangle.x);
+            boundaryBox.top = Math.min(boundaryBox.top, nodeRectangle.y);
+            boundaryBox.right = Math.max(boundaryBox.right, nodeRectangle.x + nodeRectangle.width);
+            boundaryBox.bottom = Math.max(boundaryBox.bottom, nodeRectangle.y + nodeRectangle.height);
+        }
+        else {
+            console.error(`can not get rectangle of element:`, node);
+        }
+    };
+    elements.forEach(element => {
+        if (recursion) {
+            depthFirstRecursion(element, node => calcRectangleClient(node), node => board.isRecursion(node));
+        }
+        else {
+            calcRectangleClient(element);
+        }
+    });
+    if (boundaryBox.left === Number.MAX_VALUE) {
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
+    }
+    return {
+        x: boundaryBox.left,
+        y: boundaryBox.top,
+        width: boundaryBox.right - boundaryBox.left,
+        height: boundaryBox.bottom - boundaryBox.top
+    };
+}
+function getBoardRectangle(board) {
+    return getRectangleByElements(board, board.children, true);
+}
+function getElementById(board, id, dataSource) {
+    if (!dataSource) {
+        dataSource = findElements(board, { match: (element) => true, recursion: (element) => true });
     }
-    return imageItem;
-};
-
-const isPreventTouchMove = (board) => {
-    return !!IS_PREVENT_TOUCH_MOVE.get(board);
-};
-const preventTouchMove = (board, state) => {
-    IS_PREVENT_TOUCH_MOVE.set(board, state);
-};
-
-const PlaitElement = {
-    isRootElement(value) {
-        const parent = NODE_TO_PARENT.get(value);
-        if (parent && PlaitBoard.isBoard(parent)) {
+    let element = dataSource.find((element) => element.id === id);
+    return element;
+}
+function findElements(board, options) {
+    let elements = [];
+    depthFirstRecursion(board, node => {
+        if (!PlaitBoard.isBoard(node) && options.match(node)) {
+            elements.push(node);
+        }
+    }, (value) => {
+        if (PlaitBoard.isBoard(value)) {
             return true;
         }
         else {
-            return false;
+            return getIsRecursionFunc(board)(value) && options.recursion(value);
+        }
+    }, true);
+    return elements;
+}
+
+const PlaitBoard = {
+    isBoard(value) {
+        const cachedIsBoard = IS_BOARD_CACHE.get(value);
+        if (cachedIsBoard !== undefined) {
+            return cachedIsBoard;
         }
+        const isBoard = typeof value.onChange === 'function' && typeof value.apply === 'function';
+        IS_BOARD_CACHE.set(value, isBoard);
+        return isBoard;
     },
-    getComponent(value) {
-        return ELEMENT_TO_COMPONENT.get(value);
+    findPath(board, node) {
+        const path = [];
+        let child = node;
+        while (true) {
+            const parent = NODE_TO_PARENT.get(child);
+            if (parent == null) {
+                if (PlaitBoard.isBoard(child)) {
+                    return path;
+                }
+                else {
+                    break;
+                }
+            }
+            const i = NODE_TO_INDEX.get(child);
+            if (i == null) {
+                break;
+            }
+            path.unshift(i);
+            child = parent;
+        }
+        throw new Error(`Unable to find the path for Plait node: ${JSON.stringify(node)}`);
+    },
+    getHost(board) {
+        return BOARD_TO_HOST.get(board);
+    },
+    getElementHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.host;
+    },
+    getElementUpperHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.upperHost;
+    },
+    getElementActiveHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.activeHost;
+    },
+    getRoughSVG(board) {
+        return BOARD_TO_ROUGH_SVG.get(board);
+    },
+    getComponent(board) {
+        return BOARD_TO_COMPONENT.get(board);
+    },
+    getBoardContainer(board) {
+        return PlaitBoard.getComponent(board).nativeElement;
+    },
+    getRectangle(board) {
+        return getRectangleByElements(board, board.children, true);
+    },
+    getViewportContainer(board) {
+        return PlaitBoard.getHost(board).parentElement;
+    },
+    isFocus(board) {
+        return !!board.selection;
+    },
+    isReadonly(board) {
+        return board.options.readonly;
+    },
+    hasBeenTextEditing(board) {
+        return !!IS_TEXT_EDITABLE.get(board);
+    },
+    getPointer(board) {
+        return board.pointer;
+    },
+    isPointer(board, pointer) {
+        return board.pointer === pointer;
+    },
+    isInPointer(board, pointers) {
+        const point = board.pointer;
+        return pointers.includes(point);
+    },
+    getMovingPointInBoard(board) {
+        return BOARD_TO_MOVING_POINT_IN_BOARD.get(board);
+    },
+    isMovingPointInBoard(board) {
+        const point = BOARD_TO_MOVING_POINT.get(board);
+        const rect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
+        if (point && distanceBetweenPointAndRectangle(point[0], point[1], rect) === 0) {
+            return true;
+        }
+        return false;
+    },
+    getThemeColors(board) {
+        return (board.options.themeColors || ThemeColors);
     }
 };
 
-const isSetViewportOperation = (value) => {
-    return value.type === 'set_viewport';
-};
-const inverse = (op) => {
+const applyToDraft = (board, selection, viewport, theme, op) => {
     switch (op.type) {
         case 'insert_node': {
-            return { ...op, type: 'remove_node' };
+            const { path, node } = op;
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            if (!parent.children || index > parent.children.length) {
+                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+            }
+            parent.children.splice(index, 0, node);
+            break;
         }
         case 'remove_node': {
-            return { ...op, type: 'insert_node' };
+            const { path } = op;
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            if (!parent.children || index > parent.children.length) {
+                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+            }
+            parent.children.splice(index, 1);
+            break;
         }
         case 'move_node': {
-            const { newPath, path } = op;
-            // PERF: in this case the move operation is a no-op anyways.
-            if (Path.equals(newPath, path)) {
-                return op;
+            const { path, newPath } = op;
+            if (Path.isAncestor(path, newPath)) {
+                throw new Error(`Cannot move a path [${path}] to new path [${newPath}] because the destination is inside itself.`);
             }
-            // when operation path is [0,0] -> [0,2], should exec Path.transform to get [0,1] -> [0,0]
-            // shoud not return [0,2] -> [0,0] #WIK-8981
-            // if (Path.isSibling(path, newPath)) {
-            //     return { ...op, path: newPath, newPath: path };
-            // }
-            // If the move does not happen within a single parent it is possible
-            // for the move to impact the true path to the location where the node
-            // was removed from and where it was inserted. We have to adjust for this
-            // and find the original path. We can accomplish this (only in non-sibling)
-            // moves by looking at the impact of the move operation on the node
-            // after the original move path.
-            const inversePath = Path.transform(path, op);
-            const inverseNewPath = Path.transform(Path.next(path), op);
-            return { ...op, path: inversePath, newPath: inverseNewPath };
+            const node = PlaitNode.get(board, path);
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            // This is tricky, but since the `path` and `newPath` both refer to
+            // the same snapshot in time, there's a mismatch. After either
+            // removing the original position, the second step's path can be out
+            // of date. So instead of using the `op.newPath` directly, we
+            // transform `op.path` to ascertain what the `newPath` would be after
+            // the operation was applied.
+            parent.children?.splice(index, 1);
+            const truePath = Path.transform(path, op);
+            const newParent = PlaitNode.get(board, Path.parent(truePath));
+            const newIndex = truePath[truePath.length - 1];
+            newParent.children?.splice(newIndex, 0, node);
+            break;
         }
         case 'set_node': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
-        }
-        case 'set_selection': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: null
-                };
+            const { path, properties, newProperties } = op;
+            if (path.length === 0) {
+                throw new Error(`Cannot set properties on the root node!`);
             }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: null,
-                    newProperties: properties
-                };
+            const node = PlaitNode.get(board, path);
+            for (const key in newProperties) {
+                const value = newProperties[key];
+                if (value == null) {
+                    delete node[key];
+                }
+                else {
+                    node[key] = value;
+                }
             }
-            else {
-                return { ...op, properties: newProperties, newProperties: properties };
+            // properties that were previously defined, but are now missing, must be deleted
+            for (const key in properties) {
+                if (!newProperties.hasOwnProperty(key)) {
+                    delete node[key];
+                }
             }
+            break;
         }
         case 'set_viewport': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: newProperties
-                };
+            const { newProperties } = op;
+            if (newProperties == null) {
+                viewport = newProperties;
             }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: properties,
-                    newProperties: properties
-                };
+            else {
+                if (viewport == null) {
+                    if (!Viewport.isViewport(newProperties)) {
+                        throw new Error(`Cannot apply an incomplete "set_viewport" operation properties ${JSON.stringify(newProperties)} when there is no current viewport.`);
+                    }
+                    viewport = { ...newProperties };
+                }
+                for (const key in newProperties) {
+                    const value = newProperties[key];
+                    if (value == null) {
+                        delete viewport[key];
+                    }
+                    else {
+                        viewport[key] = value;
+                    }
+                }
+            }
+            break;
+        }
+        case 'set_selection': {
+            const { newProperties } = op;
+            if (newProperties == null) {
+                selection = newProperties;
             }
             else {
-                return { ...op, properties: newProperties, newProperties: properties };
+                if (selection === null) {
+                    selection = op.newProperties;
+                }
+                else {
+                    selection.ranges = newProperties.ranges;
+                }
             }
+            break;
         }
         case 'set_theme': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
+            const { newProperties } = op;
+            theme = newProperties;
+            break;
         }
     }
+    return { selection, viewport, theme };
 };
-const PlaitOperation = {
-    isSetViewportOperation,
-    inverse
-};
-
-const Point = {
-    isEquals(point, otherPoint) {
-        return point && otherPoint && point[0] === otherPoint[0] && point[1] === otherPoint[1];
+const GeneralTransforms = {
+    /**
+     * Transform the board by an operation.
+     */
+    transform(board, op) {
+        board.children = createDraft(board.children);
+        let viewport = board.viewport && createDraft(board.viewport);
+        let selection = board.selection && createDraft(board.selection);
+        let theme = board.theme && createDraft(board.theme);
+        try {
+            const state = applyToDraft(board, selection, viewport, theme, op);
+            viewport = state.viewport;
+            selection = state.selection;
+            theme = state.theme;
+        }
+        finally {
+            board.children = finishDraft(board.children);
+            if (selection) {
+                board.selection = isDraft(selection) ? finishDraft(selection) : selection;
+            }
+            else {
+                board.selection = null;
+            }
+            board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
+            board.theme = isDraft(theme) ? finishDraft(theme) : theme;
+        }
     }
 };
 
-const SAVING = new WeakMap();
-const MERGING = new WeakMap();
-
-var PlaitPluginKey;
-(function (PlaitPluginKey) {
-    PlaitPluginKey["withSelection"] = "withSelection";
-})(PlaitPluginKey || (PlaitPluginKey = {}));
-
-const IS_FROM_SCROLLING = new WeakMap();
-const IS_FROM_VIEWPORT_CHANGE = new WeakMap();
-function getViewportContainerRect(board) {
-    const { hideScrollbar } = board.options;
-    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-    const viewportRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-    return {
-        width: viewportRect.width + scrollBarWidth,
-        height: viewportRect.height + scrollBarWidth
-    };
-}
-function getElementHostBBox(board, zoom) {
-    const childrenRect = getRectangleByElements(board, board.children, true);
-    const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-    const containerWidth = viewportContainerRect.width / zoom;
-    const containerHeight = viewportContainerRect.height / zoom;
-    let left;
-    let right;
-    let top;
-    let bottom;
-    if (childrenRect.width < containerWidth) {
-        const centerX = childrenRect.x + childrenRect.width / 2;
-        const halfContainerWidth = containerWidth / 2;
-        left = centerX - halfContainerWidth;
-        right = centerX + halfContainerWidth;
-    }
-    else {
-        left = childrenRect.x;
-        right = childrenRect.x + childrenRect.width;
-    }
-    if (childrenRect.height < containerHeight) {
-        const centerY = childrenRect.y + childrenRect.height / 2;
-        const halfContainerHeight = containerHeight / 2;
-        top = centerY - halfContainerHeight;
-        bottom = centerY + halfContainerHeight;
-    }
-    else {
-        top = childrenRect.y;
-        bottom = childrenRect.y + childrenRect.height;
-    }
-    return {
-        left,
-        right,
-        top,
-        bottom
-    };
-}
-/**
- * 验证缩放比是否符合限制，如果超出限制，则返回合适的缩放比
- * @param zoom 缩放比
- * @param minZoom 最小缩放比
- * @param maxZoom 最大缩放比
- * @returns 正确的缩放比
- */
-function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
-    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
-}
-function getViewBox(board, zoom) {
-    const boardContainerRectangle = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-    const elementHostBBox = getElementHostBBox(board, zoom);
-    const horizontalPadding = boardContainerRectangle.width / 2;
-    const verticalPadding = boardContainerRectangle.height / 2;
-    const viewBox = [
-        elementHostBBox.left - horizontalPadding / zoom,
-        elementHostBBox.top - verticalPadding / zoom,
-        elementHostBBox.right - elementHostBBox.left + (horizontalPadding * 2) / zoom,
-        elementHostBBox.bottom - elementHostBBox.top + (verticalPadding * 2) / zoom
-    ];
-    return viewBox;
-}
-function getViewBoxCenterPoint(board) {
-    const childrenRectangle = getRectangleByElements(board, board.children, true);
-    return [childrenRectangle.x + childrenRectangle.width / 2, childrenRectangle.y + childrenRectangle.height / 2];
+function insertNode(board, node, path) {
+    const operation = { type: 'insert_node', node, path };
+    board.apply(operation);
 }
-function setSVGViewBox(board, viewBox) {
-    const zoom = board.viewport.zoom;
-    const hostElement = PlaitBoard.getHost(board);
-    hostElement.style.display = 'block';
-    hostElement.style.width = `${viewBox[2] * zoom}px`;
-    hostElement.style.height = `${viewBox[3] * zoom}px`;
-    if (viewBox && viewBox[2] > 0 && viewBox[3] > 0) {
-        hostElement.setAttribute('viewBox', viewBox.join(' '));
+function setNode(board, props, path) {
+    const properties = {};
+    const newProperties = {};
+    const node = PlaitNode.get(board, path);
+    for (const k in props) {
+        if (node[k] !== props[k]) {
+            if (node.hasOwnProperty(k)) {
+                properties[k] = node[k];
+            }
+            if (props[k] != null)
+                newProperties[k] = props[k];
+        }
     }
+    const operation = { type: 'set_node', properties, newProperties, path };
+    board.apply(operation);
 }
-function updateViewportOffset(board) {
-    const origination = getViewportOrigination(board);
-    if (!origination)
-        return;
-    const { zoom } = board.viewport;
-    const viewBox = getViewBox(board, zoom);
-    const scrollLeft = (origination[0] - viewBox[0]) * zoom;
-    const scrollTop = (origination[1] - viewBox[1]) * zoom;
-    updateViewportContainerScroll(board, scrollLeft, scrollTop);
+function removeNode(board, path) {
+    const node = PlaitNode.get(board, path);
+    const operation = { type: 'remove_node', path, node };
+    board.apply(operation);
 }
-function updateViewportContainerScroll(board, left, top, isFromViewportChange = true) {
-    const viewportContainer = PlaitBoard.getViewportContainer(board);
-    if (viewportContainer.scrollLeft !== left || viewportContainer.scrollTop !== top) {
-        viewportContainer.scrollLeft = left;
-        viewportContainer.scrollTop = top;
-        isFromViewportChange && setIsFromViewportChange(board, true);
-    }
+function moveNode(board, path, newPath) {
+    const operation = { type: 'move_node', path, newPath };
+    board.apply(operation);
 }
-function initializeViewportContainer(board) {
-    const { width, height } = getViewportContainerRect(board);
-    const viewportContainer = PlaitBoard.getViewportContainer(board);
-    viewportContainer.style.width = `${width}px`;
-    viewportContainer.style.height = `${height}px`;
+const NodeTransforms = {
+    insertNode,
+    setNode,
+    removeNode,
+    moveNode
+};
+
+function setSelection(board, selection) {
+    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
+    board.apply(operation);
 }
-function initializeViewBox(board) {
-    const zoom = board.viewport.zoom;
-    const viewBox = getViewBox(board, zoom);
-    setSVGViewBox(board, viewBox);
+const SelectionTransforms = {
+    setSelection,
+    setSelectionWithTemporaryElements
+};
+function setSelectionWithTemporaryElements(board, elements) {
+    setTimeout(() => {
+        BOARD_TO_TEMPORARY_ELEMENTS.set(board, elements);
+        setSelection(board, { ranges: [] });
+    });
 }
-function initializeViewportOffset(board) {
-    if (!board.viewport?.origination) {
-        const zoom = board.viewport.zoom;
-        const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-        const viewBox = getViewBox(board, zoom);
-        const centerX = viewBox[0] + viewBox[2] / 2;
-        const centerY = viewBox[1] + viewBox[3] / 2;
-        const origination = [centerX - viewportContainerRect.width / 2 / zoom, centerY - viewportContainerRect.height / 2 / zoom];
-        updateViewportOrigination(board, origination);
-        updateViewportOffset(board);
-        return;
-    }
-    updateViewportOffset(board);
+
+function setViewport(board, viewport) {
+    const operation = { type: 'set_viewport', properties: board.viewport, newProperties: viewport };
+    board.apply(operation);
 }
-const updateViewportOrigination = (board, origination) => {
-    BOARD_TO_VIEWPORT_ORIGINATION.set(board, origination);
-};
-const clearViewportOrigination = (board) => {
-    BOARD_TO_VIEWPORT_ORIGINATION.delete(board);
-};
-const getViewportOrigination = (board) => {
-    const origination = BOARD_TO_VIEWPORT_ORIGINATION.get(board);
-    if (origination) {
-        return origination;
-    }
-    else {
-        return board.viewport.origination;
-    }
-};
-const isFromScrolling = (board) => {
-    return !!IS_FROM_SCROLLING.get(board);
-};
-const setIsFromScrolling = (board, state) => {
-    IS_FROM_SCROLLING.set(board, state);
-};
-const isFromViewportChange = (board) => {
-    return !!IS_FROM_VIEWPORT_CHANGE.get(board);
-};
-const setIsFromViewportChange = (board, state) => {
-    IS_FROM_VIEWPORT_CHANGE.set(board, state);
+const ViewportTransforms$1 = {
+    setViewport
 };
-function scrollToRectangle(board, client) { }
 
 function setTheme(board, themeColorMode) {
     const operation = { type: 'set_theme', properties: board.theme, newProperties: themeColorMode };
@@ -2240,6 +2257,25 @@ const BoardTransforms = {
     fitViewportWidth
 };
 
+const removeElements = (board, elements) => {
+    elements
+        .map(element => {
+        const path = PlaitBoard.findPath(board, element);
+        const ref = board.pathRef(path);
+        return () => {
+            removeNode(board, ref.current);
+            ref.unref();
+            removeSelectedElement(board, element);
+        };
+    })
+        .forEach(action => {
+        action();
+    });
+};
+const CoreTransforms = {
+    removeElements
+};
+
 const Transforms = {
     ...GeneralTransforms,
     ...ViewportTransforms$1,
@@ -2335,7 +2371,11 @@ function createBoard(children, options) {
         dblclick: (event) => { },
         setFragment: (data) => { },
         insertFragment: (data) => { },
-        deleteFragment: (data) => { },
+        deleteFragment: (data) => {
+            const elements = board.getDeletedFragment([]);
+            CoreTransforms.removeElements(board, elements);
+        },
+        getDeletedFragment: (data) => data,
         drawElement: (context) => [],
         redrawElement: (context, previousContext) => { },
         destroyElement: (context) => { },
@@ -2894,6 +2934,11 @@ const withHotkey = (board) => {
             Transforms.setSelectionWithTemporaryElements(board, elements);
             return;
         }
+        const selectedElements = getSelectedElements(board);
+        if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0 && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
+            event.preventDefault();
+            board.deleteFragment(null);
+        }
         keydown(event);
     };
     board.globalKeydown = (event) => {
@@ -3301,10 +3346,6 @@ class PlaitBoardComponent {
             this.board.globalKeydown(event);
         }), filter(event => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board) && !hasInputOrTextareaTarget(event.target)))
             .subscribe((event) => {
-            const selectedElements = getSelectedElements(this.board);
-            if (selectedElements.length > 0 && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
-                this.board.deleteFragment(null);
-            }
             this.board.keydown(event);
         });
         fromEvent(document, 'keyup')
@@ -3658,5 +3699,5 @@ function createModModifierKeys() {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLIP_BOARD_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_PREVENT_TOUCH_MOVE, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionOuterG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getClipboardByKey, getClipboardDataByMedia, getDataFromClipboard, getElementById, getElementHostBBox, getHitElementOfRoot, getHitElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getTextFromClipboard, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isLineHitLine, isMainPointer, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setClipboardDataByMedia, setClipboardDataByText, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateForeignObjectWidth, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
+export { A, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLIP_BOARD_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_PREVENT_TOUCH_MOVE, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionOuterG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, findElements, getBoardRectangle, getClipboardByKey, getClipboardDataByMedia, getDataFromClipboard, getElementById, getElementHostBBox, getHitElementOfRoot, getHitElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getTextFromClipboard, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isLineHitLine, isMainPointer, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setClipboardDataByMedia, setClipboardDataByText, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateForeignObjectWidth, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map