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

package/fesm2015/plait-core.mjs

@@ -1,3454 +0,0 @@
-import * as i0 from '@angular/core';
-import { Directive, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, ElementRef, Output, HostBinding, ViewChild, ContentChildren, NgModule } from '@angular/core';
-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 { __awaiter } from 'tslib';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-
-// record richtext type status
-const IS_BOARD_CACHE = new WeakMap();
-const FLUSHING = new WeakMap();
-const NODE_TO_INDEX = new WeakMap();
-const NODE_TO_PARENT = new WeakMap();
-const IS_TEXT_EDITABLE = new WeakMap();
-const BOARD_TO_ON_CHANGE = new WeakMap();
-const BOARD_TO_COMPONENT = new WeakMap();
-const BOARD_TO_ROUGH_SVG = new WeakMap();
-const BOARD_TO_HOST = new WeakMap();
-const BOARD_TO_ELEMENT_HOST = new WeakMap();
-const BOARD_TO_SELECTED_ELEMENT = new WeakMap();
-const BOARD_TO_MOVING_POINT_IN_BOARD = new WeakMap();
-const BOARD_TO_MOVING_POINT = new WeakMap();
-const BOARD_TO_VIEWPORT_ORIGINATION = new WeakMap();
-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();
-
-function depthFirstRecursion(node, callback, recursion, isReverse) {
-    if (!recursion || recursion(node)) {
-        let children = [];
-        if (node.children) {
-            children = [...node.children];
-        }
-        children = isReverse ? children.reverse() : children;
-        children.forEach(child => {
-            depthFirstRecursion(child, callback, recursion);
-        });
-    }
-    callback(node);
-}
-const getIsRecursionFunc = (board) => {
-    return (element) => {
-        if (PlaitBoard.isBoard(element) || board.isRecursion(element)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    };
-};
-
-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));
-        }
-        else {
-            calcRectangleClient(element);
-        }
-    });
-    if (boundaryBox.left === Number.MAX_VALUE) {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
-    }
-    return {
-        x: boundaryBox.left,
-        y: boundaryBox.top,
-        width: boundaryBox.right - boundaryBox.left,
-        height: boundaryBox.bottom - boundaryBox.top
-    };
-}
-function getBoardRectangle(board) {
-    return getRectangleByElements(board, board.children, true);
-}
-
-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 ColorfulThemeColor = {
-    mode: ThemeColorMode.colorful,
-    boardBackground: '#ffffff',
-    textColor: '#333333'
-};
-const SoftThemeColor = {
-    mode: ThemeColorMode.soft,
-    boardBackground: '#f5f5f5',
-    textColor: '#333333'
-};
-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
-];
-
-// 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) {
-        var _a;
-        return (_a = BOARD_TO_ELEMENT_HOST.get(board)) === null || _a === void 0 ? void 0 : _a.host;
-    },
-    getElementUpperHost(board) {
-        var _a;
-        return (_a = BOARD_TO_ELEMENT_HOST.get(board)) === null || _a === void 0 ? void 0 : _a.upperHost;
-    },
-    getElementActiveHost(board) {
-        var _a;
-        return (_a = BOARD_TO_ELEMENT_HOST.get(board)) === null || _a === void 0 ? void 0 : _a.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);
-    }
-};
-
-var PlaitPointerType;
-(function (PlaitPointerType) {
-    PlaitPointerType["hand"] = "hand";
-    PlaitPointerType["selection"] = "selection";
-})(PlaitPointerType || (PlaitPointerType = {}));
-
-function isNullOrUndefined(value) {
-    return value === null || value === undefined;
-}
-/**
- * 规范 point
- * @param point
- * @returns point
- */
-function normalizePoint(point) {
-    return Array.isArray(point)
-        ? {
-            x: point[0],
-            y: point[1]
-        }
-        : point;
-}
-
-const Viewport = {
-    isViewport: (value) => {
-        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
-    },
-};
-
-const Path = {
-    /**
-     * Get a list of ancestor paths for a given path.
-     *
-     * The paths are sorted from shallowest to deepest ancestor. However, if the
-     * `reverse: true` option is passed, they are reversed.
-     */
-    ancestors(path, options = {}) {
-        const { reverse = false } = options;
-        let paths = Path.levels(path, options);
-        if (reverse) {
-            paths = paths.slice(1);
-        }
-        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 === null || path === void 0 ? void 0 : 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;
-        });
-    }
-};
-
-const PlaitNode = {
-    parent: (board, path) => {
-        const parentPath = Path.parent(path);
-        const p = PlaitNode.get(board, parentPath);
-        return p;
-    },
-    /**
-     * Return a generator of all the ancestor nodes above a specific path.
-     *
-     * By default the order is top-down, from highest to lowest ancestor in
-     * the tree, but you can pass the `reverse: true` option to go bottom-up.
-     */
-    *parents(root, path, options = {}) {
-        for (const p of Path.ancestors(path, options)) {
-            const n = PlaitNode.get(root, p);
-            yield n;
-        }
-    },
-    get(root, path) {
-        let node = root;
-        for (let i = 0; i < path.length; i++) {
-            const p = path[i];
-            if (!node || !node.children || !node.children[p]) {
-                throw new Error(`Cannot find a descendant at path [${path}]`);
-            }
-            node = node.children[p];
-        }
-        return node;
-    },
-    last(board, path) {
-        let n = PlaitNode.get(board, path);
-        while (n && n.children && n.children.length > 0) {
-            const i = n.children.length - 1;
-            n = n.children[i];
-        }
-        return n;
-    }
-};
-
-const applyToDraft = (board, selection, viewport, theme, op) => {
-    var _a, _b;
-    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.
-            (_a = parent.children) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
-            const truePath = Path.transform(path, op);
-            const newParent = PlaitNode.get(board, Path.parent(truePath));
-            const newIndex = truePath[truePath.length - 1];
-            (_b = newParent.children) === null || _b === void 0 ? void 0 : _b.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 = Object.assign({}, 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 { selection, viewport, theme };
-};
-const GeneralTransforms = {
-    /**
-     * Transform the board by an operation.
-     */
-    transform(board, op) {
-        board.children = createDraft(board.children);
-        let viewport = board.viewport && createDraft(board.viewport);
-        let selection = board.selection && createDraft(board.selection);
-        let theme = board.theme && createDraft(board.theme);
-        try {
-            const state = applyToDraft(board, selection, viewport, theme, op);
-            viewport = state.viewport;
-            selection = state.selection;
-            theme = state.theme;
-        }
-        finally {
-            board.children = finishDraft(board.children);
-            if (selection) {
-                board.selection = isDraft(selection) ? finishDraft(selection) : selection;
-            }
-            else {
-                board.selection = null;
-            }
-            board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
-            board.theme = isDraft(theme) ? finishDraft(theme) : theme;
-        }
-    }
-};
-
-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];
-        }
-    }
-    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
-};
-
-function setSelection(board, selection) {
-    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
-    board.apply(operation);
-}
-const SelectionTransforms = {
-    setSelection,
-    setSelectionWithTemporaryElements
-};
-function setSelectionWithTemporaryElements(board, elements) {
-    setTimeout(() => {
-        BOARD_TO_TEMPORARY_ELEMENTS.set(board, elements);
-        setSelection(board, { ranges: [] });
-    });
-}
-
-function setViewport(board, viewport) {
-    const operation = { type: 'set_viewport', properties: board.viewport, newProperties: viewport };
-    board.apply(operation);
-}
-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;
-
-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 createSVG() {
-    const svg = document.createElementNS(NS, 'svg');
-    return svg;
-}
-function createText(x, y, fill, textContent) {
-    var text = document.createElementNS(NS, 'text');
-    text.setAttribute('x', `${x}`);
-    text.setAttribute('y', `${y}`);
-    text.setAttribute('fill', fill);
-    text.textContent = textContent;
-    return text;
-}
-/**
- * Check if a DOM node is an element node.
- */
-const isDOMElement = (value) => {
-    return isDOMNode(value) && value.nodeType === 1;
-};
-/**
- * Check if a value is a DOM node.
- */
-const isDOMNode = (value) => {
-    return value instanceof window.Node;
-};
-const hasInputOrTextareaTarget = (target) => {
-    if (isDOMElement(target)) {
-        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
-            return true;
-        }
-    }
-    return false;
-};
-const isSecondaryPointer = (event) => {
-    return event.button === POINTER_BUTTON.SECONDARY;
-};
-const isMainPointer = (event) => {
-    return event.button === POINTER_BUTTON.MAIN;
-};
-
-const SELECTION_BORDER_COLOR = '#6698FF';
-const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
-const Selection = {
-    isCollapsed(selection) {
-        if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-};
-
-const 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 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);
-                });
-            }
-        });
-    }
-    return isIntersectionElements;
-};
-const cacheSelectedElements = (board, selectedElements) => {
-    BOARD_TO_SELECTED_ELEMENT.set(board, selectedElements);
-};
-const getSelectedElements = (board) => {
-    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
-};
-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);
-};
-
-function hasBeforeContextChange(value) {
-    if (value.beforeContextChange) {
-        return true;
-    }
-    return false;
-}
-function hasOnContextChanged(value) {
-    if (value.onContextChanged) {
-        return true;
-    }
-    return false;
-}
-
-class PlaitPluginElementComponent {
-    set context(value) {
-        if (hasBeforeContextChange(this)) {
-            this.beforeContextChange(value);
-        }
-        const previousContext = this._context;
-        this._context = value;
-        if (this.element) {
-            ELEMENT_TO_COMPONENT.set(this.element, this);
-        }
-        if (this.initialized) {
-            this.cdr.markForCheck();
-            if (hasOnContextChanged(this)) {
-                this.onContextChanged(value, previousContext);
-            }
-        }
-        else {
-            if (PlaitElement.isRootElement(this.element) && this.element.children) {
-                this.g = createG();
-                this.rootG = createG();
-                this.rootG.append(this.g);
-            }
-            else {
-                this.g = createG();
-            }
-        }
-    }
-    get context() {
-        return this._context;
-    }
-    get element() {
-        return this.context && this.context.element;
-    }
-    get board() {
-        return this.context && this.context.board;
-    }
-    get selected() {
-        return this.context && this.context.selected;
-    }
-    get effect() {
-        return this.context && this.context.effect;
-    }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.initialized = false;
-    }
-    ngOnInit() {
-        if (this.element.type) {
-            (this.rootG || this.g).setAttribute(`plait-${this.element.type}`, 'true');
-        }
-        this.initialized = true;
-    }
-    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();
-    }
-}
-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);
-    });
-    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(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}`);
-    }
-}
-
-const IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
-
-const IS_IOS = typeof navigator !== 'undefined' &&
-    typeof window !== 'undefined' &&
-    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
-    !window.MSStream;
-const IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
-const IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
-const IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent);
-// "modern" Edge was released at 79.x
-const IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
-const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent);
-// Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
-const IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
-
-/**
- * Check whether to merge an operation into the previous operation.
- */
-const shouldMerge = (op, prev) => {
-    if (op.type === 'set_viewport' && op.type === (prev === null || prev === void 0 ? void 0 : prev.type)) {
-        return true;
-    }
-    return false;
-};
-/**
- * Check whether an operation needs to be saved to the history.
- */
-const shouldSave = (op, prev) => {
-    if (op.type === 'set_selection' || op.type === 'set_viewport') {
-        return false;
-    }
-    return true;
-};
-/**
- * Check whether an operation should clear the redos stack.
- */
-const shouldClear = (op) => {
-    if (op.type === 'set_selection') {
-        return false;
-    }
-    return true;
-};
-const PlaitHistoryBoard = {
-    /**
-     * Get the saving flag's current value.
-     */
-    isSaving(board) {
-        return SAVING.get(board);
-    },
-    /**
-     * Get the merge flag's current value.
-     */
-    isMerging(board) {
-        return MERGING.get(board);
-    },
-    /**
-     * Apply a series of changes inside a synchronous `fn`, without merging any of
-     * the new operations into previous save point in the history.
-     */
-    withoutMerging(board, fn) {
-        const prev = PlaitHistoryBoard.isMerging(board);
-        MERGING.set(board, false);
-        fn();
-        MERGING.set(board, prev);
-    },
-    /**
-     * Apply a series of changes inside a synchronous `fn`, without saving any of
-     * their operations into the history.
-     */
-    withoutSaving(board, fn) {
-        const prev = PlaitHistoryBoard.isSaving(board);
-        SAVING.set(board, false);
-        fn();
-        SAVING.set(board, prev);
-    }
-};
-
-/**
- * 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));
-    }
-    return key;
-}
-
-/**
- * drawRoundRectangle
- */
-function drawRoundRectangle(rs, x1, y1, x2, y2, options, outline = false, borderRadius) {
-    const width = Math.abs(x1 - x2);
-    const height = Math.abs(y1 - y2);
-    let radius = borderRadius || 0;
-    if (radius === 0) {
-        const defaultRadius = Math.min(width, height) / 8;
-        let radius = defaultRadius;
-        if (defaultRadius > MAX_RADIUS) {
-            radius = outline ? MAX_RADIUS + 2 : MAX_RADIUS;
-        }
-    }
-    const 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]} `;
-        }
-        else {
-            polylinePath += `L ${point[0]} ${point[1]} `;
-        }
-    });
-    path.setAttribute('d', polylinePath);
-    path.setAttribute('stroke', `${options === null || options === void 0 ? void 0 : options.stroke}`);
-    path.setAttribute('stroke-width', `${options === null || options === void 0 ? void 0 : options.strokeWidth}`);
-    path.setAttribute('fill', `none`);
-    g.appendChild(path);
-    return g;
-}
-function drawBezierPath(points, options) {
-    const g = createG();
-    const path = createPath();
-    let polylinePath = '';
-    for (let i = 0; i < points.length - 3; i += 3) {
-        if (i === 0) {
-            polylinePath += `M ${points[0][0]} ${points[0][1]} `;
-        }
-        else {
-            polylinePath += `C ${points[i + 1][0]} ${points[i + 1][1]}, ${points[i + 2][0]} ${points[i + 2][1]}, ${points[i + 3][0]} ${points[i + 3][1]}`;
-        }
-    }
-    path.setAttribute('d', polylinePath);
-    path.setAttribute('stroke', `${options === null || options === void 0 ? void 0 : options.stroke}`);
-    path.setAttribute('stroke-width', `${options === null || options === void 0 ? void 0 : options.strokeWidth}`);
-    path.setAttribute('fill', `none`);
-    g.appendChild(path);
-    return g;
-}
-
-let timerId = null;
-const throttleRAF = (fn) => {
-    const scheduleFunc = () => {
-        timerId = requestAnimationFrame(() => {
-            timerId = null;
-            fn();
-        });
-    };
-    if (timerId !== null) {
-        cancelAnimationFrame(timerId);
-        timerId = null;
-    }
-    scheduleFunc();
-};
-const debounce = (func, wait, options) => {
-    let timerSubscription = null;
-    return () => {
-        if (timerSubscription && !timerSubscription.closed) {
-            timerSubscription.unsubscribe();
-            timerSubscription = timer(wait).subscribe(() => {
-                func();
-            });
-        }
-        else {
-            if (options === null || options === void 0 ? void 0 : options.leading) {
-                func();
-            }
-            timerSubscription = timer(wait).subscribe();
-        }
-    };
-};
-
-const getMovingElements = (board) => {
-    return BOARD_TO_MOVING_ELEMENT.get(board) || [];
-};
-const addMovingElements = (board, elements) => {
-    const movingElements = getMovingElements(board);
-    const newElements = elements.filter(item => !movingElements.find(movingElement => movingElement.key === item.key));
-    cacheMovingElements(board, [...movingElements, ...newElements]);
-};
-const removeMovingElements = (board) => {
-    BOARD_TO_MOVING_ELEMENT.delete(board);
-};
-const cacheMovingElements = (board, elements) => {
-    BOARD_TO_MOVING_ELEMENT.set(board, elements);
-};
-
-function cloneCSSStyle(nativeNode, clonedNode) {
-    const targetStyle = clonedNode.style;
-    if (!targetStyle) {
-        return;
-    }
-    const sourceStyle = window.getComputedStyle(nativeNode);
-    if (sourceStyle.cssText) {
-        targetStyle.cssText = sourceStyle.cssText;
-        targetStyle.transformOrigin = sourceStyle.transformOrigin;
-    }
-    else {
-        Array.from(sourceStyle).forEach(name => {
-            let value = sourceStyle.getPropertyValue(name);
-            targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
-        });
-    }
-}
-function createCanvas(width, height, fillStyle) {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    canvas.width = width;
-    canvas.height = height;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
-    ctx.strokeStyle = '#ffffff';
-    ctx.fillStyle = fillStyle;
-    ctx.fillRect(0, 0, width, height);
-    return {
-        canvas,
-        ctx
-    };
-}
-function isElementNode(node) {
-    return node.nodeType === Node.ELEMENT_NODE;
-}
-function cloneSvg(board, options) {
-    const elementHostBox = getRectangleByElements(board, board.children, true);
-    const { width, height, x, y } = elementHostBox;
-    const { padding = 4, inlineStyleClassNames } = options;
-    const sourceSvg = PlaitBoard.getHost(board);
-    const cloneSvgElement = sourceSvg.cloneNode(true);
-    cloneSvgElement.style.width = `${width}px`;
-    cloneSvgElement.style.height = `${height}px`;
-    cloneSvgElement.style.backgroundColor = '';
-    cloneSvgElement.setAttribute('width', `${width}`);
-    cloneSvgElement.setAttribute('height', `${height}`);
-    cloneSvgElement.setAttribute('viewBox', [x - padding, y - padding, width + 2 * padding, height + 2 * padding].join(','));
-    if (inlineStyleClassNames) {
-        const sourceNodes = Array.from(sourceSvg.querySelectorAll(inlineStyleClassNames));
-        const cloneNodes = Array.from(cloneSvgElement.querySelectorAll(inlineStyleClassNames));
-        sourceNodes.forEach((node, index) => {
-            const cloneNode = cloneNodes[index];
-            const childElements = Array.from(node.querySelectorAll('*')).filter(isElementNode);
-            const cloneChildElements = Array.from(cloneNode.querySelectorAll('*')).filter(isElementNode);
-            sourceNodes.push(...childElements);
-            cloneNodes.push(...cloneChildElements);
-        });
-        sourceNodes.forEach((node, index) => {
-            const cloneNode = cloneNodes[index];
-            cloneCSSStyle(node, cloneNode);
-        });
-    }
-    return cloneSvgElement;
-}
-function loadImage(src) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve(img);
-        img.onerror = () => reject(new Error('Failed to load image'));
-        img.src = src;
-    });
-}
-function toImage(board, options) {
-    return __awaiter(this, void 0, void 0, function* () {
-        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 = yield loadImage(imgSrc);
-            ctx.drawImage(img, 0, 0, ratioWidth, ratioHeight);
-            const url = canvas.toDataURL('image/png');
-            return url;
-        }
-        catch (error) {
-            console.error('Error converting SVG to image:', error);
-            return undefined;
-        }
-    });
-}
-function downloadImage(url, name) {
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = name;
-    a.click();
-    a.remove();
-}
-
-const 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 === null || data === void 0 ? void 0 : data.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
-};
-const setClipboardDataByText = (data, text) => {
-    const pluginContextResult = getTextFromClipboard(data);
-    data === null || data === void 0 ? void 0 : data.setData(`text/plain`, text + '\n' + pluginContextResult);
-};
-const setClipboardDataByMedia = (data, media, key) => {
-    const stringObj = JSON.stringify(media);
-    const encoded = window.btoa(encodeURIComponent(stringObj));
-    data === null || data === void 0 ? void 0 : data.setData(getClipboardByKey(key), encoded);
-};
-const getDataFromClipboard = (data) => {
-    const encoded = data === null || data === void 0 ? void 0 : data.getData(`application/${CLIP_BOARD_FORMAT_KEY}`);
-    let nodesData = [];
-    if (encoded) {
-        const decoded = decodeURIComponent(window.atob(encoded));
-        nodesData = JSON.parse(decoded);
-    }
-    return nodesData;
-};
-const getTextFromClipboard = (data) => {
-    return (data ? data.getData(`text/plain`) : '');
-};
-const getClipboardDataByMedia = (data, key) => {
-    const encoded = data === null || data === void 0 ? void 0 : data.getData(getClipboardByKey(key));
-    let imageItem = null;
-    if (encoded) {
-        const decoded = decodeURIComponent(window.atob(encoded));
-        imageItem = JSON.parse(decoded);
-    }
-    return imageItem;
-};
-
-const isPreventTouchMove = (board) => {
-    return !!IS_PREVENT_TOUCH_MOVE.get(board);
-};
-const preventTouchMove = (board, state) => {
-    IS_PREVENT_TOUCH_MOVE.set(board, state);
-};
-
-const PlaitElement = {
-    isRootElement(value) {
-        const parent = NODE_TO_PARENT.get(value);
-        if (parent && PlaitBoard.isBoard(parent)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    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;
-        }
-    },
-    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 isSetViewportOperation = (value) => {
-    return value.type === 'set_viewport';
-};
-const inverse = (op) => {
-    switch (op.type) {
-        case 'insert_node': {
-            return Object.assign(Object.assign({}, op), { type: 'remove_node' });
-        }
-        case 'remove_node': {
-            return Object.assign(Object.assign({}, op), { type: 'insert_node' });
-        }
-        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 Object.assign(Object.assign({}, op), { path: inversePath, newPath: inverseNewPath });
-        }
-        case 'set_node': {
-            const { properties, newProperties } = op;
-            return Object.assign(Object.assign({}, op), { properties: newProperties, newProperties: properties });
-        }
-        case 'set_selection': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return Object.assign(Object.assign({}, op), { properties: newProperties, newProperties: null });
-            }
-            else if (newProperties == null) {
-                return Object.assign(Object.assign({}, op), { properties: null, newProperties: properties });
-            }
-            else {
-                return Object.assign(Object.assign({}, op), { properties: newProperties, newProperties: properties });
-            }
-        }
-        case 'set_viewport': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return Object.assign(Object.assign({}, op), { properties: newProperties, newProperties: newProperties });
-            }
-            else if (newProperties == null) {
-                return Object.assign(Object.assign({}, op), { properties: properties, newProperties: properties });
-            }
-            else {
-                return Object.assign(Object.assign({}, op), { properties: newProperties, newProperties: properties });
-            }
-        }
-        case 'set_theme': {
-            const { properties, newProperties } = op;
-            return Object.assign(Object.assign({}, 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
-    };
-}
-function getElementHostBBox(board, zoom) {
-    const childrenRect = getRectangleByElements(board, board.children, true);
-    const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-    const containerWidth = viewportContainerRect.width / zoom;
-    const containerHeight = viewportContainerRect.height / zoom;
-    let left;
-    let right;
-    let top;
-    let bottom;
-    if (childrenRect.width < containerWidth) {
-        const centerX = childrenRect.x + childrenRect.width / 2;
-        const halfContainerWidth = containerWidth / 2;
-        left = centerX - halfContainerWidth;
-        right = centerX + halfContainerWidth;
-    }
-    else {
-        left = childrenRect.x;
-        right = childrenRect.x + childrenRect.width;
-    }
-    if (childrenRect.height < containerHeight) {
-        const centerY = childrenRect.y + childrenRect.height / 2;
-        const halfContainerHeight = containerHeight / 2;
-        top = centerY - halfContainerHeight;
-        bottom = centerY + halfContainerHeight;
-    }
-    else {
-        top = childrenRect.y;
-        bottom = childrenRect.y + childrenRect.height;
-    }
-    return {
-        left,
-        right,
-        top,
-        bottom
-    };
-}
-/**
- * 验证缩放比是否符合限制，如果超出限制，则返回合适的缩放比
- * @param zoom 缩放比
- * @param minZoom 最小缩放比
- * @param maxZoom 最大缩放比
- * @returns 正确的缩放比
- */
-function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
-    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
-}
-function getViewBox(board, zoom) {
-    const boardContainerRectangle = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-    const elementHostBBox = getElementHostBBox(board, zoom);
-    const horizontalPadding = boardContainerRectangle.width / 2;
-    const verticalPadding = boardContainerRectangle.height / 2;
-    const viewBox = [
-        elementHostBBox.left - horizontalPadding / zoom,
-        elementHostBBox.top - verticalPadding / zoom,
-        elementHostBBox.right - elementHostBBox.left + (horizontalPadding * 2) / zoom,
-        elementHostBBox.bottom - elementHostBBox.top + (verticalPadding * 2) / zoom
-    ];
-    return viewBox;
-}
-function getViewBoxCenterPoint(board) {
-    const childrenRectangle = getRectangleByElements(board, board.children, true);
-    return [childrenRectangle.x + childrenRectangle.width / 2, childrenRectangle.y + childrenRectangle.height / 2];
-}
-function setSVGViewBox(board, viewBox) {
-    const zoom = board.viewport.zoom;
-    const hostElement = PlaitBoard.getHost(board);
-    hostElement.style.display = 'block';
-    hostElement.style.width = `${viewBox[2] * zoom}px`;
-    hostElement.style.height = `${viewBox[3] * zoom}px`;
-    if (viewBox && viewBox[2] > 0 && viewBox[3] > 0) {
-        hostElement.setAttribute('viewBox', viewBox.join(' '));
-    }
-}
-function updateViewportOffset(board) {
-    const origination = getViewportOrigination(board);
-    if (!origination)
-        return;
-    const { zoom } = board.viewport;
-    const viewBox = getViewBox(board, zoom);
-    const scrollLeft = (origination[0] - viewBox[0]) * zoom;
-    const scrollTop = (origination[1] - viewBox[1]) * zoom;
-    updateViewportContainerScroll(board, scrollLeft, scrollTop);
-}
-function updateViewportContainerScroll(board, left, top, isFromViewportChange = true) {
-    const viewportContainer = PlaitBoard.getViewportContainer(board);
-    if (viewportContainer.scrollLeft !== left || viewportContainer.scrollTop !== top) {
-        viewportContainer.scrollLeft = left;
-        viewportContainer.scrollTop = top;
-        isFromViewportChange && setIsFromViewportChange(board, true);
-    }
-}
-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) {
-    var _a;
-    if (!((_a = board.viewport) === null || _a === void 0 ? void 0 : _a.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);
-};
-const clearViewportOrigination = (board) => {
-    BOARD_TO_VIEWPORT_ORIGINATION.delete(board);
-};
-const getViewportOrigination = (board) => {
-    const origination = BOARD_TO_VIEWPORT_ORIGINATION.get(board);
-    if (origination) {
-        return origination;
-    }
-    else {
-        return board.viewport.origination;
-    }
-};
-const isFromScrolling = (board) => {
-    return !!IS_FROM_SCROLLING.get(board);
-};
-const setIsFromScrolling = (board, state) => {
-    IS_FROM_SCROLLING.set(board, state);
-};
-const isFromViewportChange = (board) => {
-    return !!IS_FROM_VIEWPORT_CHANGE.get(board);
-};
-const setIsFromViewportChange = (board, state) => {
-    IS_FROM_VIEWPORT_CHANGE.set(board, state);
-};
-function scrollToRectangle(board, client) { }
-
-function setTheme(board, themeColorMode) {
-    const operation = { type: 'set_theme', properties: board.theme, newProperties: themeColorMode };
-    board.apply(operation);
-}
-const ViewportTransforms = {
-    setTheme
-};
-
-function updateViewport(board, origination, zoom) {
-    zoom = zoom !== null && zoom !== void 0 ? zoom : board.viewport.zoom;
-    setViewport(board, Object.assign(Object.assign({}, board.viewport), { zoom,
-        origination }));
-    clearViewportOrigination(board);
-}
-const updatePointerType = (board, pointer) => {
-    board.pointer = pointer;
-    const boardComponent = BOARD_TO_COMPONENT.get(board);
-    boardComponent === null || boardComponent === void 0 ? void 0 : boardComponent.markForCheck();
-};
-function updateZoom(board, newZoom, isCenter = true) {
-    newZoom = clampZoomLevel(newZoom);
-    const mousePoint = PlaitBoard.getMovingPointInBoard(board);
-    const nativeElement = PlaitBoard.getBoardContainer(board);
-    const nativeElementRect = nativeElement.getBoundingClientRect();
-    const boardContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-    let focusPoint = [boardContainerRect.width / 2, boardContainerRect.height / 2];
-    if (!isCenter && mousePoint && distanceBetweenPointAndRectangle(mousePoint[0], mousePoint[1], nativeElementRect) === 0) {
-        focusPoint = toPoint(mousePoint[0], mousePoint[1], nativeElement);
-    }
-    const zoom = board.viewport.zoom;
-    const origination = getViewportOrigination(board);
-    const centerX = origination[0] + focusPoint[0] / zoom;
-    const centerY = origination[1] + focusPoint[1] / zoom;
-    const newOrigination = [centerX - focusPoint[0] / newZoom, centerY - focusPoint[1] / newZoom];
-    updateViewport(board, newOrigination, newZoom);
-}
-function fitViewport(board) {
-    let scrollBarWidth = getRealScrollBarWidth(board);
-    const boardContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-    const elementHostBox = getRectangleByElements(board, board.children, true);
-    const zoom = board.viewport.zoom;
-    const autoFitPadding = 16;
-    const viewportWidth = boardContainerRect.width - 2 * autoFitPadding;
-    const viewportHeight = boardContainerRect.height - 2 * autoFitPadding;
-    let newZoom = zoom;
-    if (viewportWidth < elementHostBox.width || viewportHeight < elementHostBox.height) {
-        newZoom = Math.min(viewportWidth / elementHostBox.width, viewportHeight / elementHostBox.height);
-    }
-    else {
-        newZoom = 1;
-    }
-    const centerPoint = getViewBoxCenterPoint(board);
-    const newOrigination = [
-        centerPoint[0] - boardContainerRect.width / 2 / newZoom + scrollBarWidth / 2 / zoom,
-        centerPoint[1] - boardContainerRect.height / 2 / newZoom + scrollBarWidth / 2 / zoom
-    ];
-    updateViewport(board, newOrigination, newZoom);
-}
-function fitViewportWidth(board, options) {
-    let scrollBarWidth = getRealScrollBarWidth(board);
-    const boardContainer = PlaitBoard.getBoardContainer(board);
-    const boardContainerRectangle = boardContainer.getBoundingClientRect();
-    let finalWidth = 0;
-    if (options.maxWidth) {
-        finalWidth = options.maxWidth;
-    }
-    else {
-        finalWidth = boardContainerRectangle.width;
-    }
-    const elementHostBox = getRectangleByElements(board, board.children, true);
-    const contentWidth = finalWidth - 2 * options.autoFitPadding;
-    let newZoom = 0;
-    if (contentWidth < elementHostBox.width) {
-        newZoom = Math.min(contentWidth / elementHostBox.width);
-    }
-    else {
-        newZoom = 1;
-    }
-    let finalHeight = elementHostBox.height * newZoom + 2 * options.autoFitPadding;
-    if (finalHeight > options.limitHeight) {
-        const containerEl = boardContainer.closest(`.${options.containerClass}`);
-        containerEl.style.height = `${finalHeight}px`;
-        initializeViewportContainer(board);
-    }
-    else {
-        finalHeight = options.limitHeight;
-    }
-    const centerX = elementHostBox.x + elementHostBox.width / 2;
-    const centerY = elementHostBox.y + elementHostBox.height / 2;
-    const newOrigination = [
-        centerX - finalWidth / 2 / newZoom + scrollBarWidth / 2 / newZoom,
-        centerY - finalHeight / 2 / newZoom + scrollBarWidth / 2 / newZoom
-    ];
-    updateViewport(board, newOrigination, newZoom);
-}
-/**
- * apply theme to every element (remove element custom properties)
- * invoke applyThemeColor
- */
-function updateThemeColor(board, mode) {
-    mode = mode !== null && mode !== void 0 ? mode : board.theme.themeColorMode;
-    setTheme(board, { themeColorMode: mode });
-    depthFirstRecursion(board, element => {
-        board.applyTheme(element);
-    });
-}
-const BoardTransforms = {
-    updatePointerType,
-    updateViewport,
-    fitViewport,
-    updateZoom,
-    updateThemeColor,
-    fitViewportWidth
-};
-
-const Transforms = Object.assign(Object.assign(Object.assign(Object.assign({}, GeneralTransforms), ViewportTransforms$1), SelectionTransforms), NodeTransforms);
-
-const PathRef = {
-    transform(ref, op) {
-        const { current } = ref;
-        if (current == null) {
-            return;
-        }
-        const path = Path.transform(current, op);
-        ref.current = path;
-        if (path == null) {
-            ref.unref();
-        }
-    }
-};
-
-function createBoard(children, options) {
-    const board = {
-        viewport: {
-            zoom: 1
-        },
-        children,
-        theme: { themeColorMode: ThemeColorMode.default },
-        operations: [],
-        history: {
-            redos: [],
-            undos: []
-        },
-        selection: null,
-        options: options || {
-            readonly: false,
-            hideScrollbar: false,
-            disabledScrollOnNonFocus: false
-        },
-        pointer: (options === null || options === void 0 ? void 0 : options.readonly) ? PlaitPointerType.hand : PlaitPointerType.selection,
-        undo: () => { },
-        redo: () => { },
-        apply: (operation) => {
-            for (const ref of board.pathRefs()) {
-                PathRef.transform(ref, operation);
-            }
-            board.operations.push(operation);
-            Transforms.transform(board, operation);
-            if (!FLUSHING.get(board)) {
-                FLUSHING.set(board, true);
-                Promise.resolve().then(() => {
-                    FLUSHING.set(board, false);
-                    board.onChange();
-                    board.operations = [];
-                });
-            }
-        },
-        pathRef: (path, options) => {
-            const affinity = (options === null || options === void 0 ? void 0 : options.affinity) || 'forward';
-            const ref = {
-                current: path,
-                affinity,
-                unref() {
-                    const { current } = ref;
-                    const pathRefs = board.pathRefs();
-                    pathRefs.delete(ref);
-                    ref.current = null;
-                    return current;
-                }
-            };
-            const refs = board.pathRefs();
-            refs.add(ref);
-            return ref;
-        },
-        pathRefs: () => {
-            let refs = PATH_REFS.get(board);
-            if (!refs) {
-                refs = new Set();
-                PATH_REFS.set(board, refs);
-            }
-            return refs;
-        },
-        onChange: () => { },
-        mousedown: (event) => { },
-        mousemove: (event) => { },
-        mouseleave: (event) => { },
-        globalMousemove: (event) => { },
-        mouseup: (event) => { },
-        globalMouseup: (event) => { },
-        keydown: (event) => { },
-        globalKeydown: (event) => { },
-        keyup: (event) => { },
-        dblclick: (event) => { },
-        setFragment: (data) => { },
-        insertFragment: (data) => { },
-        deleteFragment: (data) => { },
-        drawElement: (context) => [],
-        redrawElement: (context, previousContext) => { },
-        destroyElement: (context) => { },
-        isWithinSelection: element => false,
-        isHitSelection: element => false,
-        isRecursion: element => true,
-        isMovable: element => false,
-        getRectangle: element => null,
-        applyTheme: (element) => { },
-        pointerDown: (pointer) => { },
-        pointerMove: (pointer) => { },
-        pointerUp: (pointer) => { },
-        pointerCancel: (pointer) => { },
-        pointerOut: (pointer) => { },
-        pointerLeave: (pointer) => { },
-        globalPointerMove: (pointer) => { },
-        globalPointerUp: (pointer) => { },
-    };
-    return board;
-}
-
-function withBoard(board) {
-    const { onChange } = board;
-    board.onChange = () => {
-        const onContextChange = BOARD_TO_ON_CHANGE.get(board);
-        if (onContextChange) {
-            onContextChange();
-        }
-        onChange();
-    };
-    return board;
-}
-
-function withHistory(board) {
-    const { apply, keydown } = board;
-    board.history = { undos: [], redos: [] };
-    board.redo = () => {
-        const { history } = board;
-        const { redos } = history;
-        if (redos.length > 0) {
-            const batch = redos[redos.length - 1];
-            PlaitHistoryBoard.withoutSaving(board, () => {
-                for (const op of batch) {
-                    board.apply(op);
-                }
-            });
-            history.redos.pop();
-            history.undos.push(batch);
-        }
-    };
-    board.undo = () => {
-        const { history } = board;
-        const { undos } = history;
-        if (undos.length > 0) {
-            const batch = undos[undos.length - 1];
-            PlaitHistoryBoard.withoutSaving(board, () => {
-                const inverseOps = batch.map(PlaitOperation.inverse).reverse();
-                for (const op of inverseOps) {
-                    board.apply(op);
-                }
-            });
-            history.redos.push(batch);
-            history.undos.pop();
-        }
-    };
-    board.apply = (op) => {
-        const { operations, history } = board;
-        const { undos } = history;
-        const lastBatch = undos[undos.length - 1];
-        const lastOp = lastBatch && lastBatch[lastBatch.length - 1];
-        let save = PlaitHistoryBoard.isSaving(board);
-        let merge = PlaitHistoryBoard.isMerging(board);
-        if (save == null) {
-            save = shouldSave(op, lastOp);
-        }
-        if (save) {
-            if (!merge) {
-                if (lastBatch == null) {
-                    merge = false;
-                }
-                else if (operations.length !== 0) {
-                    merge = true;
-                }
-                else {
-                    merge = shouldMerge(op, lastOp);
-                }
-            }
-            if (lastBatch && merge) {
-                lastBatch.push(op);
-            }
-            else {
-                const batch = [op];
-                undos.push(batch);
-            }
-            while (undos.length > 100) {
-                undos.shift();
-            }
-            if (shouldClear(op)) {
-                history.redos = [];
-            }
-        }
-        apply(op);
-    };
-    board.keydown = (event) => {
-        if (isHotkey('mod+z', event)) {
-            board.undo();
-            return;
-        }
-        if (isHotkey('mod+shift+z', event)) {
-            board.redo();
-            return;
-        }
-        keydown(event);
-    };
-    return board;
-}
-
-function withHandPointer(board) {
-    const { mousedown, mousemove, globalMouseup, keydown, keyup } = board;
-    let isMoving = false;
-    const plaitBoardMove = {
-        x: 0,
-        y: 0
-    };
-    board.mousedown = (event) => {
-        if (PlaitBoard.isPointer(board, PlaitPointerType.hand) && isMainPointer(event)) {
-            isMoving = true;
-            PlaitBoard.getBoardContainer(board).classList.add('viewport-moving');
-            plaitBoardMove.x = event.x;
-            plaitBoardMove.y = event.y;
-        }
-        mousedown(event);
-    };
-    board.mousemove = (event) => {
-        if (PlaitBoard.isPointer(board, PlaitPointerType.hand) && board.selection && isMoving) {
-            const viewportContainer = PlaitBoard.getViewportContainer(board);
-            const left = viewportContainer.scrollLeft - (event.x - plaitBoardMove.x);
-            const top = viewportContainer.scrollTop - (event.y - plaitBoardMove.y);
-            updateViewportContainerScroll(board, left, top, false);
-            plaitBoardMove.x = event.x;
-            plaitBoardMove.y = event.y;
-        }
-        mousemove(event);
-    };
-    board.globalMouseup = (event) => {
-        if (board.selection) {
-            isMoving = false;
-            PlaitBoard.getBoardContainer(board).classList.remove('viewport-moving');
-            plaitBoardMove.x = 0;
-            plaitBoardMove.y = 0;
-        }
-        globalMouseup(event);
-    };
-    board.keydown = (event) => {
-        if (event.code === 'Space') {
-            if (!PlaitBoard.isPointer(board, PlaitPointerType.hand)) {
-                BoardTransforms.updatePointerType(board, PlaitPointerType.hand);
-            }
-            event.preventDefault();
-        }
-        keydown(event);
-    };
-    board.keyup = (event) => {
-        if (!board.options.readonly && event.code === 'Space') {
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-        }
-        keyup(event);
-    };
-    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 === null || selectionMovingG === void 0 ? void 0 : 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 === null || selectionMovingG === void 0 ? void 0 : 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 === null || selectionOuterG === void 0 ? void 0 : 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 === null || selectionOuterG === void 0 ? void 0 : 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 === null || selectionOuterG === void 0 ? void 0 : selectionOuterG.remove();
-                                selectionOuterG = createSelectionOuterG(board, currentSelectedElements);
-                                selectionOuterG.classList.add('selection-outer');
-                                PlaitBoard.getHost(board).append(selectionOuterG);
-                            }
-                        }
-                        else {
-                            selectionOuterG === null || selectionOuterG === void 0 ? void 0 : 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(() => {
-        initializeViewBox(board);
-        updateViewportOffset(board);
-    }, 500, { leading: true });
-    board.onChange = () => {
-        const isSetViewport = board.operations.some(op => op.type === 'set_viewport');
-        const isOnlySetSelection = board.operations.some(op => op.type === 'set_selection');
-        if (isOnlySetSelection) {
-            return onChange();
-        }
-        if (isSetViewport && isFromScrolling(board)) {
-            setIsFromScrolling(board, false);
-            return onChange();
-        }
-        if (isSetViewport) {
-            initializeViewBox(board);
-            updateViewportOffset(board);
-        }
-        else {
-            throttleUpdate();
-        }
-        onChange();
-    };
-    return board;
-}
-
-function withMoving(board) {
-    const { mousedown, mousemove, globalMouseup, globalMousemove } = board;
-    let offsetX = 0;
-    let offsetY = 0;
-    let isPreventDefault = false;
-    let startPoint;
-    let activeElements = [];
-    board.mousedown = 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) {
-            startPoint = point;
-            const selectedRootElements = getSelectedElements(board).filter(item => movableElements.includes(item));
-            const hitElement = getHitElementOfRoot(board, movableElements, range);
-            if (hitElement && selectedRootElements.includes(hitElement)) {
-                activeElements = selectedRootElements;
-            }
-            else if (hitElement) {
-                activeElements = [hitElement];
-            }
-        }
-        mousedown(event);
-    };
-    board.mousemove = event => {
-        if (startPoint && activeElements.length && !PlaitBoard.hasBeenTextEditing(board)) {
-            if (!isPreventDefault) {
-                isPreventDefault = true;
-            }
-            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) {
-                throttleRAF(() => {
-                    const currentElements = activeElements.map(activeElement => {
-                        const points = activeElement.points || [];
-                        const [x, y] = activeElement.points[0];
-                        const newPoints = points.map(p => [p[0] + offsetX, p[1] + offsetY]);
-                        const index = board.children.findIndex(item => item.id === activeElement.id);
-                        Transforms.setNode(board, {
-                            points: newPoints
-                        }, [index]);
-                        MERGING.set(board, true);
-                        return PlaitNode.get(board, [index]);
-                    });
-                    PlaitBoard.getBoardContainer(board).classList.add('element-moving');
-                    addMovingElements(board, currentElements);
-                });
-            }
-        }
-        if (isPreventDefault) {
-            // 阻止 move 过程中触发画布滚动行为
-            event.preventDefault();
-        }
-        mousemove(event);
-    };
-    board.globalMousemove = event => {
-        if (startPoint) {
-            const inPlaitBoardElement = isInPlaitBoard(board, event.x, event.y);
-            if (!inPlaitBoardElement) {
-                cancelMove(board);
-            }
-        }
-        globalMousemove(event);
-    };
-    board.globalMouseup = event => {
-        isPreventDefault = false;
-        if (startPoint) {
-            cancelMove(board);
-        }
-        globalMouseup(event);
-    };
-    function cancelMove(board) {
-        startPoint = null;
-        offsetX = 0;
-        offsetY = 0;
-        activeElements = [];
-        removeMovingElements(board);
-        MERGING.set(board, false);
-        PlaitBoard.getBoardContainer(board).classList.remove('element-moving');
-    }
-    return board;
-}
-
-const withOptions = (board) => {
-    const pluginOptions = new Map();
-    const newBoard = board;
-    newBoard.getPluginOptions = key => {
-        return pluginOptions.get(key);
-    };
-    newBoard.setPluginOptions = (key, options) => {
-        const oldOptions = newBoard.getPluginOptions(key) || {};
-        pluginOptions.set(key, Object.assign(Object.assign({}, oldOptions), options));
-    };
-    return newBoard;
-};
-
-class PlaitIslandBaseComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
-    initialize(board) {
-        this.board = board;
-        this.markForCheck();
-    }
-    markForCheck() {
-        this.cdr.markForCheck();
-    }
-}
-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: [{
-            type: Directive,
-            args: [{
-                    host: {
-                        class: 'plait-island-container'
-                    }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
-class PlaitIslandPopoverBaseComponent {
-    initialize(board) {
-        this.board = board;
-        const onChange = board.onChange;
-        board.onChange = () => {
-            onChange();
-            if (hasOnBoardChange(this)) {
-                this.onBoardChange();
-            }
-        };
-        this.onChange = onChange;
-    }
-    ngOnInit() {
-        if (!this.board) {
-            throw new Error('can not find board instance');
-        }
-        this.initialize(this.board);
-        this.islandOnInit();
-    }
-    ngOnDestroy() {
-        this.board.onChange = this.onChange;
-        this.islandOnDestroy();
-    }
-}
-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: [{
-            type: Directive,
-            args: [{
-                    host: {
-                        class: 'plait-island-popover-container'
-                    }
-                }]
-        }], propDecorators: { board: [{
-                type: Input
-            }] } });
-const hasOnBoardChange = (value) => {
-    if (value.onBoardChange) {
-        return true;
-    }
-    else {
-        return false;
-    }
-};
-
-const withHotkey = (board) => {
-    const { keydown, globalKeydown } = board;
-    board.keydown = (event) => {
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (!PlaitBoard.isReadonly(board) && options.isMultiple && isHotkey('mod+a', event)) {
-            event.preventDefault();
-            let elements = [];
-            depthFirstRecursion(board, node => {
-                if (PlaitBoard.isBoard(node)) {
-                    return;
-                }
-                elements.push(node);
-            }, node => {
-                if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
-                    return true;
-                }
-                else {
-                    return false;
-                }
-            }, true);
-            Transforms.setSelectionWithTemporaryElements(board, elements);
-            return;
-        }
-        keydown(event);
-    };
-    board.globalKeydown = (event) => {
-        if (PlaitBoard.getMovingPointInBoard(board) || PlaitBoard.isMovingPointInBoard(board)) {
-            if (isHotkey(['mod+=', 'mod++'], { byKey: true })(event)) {
-                event.preventDefault();
-                BoardTransforms.updateZoom(board, board.viewport.zoom + 0.1, false);
-                return;
-            }
-            if (isHotkey(['mod+shift+=', 'mod+shift++'], { byKey: true })(event)) {
-                event.preventDefault();
-                BoardTransforms.fitViewport(board);
-                return;
-            }
-            if (isHotkey(['mod+-', 'mod+shift+-'])(event)) {
-                event.preventDefault();
-                BoardTransforms.updateZoom(board, board.viewport.zoom - 0.1);
-                return;
-            }
-            if (isHotkey(['mod+0', 'mod+shift+0'], { byKey: true })(event)) {
-                event.preventDefault();
-                BoardTransforms.updateZoom(board, 1);
-                return;
-            }
-        }
-        globalKeydown(event);
-    };
-    return board;
-};
-
-class PlaitContextService {
-    constructor() {
-        this.uploadingFiles = [];
-    }
-    getUploadingFile(url) {
-        return this.uploadingFiles.find(file => file.url === url);
-    }
-    setUploadingFile(file) {
-        return this.uploadingFiles.push(file);
-    }
-    removeUploadingFile(fileEntry) {
-        this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
-    }
-}
-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: [{
-            type: Injectable
-        }] });
-
-class PlaitElementComponent {
-    constructor(renderer2, viewContainerRef) {
-        this.renderer2 = renderer2;
-        this.viewContainerRef = viewContainerRef;
-        this.initialized = false;
-    }
-    ngOnInit() {
-        this.initialize();
-        this.drawElement();
-    }
-    initialize() {
-        NODE_TO_INDEX.set(this.element, this.index);
-        NODE_TO_PARENT.set(this.element, this.parent);
-        this.initialized = true;
-    }
-    drawElement() {
-        const context = this.getContext();
-        const result = this.board.drawElement(context);
-        if (Array.isArray(result)) {
-        }
-        else {
-            const componentRef = this.viewContainerRef.createComponent(result);
-            const instance = componentRef.instance;
-            instance.context = context;
-            this.insertG(instance.rootG ? instance.rootG : instance.g);
-            this.instance = instance;
-        }
-    }
-    insertG(g) {
-        if (PlaitBoard.isBoard(this.parent)) {
-            this.parentG.append(g);
-        }
-        else {
-            let siblingG = PlaitElement.getComponent(this.parent).g;
-            if (this.index > 0) {
-                const brotherElement = this.parent.children[this.index - 1];
-                const lastElement = PlaitNode.last(this.board, PlaitBoard.findPath(this.board, brotherElement));
-                let component = PlaitElement.getComponent(lastElement) || PlaitElement.getComponent(brotherElement);
-                siblingG = component.g;
-            }
-            this.parentG.insertBefore(g, siblingG);
-        }
-    }
-    ngOnChanges(simpleChanges) {
-        if (this.initialized) {
-            NODE_TO_INDEX.set(this.element, this.index);
-            NODE_TO_PARENT.set(this.element, this.parent);
-            const elementChanged = simpleChanges['element'];
-            const context = this.getContext();
-            if (elementChanged && isSelectedElement(this.board, elementChanged.previousValue)) {
-                context.selected = true;
-                removeSelectedElement(this.board, elementChanged.previousValue);
-                addSelectedElement(this.board, this.element);
-            }
-            if (this.instance) {
-                this.instance.context = context;
-            }
-        }
-    }
-    getContext() {
-        const isSelected = isSelectedElement(this.board, this.element);
-        const context = {
-            element: this.element,
-            parent: this.parent,
-            board: this.board,
-            selected: isSelected,
-            effect: this.effect
-        };
-        return context;
-    }
-    ngOnDestroy() {
-        this.board.destroyElement(this.getContext());
-    }
-}
-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: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-element',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }]; }, propDecorators: { index: [{
-                type: Input
-            }], element: [{
-                type: Input
-            }], parent: [{
-                type: Input
-            }], board: [{
-                type: Input
-            }], effect: [{
-                type: Input
-            }], parentG: [{
-                type: Input
-            }] } });
-
-class PlaitChildrenElement {
-    constructor() {
-        this.trackBy = (index, element) => {
-            return element.id;
-        };
-    }
-    ngOnInit() {
-        if (!this.parent) {
-            this.parent = this.board;
-        }
-        if (!this.parentG) {
-            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: `
-        <plait-element
-            *ngFor="let item of parent.children; let index = index; trackBy: trackBy"
-            [index]="index"
-            [element]="item"
-            [parent]="parent"
-            [board]="board"
-            [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: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-children',
-                    template: `
-        <plait-element
-            *ngFor="let item of parent.children; let index = index; trackBy: trackBy"
-            [index]="index"
-            [element]="item"
-            [parent]="parent"
-            [board]="board"
-            [effect]="effect"
-            [parentG]="parentG"
-        ></plait-element>
-    `
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { board: [{
-                type: Input
-            }], parent: [{
-                type: Input
-            }], effect: [{
-                type: Input
-            }], parentG: [{
-                type: Input
-            }] } });
-
-const ElementHostClass = 'element-host';
-const ElementUpperHostClass = 'element-upper-host';
-const ElementActiveHostClass = 'element-active-host';
-class PlaitBoardComponent {
-    get host() {
-        return this.svg.nativeElement;
-    }
-    get hostClass() {
-        return `${HOST_CLASS_NAME} pointer-${this.board.pointer} theme-${this.board.theme.themeColorMode} ${this.getBrowserClassName()}`;
-    }
-    getBrowserClassName() {
-        if (IS_SAFARI) {
-            return 'safari';
-        }
-        if (IS_CHROME) {
-            return 'chrome';
-        }
-        if (IS_FIREFOX) {
-            return 'firefox';
-        }
-        return '';
-    }
-    get readonly() {
-        return this.board.options.readonly;
-    }
-    get isFocused() {
-        return PlaitBoard.isFocus(this.board);
-    }
-    get disabledScrollOnNonFocus() {
-        return this.board.options.disabledScrollOnNonFocus && !PlaitBoard.isFocus(this.board);
-    }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    constructor(cdr, viewContainerRef, elementRef, ngZone) {
-        this.cdr = cdr;
-        this.viewContainerRef = viewContainerRef;
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.hasInitialized = false;
-        this.effect = {};
-        this.destroy$ = new Subject();
-        this.plaitValue = [];
-        this.plaitPlugins = [];
-        this.plaitChange = new EventEmitter();
-        this.plaitBoardInitialized = new EventEmitter();
-        this.trackBy = (index, element) => {
-            return element.id;
-        };
-    }
-    ngOnInit() {
-        const elementHost = this.host.querySelector(`.${ElementHostClass}`);
-        const elementUpperHost = this.host.querySelector(`.${ElementUpperHostClass}`);
-        const elementActiveHost = this.host.querySelector(`.${ElementActiveHostClass}`);
-        const roughSVG = rough.svg(this.host, {
-            options: { roughness: 0, strokeWidth: 1 }
-        });
-        this.roughSVG = roughSVG;
-        this.initializePlugins();
-        this.ngZone.runOutsideAngular(() => {
-            this.initializeHookListener();
-            this.viewportScrollListener();
-            this.elementResizeListener();
-            fromEvent(document, 'mouseleave')
-                .pipe(takeUntil(this.destroy$))
-                .subscribe((event) => {
-                BOARD_TO_MOVING_POINT.delete(this.board);
-            });
-        });
-        BOARD_TO_COMPONENT.set(this.board, this);
-        BOARD_TO_ROUGH_SVG.set(this.board, roughSVG);
-        BOARD_TO_HOST.set(this.board, this.host);
-        BOARD_TO_ELEMENT_HOST.set(this.board, {
-            host: elementHost,
-            upperHost: elementUpperHost,
-            activeHost: elementActiveHost
-        });
-        BOARD_TO_ON_CHANGE.set(this.board, () => {
-            this.ngZone.run(() => {
-                this.detect();
-                const changeEvent = {
-                    children: this.board.children,
-                    operations: this.board.operations,
-                    viewport: this.board.viewport,
-                    selection: this.board.selection,
-                    theme: this.board.theme
-                };
-                this.updateIslands();
-                this.plaitChange.emit(changeEvent);
-            });
-        });
-        this.hasInitialized = true;
-    }
-    ngAfterContentInit() {
-        this.initializeIslands();
-    }
-    detect() {
-        this.effect = {};
-        this.cdr.detectChanges();
-    }
-    ngOnChanges(changes) {
-        if (this.hasInitialized) {
-            const valueChange = changes['plaitValue'];
-            const options = changes['plaitOptions'];
-            if (valueChange)
-                this.board.children = valueChange.currentValue;
-            if (options)
-                this.board.options = options.currentValue;
-            this.cdr.markForCheck();
-        }
-    }
-    ngAfterViewInit() {
-        this.plaitBoardInitialized.emit(this.board);
-        initializeViewportContainer(this.board);
-        initializeViewBox(this.board);
-        initializeViewportOffset(this.board);
-    }
-    initializePlugins() {
-        let board = withHotkey(withHandPointer(withHistory(withSelection(withMoving(withBoard(withViewport(withOptions(createBoard(this.plaitValue, this.plaitOptions)))))))));
-        this.plaitPlugins.forEach(plugin => {
-            board = plugin(board);
-        });
-        this.board = board;
-        if (this.plaitViewport) {
-            this.board.viewport = this.plaitViewport;
-        }
-        if (this.plaitTheme) {
-            this.board.theme = this.plaitTheme;
-        }
-    }
-    initializeHookListener() {
-        fromEvent(this.host, 'mousedown')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            this.board.mousedown(event);
-        });
-        fromEvent(this.host, 'pointerdown')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            this.board.pointerDown(event);
-        });
-        fromEvent(this.host, 'mousemove')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            BOARD_TO_MOVING_POINT_IN_BOARD.set(this.board, [event.x, event.y]);
-            this.board.mousemove(event);
-        });
-        fromEvent(this.host, 'pointermove')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            BOARD_TO_MOVING_POINT_IN_BOARD.set(this.board, [event.x, event.y]);
-            this.board.pointerMove(event);
-        });
-        fromEvent(this.host, 'mouseleave')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            BOARD_TO_MOVING_POINT_IN_BOARD.delete(this.board);
-            this.board.mouseleave(event);
-        });
-        fromEvent(this.host, 'pointerleave')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            BOARD_TO_MOVING_POINT_IN_BOARD.delete(this.board);
-            this.board.pointerLeave(event);
-        });
-        fromEvent(document, 'mousemove')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            BOARD_TO_MOVING_POINT.set(this.board, [event.x, event.y]);
-            this.board.globalMousemove(event);
-        });
-        fromEvent(document, 'pointermove')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            BOARD_TO_MOVING_POINT.set(this.board, [event.x, event.y]);
-            this.board.globalPointerMove(event);
-        });
-        fromEvent(this.host, 'mouseup')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            this.board.mouseup(event);
-        });
-        fromEvent(this.host, 'pointerup')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            this.board.pointerUp(event);
-        });
-        fromEvent(document, 'mouseup')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            this.board.globalMouseup(event);
-        });
-        fromEvent(document, 'pointerup')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe((event) => {
-            this.board.globalPointerUp(event);
-        });
-        fromEvent(this.host, 'dblclick')
-            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
-            .subscribe((event) => {
-            this.board.dblclick(event);
-        });
-        fromEvent(document, 'keydown')
-            .pipe(takeUntil(this.destroy$), tap(event => {
-            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')
-            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
-            .subscribe((event) => {
-            var _a;
-            (_a = this.board) === null || _a === void 0 ? void 0 : _a.keyup(event);
-        });
-        fromEvent(document, 'copy')
-            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.hasBeenTextEditing(this.board)))
-            .subscribe((event) => {
-            const selectedElements = getSelectedElements(this.board);
-            event.preventDefault();
-            const rectangle = getRectangleByElements(this.board, selectedElements, false);
-            this.board.setFragment(event.clipboardData, rectangle);
-        });
-        fromEvent(document, 'paste')
-            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
-            .subscribe((clipboardEvent) => {
-            const mousePoint = PlaitBoard.getMovingPointInBoard(this.board);
-            if (mousePoint) {
-                const targetPoint = transformPoint(this.board, toPoint(mousePoint[0], mousePoint[1], this.host));
-                this.board.insertFragment(clipboardEvent.clipboardData, targetPoint);
-            }
-        });
-        fromEvent(document, 'cut')
-            .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
-            .subscribe((event) => {
-            const selectedElements = getSelectedElements(this.board);
-            event.preventDefault();
-            const rectangle = getRectangleByElements(this.board, selectedElements, false);
-            this.board.setFragment(event.clipboardData, rectangle);
-            this.board.deleteFragment(event.clipboardData);
-        });
-    }
-    viewportScrollListener() {
-        this.ngZone.runOutsideAngular(() => {
-            fromEvent(this.viewportContainer.nativeElement, 'scroll')
-                .pipe(takeUntil(this.destroy$), filter(() => {
-                if (isFromViewportChange(this.board)) {
-                    setIsFromViewportChange(this.board, false);
-                    return false;
-                }
-                return true;
-            }))
-                .subscribe((event) => {
-                const { scrollLeft, scrollTop } = event.target;
-                const zoom = this.board.viewport.zoom;
-                const viewBox = getViewBox(this.board, zoom);
-                const origination = [scrollLeft / zoom + viewBox[0], scrollTop / zoom + viewBox[1]];
-                if (Point.isEquals(origination, this.board.viewport.origination)) {
-                    return;
-                }
-                BoardTransforms.updateViewport(this.board, origination);
-                setIsFromScrolling(this.board, true);
-            });
-        });
-        this.ngZone.runOutsideAngular(() => {
-            fromEvent(this.viewportContainer.nativeElement, 'touchmove', { passive: false }).subscribe((event) => {
-                if (isPreventTouchMove(this.board)) {
-                    event.preventDefault();
-                }
-            });
-        });
-    }
-    elementResizeListener() {
-        this.resizeObserver = new ResizeObserver(() => {
-            initializeViewportContainer(this.board);
-            initializeViewBox(this.board);
-            updateViewportOffset(this.board);
-        });
-        this.resizeObserver.observe(this.nativeElement);
-    }
-    initializeIslands() {
-        var _a;
-        (_a = this.islands) === null || _a === void 0 ? void 0 : _a.forEach(island => {
-            island.initialize(this.board);
-        });
-    }
-    updateIslands() {
-        var _a;
-        (_a = this.islands) === null || _a === void 0 ? void 0 : _a.forEach(island => {
-            if (hasOnBoardChange(island)) {
-                island.onBoardChange();
-            }
-            island.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        var _a;
-        this.destroy$.next();
-        this.destroy$.complete();
-        this.resizeObserver && ((_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect());
-        BOARD_TO_ROUGH_SVG.delete(this.board);
-        BOARD_TO_COMPONENT.delete(this.board);
-        BOARD_TO_ROUGH_SVG.delete(this.board);
-        BOARD_TO_HOST.delete(this.board);
-        BOARD_TO_ELEMENT_HOST.delete(this.board);
-        BOARD_TO_ON_CHANGE.delete(this.board);
-    }
-    markForCheck() {
-        this.cdr.markForCheck();
-        this.ngZone.run(() => {
-            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: `
-        <div class="viewport-container" #viewportContainer>
-            <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
-                <g class="element-host"></g>
-                <g class="element-upper-host"></g>
-                <g class="element-active-host"></g>
-            </svg>
-            <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: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-board',
-                    template: `
-        <div class="viewport-container" #viewportContainer>
-            <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
-                <g class="element-host"></g>
-                <g class="element-upper-host"></g>
-                <g class="element-active-host"></g>
-            </svg>
-            <plait-children [board]="board" [effect]="effect"></plait-children>
-        </div>
-        <ng-content></ng-content>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [PlaitContextService]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { plaitValue: [{
-                type: Input
-            }], plaitViewport: [{
-                type: Input
-            }], plaitPlugins: [{
-                type: Input
-            }], plaitOptions: [{
-                type: Input
-            }], plaitTheme: [{
-                type: Input
-            }], plaitChange: [{
-                type: Output
-            }], plaitBoardInitialized: [{
-                type: Output
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], readonly: [{
-                type: HostBinding,
-                args: ['class.readonly']
-            }], isFocused: [{
-                type: HostBinding,
-                args: ['class.focused']
-            }], disabledScrollOnNonFocus: [{
-                type: HostBinding,
-                args: ['class.disabled-scroll']
-            }], svg: [{
-                type: ViewChild,
-                args: ['svg', { static: true }]
-            }], viewportContainer: [{
-                type: ViewChild,
-                args: ['viewportContainer', { read: ElementRef, static: true }]
-            }], islands: [{
-                type: ContentChildren,
-                args: [PlaitIslandBaseComponent, { descendants: true }]
-            }] } });
-
-const COMPONENTS = [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent];
-class PlaitModule {
-}
-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: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...COMPONENTS],
-                    imports: [CommonModule],
-                    exports: [...COMPONENTS]
-                }]
-        }] });
-
-/**
- * 1.create board instance
- * 2.build fake node weak map
- */
-const createTestingBoard = (plugins, children, options = { readonly: false, hideScrollbar: true, disabledScrollOnNonFocus: false }) => {
-    let board = createBoard(children, options);
-    plugins.forEach(plugin => {
-        board = plugin(board);
-    });
-    return board;
-};
-
-const fakeNodeWeakMap = (object) => {
-    const children = object.children || [];
-    children.forEach((value, index) => {
-        NODE_TO_PARENT.set(value, object);
-        NODE_TO_INDEX.set(value, index);
-        fakeNodeWeakMap(value);
-    });
-};
-const clearNodeWeakMap = (object) => {
-    const children = object.children || [];
-    children.forEach(value => {
-        NODE_TO_PARENT.delete(value);
-        NODE_TO_INDEX.delete(value);
-        clearNodeWeakMap(value);
-    });
-};
-
-/**
- * @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
- */
-/** Used to generate unique IDs for events. */
-let uniqueIds = 0;
-/**
- * Creates a browser MouseEvent with the specified options.
- * @docs-private
- */
-function createMouseEvent(type, clientX = 0, clientY = 0, offsetX = 1, offsetY = 1, button = 0, modifiers = {}) {
-    // Note: We cannot determine the position of the mouse event based on the screen
-    // because the dimensions and position of the browser window are not available
-    // To provide reasonable `screenX` and `screenY` coordinates, we simply use the
-    // client coordinates as if the browser is opened in fullscreen.
-    const screenX = clientX;
-    const screenY = clientY;
-    const event = new MouseEvent(type, {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        view: window,
-        detail: 0,
-        relatedTarget: null,
-        screenX,
-        screenY,
-        clientX,
-        clientY,
-        ctrlKey: modifiers.control,
-        altKey: modifiers.alt,
-        shiftKey: modifiers.shift,
-        metaKey: modifiers.meta,
-        button: button,
-        buttons: 1
-    });
-    // The `MouseEvent` constructor doesn't allow us to pass these properties into the constructor.
-    // Override them to `1`, because they're used for fake screen reader event detection.
-    if (offsetX != null) {
-        defineReadonlyEventProperty(event, 'offsetX', offsetX);
-    }
-    if (offsetY != null) {
-        defineReadonlyEventProperty(event, 'offsetY', offsetY);
-    }
-    return event;
-}
-/**
- * Creates a browser `PointerEvent` with the specified options. Pointer events
- * by default will appear as if they are the primary pointer of their type.
- * https://www.w3.org/TR/pointerevents2/#dom-pointerevent-isprimary.
- *
- * For example, if pointer events for a multi-touch interaction are created, the non-primary
- * pointer touches would need to be represented by non-primary pointer events.
- *
- * @docs-private
- */
-function createPointerEvent(type, clientX = 0, clientY = 0, offsetX, offsetY, options = { isPrimary: true }) {
-    const event = new PointerEvent(type, Object.assign({ bubbles: true, cancelable: true, composed: true, view: window, clientX,
-        clientY }, options));
-    if (offsetX != null) {
-        defineReadonlyEventProperty(event, 'offsetX', offsetX);
-    }
-    if (offsetY != null) {
-        defineReadonlyEventProperty(event, 'offsetY', offsetY);
-    }
-    return event;
-}
-/**
- * Creates a browser TouchEvent with the specified pointer coordinates.
- * @docs-private
- */
-function createTouchEvent(type, pageX = 0, pageY = 0, clientX = 0, clientY = 0) {
-    // We cannot use the `TouchEvent` or `Touch` because Firefox and Safari lack support.
-    // TODO: Switch to the constructor API when it is available for Firefox and Safari.
-    const event = document.createEvent('UIEvent');
-    const touchDetails = { pageX, pageY, clientX, clientY, identifier: uniqueIds++ };
-    // TS3.6 removes the initUIEvent method and suggests porting to "new UIEvent()".
-    event.initUIEvent(type, true, true, window, 0);
-    // Most of the browsers don't have a "initTouchEvent" method that can be used to define
-    // the touch details.
-    defineReadonlyEventProperty(event, 'touches', [touchDetails]);
-    defineReadonlyEventProperty(event, 'targetTouches', [touchDetails]);
-    defineReadonlyEventProperty(event, 'changedTouches', [touchDetails]);
-    return event;
-}
-/**
- * Creates a keyboard event with the specified key and modifiers.
- * @docs-private
- */
-function createKeyboardEvent(type, keyCode = 0, key = '', modifiers = {}) {
-    return new KeyboardEvent(type, {
-        bubbles: true,
-        cancelable: true,
-        composed: true,
-        view: window,
-        keyCode: keyCode,
-        key: key,
-        shiftKey: modifiers.shift,
-        metaKey: modifiers.meta,
-        altKey: modifiers.alt,
-        ctrlKey: modifiers.control
-    });
-}
-/**
- * Creates a fake event object with any desired event type.
- * @docs-private
- */
-function createFakeEvent(type, bubbles = false, cancelable = true, composed = true) {
-    return new Event(type, { bubbles, cancelable, composed });
-}
-/**
- * Defines a readonly property on the given event object. Readonly properties on an event object
- * are always set as configurable as that matches default readonly properties for DOM event objects.
- */
-function defineReadonlyEventProperty(event, propertyName, value) {
-    Object.defineProperty(event, propertyName, { get: () => value, configurable: true });
-}
-function createModModifierKeys() {
-    const modifiers = IS_MAC ? { meta: true } : { control: true };
-    return modifiers;
-}
-
-/*
- * Public API Surface of plait
- */
-
-/**
- * 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 };
-//# sourceMappingURL=plait-core.mjs.map