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

package/{fesm2020 → 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';
 
@@ -27,9 +27,18 @@ const BOARD_TO_IS_SELECTION_MOVING = new WeakMap();
 // save no standard selected elements
 const BOARD_TO_TEMPORARY_ELEMENTS = new WeakMap();
 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,1886 +63,2322 @@ 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);
-}
+};
 
-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 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 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 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);
 };
-const ThemeColors = [
-    DefaultThemeColor,
-    ColorfulThemeColor,
-    SoftThemeColor,
-    RetroThemeColor,
-    DarkThemeColor,
-    StarryThemeColor
-];
-
-// 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 rotate(x1, y1, x2, y2, angle) {
-    // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
-    // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
-    // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
-    return [(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2];
-}
-function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
-    const dx = x1 - x2;
-    const dy = y1 - y2;
-    return Math.hypot(dx, dy);
-}
-// https://stackoverflow.com/questions/5254838/calculating-distance-between-a-point-and-a-rectangular-box-nearest-point
-function distanceBetweenPointAndRectangle(x, y, rect) {
-    var dx = Math.max(rect.x - x, 0, x - (rect.x + rect.width));
-    var dy = Math.max(rect.y - y, 0, y - (rect.y + rect.height));
-    return Math.sqrt(dx * dx + dy * dy);
-}
 
-const 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;
-    },
-    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);
-    }
-};
+/**
+ * @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 PlaitPointerType;
-(function (PlaitPointerType) {
-    PlaitPointerType["hand"] = "hand";
-    PlaitPointerType["selection"] = "selection";
-})(PlaitPointerType || (PlaitPointerType = {}));
+var ResizeCursorClass;
+(function (ResizeCursorClass) {
+    ResizeCursorClass["ew-resize"] = "ew-resize";
+})(ResizeCursorClass || (ResizeCursorClass = {}));
 
-function isNullOrUndefined(value) {
-    return value === null || value === undefined;
+const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
+const ACTIVE_STROKE_WIDTH = 1;
+const SELECTION_RECTANGLE_CLASS_NAME = 'selection-rectangle';
+
+const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
+const HOST_CLASS_NAME = 'plait-board-container';
+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 createG() {
+    const newG = document.createElementNS(NS, 'g');
+    return newG;
+}
+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 rect;
+}
+const setStrokeLinecap = (g, value) => {
+    g.setAttribute('stroke-linecap', value);
+};
+const setPathStrokeLinecap = (g, value) => {
+    g.querySelectorAll('path').forEach(path => {
+        path.setAttribute('stroke-linecap', value);
+    });
+};
+function createMask() {
+    return document.createElementNS(NS, 'mask');
+}
+function createSVG() {
+    const svg = document.createElementNS(NS, 'svg');
+    return svg;
+}
+function createText(x, y, fill, textContent) {
+    var text = document.createElementNS(NS, 'text');
+    text.setAttribute('x', `${x}`);
+    text.setAttribute('y', `${y}`);
+    text.setAttribute('fill', fill);
+    text.textContent = textContent;
+    return text;
 }
 /**
- * 规范 point
- * @param point
- * @returns point
+ * Check if a DOM node is an element node.
  */
-function normalizePoint(point) {
-    return Array.isArray(point)
-        ? {
-            x: point[0],
-            y: point[1]
-        }
-        : point;
-}
-
-const Viewport = {
-    isViewport: (value) => {
-        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
-    },
+const isDOMElement = (value) => {
+    return isDOMNode(value) && value.nodeType === 1;
 };
-
-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);
-        }
-        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));
+/**
+ * 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;
         }
-        if (reverse) {
-            list.reverse();
+    }
+    return false;
+};
+const isSecondaryPointer = (event) => {
+    return event.button === POINTER_BUTTON.SECONDARY;
+};
+const isMainPointer = (event) => {
+    return event.button === POINTER_BUTTON.MAIN;
+};
+
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasOnContextChanged(value) {
+    if (value.onContextChanged) {
+        return true;
+    }
+    return false;
+}
+
+class PlaitPluginElementComponent {
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
         }
-        return list;
-    },
-    parent(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the parent path of the root path [${path}].`);
+        const previousContext = this._context;
+        this._context = value;
+        if (this.element) {
+            ELEMENT_TO_COMPONENT.set(this.element, this);
         }
-        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.`);
+        if (this.initialized) {
+            this.cdr.markForCheck();
+            if (hasOnContextChanged(this)) {
+                this.onContextChanged(value, previousContext);
+            }
         }
-        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.`);
+        else {
+            if (PlaitElement.isRootElement(this.element) && this.element.children) {
+                this.g = createG();
+                this.rootG = createG();
+                this.rootG.append(this.g);
+            }
+            else {
+                this.g = createG();
+            }
         }
-        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;
+    }
+    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 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;
+        this.initialized = true;
+    }
+    ngOnDestroy() {
+        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
+            ELEMENT_TO_COMPONENT.delete(this.element);
         }
-        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;
-        });
+        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 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;
+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;
         }
     },
-    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;
+    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;
     },
-    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;
+    getOutlineRectangle: (rectangle, offset) => {
+        return {
+            x: rectangle.x + offset,
+            y: rectangle.y + offset,
+            width: rectangle.width - offset * 2,
+            height: rectangle.height - offset * 2
+        };
+    },
+    inflate: (rectangle, delta) => {
+        const half = delta / 2;
+        return {
+            x: rectangle.x - half,
+            y: rectangle.y - half,
+            width: rectangle.width + half * 2,
+            height: rectangle.height + half * 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]
+        ];
+    },
+    getConnectionPoint: (rectangle, point) => {
+        return [rectangle.x + rectangle.width * point[0], rectangle.y + rectangle.height * point[1]];
     }
 };
 
-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;
+// https://stackoverflow.com/a/6853926/232122
+function distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) {
+    const A = x - x1;
+    const B = y - y1;
+    const C = x2 - x1;
+    const D = y2 - y1;
+    const dot = A * C + B * D;
+    const lenSquare = C * C + D * D;
+    let param = -1;
+    if (lenSquare !== 0) {
+        // in case of 0 length line
+        param = dot / lenSquare;
+    }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
+    }
+    else if (param > 1) {
+        xx = x2;
+        yy = y2;
+    }
+    else {
+        xx = x1 + param * C;
+        yy = y1 + param * D;
+    }
+    const dx = x - xx;
+    const dy = y - yy;
+    return Math.hypot(dx, dy);
+}
+function getNearestPointBetweenPointAndSegment(point, linePoints) {
+    const x = point[0], y = point[1], x1 = linePoints[0][0], y1 = linePoints[0][1], x2 = linePoints[1][0], y2 = linePoints[1][1];
+    const A = x - x1;
+    const B = y - y1;
+    const C = x2 - x1;
+    const D = y2 - y1;
+    const dot = A * C + B * D;
+    const lenSquare = C * C + D * D;
+    let param = -1;
+    if (lenSquare !== 0) {
+        // in case of 0 length line
+        param = dot / lenSquare;
+    }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
+    }
+    else if (param > 1) {
+        xx = x2;
+        yy = y2;
+    }
+    else {
+        xx = x1 + param * C;
+        yy = y1 + param * D;
+    }
+    return [xx, yy];
+}
+function distanceBetweenPointAndSegments(points, point) {
+    const len = points.length;
+    let distance = Infinity;
+    for (let i = 0; i < len - 1; i++) {
+        const p = points[i];
+        const p2 = points[i + 1];
+        const currentDistance = distanceBetweenPointAndSegment(point[0], point[1], p[0], p[1], p2[0], p2[1]);
+        if (currentDistance < distance) {
+            distance = currentDistance;
         }
-        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;
+    }
+    return distance;
+}
+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]);
         }
-        case 'set_selection': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                selection = newProperties;
-            }
-            else {
-                if (selection === null) {
-                    selection = op.newProperties;
-                }
-                else {
-                    selection.ranges = newProperties.ranges;
-                }
-            }
-            break;
+    }
+    return result;
+}
+function rotate(x1, y1, x2, y2, angle) {
+    // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
+    // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
+    // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
+    return [(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2];
+}
+function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
+    const dx = x1 - x2;
+    const dy = y1 - y2;
+    return Math.hypot(dx, dy);
+}
+// https://stackoverflow.com/questions/5254838/calculating-distance-between-a-point-and-a-rectangular-box-nearest-point
+function distanceBetweenPointAndRectangle(x, y, rect) {
+    var dx = Math.max(rect.x - x, 0, x - (rect.x + rect.width));
+    var dy = Math.max(rect.y - y, 0, y - (rect.y + rect.height));
+    return Math.sqrt(dx * dx + dy * dy);
+}
+const isLineHitLine = (a, b, c, d) => {
+    const crossProduct = (v1, v2) => v1[0] * v2[1] - v1[1] * v2[0];
+    const ab = [b[0] - a[0], b[1] - a[1]];
+    const ac = [c[0] - a[0], c[1] - a[1]];
+    const ad = [d[0] - a[0], d[1] - a[1]];
+    const ca = [a[0] - c[0], a[1] - c[1]];
+    const cb = [b[0] - c[0], b[1] - c[1]];
+    const cd = [d[0] - c[0], d[1] - c[1]];
+    return crossProduct(ab, ac) * crossProduct(ab, ad) <= 0 && crossProduct(cd, ca) * crossProduct(cd, cb) <= 0;
+};
+const isPolylineHitRectangle = (points, rectangle) => {
+    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;
         }
-        case 'set_theme': {
-            const { newProperties } = op;
-            theme = newProperties;
-            break;
+    }
+    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 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 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 { selection, viewport, theme };
+    return false;
 };
-const GeneralTransforms = {
+/**
+ * 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 = {
     /**
-     * Transform the board by an operation.
+     * Get the saving flag's current value.
      */
-    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;
-        }
+    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);
     }
 };
 
-function insertNode(board, node, path) {
-    const operation = { type: 'insert_node', node, path };
-    board.apply(operation);
-}
-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];
+/**
+ * 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;
         }
+        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')
+};
+
+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 operation = { type: 'set_node', properties, newProperties, path };
-    board.apply(operation);
-}
-function removeNode(board, path) {
-    const node = PlaitNode.get(board, path);
-    const operation = { type: 'remove_node', path, node };
-    board.apply(operation);
+    return key;
 }
-function moveNode(board, path, newPath) {
-    const operation = { type: 'move_node', path, newPath };
-    board.apply(operation);
+
+/**
+ * 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 NodeTransforms = {
-    insertNode,
-    setNode,
-    removeNode,
-    moveNode
+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 setSelection(board, selection) {
-    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
-    board.apply(operation);
+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 };
 }
-const SelectionTransforms = {
-    setSelection,
-    setSelectionWithTemporaryElements
-};
-function setSelectionWithTemporaryElements(board, elements) {
-    setTimeout(() => {
-        BOARD_TO_TEMPORARY_ELEMENTS.set(board, elements);
-        setSelection(board, { ranges: [] });
-    });
+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 setViewport(board, viewport) {
-    const operation = { type: 'set_viewport', properties: board.viewport, newProperties: viewport };
-    board.apply(operation);
+function drawCircle(roughSVG, point, diameter, options) {
+    return roughSVG.circle(point[0], point[1], diameter, options);
 }
-const ViewportTransforms$1 = {
-    setViewport
-};
-
-/**
- * @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;
+function drawLine(rs, start, end, options) {
+    return rs.linearPath([start, end], options);
+}
+function drawLinearPath(points, options, closePath) {
+    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]} `;
+        }
+    });
+    if (closePath) {
+        polylinePath += 'Z';
+    }
+    path.setAttribute('d', polylinePath);
+    path.setAttribute('stroke', `${options?.stroke}`);
+    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
+    path.setAttribute('fill', `${options?.fill || 'none'}`);
+    options?.strokeLineDash && path.setAttribute('stroke-dasharray', `${options.strokeLineDash}`);
+    g.appendChild(path);
+    return g;
+}
+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 NS = 'http://www.w3.org/2000/svg';
-function toPoint(x, y, container) {
-    const rect = container.getBoundingClientRect();
-    return [x - rect.x, y - rect.y];
+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 createG() {
-    const newG = document.createElementNS(NS, 'g');
-    return newG;
+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
+    };
 }
-function createPath() {
-    const newG = document.createElementNS(NS, 'path');
-    return newG;
+/**
+ * 验证缩放比是否符合限制，如果超出限制，则返回合适的缩放比
+ * @param zoom 缩放比
+ * @param minZoom 最小缩放比
+ * @param maxZoom 最大缩放比
+ * @returns 正确的缩放比
+ */
+function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
+    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
 }
-function createSVG() {
-    const svg = document.createElementNS(NS, 'svg');
-    return svg;
+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 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 getViewBoxCenterPoint(board) {
+    const childrenRectangle = getRectangleByElements(board, board.children, true);
+    return [childrenRectangle.x + childrenRectangle.width / 2, childrenRectangle.y + childrenRectangle.height / 2];
 }
-/**
- * Check if a DOM node is an element node.
- */
-const isDOMElement = (value) => {
-    return isDOMNode(value) && value.nodeType === 1;
+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);
+    }
+}
+function initializeViewportContainer(board) {
+    const { width, height } = getViewportContainerRect(board);
+    const viewportContainer = PlaitBoard.getViewportContainer(board);
+    viewportContainer.style.width = `${width}px`;
+    viewportContainer.style.height = `${height}px`;
+}
+function initializeViewBox(board) {
+    const zoom = board.viewport.zoom;
+    const viewBox = getViewBox(board, zoom);
+    setSVGViewBox(board, viewBox);
+}
+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);
+}
+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 isFromScrolling = (board) => {
+    return !!IS_FROM_SCROLLING.get(board);
 };
-const isMainPointer = (event) => {
-    return event.button === POINTER_BUTTON.MAIN;
+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);
+};
+function scrollToRectangle(board, client) { }
 
-/**
- * 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;
-        }
+let timerId = null;
+const throttleRAF = (fn) => {
+    const scheduleFunc = () => {
+        timerId = requestAnimationFrame(() => {
+            timerId = null;
+            fn();
+        });
+    };
+    if (timerId !== null) {
+        cancelAnimationFrame(timerId);
+        timerId = null;
     }
+    scheduleFunc();
 };
-
-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);
+const debounce = (func, wait, options) => {
+    let timerSubscription = null;
+    return () => {
+        if (timerSubscription && !timerSubscription.closed) {
+            timerSubscription.unsubscribe();
+            timerSubscription = timer(wait).subscribe(() => {
+                func();
+            });
         }
-    }, getIsRecursionFunc(board), true);
-    return selectedElements;
-};
-const getHitElementOfRoot = (board, rootElements, range) => {
-    const newRootElements = [...rootElements].reverse();
-    return newRootElements.find(item => {
-        return board.isHitSelection(item, range);
-    });
-};
-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);
-                });
+        else {
+            if (options?.leading) {
+                func();
             }
-        });
-    }
-    return isIntersectionElements;
-};
-const cacheSelectedElements = (board, selectedElements) => {
-    BOARD_TO_SELECTED_ELEMENT.set(board, selectedElements);
-};
-const getSelectedElements = (board) => {
-    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
+            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;
+function cloneCSSStyle(nativeNode, clonedNode) {
+    const targetStyle = clonedNode.style;
+    if (!targetStyle) {
+        return;
     }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.initialized = false;
+    const sourceStyle = window.getComputedStyle(nativeNode);
+    if (sourceStyle.cssText) {
+        targetStyle.cssText = sourceStyle.cssText;
+        targetStyle.transformOrigin = sourceStyle.transformOrigin;
     }
-    ngOnInit() {
-        if (this.element.type) {
-            (this.rootG || this.g).setAttribute(`plait-${this.element.type}`, 'true');
-        }
-        this.initialized = true;
+    else {
+        Array.from(sourceStyle).forEach(name => {
+            let value = sourceStyle.getPropertyValue(name);
+            targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
+        });
     }
-    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();
+}
+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;
 }
-PlaitPluginElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-PlaitPluginElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", 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);
+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;
     });
-    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;
+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 isInPlaitBoard(board, x, y) {
-    const plaitBoardElement = PlaitBoard.getBoardContainer(board);
-    const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
-    const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
-    return distances === 0;
+function downloadImage(url, name) {
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    a.click();
+    a.remove();
 }
-function getRealScrollBarWidth(board) {
-    const { hideScrollbar } = board.options;
-    let scrollBarWidth = 0;
-    if (!hideScrollbar) {
-        const viewportContainer = PlaitBoard.getViewportContainer(board);
-        scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
+
+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);
+    }
+    const stringObj = JSON.stringify(result);
+    const encoded = window.btoa(encodeURIComponent(stringObj));
+    data?.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
+};
+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 scrollBarWidth;
-}
-
-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 updateForeignObject(g, width, height, x, y) {
-    const foreignObject = g.querySelector('foreignObject');
-    if (foreignObject) {
-        foreignObject.setAttribute('width', `${width}`);
-        foreignObject.setAttribute('height', `${height}`);
-        foreignObject.setAttribute('x', `${x}`);
-        foreignObject.setAttribute('y', `${y}`);
+    return nodesData;
+};
+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);
     }
-}
-
-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);
+    return imageItem;
+};
 
-/**
- * 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 BOARD_TO_TOUCH_REF = new WeakMap();
+const isPreventTouchMove = (board) => {
+    return !!BOARD_TO_TOUCH_REF.get(board);
+};
+const preventTouchMove = (board, event, state) => {
+    if (state && (event.target instanceof HTMLElement || event.target instanceof SVGElement)) {
+        BOARD_TO_TOUCH_REF.set(board, { state, target: event.target instanceof SVGElement ? event.target : undefined });
+    }
+    else {
+        const ref = BOARD_TO_TOUCH_REF.get(board);
+        if (ref) {
+            BOARD_TO_TOUCH_REF.delete(board);
+            ref.host?.remove();
+        }
     }
-    return false;
 };
 /**
- * Check whether an operation needs to be saved to the history.
+ * some intersection maybe cause target is removed from current browser window,
+ * after it was removed touch move event will not be fired
+ * so scroll behavior will can not be prevented in mobile browser device
+ * this function will prevent target element being remove.
  */
-const shouldSave = (op, prev) => {
-    if (op.type === 'set_selection' || op.type === 'set_viewport') {
-        return false;
+const handleTouchTarget = (board) => {
+    const touchRef = BOARD_TO_TOUCH_REF.get(board);
+    if (touchRef && touchRef.target && !touchRef.target.contains(PlaitBoard.getElementActiveHost(board))) {
+        touchRef.target.style.opacity = '0';
+        const host = createG();
+        host.appendChild(touchRef.target);
+        touchRef.host = host;
+        PlaitBoard.getElementActiveHost(board).append(host);
     }
-    return true;
 };
-/**
- * Check whether an operation should clear the redos stack.
- */
-const shouldClear = (op) => {
-    if (op.type === 'set_selection') {
-        return false;
+
+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 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);
+        }
+        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.`);
+        }
+        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;
+    },
+    /**
+     * 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;
+        }
+        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 true;
 };
-const PlaitHistoryBoard = {
-    /**
-     * Get the saving flag's current value.
-     */
-    isSaving(board) {
-        return SAVING.get(board);
+
+const PlaitNode = {
+    parent: (board, path) => {
+        const parentPath = Path.parent(path);
+        const p = PlaitNode.get(board, parentPath);
+        return p;
     },
     /**
-     * Get the merge flag's current value.
+     * 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.
      */
-    isMerging(board) {
-        return MERGING.get(board);
+    *parents(root, path, options = {}) {
+        for (const p of Path.ancestors(path, options)) {
+            const n = PlaitNode.get(root, p);
+            yield n;
+        }
     },
-    /**
-     * 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);
+    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;
     },
-    /**
-     * 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);
+    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;
     }
 };
 
-/**
- * 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']
+const isSetViewportOperation = (value) => {
+    return value.type === 'set_viewport';
 };
-/**
- * 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;
+const inverse = (op) => {
+    switch (op.type) {
+        case 'insert_node': {
+            return { ...op, type: 'remove_node' };
         }
-        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));
-    }
-    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;
+        case 'remove_node': {
+            return { ...op, type: 'insert_node' };
         }
-    }
-    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);
-}
-
-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]} `;
+        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 += `L ${point[0]} ${point[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;
-}
-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 '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 {
-            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_viewport': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: newProperties
+                };
+            }
+            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 };
         }
     }
-    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 PlaitOperation = {
+    isSetViewportOperation,
+    inverse
+};
 
-let timerId = null;
-const throttleRAF = (fn) => {
-    const scheduleFunc = () => {
-        timerId = requestAnimationFrame(() => {
-            timerId = null;
-            fn();
-        });
-    };
-    if (timerId !== null) {
-        cancelAnimationFrame(timerId);
-        timerId = null;
+const Point = {
+    isEquals(point, otherPoint) {
+        return point && otherPoint && point[0] === otherPoint[0] && point[1] === otherPoint[1];
     }
-    scheduleFunc();
 };
-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 Viewport = {
+    isViewport: (value) => {
+        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
+    },
 };
 
-const getMovingElements = (board) => {
-    return BOARD_TO_MOVING_ELEMENT.get(board) || [];
+const SAVING = new WeakMap();
+const MERGING = new WeakMap();
+
+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 addMovingElements = (board, elements) => {
-    const movingElements = getMovingElements(board);
-    const newElements = elements.filter(item => !movingElements.find(movingElement => movingElement.key === item.key));
-    cacheMovingElements(board, [...movingElements, ...newElements]);
+const ColorfulThemeColor = {
+    mode: ThemeColorMode.colorful,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
 };
-const removeMovingElements = (board) => {
-    BOARD_TO_MOVING_ELEMENT.delete(board);
+const SoftThemeColor = {
+    mode: ThemeColorMode.soft,
+    boardBackground: '#f5f5f5',
+    textColor: '#333333'
 };
-const cacheMovingElements = (board, elements) => {
-    BOARD_TO_MOVING_ELEMENT.set(board, elements);
+const RetroThemeColor = {
+    mode: ThemeColorMode.retro,
+    boardBackground: '#f9f8ed',
+    textColor: '#333333'
+};
+const DarkThemeColor = {
+    mode: ThemeColorMode.dark,
+    boardBackground: '#141414',
+    textColor: '#FFFFFF'
+};
+const StarryThemeColor = {
+    mode: ThemeColorMode.starry,
+    boardBackground: '#0d2537',
+    textColor: '#FFFFFF'
 };
+const ThemeColors = [
+    DefaultThemeColor,
+    ColorfulThemeColor,
+    SoftThemeColor,
+    RetroThemeColor,
+    DarkThemeColor,
+    StarryThemeColor
+];
 
-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
+var Direction;
+(function (Direction) {
+    Direction["left"] = "left";
+    Direction["top"] = "top";
+    Direction["right"] = "right";
+    Direction["bottom"] = "bottom";
+})(Direction || (Direction = {}));
+
+function getRectangleByElements(board, elements, recursion) {
+    const boundaryBox = {
+        left: Number.MAX_VALUE,
+        top: Number.MAX_VALUE,
+        right: Number.NEGATIVE_INFINITY,
+        bottom: Number.NEGATIVE_INFINITY
     };
-}
-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);
-        });
+    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 cloneSvgElement;
+    return {
+        x: boundaryBox.left,
+        y: boundaryBox.top,
+        width: boundaryBox.right - boundaryBox.left,
+        height: boundaryBox.bottom - boundaryBox.top
+    };
 }
-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 getBoardRectangle(board) {
+    return getRectangleByElements(board, board.children, true);
 }
-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 getElementById(board, id, dataSource) {
+    if (!dataSource) {
+        dataSource = findElements(board, { match: (element) => true, recursion: (element) => true });
     }
+    let element = dataSource.find((element) => element.id === id);
+    return element;
 }
-function downloadImage(url, name) {
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = name;
-    a.click();
-    a.remove();
+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 getIsRecursionFunc(board)(value) && options.recursion(value);
+        }
+    }, true);
+    return elements;
 }
 
-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);
-    }
-    const stringObj = JSON.stringify(result);
-    const encoded = window.btoa(encodeURIComponent(stringObj));
-    data?.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
-};
-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);
+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;
+    },
+    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);
     }
-    return nodesData;
-};
-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);
+
+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;
+        }
     }
-    return imageItem;
-};
-
-const isPreventTouchMove = (board) => {
-    return !!IS_PREVENT_TOUCH_MOVE.get(board);
-};
-const preventTouchMove = (board, state) => {
-    IS_PREVENT_TOUCH_MOVE.set(board, state);
+    return { selection, viewport, theme };
 };
-
-const PlaitElement = {
-    isRootElement(value) {
-        const parent = NODE_TO_PARENT.get(value);
-        if (parent && PlaitBoard.isBoard(parent)) {
-            return true;
+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;
         }
-        else {
-            return false;
+        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;
         }
-    },
-    getComponent(value) {
-        return ELEMENT_TO_COMPONENT.get(value);
     }
 };
 
-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;
+function insertNode(board, node, path) {
+    const operation = { type: 'insert_node', node, path };
+    board.apply(operation);
+}
+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];
         }
-    },
-    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 + Math.abs(offset) * 2,
-            height: rectangle.height + Math.abs(offset) * 2
-        };
-    },
-    isEqual: (rectangle, otherRectangle) => {
-        return (rectangle.x === otherRectangle.x &&
-            rectangle.y === otherRectangle.y &&
-            rectangle.width === otherRectangle.width &&
-            rectangle.height === otherRectangle.height);
     }
+    const operation = { type: 'set_node', properties, newProperties, path };
+    board.apply(operation);
+}
+function removeNode(board, path) {
+    const node = PlaitNode.get(board, path);
+    const operation = { type: 'remove_node', path, node };
+    board.apply(operation);
+}
+function moveNode(board, path, newPath) {
+    const operation = { type: 'move_node', path, newPath };
+    board.apply(operation);
+}
+const NodeTransforms = {
+    insertNode,
+    setNode,
+    removeNode,
+    moveNode
 };
 
-const isSetViewportOperation = (value) => {
-    return value.type === 'set_viewport';
-};
-const inverse = (op) => {
-    switch (op.type) {
-        case 'insert_node': {
-            return { ...op, type: 'remove_node' };
+function withSelection(board) {
+    const { pointerDown, globalPointerMove, globalPointerUp, onChange } = board;
+    let start = null;
+    let end = null;
+    let selectionMovingG;
+    let selectionRectangleG;
+    let previousSelectedElements;
+    // prevent text from being selected when user pressed main pointer and is moving
+    let needPreventNativeSelectionWhenMoving = false;
+    board.pointerDown = (event) => {
+        if (event.target instanceof Element && !event.target.closest('.plait-richtext-container')) {
+            needPreventNativeSelectionWhenMoving = true;
         }
-        case 'remove_node': {
-            return { ...op, type: 'insert_node' };
+        if (!isMainPointer(event)) {
+            pointerDown(event);
+            return;
         }
-        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 };
+        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const range = { anchor: point, focus: point };
+        const hitElements = getHitElements(board, { ranges: [range] });
+        const selectedElements = getSelectedElements(board);
+        if (hitElements.length === 1 && selectedElements.includes(hitElements[0]) && !options.isDisabledSelect) {
+            pointerDown(event);
+            return;
         }
-        case 'set_node': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
+        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
+            hitElements.length === 0 &&
+            options.isMultiple &&
+            !options.isDisabledSelect) {
+            selectionRectangleG?.remove();
+            start = point;
+            preventTouchMove(board, event, true);
         }
-        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 };
+        Transforms.setSelection(board, { ranges: [range] });
+        pointerDown(event);
+    };
+    board.globalPointerMove = (event) => {
+        if (needPreventNativeSelectionWhenMoving) {
+            // prevent text from being selected
+            event.preventDefault();
+        }
+        if (start) {
+            const movedTarget = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const rectangle = RectangleClient.toRectangleClient([start, movedTarget]);
+            selectionMovingG?.remove();
+            if (Math.hypot(rectangle.width, rectangle.height) > 5) {
+                end = movedTarget;
+                throttleRAF(() => {
+                    if (start && end) {
+                        Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
+                    }
+                });
+                setSelectionMoving(board);
+                selectionMovingG = drawRectangle(board, rectangle, {
+                    stroke: SELECTION_BORDER_COLOR,
+                    strokeWidth: 1,
+                    fill: SELECTION_FILL_COLOR,
+                    fillStyle: 'solid'
+                });
+                PlaitBoard.getHost(board).append(selectionMovingG);
             }
         }
-        case 'set_viewport': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: newProperties
-                };
+        globalPointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        if (start && end) {
+            selectionMovingG?.remove();
+            clearSelectionMoving(board);
+            Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
+        }
+        if (PlaitBoard.isFocus(board)) {
+            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
+            const isInDocument = event.target instanceof Node && document.contains(event.target);
+            const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
+            // Clear selection when mouse board outside area
+            // The framework needs to determine whether the board is focused through selection
+            if (!isInBoard && !start && !isAttachedElement && isInDocument) {
+                Transforms.setSelection(board, null);
             }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: properties,
-                    newProperties: properties
-                };
+        }
+        start = null;
+        end = null;
+        needPreventNativeSelectionWhenMoving = false;
+        preventTouchMove(board, event, false);
+        globalPointerUp(event);
+    };
+    board.onChange = () => {
+        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+        if (options.isDisabledSelect) {
+            clearSelectedElement(board);
+        }
+        // calc selected elements entry
+        if (board.pointer !== PlaitPointerType.hand && !options.isDisabledSelect) {
+            try {
+                if (board.operations.find(value => value.type === 'set_selection')) {
+                    selectionRectangleG?.remove();
+                    const temporaryElements = getTemporaryElements(board);
+                    let elements = temporaryElements ? temporaryElements : getHitElements(board);
+                    if (!options.isMultiple && elements.length > 1) {
+                        elements = [elements[0]];
+                    }
+                    cacheSelectedElements(board, elements);
+                    previousSelectedElements = elements;
+                    deleteTemporaryElements(board);
+                    if (!isSelectionMoving(board) && elements.length > 1) {
+                        selectionRectangleG = createSelectionRectangleG(board);
+                    }
+                }
+                else {
+                    // wait node destroy and remove selected element state
+                    setTimeout(() => {
+                        const currentSelectedElements = getSelectedElements(board);
+                        if (currentSelectedElements.length && currentSelectedElements.length > 1) {
+                            if (currentSelectedElements.length !== previousSelectedElements.length ||
+                                currentSelectedElements.some((c, index) => c !== previousSelectedElements[index])) {
+                                selectionRectangleG?.remove();
+                                selectionRectangleG = createSelectionRectangleG(board);
+                                previousSelectedElements = currentSelectedElements;
+                            }
+                        }
+                        else {
+                            selectionRectangleG?.remove();
+                        }
+                    });
+                }
             }
-            else {
-                return { ...op, properties: newProperties, newProperties: properties };
+            catch (error) {
+                console.error(error);
             }
         }
-        case 'set_theme': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
-        }
-    }
-};
-const PlaitOperation = {
-    isSetViewportOperation,
-    inverse
-};
-
-const Point = {
-    isEquals(point, otherPoint) {
-        return point && otherPoint && point[0] === otherPoint[0] && point[1] === otherPoint[1];
-    }
-};
-
-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
+        onChange();
     };
+    board.setPluginOptions(PlaitPluginKey.withSelection, {
+        isMultiple: true,
+        isDisabledSelect: false
+    });
+    return board;
 }
-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;
+function getTemporaryElements(board) {
+    const ref = BOARD_TO_TEMPORARY_ELEMENTS.get(board);
+    if (ref) {
+        return ref.elements;
     }
     else {
-        top = childrenRect.y;
-        bottom = childrenRect.y + childrenRect.height;
+        return undefined;
     }
-    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 getTemporaryRef(board) {
+    return BOARD_TO_TEMPORARY_ELEMENTS.get(board);
 }
-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 deleteTemporaryElements(board) {
+    BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
 }
-function getViewBoxCenterPoint(board) {
-    const childrenRectangle = getRectangleByElements(board, board.children, true);
-    return [childrenRectangle.x + childrenRectangle.width / 2, childrenRectangle.y + childrenRectangle.height / 2];
+function isSelectionMoving(board) {
+    return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
 }
-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 setSelectionMoving(board) {
+    PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
+    BOARD_TO_IS_SELECTION_MOVING.set(board, true);
 }
-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 clearSelectionMoving(board) {
+    PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
+    BOARD_TO_IS_SELECTION_MOVING.delete(board);
 }
-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 createSelectionRectangleG(board) {
+    const elements = getSelectedElements(board);
+    const rectangle = getRectangleByElements(board, elements, false);
+    if (rectangle.width > 0 && rectangle.height > 0 && elements.length > 1) {
+        const selectionRectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: ACTIVE_STROKE_WIDTH,
+            fillStyle: 'solid'
+        });
+        selectionRectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
+        PlaitBoard.getHost(board).append(selectionRectangleG);
+        return selectionRectangleG;
     }
+    return null;
 }
-function initializeViewportContainer(board) {
-    const { width, height } = getViewportContainerRect(board);
-    const viewportContainer = PlaitBoard.getViewportContainer(board);
-    viewportContainer.style.width = `${width}px`;
-    viewportContainer.style.height = `${height}px`;
-}
-function initializeViewBox(board) {
-    const zoom = board.viewport.zoom;
-    const viewBox = getViewBox(board, zoom);
-    setSVGViewBox(board, viewBox);
-}
-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 setSelection(board, selection) {
+    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
+    board.apply(operation);
 }
-const updateViewportOrigination = (board, origination) => {
-    BOARD_TO_VIEWPORT_ORIGINATION.set(board, origination);
-};
-const clearViewportOrigination = (board) => {
-    BOARD_TO_VIEWPORT_ORIGINATION.delete(board);
+const SelectionTransforms = {
+    setSelection,
+    addSelectionWithTemporaryElements
 };
-const getViewportOrigination = (board) => {
-    const origination = BOARD_TO_VIEWPORT_ORIGINATION.get(board);
-    if (origination) {
-        return origination;
+function addSelectionWithTemporaryElements(board, elements) {
+    const timeoutId = setTimeout(() => {
+        setSelection(board, { ranges: [] });
+    }, 0);
+    let ref = getTemporaryRef(board);
+    if (ref) {
+        clearTimeout(ref.timeoutId);
+        const currentElements = ref.elements;
+        ref.elements.push(...elements.filter(element => !currentElements.includes(element)));
+        ref.timeoutId = timeoutId;
     }
     else {
-        return board.viewport.origination;
+        BOARD_TO_TEMPORARY_ELEMENTS.set(board, { timeoutId, elements });
     }
+}
+
+function setViewport(board, viewport) {
+    const operation = { type: 'set_viewport', properties: board.viewport, newProperties: viewport };
+    board.apply(operation);
+}
+const ViewportTransforms$1 = {
+    setViewport
 };
-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);
-};
-function scrollToRectangle(board, client) { }
 
 function setTheme(board, themeColorMode) {
     const operation = { type: 'set_theme', properties: board.theme, newProperties: themeColorMode };
@@ -2053,6 +2498,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,
@@ -2148,7 +2612,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) => { },
@@ -2320,177 +2788,6 @@ function withHandPointer(board) {
     return board;
 }
 
-function withSelection(board) {
-    const { pointerDown, globalPointerMove, globalPointerUp, onChange } = board;
-    let start = null;
-    let end = null;
-    let selectionMovingG;
-    let selectionOuterG;
-    let previousSelectedElements;
-    // prevent text from being selected when user pressed main pointer and is moving
-    let needPreventNativeSelectionWhenMoving = false;
-    board.pointerDown = (event) => {
-        if (event.target instanceof Element && !event.target.closest('.plait-richtext-container')) {
-            needPreventNativeSelectionWhenMoving = true;
-        }
-        if (!isMainPointer(event)) {
-            pointerDown(event);
-            return;
-        }
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const range = { anchor: point, focus: point };
-        const hitElements = getHitElements(board, { ranges: [range] });
-        const selectedElements = getSelectedElements(board);
-        if (hitElements.length === 1 && selectedElements.includes(hitElements[0]) && !options.isDisabledSelect) {
-            pointerDown(event);
-            return;
-        }
-        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
-            hitElements.length === 0 &&
-            options.isMultiple &&
-            !options.isDisabledSelect) {
-            start = point;
-            preventTouchMove(board, true);
-        }
-        Transforms.setSelection(board, { ranges: [range] });
-        pointerDown(event);
-    };
-    board.globalPointerMove = (event) => {
-        if (needPreventNativeSelectionWhenMoving) {
-            // prevent text from being selected
-            event.preventDefault();
-        }
-        if (start) {
-            const movedTarget = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const { x, y, width, height } = RectangleClient.toRectangleClient([start, movedTarget]);
-            selectionMovingG?.remove();
-            if (Math.hypot(width, height) > 5) {
-                end = movedTarget;
-                throttleRAF(() => {
-                    if (start && end) {
-                        Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
-                    }
-                });
-                setSelectionMoving(board);
-                const rough = PlaitBoard.getRoughSVG(board);
-                selectionMovingG = rough.rectangle(x, y, width, height, {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: 1,
-                    fill: SELECTION_FILL_COLOR,
-                    fillStyle: 'solid'
-                });
-                PlaitBoard.getHost(board).append(selectionMovingG);
-            }
-        }
-        globalPointerMove(event);
-    };
-    board.globalPointerUp = (event) => {
-        if (start && end) {
-            selectionMovingG?.remove();
-            clearSelectionMoving(board);
-            Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
-        }
-        if (PlaitBoard.isFocus(board)) {
-            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
-            const isInDocument = event.target instanceof Node && document.contains(event.target);
-            const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
-            // Clear selection when mouse board outside area
-            // The framework needs to determine whether the board is focused through selection
-            if (!isInBoard && !start && !isAttachedElement && isInDocument) {
-                Transforms.setSelection(board, null);
-            }
-        }
-        start = null;
-        end = null;
-        needPreventNativeSelectionWhenMoving = false;
-        preventTouchMove(board, false);
-        globalPointerUp(event);
-    };
-    board.onChange = () => {
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (options.isDisabledSelect) {
-            selectionOuterG?.remove();
-            clearSelectedElement(board);
-        }
-        // calc selected elements entry
-        if (board.pointer !== PlaitPointerType.hand && !options.isDisabledSelect) {
-            try {
-                if (board.operations.find(value => value.type === 'set_selection')) {
-                    selectionOuterG?.remove();
-                    const temporaryElements = getTemporaryElements(board);
-                    let elements = temporaryElements ? temporaryElements : getHitElements(board);
-                    if (!options.isMultiple && elements.length > 1) {
-                        elements = [elements[0]];
-                    }
-                    cacheSelectedElements(board, elements);
-                    previousSelectedElements = elements;
-                    const { width, height } = getRectangleByElements(board, elements, false);
-                    if (width > 0 && height > 0 && elements.length > 1) {
-                        selectionOuterG = createSelectionOuterG(board, elements);
-                        selectionOuterG.classList.add('selection-outer');
-                        PlaitBoard.getHost(board).append(selectionOuterG);
-                    }
-                    deleteTemporaryElements(board);
-                }
-                else {
-                    // wait node destroy and remove selected element state
-                    setTimeout(() => {
-                        const currentSelectedElements = getSelectedElements(board);
-                        if (currentSelectedElements.length && currentSelectedElements.length > 1) {
-                            const selectedElementChange = currentSelectedElements.some(item => !previousSelectedElements.includes(item));
-                            if (selectedElementChange) {
-                                selectionOuterG?.remove();
-                                selectionOuterG = createSelectionOuterG(board, currentSelectedElements);
-                                selectionOuterG.classList.add('selection-outer');
-                                PlaitBoard.getHost(board).append(selectionOuterG);
-                            }
-                        }
-                        else {
-                            selectionOuterG?.remove();
-                        }
-                    });
-                }
-            }
-            catch (error) {
-                console.error(error);
-            }
-        }
-        onChange();
-    };
-    board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isMultiple: true,
-        isDisabledSelect: false
-    });
-    return board;
-}
-function getTemporaryElements(board) {
-    return BOARD_TO_TEMPORARY_ELEMENTS.get(board);
-}
-function deleteTemporaryElements(board) {
-    BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
-}
-function isSelectionMoving(board) {
-    return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
-}
-function setSelectionMoving(board) {
-    PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
-    BOARD_TO_IS_SELECTION_MOVING.set(board, true);
-}
-function clearSelectionMoving(board) {
-    PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
-    BOARD_TO_IS_SELECTION_MOVING.delete(board);
-}
-function createSelectionOuterG(board, selectElements) {
-    const { x, y, width, height } = getRectangleByElements(board, selectElements, false);
-    const rough = PlaitBoard.getRoughSVG(board);
-    return rough.rectangle(x - 2.5, y - 2.5, width + 5, height + 5, {
-        stroke: SELECTION_BORDER_COLOR,
-        strokeWidth: 1,
-        fillStyle: 'solid'
-    });
-}
-
 function withViewport(board) {
     const { onChange } = board;
     const throttleUpdate = debounce(() => {
@@ -2519,19 +2816,355 @@ function withViewport(board) {
     return board;
 }
 
+const ALIGN_TOLERANCE = 2;
+class ReactionManager {
+    constructor(board, activeElements, activeRectangle) {
+        this.board = board;
+        this.activeElements = activeElements;
+        this.activeRectangle = activeRectangle;
+        this.alignRectangles = this.getAlignRectangle();
+    }
+    getAlignRectangle() {
+        const result = [];
+        depthFirstRecursion(this.board, node => {
+            if (PlaitBoard.isBoard(node) || this.activeElements.some(element => node.id === element.id) || node.type !== 'geometry') {
+                return;
+            }
+            const rectangle = this.board.getRectangle(node);
+            rectangle && result.push(rectangle);
+        }, node => {
+            if (node && (PlaitBoard.isBoard(node) || this.board.isRecursion(node))) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        }, true);
+        return result;
+    }
+    handleAlign() {
+        const alignRectangles = this.getAlignRectangle();
+        const g = createG();
+        let alignLines = [];
+        const offset = 12;
+        let deltaX = 0;
+        let deltaY = 0;
+        let isCorrectX = false;
+        let isCorrectY = false;
+        for (let alignRectangle of alignRectangles) {
+            const closestDistances = this.calculateClosestDistances(this.activeRectangle, alignRectangle);
+            let canDrawHorizontal = false;
+            if (!isCorrectX && closestDistances.absXDistance < ALIGN_TOLERANCE) {
+                deltaX = closestDistances.xDistance;
+                this.activeRectangle.x -= deltaX;
+                isCorrectX = true;
+                canDrawHorizontal = true;
+            }
+            if (closestDistances.absXDistance === 0) {
+                canDrawHorizontal = true;
+            }
+            if (canDrawHorizontal) {
+                const verticalY = [
+                    alignRectangle.y,
+                    alignRectangle.y + alignRectangle.height,
+                    this.activeRectangle.y,
+                    this.activeRectangle.y + this.activeRectangle.height
+                ];
+                const lineTopY = Math.min(...verticalY) - offset;
+                const lineBottomY = Math.max(...verticalY) + offset;
+                const leftLine = [this.activeRectangle.x, lineTopY, this.activeRectangle.x, lineBottomY];
+                const middleLine = [
+                    this.activeRectangle.x + this.activeRectangle.width / 2,
+                    lineTopY,
+                    this.activeRectangle.x + this.activeRectangle.width / 2,
+                    lineBottomY
+                ];
+                const rightLine = [
+                    this.activeRectangle.x + this.activeRectangle.width,
+                    lineTopY,
+                    this.activeRectangle.x + this.activeRectangle.width,
+                    lineBottomY
+                ];
+                const shouldDrawLeftLine = closestDistances.indexX === 0 ||
+                    closestDistances.indexX === 1 ||
+                    (closestDistances.indexX === 2 && this.activeRectangle.width === alignRectangle.width);
+                if (shouldDrawLeftLine && !alignLines[0]) {
+                    alignLines[0] = leftLine;
+                }
+                const shouldDrawRightLine = closestDistances.indexX === 2 ||
+                    closestDistances.indexX === 3 ||
+                    (closestDistances.indexX === 0 && this.activeRectangle.width === alignRectangle.width);
+                if (shouldDrawRightLine && !alignLines[2]) {
+                    alignLines[2] = rightLine;
+                }
+                const shouldDrawMiddleLine = closestDistances.indexX === 4 || (!shouldDrawLeftLine && !shouldDrawRightLine);
+                if (shouldDrawMiddleLine && !alignLines[1]) {
+                    alignLines[1] = middleLine;
+                }
+                isCorrectX = true;
+            }
+            let canDrawVertical = false;
+            if (!isCorrectY && closestDistances.absYDistance < ALIGN_TOLERANCE) {
+                deltaY = closestDistances.yDistance;
+                this.activeRectangle.y -= deltaY;
+                isCorrectY = true;
+                canDrawVertical = true;
+            }
+            if (closestDistances.absYDistance === 0) {
+                canDrawVertical = true;
+            }
+            if (canDrawVertical) {
+                const horizontalX = [
+                    alignRectangle.x,
+                    alignRectangle.x + alignRectangle.width,
+                    this.activeRectangle.x,
+                    this.activeRectangle.x + this.activeRectangle.width
+                ];
+                const lineLeftX = Math.min(...horizontalX) - offset;
+                const lineRightX = Math.max(...horizontalX) + offset;
+                const topLine = [lineLeftX, this.activeRectangle.y, lineRightX, this.activeRectangle.y];
+                const horizontalMiddleLine = [
+                    lineLeftX,
+                    this.activeRectangle.y + this.activeRectangle.height / 2,
+                    lineRightX,
+                    this.activeRectangle.y + this.activeRectangle.height / 2
+                ];
+                const bottomLine = [
+                    lineLeftX,
+                    this.activeRectangle.y + this.activeRectangle.height,
+                    lineRightX,
+                    this.activeRectangle.y + this.activeRectangle.height
+                ];
+                const shouldDrawTopLine = closestDistances.indexY === 0 ||
+                    closestDistances.indexY === 1 ||
+                    (closestDistances.indexY === 2 && this.activeRectangle.height === alignRectangle.height);
+                if (shouldDrawTopLine && !alignLines[3]) {
+                    alignLines[3] = topLine;
+                }
+                const shouldDrawBottomLine = closestDistances.indexY === 2 ||
+                    closestDistances.indexY === 3 ||
+                    (closestDistances.indexY === 0 && this.activeRectangle.width === alignRectangle.width);
+                if (shouldDrawBottomLine && !alignLines[5]) {
+                    alignLines[5] = bottomLine;
+                }
+                const shouldDrawMiddleLine = closestDistances.indexY === 4 || (!shouldDrawTopLine && !shouldDrawBottomLine);
+                if (shouldDrawMiddleLine && !alignLines[4]) {
+                    alignLines[4] = horizontalMiddleLine;
+                }
+            }
+        }
+        const alignDeltaX = deltaX;
+        this.activeRectangle.x += deltaX;
+        const distributeHorizontalResult = this.alignDistributeHorizontal(alignRectangles);
+        const distributeLines = distributeHorizontalResult.distributeLines;
+        if (distributeHorizontalResult.deltaX) {
+            deltaX = distributeHorizontalResult.deltaX;
+            if (alignDeltaX !== deltaX) {
+                alignLines[0] = [];
+                alignLines[1] = [];
+                alignLines[2] = [];
+            }
+        }
+        if (alignLines.length) {
+            this.drawAlignLines(alignLines, g);
+        }
+        if (distributeLines.length) {
+            this.drawDistributeLines(distributeLines, g);
+        }
+        return { deltaX, deltaY, g };
+    }
+    calculateClosestDistances(activeRectangle, alignRectangle) {
+        const activeRectangleCenter = [activeRectangle.x + activeRectangle.width / 2, activeRectangle.y + activeRectangle.height / 2];
+        const alignRectangleCenter = [alignRectangle.x + alignRectangle.width / 2, alignRectangle.y + alignRectangle.height / 2];
+        const centerXDistance = activeRectangleCenter[0] - alignRectangleCenter[0];
+        const centerYDistance = activeRectangleCenter[1] - alignRectangleCenter[1];
+        const leftToLeft = activeRectangle.x - alignRectangle.x;
+        const leftToRight = activeRectangle.x - (alignRectangle.x + alignRectangle.width);
+        const rightToRight = activeRectangle.x + activeRectangle.width - (alignRectangle.x + alignRectangle.width);
+        const rightToLeft = activeRectangle.x + activeRectangle.width - alignRectangle.x;
+        const topToTop = activeRectangle.y - alignRectangle.y;
+        const topToBottom = activeRectangle.y - (alignRectangle.y + alignRectangle.height);
+        const bottomToTop = activeRectangle.y + activeRectangle.height - alignRectangle.y;
+        const bottomToBottom = activeRectangle.y + activeRectangle.height - (alignRectangle.y + alignRectangle.height);
+        const xDistances = [leftToLeft, leftToRight, rightToRight, rightToLeft, centerXDistance];
+        const yDistances = [topToTop, topToBottom, bottomToBottom, bottomToTop, centerYDistance];
+        const xDistancesAbs = xDistances.map(distance => Math.abs(distance));
+        const yDistancesAbs = yDistances.map(distance => Math.abs(distance));
+        const indexX = xDistancesAbs.indexOf(Math.min(...xDistancesAbs));
+        const indexY = yDistancesAbs.indexOf(Math.min(...yDistancesAbs));
+        return {
+            absXDistance: xDistancesAbs[indexX],
+            xDistance: xDistances[indexX],
+            absYDistance: yDistancesAbs[indexY],
+            yDistance: yDistances[indexY],
+            indexX,
+            indexY
+        };
+    }
+    alignDistributeHorizontal(alignRectangles) {
+        let distributeLines = [];
+        let deltaX = 0;
+        const activeRectangleCenterX = this.activeRectangle.x + this.activeRectangle.width / 2;
+        let rectangles = [];
+        alignRectangles.forEach(rec => {
+            if (isHorizontalCross(rec, this.activeRectangle) && !RectangleClient.isHit(rec, this.activeRectangle)) {
+                rectangles.push(rec);
+            }
+        });
+        rectangles = [...rectangles, this.activeRectangle].sort((a, b) => a.x - b.x);
+        const refArray = [];
+        let distributeDistance = 0;
+        let leftIndex = undefined;
+        let rightIndex = undefined;
+        for (let i = 0; i < rectangles.length; i++) {
+            for (let j = i + 1; j < rectangles.length; j++) {
+                const left = rectangles[i];
+                const right = rectangles[j];
+                const distance = right.x - (left.x + left.width);
+                let dif = Infinity;
+                if (refArray[i]?.right) {
+                    refArray[i].right.push({ distance, index: j });
+                }
+                else {
+                    refArray[i] = { ...refArray[i], right: [{ distance, index: j }] };
+                }
+                if (refArray[j]?.left) {
+                    refArray[j].left.push({ distance, index: i });
+                }
+                else {
+                    refArray[j] = { ...refArray[j], left: [{ distance, index: i }] };
+                }
+                //middle
+                let _centerX = (left.x + left.width + right.x) / 2;
+                dif = Math.abs(activeRectangleCenterX - _centerX);
+                if (dif < ALIGN_TOLERANCE) {
+                    distributeDistance = (right.x - (left.x + left.width) - this.activeRectangle.width) / 2;
+                    deltaX = activeRectangleCenterX - _centerX;
+                    leftIndex = i;
+                    rightIndex = j;
+                }
+                //right
+                const distanceRight = right.x - (left.x + left.width);
+                _centerX = right.x + right.width + distanceRight + this.activeRectangle.width / 2;
+                dif = Math.abs(activeRectangleCenterX - _centerX);
+                if (!distributeDistance && dif < ALIGN_TOLERANCE) {
+                    distributeDistance = distanceRight;
+                    leftIndex = j;
+                    deltaX = activeRectangleCenterX - _centerX;
+                }
+                //left
+                const distanceLeft = right.x - (left.x + left.width);
+                _centerX = left.x - distanceLeft - this.activeRectangle.width / 2;
+                dif = Math.abs(activeRectangleCenterX - _centerX);
+                if (!distributeDistance && dif < ALIGN_TOLERANCE) {
+                    distributeDistance = distanceLeft;
+                    rightIndex = i;
+                    deltaX = activeRectangleCenterX - _centerX;
+                }
+            }
+        }
+        const activeIndex = rectangles.indexOf(this.activeRectangle);
+        let leftIndexes = [];
+        let rightIndexes = [];
+        if (leftIndex !== undefined) {
+            leftIndexes.push(leftIndex);
+            findRectangle(distributeDistance, refArray[leftIndex], Direction.left, leftIndexes);
+        }
+        if (rightIndex !== undefined) {
+            rightIndexes.push(rightIndex);
+            findRectangle(distributeDistance, refArray[rightIndex], Direction.right, rightIndexes);
+        }
+        if (leftIndexes.length || rightIndexes.length) {
+            const indexArr = [...leftIndexes.reverse(), activeIndex, ...rightIndexes];
+            this.activeRectangle.x -= deltaX;
+            for (let i = 1; i < indexArr.length; i++) {
+                distributeLines.push(getLinePoints(rectangles[indexArr[i - 1]], rectangles[indexArr[i]]));
+            }
+        }
+        function findRectangle(distance, ref, direction, rectangleIndexes) {
+            const arr = ref[direction];
+            const index = refArray.indexOf(ref);
+            if ((index === 0 && direction === Direction.left) || (index === refArray.length - 1 && direction === Direction.right))
+                return;
+            for (let i = 0; i < arr.length; i++) {
+                if (Math.abs(arr[i].distance - distance) < 0.1) {
+                    rectangleIndexes.push(arr[i].index);
+                    findRectangle(distance, refArray[arr[i].index], direction, rectangleIndexes);
+                    return;
+                }
+            }
+        }
+        function getLinePoints(leftRectangle, rightRectangle) {
+            const verticalY = [
+                leftRectangle.y,
+                leftRectangle.y + leftRectangle.height,
+                rightRectangle.y,
+                rightRectangle.y + rightRectangle.height
+            ];
+            const sortArr = verticalY.sort((a, b) => a - b);
+            const y = (sortArr[1] + sortArr[2]) / 2;
+            const line = [
+                [leftRectangle.x + leftRectangle.width + 2, y],
+                [rightRectangle.x - 2, y]
+            ];
+            return line;
+        }
+        return { deltaX, distributeLines };
+    }
+    drawAlignLines(lines, g) {
+        lines.forEach(points => {
+            if (!points.length)
+                return;
+            const xAlign = PlaitBoard.getRoughSVG(this.board).line(points[0], points[1], points[2], points[3], {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: 1,
+                strokeLineDash: [4, 4]
+            });
+            g.appendChild(xAlign);
+        });
+    }
+    drawDistributeLines(lines, g) {
+        lines.forEach(points => {
+            if (!points.length)
+                return;
+            if (points[0][1] === points[1][1]) {
+                const yAlign = PlaitBoard.getRoughSVG(this.board).line(points[0][0], points[0][1], points[1][0], points[1][1], {
+                    stroke: SELECTION_BORDER_COLOR,
+                    strokeWidth: 1
+                });
+                const bar1 = PlaitBoard.getRoughSVG(this.board).line(points[0][0], points[0][1] - 4, points[0][0], points[1][1] + 4, {
+                    stroke: SELECTION_BORDER_COLOR,
+                    strokeWidth: 1
+                });
+                const bar2 = PlaitBoard.getRoughSVG(this.board).line(points[1][0], points[0][1] - 4, points[1][0], points[1][1] + 4, {
+                    stroke: SELECTION_BORDER_COLOR,
+                    strokeWidth: 1
+                });
+                g.appendChild(yAlign);
+                g.appendChild(bar1);
+                g.appendChild(bar2);
+            }
+        });
+    }
+}
+function isHorizontalCross(rectangle, other) {
+    return !(rectangle.y + rectangle.height < other.y || rectangle.y > other.y + other.height);
+}
+
 function withMoving(board) {
-    const { mousedown, mousemove, globalMouseup, globalMousemove } = board;
+    const { pointerDown, pointerMove, globalPointerUp, globalPointerMove } = board;
     let offsetX = 0;
     let offsetY = 0;
     let isPreventDefault = false;
     let startPoint;
     let activeElements = [];
-    board.mousedown = event => {
+    let alignG = null;
+    board.pointerDown = (event) => {
         const host = BOARD_TO_HOST.get(board);
         const point = transformPoint(board, toPoint(event.x, event.y, host));
         const range = { anchor: point, focus: point };
         let movableElements = board.children.filter(item => board.isMovable(item));
-        if (movableElements.length) {
+        if (movableElements.length && !isPreventTouchMove(board)) {
             startPoint = point;
             const selectedRootElements = getSelectedElements(board).filter(item => movableElements.includes(item));
             const hitElement = getHitElementOfRoot(board, movableElements, range);
@@ -2541,21 +3174,35 @@ function withMoving(board) {
             else if (hitElement) {
                 activeElements = [hitElement];
             }
+            if (activeElements.length > 0) {
+                preventTouchMove(board, event, true);
+            }
         }
-        mousedown(event);
+        pointerDown(event);
     };
-    board.mousemove = event => {
+    board.pointerMove = (event) => {
         if (startPoint && activeElements.length && !PlaitBoard.hasBeenTextEditing(board)) {
             if (!isPreventDefault) {
                 isPreventDefault = true;
             }
+            alignG?.remove();
             const host = BOARD_TO_HOST.get(board);
             const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
             offsetX = endPoint[0] - startPoint[0];
             offsetY = endPoint[1] - startPoint[1];
             const offsetBuffer = 5;
-            if (Math.abs(offsetX) > offsetBuffer || Math.abs(offsetY) > offsetBuffer) {
+            if (Math.abs(offsetX) > offsetBuffer || Math.abs(offsetY) > offsetBuffer || getMovingElements(board).length > 0) {
                 throttleRAF(() => {
+                    const activeElementsRectangle = getRectangleByElements(board, activeElements, true);
+                    activeElementsRectangle.x += offsetX;
+                    activeElementsRectangle.y += offsetY;
+                    const reactionManager = new ReactionManager(board, activeElements, activeElementsRectangle);
+                    const ref = reactionManager.handleAlign();
+                    offsetX -= ref.deltaX;
+                    offsetY -= ref.deltaY;
+                    alignG = ref.g;
+                    PlaitBoard.getElementActiveHost(board).append(alignG);
+                    handleTouchTarget(board);
                     const currentElements = activeElements.map(activeElement => {
                         const points = activeElement.points || [];
                         const [x, y] = activeElement.points[0];
@@ -2576,25 +3223,27 @@ function withMoving(board) {
             // 阻止 move 过程中触发画布滚动行为
             event.preventDefault();
         }
-        mousemove(event);
+        pointerMove(event);
     };
-    board.globalMousemove = event => {
+    board.globalPointerMove = (event) => {
         if (startPoint) {
             const inPlaitBoardElement = isInPlaitBoard(board, event.x, event.y);
             if (!inPlaitBoardElement) {
                 cancelMove(board);
             }
         }
-        globalMousemove(event);
+        globalPointerMove(event);
     };
-    board.globalMouseup = event => {
+    board.globalPointerUp = event => {
         isPreventDefault = false;
         if (startPoint) {
             cancelMove(board);
         }
-        globalMouseup(event);
+        preventTouchMove(board, event, false);
+        globalPointerUp(event);
     };
     function cancelMove(board) {
+        alignG?.remove();
         startPoint = null;
         offsetX = 0;
         offsetY = 0;
@@ -2630,10 +3279,10 @@ class PlaitIslandBaseComponent {
     markForCheck() {
         this.cdr.markForCheck();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitIslandBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: PlaitIslandBaseComponent, host: { classAttribute: "plait-island-container" }, ngImport: i0 }); }
 }
-PlaitIslandBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitIslandBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-PlaitIslandBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: PlaitIslandBaseComponent, host: { classAttribute: "plait-island-container" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitIslandBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitIslandBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -2642,16 +3291,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 class PlaitIslandPopoverBaseComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
     initialize(board) {
         this.board = board;
-        const onChange = board.onChange;
-        board.onChange = () => {
-            onChange();
+        const boardComponent = PlaitBoard.getComponent(board);
+        this.subscription = boardComponent.plaitChange.subscribe(() => {
             if (hasOnBoardChange(this)) {
                 this.onBoardChange();
             }
-        };
-        this.onChange = onChange;
+            this.cdr.markForCheck();
+        });
     }
     ngOnInit() {
         if (!this.board) {
@@ -2661,20 +3312,20 @@ class PlaitIslandPopoverBaseComponent {
         this.islandOnInit();
     }
     ngOnDestroy() {
-        this.board.onChange = this.onChange;
+        this.subscription?.unsubscribe();
         this.islandOnDestroy();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitIslandPopoverBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: PlaitIslandPopoverBaseComponent, inputs: { board: "board" }, host: { classAttribute: "plait-island-popover-container" }, ngImport: i0 }); }
 }
-PlaitIslandPopoverBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitIslandPopoverBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-PlaitIslandPopoverBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: PlaitIslandPopoverBaseComponent, inputs: { board: "board" }, host: { classAttribute: "plait-island-popover-container" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitIslandPopoverBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitIslandPopoverBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
                         class: 'plait-island-popover-container'
                     }
                 }]
-        }], propDecorators: { board: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { board: [{
                 type: Input
             }] } });
 const hasOnBoardChange = (value) => {
@@ -2706,9 +3357,14 @@ const withHotkey = (board) => {
                     return false;
                 }
             }, true);
-            Transforms.setSelectionWithTemporaryElements(board, elements);
+            Transforms.addSelectionWithTemporaryElements(board, elements);
             return;
         }
+        const selectedElements = getSelectedElements(board);
+        if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0 && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
+            event.preventDefault();
+            board.deleteFragment(null);
+        }
         keydown(event);
     };
     board.globalKeydown = (event) => {
@@ -2752,10 +3408,10 @@ class PlaitContextService {
     removeUploadingFile(fileEntry) {
         this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitContextService }); }
 }
-PlaitContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PlaitContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitContextService, decorators: [{
             type: Injectable
         }] });
 
@@ -2832,10 +3488,10 @@ class PlaitElementComponent {
     ngOnDestroy() {
         this.board.destroyElement(this.getContext());
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitElementComponent, selector: "plait-element", inputs: { index: "index", element: "element", parent: "parent", board: "board", effect: "effect", parentG: "parentG" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-PlaitElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PlaitElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitElementComponent, selector: "plait-element", inputs: { index: "index", element: "element", parent: "parent", board: "board", effect: "effect", parentG: "parentG" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-element',
@@ -2870,9 +3526,8 @@ class PlaitChildrenElement {
             this.parentG = PlaitBoard.getElementHost(this.board);
         }
     }
-}
-PlaitChildrenElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitChildrenElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PlaitChildrenElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitChildrenElement, selector: "plait-children", inputs: { board: "board", parent: "parent", effect: "effect", parentG: "parentG" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitChildrenElement, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitChildrenElement, selector: "plait-children", inputs: { board: "board", parent: "parent", effect: "effect", parentG: "parentG" }, ngImport: i0, template: `
         <plait-element
             *ngFor="let item of parent.children; let index = index; trackBy: trackBy"
             [index]="index"
@@ -2882,8 +3537,9 @@ PlaitChildrenElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             [effect]="effect"
             [parentG]="parentG"
         ></plait-element>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "parent", "board", "effect", "parentG"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitChildrenElement, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "parent", "board", "effect", "parentG"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitChildrenElement, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-children',
@@ -3116,10 +3772,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')
@@ -3133,7 +3785,7 @@ class PlaitBoardComponent {
             const selectedElements = getSelectedElements(this.board);
             event.preventDefault();
             const rectangle = getRectangleByElements(this.board, selectedElements, false);
-            this.board.setFragment(event.clipboardData, rectangle);
+            this.board.setFragment(event.clipboardData, rectangle, 'copy');
         });
         fromEvent(document, 'paste')
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
@@ -3150,7 +3802,7 @@ class PlaitBoardComponent {
             const selectedElements = getSelectedElements(this.board);
             event.preventDefault();
             const rectangle = getRectangleByElements(this.board, selectedElements, false);
-            this.board.setFragment(event.clipboardData, rectangle);
+            this.board.setFragment(event.clipboardData, rectangle, 'cut');
             this.board.deleteFragment(event.clipboardData);
         });
     }
@@ -3177,7 +3829,9 @@ class PlaitBoardComponent {
             });
         });
         this.ngZone.runOutsideAngular(() => {
-            fromEvent(this.viewportContainer.nativeElement, 'touchmove', { passive: false }).subscribe((event) => {
+            fromEvent(this.viewportContainer.nativeElement, 'touchmove', { passive: false })
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((event) => {
                 if (isPreventTouchMove(this.board)) {
                     event.preventDefault();
                 }
@@ -3222,9 +3876,8 @@ class PlaitBoardComponent {
             this.updateIslands();
         });
     }
-}
-PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, providers: [PlaitContextService], queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, providers: [PlaitContextService], queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
                 <g class="element-host"></g>
@@ -3234,8 +3887,9 @@ PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             <plait-children [board]="board" [effect]="effect"></plait-children>
         </div>
         <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "component", type: PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitBoardComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitBoardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-board',
@@ -3292,11 +3946,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
 
 const COMPONENTS = [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent];
 class PlaitModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: PlaitModule, declarations: [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent], imports: [CommonModule], exports: [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitModule, imports: [CommonModule] }); }
 }
-PlaitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PlaitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, declarations: [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent], imports: [CommonModule], exports: [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent] });
-PlaitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...COMPONENTS],
@@ -3473,5 +4127,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, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createSVG, createSelectionOuterG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getClipboardByKey, getClipboardDataByMedia, getDataFromClipboard, getElementHostBBox, getHitElementOfRoot, getHitElements, getIsRecursionFunc, getMovingElements, 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, isMainPointer, isNullOrUndefined, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setClipboardDataByMedia, setClipboardDataByText, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
+export { A, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLIP_BOARD_FORMAT_KEY, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, X, Y, Z, ZERO, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createFakeEvent, createForeignObject, createG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createSelectionRectangleG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, findElements, getBoardRectangle, getClipboardByKey, getClipboardDataByMedia, getDataFromClipboard, getElementById, getElementHostBBox, getHitElementOfRoot, getHitElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getTemporaryRef, getTextFromClipboard, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isLineHitLine, isMainPointer, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setClipboardDataByMedia, setClipboardDataByText, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateForeignObjectWidth, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map