@plait/core 0.56.2 → 0.57.0

package/fesm2022/plait-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { IterableDiffers, inject, ViewContainerRef, ChangeDetectorRef, Directive, Input, Injectable, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Output, HostBinding, ViewChild, ContentChildren } from '@angular/core';
+import { Directive, Input, Injectable, IterableDiffers, EventEmitter, inject, ElementRef, Component, ChangeDetectionStrategy, Output, HostBinding, ViewChild, ContentChildren, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { timer, Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, tap } from 'rxjs/operators';
@@ -42,51 +42,6 @@ var PlaitPointerType;
  * Extendable Custom Types Interface
  */
 
-function depthFirstRecursion(node, callback, recursion, isReverse) {
-    if (!recursion || recursion(node)) {
-        let children = [];
-        if (node.children) {
-            children = [...node.children];
-        }
-        children = isReverse ? children.reverse() : children;
-        children.forEach(child => {
-            depthFirstRecursion(child, callback, recursion);
-        });
-    }
-    callback(node);
-}
-const getIsRecursionFunc = (board) => {
-    return (element) => {
-        if (PlaitBoard.isBoard(element) || board.isRecursion(element)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    };
-};
-
-const SELECTION_BORDER_COLOR = '#6698FF';
-const SELECTION_FILL_COLOR = '#6698FF25'; // opacity 0.25
-const Selection = {
-    isCollapsed(selection) {
-        if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-};
-
-const sortElements = (board, elements, ascendingOrder = true) => {
-    return [...elements].sort((a, b) => {
-        const pathA = PlaitBoard.findPath(board, a);
-        const pathB = PlaitBoard.findPath(board, b);
-        return ascendingOrder ? pathA[0] - pathB[0] : pathB[0] - pathA[0];
-    });
-};
-
 const RectangleClient = {
     isHit: (origin, target) => {
         return RectangleClient.isHitX(origin, target) && RectangleClient.isHitY(origin, target);
@@ -242,717 +197,7 @@ const RectangleClient = {
             height: maxY - minY
         };
     }
-};
-
-var PlaitPluginKey;
-(function (PlaitPluginKey) {
-    PlaitPluginKey["withSelection"] = "withSelection";
-})(PlaitPluginKey || (PlaitPluginKey = {}));
-
-const getHitElementsBySelection = (board, selection, match = () => true) => {
-    const newSelection = selection || board.selection;
-    const rectangleHitElements = [];
-    if (!newSelection) {
-        return [];
-    }
-    const isCollapsed = Selection.isCollapsed(newSelection);
-    if (isCollapsed) {
-        const hitElement = getHitElementByPoint(board, newSelection.anchor, match);
-        if (hitElement) {
-            return [hitElement];
-        }
-        else {
-            return [];
-        }
-    }
-    depthFirstRecursion(board, node => {
-        if (!PlaitBoard.isBoard(node) && match(node) && board.isRectangleHit(node, newSelection)) {
-            rectangleHitElements.push(node);
-        }
-    }, getIsRecursionFunc(board), true);
-    return rectangleHitElements;
-};
-const getHitElementByPoint = (board, point, match = () => true) => {
-    let hitElement = undefined;
-    let hitInsideElement = undefined;
-    depthFirstRecursion(board, node => {
-        if (hitElement) {
-            return;
-        }
-        if (PlaitBoard.isBoard(node) || !match(node) || !PlaitElement.hasMounted(node)) {
-            return;
-        }
-        if (board.isHit(node, point)) {
-            hitElement = node;
-            return;
-        }
-        /**
-         * 需要增加场景测试
-         * hitInsideElement 存的是第一个符合 isInsidePoint 的元素
-         * 当有元素符合 isHit 时结束遍历，并返回 hitElement
-         * 当所有元素都不符合 isHit ，则返回第一个符合 isInsidePoint 的元素
-         * 这样保证最上面的元素优先被探测到；
-         */
-        if (!hitInsideElement && board.isInsidePoint(node, point)) {
-            hitInsideElement = node;
-        }
-    }, getIsRecursionFunc(board), true);
-    return hitElement || hitInsideElement;
-};
-const getHitSelectedElements = (board, point) => {
-    const selectedElements = getSelectedElements(board);
-    const targetRectangle = selectedElements.length > 0 && getRectangleByElements(board, selectedElements, false);
-    const isInTargetRectangle = targetRectangle && RectangleClient.isPointInRectangle(targetRectangle, point);
-    if (isInTargetRectangle) {
-        return selectedElements;
-    }
-    else {
-        return [];
-    }
-};
-const cacheSelectedElements = (board, selectedElements) => {
-    const sortedElements = sortElements(board, selectedElements);
-    BOARD_TO_SELECTED_ELEMENT.set(board, sortedElements);
-};
-const getSelectedElements = (board) => {
-    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
-};
-const addSelectedElement = (board, element) => {
-    let elements = [];
-    if (Array.isArray(element)) {
-        elements.push(...element);
-    }
-    else {
-        elements.push(element);
-    }
-    const selectedElements = getSelectedElements(board);
-    cacheSelectedElements(board, [...selectedElements, ...elements]);
-};
-const removeSelectedElement = (board, element, isRemoveChildren = false) => {
-    const selectedElements = getSelectedElements(board);
-    if (selectedElements.includes(element)) {
-        const targetElements = [];
-        if (board.isRecursion(element) && isRemoveChildren) {
-            depthFirstRecursion(element, node => {
-                targetElements.push(node);
-            }, node => board.isRecursion(node));
-        }
-        else {
-            targetElements.push(element);
-        }
-        const newSelectedElements = selectedElements.filter(value => !targetElements.includes(value));
-        cacheSelectedElements(board, newSelectedElements);
-    }
-};
-const clearSelectedElement = (board) => {
-    cacheSelectedElements(board, []);
-};
-const isSelectedElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    return !!selectedElements.find(value => value === element);
-};
-const temporaryDisableSelection = (board) => {
-    const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
-    board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isDisabledSelect: true
-    });
-    setTimeout(() => {
-        board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
-    }, 0);
-};
-
-/**
- * @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"] = "ew-resize";
-    ResizeCursorClass["ns"] = "ns-resize";
-    ResizeCursorClass["nesw"] = "nesw-resize";
-    ResizeCursorClass["nwse"] = "nwse-resize";
-})(ResizeCursorClass || (ResizeCursorClass = {}));
-var CursorClass;
-(function (CursorClass) {
-    CursorClass["crosshair"] = "crosshair";
-})(CursorClass || (CursorClass = {}));
-const RESIZE_CURSORS = [ResizeCursorClass.ns, ResizeCursorClass.nesw, ResizeCursorClass.ew, ResizeCursorClass.nwse];
-
-const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
-const ACTIVE_STROKE_WIDTH = 1;
-const SNAPPING_STROKE_WIDTH = 2;
-const SELECTION_RECTANGLE_CLASS_NAME = 'selection-rectangle';
-
-const HOST_CLASS_NAME = 'plait-board-container';
-const ACTIVE_MOVING_CLASS_NAME = 'active-with-moving';
-const ROTATE_HANDLE_CLASS_NAME = 'rotate-handle';
-const RESIZE_HANDLE_CLASS_NAME = 'resize-handle';
-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 = 3;
-const HIT_DISTANCE_BUFFER = 5;
-
-const NS = 'http://www.w3.org/2000/svg';
-function createG() {
-    const newG = document.createElementNS(NS, 'g');
-    return newG;
-}
-function createPath() {
-    const newG = document.createElementNS(NS, 'path');
-    return newG;
-}
-function createRect(rectangle, options) {
-    const rect = document.createElementNS(NS, 'rect');
-    rect.setAttribute('x', `${rectangle.x}`);
-    rect.setAttribute('y', `${rectangle.y}`);
-    rect.setAttribute('width', `${rectangle.width}`);
-    rect.setAttribute('height', `${rectangle.height}`);
-    for (let key in options) {
-        const optionKey = key;
-        rect.setAttribute(key, `${options[optionKey]}`);
-    }
-    return rect;
-}
-const setStrokeLinecap = (g, value) => {
-    g.setAttribute('stroke-linecap', value);
-};
-const setPathStrokeLinecap = (g, value) => {
-    g.querySelectorAll('path').forEach(path => {
-        path.setAttribute('stroke-linecap', value);
-    });
-};
-function createMask() {
-    return document.createElementNS(NS, 'mask');
-}
-function createSVG() {
-    const svg = document.createElementNS(NS, 'svg');
-    return svg;
-}
-function createText(x, y, fill, textContent) {
-    var text = document.createElementNS(NS, 'text');
-    text.setAttribute('x', `${x}`);
-    text.setAttribute('y', `${y}`);
-    text.setAttribute('fill', fill);
-    text.textContent = textContent;
-    return text;
-}
-/**
- * Check if a DOM node is an element node.
- */
-const isDOMElement = (value) => {
-    return isDOMNode(value) && value.nodeType === 1;
-};
-/**
- * Check if a value is a DOM node.
- */
-const isDOMNode = (value) => {
-    return value instanceof window.Node;
-};
-const hasInputOrTextareaTarget = (target) => {
-    if (isDOMElement(target)) {
-        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
-            return true;
-        }
-    }
-    return false;
-};
-const isSecondaryPointer = (event) => {
-    return event.button === POINTER_BUTTON.SECONDARY;
-};
-const isMainPointer = (event) => {
-    return event.button === POINTER_BUTTON.MAIN;
-};
-
-function hasBeforeContextChange(value) {
-    if (value.beforeContextChange) {
-        return true;
-    }
-    return false;
-}
-function hasOnContextChanged(value) {
-    if (value.onContextChanged) {
-        return true;
-    }
-    return false;
-}
-
-class ListRender {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.children = [];
-        this.componentRefs = [];
-        this.contexts = [];
-        this.differ = null;
-        this.initialized = false;
-    }
-    initialize(children, childrenContext) {
-        this.initialized = true;
-        this.children = children;
-        children.forEach((descendant, index) => {
-            NODE_TO_INDEX.set(descendant, index);
-            NODE_TO_PARENT.set(descendant, childrenContext.parent);
-            const context = getContext(this.board, descendant, index, childrenContext.parent);
-            const componentType = getComponentType(this.board, context);
-            const componentRef = createPluginComponent(componentType, context, this.viewContainerRef, childrenContext);
-            this.componentRefs.push(componentRef);
-            this.contexts.push(context);
-        });
-        const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
-        this.differ = newDiffers.find(children).create(trackBy);
-        this.differ.diff(children);
-    }
-    update(children, childrenContext) {
-        if (!this.initialized) {
-            this.initialize(children, childrenContext);
-            return;
-        }
-        if (!this.differ) {
-            throw new Error('Exception: Can not find differ ');
-        }
-        const { board, parent } = childrenContext;
-        const diffResult = this.differ.diff(children);
-        if (diffResult) {
-            const newContexts = [];
-            const newComponentRefs = [];
-            let currentIndexForFirstElement = null;
-            diffResult.forEachItem((record) => {
-                NODE_TO_INDEX.set(record.item, record.currentIndex);
-                NODE_TO_PARENT.set(record.item, childrenContext.parent);
-                const previousContext = record.previousIndex === null ? undefined : this.contexts[record.previousIndex];
-                const context = getContext(board, record.item, record.currentIndex, parent, previousContext);
-                if (record.previousIndex === null) {
-                    const componentType = getComponentType(board, context);
-                    const componentRef = createPluginComponent(componentType, context, this.viewContainerRef, childrenContext);
-                    newContexts.push(context);
-                    newComponentRefs.push(componentRef);
-                }
-                else {
-                    const componentRef = this.componentRefs[record.previousIndex];
-                    componentRef.instance.context = context;
-                    newComponentRefs.push(componentRef);
-                    newContexts.push(context);
-                }
-                // item might has been changed, so need to compare the id
-                if (record.item === this.children[0] || record.item.id === this.children[0]?.id) {
-                    currentIndexForFirstElement = record.currentIndex;
-                }
-            });
-            diffResult.forEachOperation(record => {
-                // removed
-                if (record.currentIndex === null) {
-                    const componentRef = this.componentRefs[record.previousIndex];
-                    componentRef?.destroy();
-                }
-                // moved
-                if (record.previousIndex !== null && record.currentIndex !== null) {
-                    mountOnItemMove(record.item, record.currentIndex, childrenContext, currentIndexForFirstElement);
-                }
-            });
-            this.componentRefs = newComponentRefs;
-            this.contexts = newContexts;
-            this.children = children;
-        }
-        else {
-            const newContexts = [];
-            this.children.forEach((element, index) => {
-                NODE_TO_INDEX.set(element, index);
-                NODE_TO_PARENT.set(element, childrenContext.parent);
-                const previousContext = this.contexts[index];
-                const previousComponentRef = this.componentRefs[index];
-                const context = getContext(board, element, index, parent, previousContext);
-                previousComponentRef.instance.context = context;
-                newContexts.push(context);
-            });
-            this.contexts = newContexts;
-        }
-    }
-    destroy() {
-        this.children.forEach((element, index) => {
-            if (this.componentRefs[index]) {
-                this.componentRefs[index].destroy();
-            }
-        });
-        this.componentRefs = [];
-        this.children = [];
-        this.contexts = [];
-        this.initialized = false;
-        this.differ = null;
-    }
-}
-const trackBy = (index, element) => {
-    return element.id;
-};
-const createPluginComponent = (componentType, context, viewContainerRef, childrenContext) => {
-    const componentRef = viewContainerRef.createComponent(componentType, { injector: viewContainerRef.injector });
-    const instance = componentRef.instance;
-    instance.context = context;
-    componentRef.changeDetectorRef.detectChanges();
-    const g = componentRef.instance.getContainerG();
-    mountElementG(context.index, g, childrenContext);
-    componentRef.instance.initializeListRender();
-    return componentRef;
-};
-const getComponentType = (board, context) => {
-    const result = board.drawElement(context);
-    return result;
-};
-const getContext = (board, element, index, parent, previousContext) => {
-    let isSelected = isSelectedElement(board, element);
-    const previousElement = previousContext && previousContext.element;
-    if (previousElement && previousElement !== element && isSelectedElement(board, previousElement)) {
-        isSelected = true;
-        removeSelectedElement(board, previousElement);
-        addSelectedElement(board, element);
-    }
-    const context = {
-        element: element,
-        parent: parent,
-        board: board,
-        selected: isSelected,
-        index
-    };
-    return context;
-};
-// the g depth of root element：[1]-[2]-[3]-[4]
-// the g depth of root element and children element（the [2] element has children）：
-// [1]-
-// [2]([2-1-1][2-1-2][2-1][2-2][2-3-1][2-3-2][2-3][2])-
-// [3]-
-// [4]
-const mountElementG = (index, g, childrenContext, 
-// for moving scene: the current index for first element before moving
-currentIndexForFirstElement = null) => {
-    const { parent, parentG } = childrenContext;
-    if (PlaitBoard.isBoard(parent)) {
-        if (index > 0) {
-            const previousElement = parent.children[index - 1];
-            const previousContainerG = PlaitElement.getContainerG(previousElement, { suppressThrow: false });
-            previousContainerG.insertAdjacentElement('afterend', g);
-        }
-        else {
-            if (currentIndexForFirstElement !== null) {
-                const firstElement = parent.children[currentIndexForFirstElement];
-                const firstContainerG = firstElement && PlaitElement.getContainerG(firstElement, { suppressThrow: true });
-                if (firstElement && firstContainerG) {
-                    parentG.insertBefore(g, firstContainerG);
-                }
-                else {
-                    throw new Error('fail to mount container on moving');
-                }
-            }
-            else {
-                parentG.append(g);
-            }
-        }
-    }
-    else {
-        if (index > 0) {
-            const previousElement = parent.children[index - 1];
-            const previousElementG = PlaitElement.getElementG(previousElement);
-            previousElementG.insertAdjacentElement('afterend', g);
-        }
-        else {
-            if (currentIndexForFirstElement) {
-                const nextElement = parent.children[currentIndexForFirstElement];
-                const nextPath = nextElement && PlaitBoard.findPath(childrenContext.board, nextElement);
-                const first = nextPath && PlaitNode.first(childrenContext.board, nextPath);
-                const firstContainerG = first && PlaitElement.getContainerG(first, { suppressThrow: false });
-                if (firstContainerG) {
-                    parentG.insertBefore(g, firstContainerG);
-                }
-                else {
-                    throw new Error('fail to mount container on moving');
-                }
-            }
-            else {
-                let parentElementG = PlaitElement.getElementG(parent);
-                parentG.insertBefore(g, parentElementG);
-            }
-        }
-    }
-};
-const mountOnItemMove = (element, index, childrenContext, currentIndexForFirstElement) => {
-    const containerG = PlaitElement.getContainerG(element, { suppressThrow: false });
-    mountElementG(index, containerG, childrenContext, currentIndexForFirstElement);
-    if (element.children && !PlaitElement.isRootElement(element)) {
-        element.children.forEach((child, index) => {
-            mountOnItemMove(child, index, { ...childrenContext, parent: element }, null);
-        });
-    }
-};
-
-class PlaitPluginElementComponent {
-    get hasChildren() {
-        return !!this.element.children;
-    }
-    set context(value) {
-        if (hasBeforeContextChange(this)) {
-            this.beforeContextChange(value);
-        }
-        const previousContext = this._context;
-        this._context = value;
-        if (this.element) {
-            ELEMENT_TO_COMPONENT.set(this.element, this);
-        }
-        if (this.initialized) {
-            const elementG = this.getElementG();
-            const containerG = this.getContainerG();
-            NODE_TO_G.set(this.element, elementG);
-            NODE_TO_CONTAINER_G.set(this.element, containerG);
-            ELEMENT_TO_REF.set(this.element, this.ref);
-            this.updateListRender();
-            this.cdr.markForCheck();
-            if (hasOnContextChanged(this)) {
-                this.onContextChanged(value, previousContext);
-            }
-        }
-        else {
-            if (PlaitElement.isRootElement(this.element) && this.hasChildren) {
-                this._g = createG();
-                this._containerG = createG();
-                this._containerG.append(this._g);
-            }
-            else {
-                this._g = createG();
-                this._containerG = this._g;
-            }
-            NODE_TO_G.set(this.element, this._g);
-            NODE_TO_CONTAINER_G.set(this.element, this._containerG);
-            ELEMENT_TO_REF.set(this.element, this.ref);
-        }
-    }
-    get context() {
-        return this._context;
-    }
-    get element() {
-        return this.context && this.context.element;
-    }
-    get board() {
-        return this.context && this.context.board;
-    }
-    get selected() {
-        return this.context && this.context.selected;
-    }
-    getContainerG() {
-        return this._containerG;
-    }
-    getElementG() {
-        return this._g;
-    }
-    constructor(ref) {
-        this.ref = ref;
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.cdr = inject(ChangeDetectorRef);
-        this.initialized = false;
-    }
-    ngOnInit() {
-        if (this.element.type) {
-            this.getContainerG().setAttribute(`plait-${this.element.type}`, 'true');
-        }
-        if (this.hasChildren) {
-            if (PlaitElement.isRootElement(this.element)) {
-                this._rootContainerG = this._containerG;
-            }
-            else {
-                const path = PlaitBoard.findPath(this.board, this.element);
-                const rootNode = PlaitNode.get(this.board, path.slice(0, 1));
-                this._rootContainerG = PlaitElement.getContainerG(rootNode, { suppressThrow: false });
-            }
-        }
-        this.getContainerG().setAttribute('plait-data-id', this.element.id);
-        this.initialized = true;
-    }
-    initializeListRender() {
-        if (this.hasChildren) {
-            this.listRender = new ListRender(this.board, this.viewContainerRef);
-            if (this.board.isExpanded(this.element)) {
-                this.listRender.initialize(this.element.children, this.initializeChildrenContext());
-            }
-        }
-    }
-    getRef() {
-        return this.ref;
-    }
-    updateListRender() {
-        if (this.hasChildren) {
-            if (!this.listRender) {
-                throw new Error('incorrectly initialize list render');
-            }
-            if (this.board.isExpanded(this.element)) {
-                this.listRender.update(this.element.children, this.initializeChildrenContext());
-            }
-            else {
-                if (this.listRender.initialized) {
-                    this.listRender.destroy();
-                }
-            }
-        }
-    }
-    initializeChildrenContext() {
-        if (!this._rootContainerG) {
-            throw new Error('can not resolve root container g');
-        }
-        return {
-            board: this.board,
-            parent: this.element,
-            parentG: this._rootContainerG
-        };
-    }
-    ngOnDestroy() {
-        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
-            ELEMENT_TO_COMPONENT.delete(this.element);
-        }
-        if (NODE_TO_G.get(this.element) === this._g) {
-            NODE_TO_G.delete(this.element);
-        }
-        if (NODE_TO_CONTAINER_G.get(this.element) === this._containerG) {
-            NODE_TO_CONTAINER_G.delete(this.element);
-        }
-        if (ELEMENT_TO_REF.get(this.element) === this.ref) {
-            ELEMENT_TO_REF.set(this.element, this.ref);
-        }
-        removeSelectedElement(this.board, this.element);
-        this.getContainerG().remove();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [{ type: undefined }], propDecorators: { context: [{
-                type: Input
-            }] } });
-const ELEMENT_TO_COMPONENT = new WeakMap();
+};
 
 // https://stackoverflow.com/a/6853926/232122
 function distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) {
@@ -1246,79 +491,310 @@ function getVectorFromPointAndSlope(x, y, slope) {
     if (y < 0) {
         vector = [-vector[0], -vector[1]];
     }
-    return vector;
+    return vector;
+}
+/**
+ * The DOM likes values to be fixed to 3 decimal places
+ */
+function toDomPrecision(v) {
+    return +v.toFixed(4);
+}
+function toFixed(v) {
+    return +v.toFixed(2);
+}
+/**
+ * Whether two numbers numbers a and b are approximately equal.
+ *
+ * @param a - The first point.
+ * @param b - The second point.
+ * @public
+ */
+function approximately(a, b, precision = 0.000001) {
+    return Math.abs(a - b) <= precision;
+}
+// https://medium.com/@steveruiz/find-the-points-where-a-line-segment-intercepts-an-angled-ellipse-in-javascript-typescript-e451524beece
+function getCrossingPointsBetweenEllipseAndSegment(startPoint, endPoint, cx, cy, rx, ry, segment_only = true) {
+    // If the ellipse or line segment are empty, return no tValues.
+    if (rx === 0 || ry === 0 || (startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1])) {
+        return [];
+    }
+    rx = rx < 0 ? rx : -rx;
+    ry = ry < 0 ? ry : -ry;
+    startPoint[0] -= cx;
+    startPoint[1] -= cy;
+    endPoint[0] -= cx;
+    endPoint[1] -= cy;
+    // Calculate the quadratic parameters.
+    var A = ((endPoint[0] - startPoint[0]) * (endPoint[0] - startPoint[0])) / rx / rx +
+        ((endPoint[1] - startPoint[1]) * (endPoint[1] - startPoint[1])) / ry / ry;
+    var B = (2 * startPoint[0] * (endPoint[0] - startPoint[0])) / rx / rx + (2 * startPoint[1] * (endPoint[1] - startPoint[1])) / ry / ry;
+    var C = (startPoint[0] * startPoint[0]) / rx / rx + (startPoint[1] * startPoint[1]) / ry / ry - 1;
+    // Make a list of t values (normalized points on the line where intersections occur).
+    var tValues = [];
+    // Calculate the discriminant.
+    var discriminant = B * B - 4 * A * C;
+    if (discriminant === 0) {
+        // One real solution.
+        tValues.push(-B / 2 / A);
+    }
+    else if (discriminant > 0) {
+        // Two real solutions.
+        tValues.push((-B + Math.sqrt(discriminant)) / 2 / A);
+        tValues.push((-B - Math.sqrt(discriminant)) / 2 / A);
+    }
+    return (tValues
+        // Filter to only points that are on the segment.
+        .filter(t => !segment_only || (t >= 0 && t <= 1))
+        // Solve for points.
+        .map(t => [startPoint[0] + (endPoint[0] - startPoint[0]) * t + cx, startPoint[1] + (endPoint[1] - startPoint[1]) * t + cy]));
+}
+
+function isInPlaitBoard(board, x, y) {
+    const plaitBoardElement = PlaitBoard.getBoardContainer(board);
+    const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
+    const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
+    return distances === 0;
+}
+function getRealScrollBarWidth(board) {
+    const { hideScrollbar } = board.options;
+    let scrollBarWidth = 0;
+    if (!hideScrollbar) {
+        const viewportContainer = PlaitBoard.getViewportContainer(board);
+        scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
+    }
+    return scrollBarWidth;
+}
+
+/**
+ * @license
+ * 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"] = "ew-resize";
+    ResizeCursorClass["ns"] = "ns-resize";
+    ResizeCursorClass["nesw"] = "nesw-resize";
+    ResizeCursorClass["nwse"] = "nwse-resize";
+})(ResizeCursorClass || (ResizeCursorClass = {}));
+var CursorClass;
+(function (CursorClass) {
+    CursorClass["crosshair"] = "crosshair";
+})(CursorClass || (CursorClass = {}));
+const RESIZE_CURSORS = [ResizeCursorClass.ns, ResizeCursorClass.nesw, ResizeCursorClass.ew, ResizeCursorClass.nwse];
+
+const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
+const ACTIVE_STROKE_WIDTH = 1;
+const SNAPPING_STROKE_WIDTH = 2;
+const SELECTION_RECTANGLE_CLASS_NAME = 'selection-rectangle';
+
+const HOST_CLASS_NAME = 'plait-board-container';
+const ACTIVE_MOVING_CLASS_NAME = 'active-with-moving';
+const ROTATE_HANDLE_CLASS_NAME = 'rotate-handle';
+const RESIZE_HANDLE_CLASS_NAME = 'resize-handle';
+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 = 3;
+const HIT_DISTANCE_BUFFER = 5;
+
+const NS = 'http://www.w3.org/2000/svg';
+function createG() {
+    const newG = document.createElementNS(NS, 'g');
+    return newG;
+}
+function createPath() {
+    const newG = document.createElementNS(NS, 'path');
+    return newG;
+}
+function createRect(rectangle, options) {
+    const rect = document.createElementNS(NS, 'rect');
+    rect.setAttribute('x', `${rectangle.x}`);
+    rect.setAttribute('y', `${rectangle.y}`);
+    rect.setAttribute('width', `${rectangle.width}`);
+    rect.setAttribute('height', `${rectangle.height}`);
+    for (let key in options) {
+        const optionKey = key;
+        rect.setAttribute(key, `${options[optionKey]}`);
+    }
+    return rect;
 }
-/**
- * The DOM likes values to be fixed to 3 decimal places
- */
-function toDomPrecision(v) {
-    return +v.toFixed(4);
+const setStrokeLinecap = (g, value) => {
+    g.setAttribute('stroke-linecap', value);
+};
+const setPathStrokeLinecap = (g, value) => {
+    g.querySelectorAll('path').forEach(path => {
+        path.setAttribute('stroke-linecap', value);
+    });
+};
+function createMask() {
+    return document.createElementNS(NS, 'mask');
 }
-function toFixed(v) {
-    return +v.toFixed(2);
+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;
 }
 /**
- * Whether two numbers numbers a and b are approximately equal.
- *
- * @param a - The first point.
- * @param b - The second point.
- * @public
+ * Check if a DOM node is an element node.
  */
-function approximately(a, b, precision = 0.000001) {
-    return Math.abs(a - b) <= precision;
-}
-// https://medium.com/@steveruiz/find-the-points-where-a-line-segment-intercepts-an-angled-ellipse-in-javascript-typescript-e451524beece
-function getCrossingPointsBetweenEllipseAndSegment(startPoint, endPoint, cx, cy, rx, ry, segment_only = true) {
-    // If the ellipse or line segment are empty, return no tValues.
-    if (rx === 0 || ry === 0 || (startPoint[0] === endPoint[0] && startPoint[1] === endPoint[1])) {
-        return [];
-    }
-    rx = rx < 0 ? rx : -rx;
-    ry = ry < 0 ? ry : -ry;
-    startPoint[0] -= cx;
-    startPoint[1] -= cy;
-    endPoint[0] -= cx;
-    endPoint[1] -= cy;
-    // Calculate the quadratic parameters.
-    var A = ((endPoint[0] - startPoint[0]) * (endPoint[0] - startPoint[0])) / rx / rx +
-        ((endPoint[1] - startPoint[1]) * (endPoint[1] - startPoint[1])) / ry / ry;
-    var B = (2 * startPoint[0] * (endPoint[0] - startPoint[0])) / rx / rx + (2 * startPoint[1] * (endPoint[1] - startPoint[1])) / ry / ry;
-    var C = (startPoint[0] * startPoint[0]) / rx / rx + (startPoint[1] * startPoint[1]) / ry / ry - 1;
-    // Make a list of t values (normalized points on the line where intersections occur).
-    var tValues = [];
-    // Calculate the discriminant.
-    var discriminant = B * B - 4 * A * C;
-    if (discriminant === 0) {
-        // One real solution.
-        tValues.push(-B / 2 / A);
-    }
-    else if (discriminant > 0) {
-        // Two real solutions.
-        tValues.push((-B + Math.sqrt(discriminant)) / 2 / A);
-        tValues.push((-B - Math.sqrt(discriminant)) / 2 / A);
-    }
-    return (tValues
-        // Filter to only points that are on the segment.
-        .filter(t => !segment_only || (t >= 0 && t <= 1))
-        // Solve for points.
-        .map(t => [startPoint[0] + (endPoint[0] - startPoint[0]) * t + cx, startPoint[1] + (endPoint[1] - startPoint[1]) * t + cy]));
-}
-
-function isInPlaitBoard(board, x, y) {
-    const plaitBoardElement = PlaitBoard.getBoardContainer(board);
-    const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
-    const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
-    return distances === 0;
-}
-function getRealScrollBarWidth(board) {
-    const { hideScrollbar } = board.options;
-    let scrollBarWidth = 0;
-    if (!hideScrollbar) {
-        const viewportContainer = PlaitBoard.getViewportContainer(board);
-        scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
+const isDOMElement = (value) => {
+    return isDOMNode(value) && value.nodeType === 1;
+};
+/**
+ * Check if a value is a DOM node.
+ */
+const isDOMNode = (value) => {
+    return value instanceof window.Node;
+};
+const hasInputOrTextareaTarget = (target) => {
+    if (isDOMElement(target)) {
+        if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+            return true;
+        }
     }
-    return scrollBarWidth;
-}
+    return false;
+};
+const isSecondaryPointer = (event) => {
+    return event.button === POINTER_BUTTON.SECONDARY;
+};
+const isMainPointer = (event) => {
+    return event.button === POINTER_BUTTON.MAIN;
+};
 
 function createForeignObject(x, y, width, height) {
     var newForeignObject = document.createElementNS(NS, 'foreignObject');
@@ -1593,17 +1069,179 @@ const hotkeys = {
     isUndo: create('undo'),
     isShift: create('shift')
 };
-
-function idCreator(length = 5) {
-    // remove numeral
-    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /**** Easily confusing characters are removed by default 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));
+
+function idCreator(length = 5) {
+    // remove numeral
+    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /**** Easily confusing characters are removed by default 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;
+}
+
+function depthFirstRecursion(node, callback, recursion, isReverse) {
+    if (!recursion || recursion(node)) {
+        let children = [];
+        if (node.children) {
+            children = [...node.children];
+        }
+        children = isReverse ? children.reverse() : children;
+        children.forEach(child => {
+            depthFirstRecursion(child, callback, recursion);
+        });
+    }
+    callback(node);
+}
+const getIsRecursionFunc = (board) => {
+    return (element) => {
+        if (PlaitBoard.isBoard(element) || board.isRecursion(element)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+};
+
+const SELECTION_BORDER_COLOR = '#6698FF';
+const SELECTION_FILL_COLOR = '#6698FF25'; // opacity 0.25
+const Selection = {
+    isCollapsed(selection) {
+        if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+};
+
+const sortElements = (board, elements, ascendingOrder = true) => {
+    return [...elements].sort((a, b) => {
+        const pathA = PlaitBoard.findPath(board, a);
+        const pathB = PlaitBoard.findPath(board, b);
+        return ascendingOrder ? pathA[0] - pathB[0] : pathB[0] - pathA[0];
+    });
+};
+
+var PlaitPluginKey;
+(function (PlaitPluginKey) {
+    PlaitPluginKey["withSelection"] = "withSelection";
+})(PlaitPluginKey || (PlaitPluginKey = {}));
+
+const getHitElementsBySelection = (board, selection, match = () => true) => {
+    const newSelection = selection || board.selection;
+    const rectangleHitElements = [];
+    if (!newSelection) {
+        return [];
+    }
+    const isCollapsed = Selection.isCollapsed(newSelection);
+    if (isCollapsed) {
+        const hitElement = getHitElementByPoint(board, newSelection.anchor, match);
+        if (hitElement) {
+            return [hitElement];
+        }
+        else {
+            return [];
+        }
+    }
+    depthFirstRecursion(board, node => {
+        if (!PlaitBoard.isBoard(node) && match(node) && board.isRectangleHit(node, newSelection)) {
+            rectangleHitElements.push(node);
+        }
+    }, getIsRecursionFunc(board), true);
+    return rectangleHitElements;
+};
+const getHitElementByPoint = (board, point, match = () => true) => {
+    let hitElement = undefined;
+    let hitInsideElement = undefined;
+    depthFirstRecursion(board, node => {
+        if (hitElement) {
+            return;
+        }
+        if (PlaitBoard.isBoard(node) || !match(node) || !PlaitElement.hasMounted(node)) {
+            return;
+        }
+        if (board.isHit(node, point)) {
+            hitElement = node;
+            return;
+        }
+        /**
+         * 需要增加场景测试
+         * hitInsideElement 存的是第一个符合 isInsidePoint 的元素
+         * 当有元素符合 isHit 时结束遍历，并返回 hitElement
+         * 当所有元素都不符合 isHit ，则返回第一个符合 isInsidePoint 的元素
+         * 这样保证最上面的元素优先被探测到；
+         */
+        if (!hitInsideElement && board.isInsidePoint(node, point)) {
+            hitInsideElement = node;
+        }
+    }, getIsRecursionFunc(board), true);
+    return hitElement || hitInsideElement;
+};
+const getHitSelectedElements = (board, point) => {
+    const selectedElements = getSelectedElements(board);
+    const targetRectangle = selectedElements.length > 0 && getRectangleByElements(board, selectedElements, false);
+    const isInTargetRectangle = targetRectangle && RectangleClient.isPointInRectangle(targetRectangle, point);
+    if (isInTargetRectangle) {
+        return selectedElements;
+    }
+    else {
+        return [];
+    }
+};
+const cacheSelectedElements = (board, selectedElements) => {
+    const sortedElements = sortElements(board, selectedElements);
+    BOARD_TO_SELECTED_ELEMENT.set(board, sortedElements);
+};
+const getSelectedElements = (board) => {
+    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
+};
+const addSelectedElement = (board, element) => {
+    let elements = [];
+    if (Array.isArray(element)) {
+        elements.push(...element);
+    }
+    else {
+        elements.push(element);
+    }
+    const selectedElements = getSelectedElements(board);
+    cacheSelectedElements(board, [...selectedElements, ...elements]);
+};
+const removeSelectedElement = (board, element, isRemoveChildren = false) => {
+    const selectedElements = getSelectedElements(board);
+    if (selectedElements.includes(element)) {
+        const targetElements = [];
+        if (board.isRecursion(element) && isRemoveChildren) {
+            depthFirstRecursion(element, node => {
+                targetElements.push(node);
+            }, node => board.isRecursion(node));
+        }
+        else {
+            targetElements.push(element);
+        }
+        const newSelectedElements = selectedElements.filter(value => !targetElements.includes(value));
+        cacheSelectedElements(board, newSelectedElements);
     }
-    return key;
-}
+};
+const clearSelectedElement = (board) => {
+    cacheSelectedElements(board, []);
+};
+const isSelectedElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    return !!selectedElements.find(value => value === element);
+};
+const temporaryDisableSelection = (board) => {
+    const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
+    board.setPluginOptions(PlaitPluginKey.withSelection, {
+        isDisabledSelect: true
+    });
+    setTimeout(() => {
+        board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
+    }, 0);
+};
 
 /**
  * drawRoundRectangle
@@ -4077,9 +3715,6 @@ const PlaitElement = {
             return false;
         }
     },
-    getComponent(value) {
-        return ELEMENT_TO_COMPONENT.get(value);
-    },
     getElementRef(value) {
         return ELEMENT_TO_REF.get(value);
     },
@@ -4332,6 +3967,11 @@ function getRectangleByElements(board, elements, recursion) {
         };
     }
 }
+function getBoundingRectangleByElements(board, elements, recursion) {
+    const rectangle = getRectangleByElements(board, elements, recursion);
+    const angle = getSelectionAngle(elements);
+    return getRectangleByAngle(rectangle, angle) || rectangle;
+}
 function getBoardRectangle(board) {
     return getRectangleByElements(board, board.children, true);
 }
@@ -4399,6 +4039,9 @@ const PlaitBoard = {
     getHost(board) {
         return BOARD_TO_HOST.get(board);
     },
+    getElementLowerHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.lowerHost;
+    },
     getElementHost(board) {
         return BOARD_TO_ELEMENT_HOST.get(board)?.host;
     },
@@ -5606,70 +5249,277 @@ const withHotkey = (board) => {
                 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;
+            if (isHotkey(['mod+0', 'mod+shift+0'], { byKey: true })(event)) {
+                event.preventDefault();
+                BoardTransforms.updateZoom(board, 1);
+                return;
+            }
+        }
+        globalKeyDown(event);
+    };
+    return board;
+};
+
+class PlaitContextService {
+    constructor() {
+        this._stable = new Subject();
+        this.uploadingFiles = [];
+    }
+    getUploadingFile(url) {
+        return this.uploadingFiles.find(file => file.url === url);
+    }
+    setUploadingFile(file) {
+        return this.uploadingFiles.push(file);
+    }
+    removeUploadingFile(fileEntry) {
+        this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
+    }
+    onStable() {
+        return this._stable.asObservable();
+    }
+    nextStable() {
+        this._stable.next('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService, decorators: [{
+            type: Injectable
+        }] });
+
+function withRelatedFragment(board) {
+    const { buildFragment } = board;
+    board.buildFragment = (clipboardContext, rectangle, operationType, originData) => {
+        let relatedFragment = board.getRelatedFragment(originData || []);
+        if (relatedFragment) {
+            if (originData?.length) {
+                relatedFragment = relatedFragment.filter(item => !originData.map(element => element.id).includes(item.id));
+            }
+            if (relatedFragment.length) {
+                if (!clipboardContext) {
+                    clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
+                }
+                else {
+                    clipboardContext = addClipboardContext(clipboardContext, {
+                        text: '',
+                        type: WritableClipboardType.elements,
+                        elements: relatedFragment
+                    });
+                }
+            }
+        }
+        return buildFragment(clipboardContext, rectangle, operationType, originData);
+    };
+    return board;
+}
+
+class ListRender {
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.children = [];
+        this.componentRefs = [];
+        this.contexts = [];
+        this.differ = null;
+        this.initialized = false;
+    }
+    initialize(children, childrenContext) {
+        this.initialized = true;
+        this.children = children;
+        children.forEach((descendant, index) => {
+            NODE_TO_INDEX.set(descendant, index);
+            NODE_TO_PARENT.set(descendant, childrenContext.parent);
+            const context = getContext(this.board, descendant, index, childrenContext.parent);
+            const componentType = getComponentType(this.board, context);
+            const componentRef = createPluginComponent(componentType, context, this.viewContainerRef, childrenContext);
+            this.componentRefs.push(componentRef);
+            this.contexts.push(context);
+        });
+        const newDiffers = this.viewContainerRef.injector.get(IterableDiffers);
+        this.differ = newDiffers.find(children).create(trackBy);
+        this.differ.diff(children);
+    }
+    update(children, childrenContext) {
+        if (!this.initialized) {
+            this.initialize(children, childrenContext);
+            return;
+        }
+        if (!this.differ) {
+            throw new Error('Exception: Can not find differ ');
+        }
+        const { board, parent } = childrenContext;
+        const diffResult = this.differ.diff(children);
+        if (diffResult) {
+            const newContexts = [];
+            const newComponentRefs = [];
+            let currentIndexForFirstElement = null;
+            diffResult.forEachItem((record) => {
+                NODE_TO_INDEX.set(record.item, record.currentIndex);
+                NODE_TO_PARENT.set(record.item, childrenContext.parent);
+                const previousContext = record.previousIndex === null ? undefined : this.contexts[record.previousIndex];
+                const context = getContext(board, record.item, record.currentIndex, parent, previousContext);
+                if (record.previousIndex === null) {
+                    const componentType = getComponentType(board, context);
+                    const componentRef = createPluginComponent(componentType, context, this.viewContainerRef, childrenContext);
+                    newContexts.push(context);
+                    newComponentRefs.push(componentRef);
+                }
+                else {
+                    const componentRef = this.componentRefs[record.previousIndex];
+                    componentRef.instance.context = context;
+                    newComponentRefs.push(componentRef);
+                    newContexts.push(context);
+                }
+                // item might has been changed, so need to compare the id
+                if (record.item === this.children[0] || record.item.id === this.children[0]?.id) {
+                    currentIndexForFirstElement = record.currentIndex;
+                }
+            });
+            diffResult.forEachOperation(record => {
+                // removed
+                if (record.currentIndex === null) {
+                    const componentRef = this.componentRefs[record.previousIndex];
+                    componentRef?.destroy();
+                }
+                // moved
+                if (record.previousIndex !== null && record.currentIndex !== null) {
+                    mountOnItemMove(record.item, record.currentIndex, childrenContext, currentIndexForFirstElement);
+                }
+            });
+            this.componentRefs = newComponentRefs;
+            this.contexts = newContexts;
+            this.children = children;
+        }
+        else {
+            const newContexts = [];
+            this.children.forEach((element, index) => {
+                NODE_TO_INDEX.set(element, index);
+                NODE_TO_PARENT.set(element, childrenContext.parent);
+                const previousContext = this.contexts[index];
+                const previousComponentRef = this.componentRefs[index];
+                const context = getContext(board, element, index, parent, previousContext);
+                previousComponentRef.instance.context = context;
+                newContexts.push(context);
+            });
+            this.contexts = newContexts;
+        }
+    }
+    destroy() {
+        this.children.forEach((element, index) => {
+            if (this.componentRefs[index]) {
+                this.componentRefs[index].destroy();
+            }
+        });
+        this.componentRefs = [];
+        this.children = [];
+        this.contexts = [];
+        this.initialized = false;
+        this.differ = null;
+    }
+}
+const trackBy = (index, element) => {
+    return element.id;
+};
+const createPluginComponent = (componentType, context, viewContainerRef, childrenContext) => {
+    const componentRef = viewContainerRef.createComponent(componentType, { injector: viewContainerRef.injector });
+    const instance = componentRef.instance;
+    instance.context = context;
+    componentRef.changeDetectorRef.detectChanges();
+    const g = componentRef.instance.getContainerG();
+    mountElementG(context.index, g, childrenContext);
+    componentRef.instance.initializeListRender();
+    return componentRef;
+};
+const getComponentType = (board, context) => {
+    const result = board.drawElement(context);
+    return result;
+};
+const getContext = (board, element, index, parent, previousContext) => {
+    let isSelected = isSelectedElement(board, element);
+    const previousElement = previousContext && previousContext.element;
+    if (previousElement && previousElement !== element && isSelectedElement(board, previousElement)) {
+        isSelected = true;
+        removeSelectedElement(board, previousElement);
+        addSelectedElement(board, element);
+    }
+    const context = {
+        element: element,
+        parent: parent,
+        board: board,
+        selected: isSelected,
+        index
+    };
+    return context;
+};
+// the g depth of root element：[1]-[2]-[3]-[4]
+// the g depth of root element and children element（the [2] element has children）：
+// [1]-
+// [2]([2-1-1][2-1-2][2-1][2-2][2-3-1][2-3-2][2-3][2])-
+// [3]-
+// [4]
+const mountElementG = (index, g, childrenContext, 
+// for moving scene: the current index for first element before moving
+currentIndexForFirstElement = null) => {
+    const { parent, parentG } = childrenContext;
+    if (PlaitBoard.isBoard(parent)) {
+        if (index > 0) {
+            const previousElement = parent.children[index - 1];
+            const previousContainerG = PlaitElement.getContainerG(previousElement, { suppressThrow: false });
+            previousContainerG.insertAdjacentElement('afterend', g);
+        }
+        else {
+            if (currentIndexForFirstElement !== null) {
+                const firstElement = parent.children[currentIndexForFirstElement];
+                const firstContainerG = firstElement && PlaitElement.getContainerG(firstElement, { suppressThrow: true });
+                if (firstElement && firstContainerG) {
+                    parentG.insertBefore(g, firstContainerG);
+                }
+                else {
+                    throw new Error('fail to mount container on moving');
+                }
+            }
+            else {
+                parentG.append(g);
             }
         }
-        globalKeyDown(event);
-    };
-    return board;
-};
-
-class PlaitContextService {
-    constructor() {
-        this._stable = new Subject();
-        this.uploadingFiles = [];
-    }
-    getUploadingFile(url) {
-        return this.uploadingFiles.find(file => file.url === url);
-    }
-    setUploadingFile(file) {
-        return this.uploadingFiles.push(file);
-    }
-    removeUploadingFile(fileEntry) {
-        this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
-    }
-    onStable() {
-        return this._stable.asObservable();
-    }
-    nextStable() {
-        this._stable.next('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitContextService, decorators: [{
-            type: Injectable
-        }] });
-
-function withRelatedFragment(board) {
-    const { buildFragment } = board;
-    board.buildFragment = (clipboardContext, rectangle, operationType, originData) => {
-        let relatedFragment = board.getRelatedFragment(originData || []);
-        if (relatedFragment) {
-            if (originData?.length) {
-                relatedFragment = relatedFragment.filter(item => !originData.map(element => element.id).includes(item.id));
-            }
-            if (relatedFragment.length) {
-                if (!clipboardContext) {
-                    clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
+    else {
+        if (index > 0) {
+            const previousElement = parent.children[index - 1];
+            const previousElementG = PlaitElement.getElementG(previousElement);
+            previousElementG.insertAdjacentElement('afterend', g);
+        }
+        else {
+            if (currentIndexForFirstElement) {
+                const nextElement = parent.children[currentIndexForFirstElement];
+                const nextPath = nextElement && PlaitBoard.findPath(childrenContext.board, nextElement);
+                const first = nextPath && PlaitNode.first(childrenContext.board, nextPath);
+                const firstContainerG = first && PlaitElement.getContainerG(first, { suppressThrow: false });
+                if (firstContainerG) {
+                    parentG.insertBefore(g, firstContainerG);
                 }
                 else {
-                    clipboardContext = addClipboardContext(clipboardContext, {
-                        text: '',
-                        type: WritableClipboardType.elements,
-                        elements: relatedFragment
-                    });
+                    throw new Error('fail to mount container on moving');
                 }
             }
+            else {
+                let parentElementG = PlaitElement.getElementG(parent);
+                parentG.insertBefore(g, parentElementG);
+            }
         }
-        return buildFragment(clipboardContext, rectangle, operationType, originData);
-    };
-    return board;
-}
+    }
+};
+const mountOnItemMove = (element, index, childrenContext, currentIndexForFirstElement) => {
+    const containerG = PlaitElement.getContainerG(element, { suppressThrow: false });
+    mountElementG(index, containerG, childrenContext, currentIndexForFirstElement);
+    if (element.children && !PlaitElement.isRootElement(element)) {
+        element.children.forEach((child, index) => {
+            mountOnItemMove(child, index, { ...childrenContext, parent: element }, null);
+        });
+    }
+};
 
+const ElementLowerHostClass = 'element-lower-host';
 const ElementHostClass = 'element-host';
 const ElementUpperHostClass = 'element-upper-host';
 const ElementActiveHostClass = 'element-active-host';
@@ -5721,6 +5571,7 @@ class PlaitBoardComponent {
         };
     }
     ngOnInit() {
+        const elementLowerHost = this.host.querySelector(`.${ElementLowerHostClass}`);
         const elementHost = this.host.querySelector(`.${ElementHostClass}`);
         const elementUpperHost = this.host.querySelector(`.${ElementUpperHostClass}`);
         const elementActiveHost = this.host.querySelector(`.${ElementActiveHostClass}`);
@@ -5745,6 +5596,7 @@ class PlaitBoardComponent {
         BOARD_TO_HOST.set(this.board, this.host);
         IS_BOARD_ALIVE.set(this.board, true);
         BOARD_TO_ELEMENT_HOST.set(this.board, {
+            lowerHost: elementLowerHost,
             host: elementHost,
             upperHost: elementUpperHost,
             activeHost: elementActiveHost,
@@ -6024,6 +5876,7 @@ class PlaitBoardComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PlaitBoardComponent, isStandalone: true, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, providers: [PlaitContextService], queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
+                <g class="element-lower-host"></g>
                 <g class="element-host"></g>
                 <g class="element-upper-host"></g>
                 <g class="element-active-host"></g>
@@ -6039,6 +5892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
+                <g class="element-lower-host"></g>
                 <g class="element-host"></g>
                 <g class="element-upper-host"></g>
                 <g class="element-active-host"></g>
@@ -6087,6 +5941,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 args: [PlaitIslandBaseComponent, { descendants: true }]
             }] } });
 
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasOnContextChanged(value) {
+    if (value.onContextChanged) {
+        return true;
+    }
+    return false;
+}
+
+class PlaitPluginElementComponent {
+    get hasChildren() {
+        return !!this.element.children;
+    }
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
+        }
+        const previousContext = this._context;
+        this._context = value;
+        if (this.initialized) {
+            const elementG = this.getElementG();
+            const containerG = this.getContainerG();
+            NODE_TO_G.set(this.element, elementG);
+            NODE_TO_CONTAINER_G.set(this.element, containerG);
+            ELEMENT_TO_REF.set(this.element, this.ref);
+            this.updateListRender();
+            this.cdr.markForCheck();
+            if (hasOnContextChanged(this)) {
+                this.onContextChanged(value, previousContext);
+            }
+        }
+        else {
+            if (PlaitElement.isRootElement(this.element) && this.hasChildren) {
+                this._g = createG();
+                this._containerG = createG();
+                this._containerG.append(this._g);
+            }
+            else {
+                this._g = createG();
+                this._containerG = this._g;
+            }
+            NODE_TO_G.set(this.element, this._g);
+            NODE_TO_CONTAINER_G.set(this.element, this._containerG);
+            ELEMENT_TO_REF.set(this.element, this.ref);
+        }
+    }
+    get context() {
+        return this._context;
+    }
+    get element() {
+        return this.context && this.context.element;
+    }
+    get board() {
+        return this.context && this.context.board;
+    }
+    get selected() {
+        return this.context && this.context.selected;
+    }
+    getContainerG() {
+        return this._containerG;
+    }
+    getElementG() {
+        return this._g;
+    }
+    constructor(ref) {
+        this.ref = ref;
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.cdr = inject(ChangeDetectorRef);
+        this.initialized = false;
+    }
+    ngOnInit() {
+        if (this.element.type) {
+            this.getContainerG().setAttribute(`plait-${this.element.type}`, 'true');
+        }
+        if (this.hasChildren) {
+            if (PlaitElement.isRootElement(this.element)) {
+                this._rootContainerG = this._containerG;
+            }
+            else {
+                const path = PlaitBoard.findPath(this.board, this.element);
+                const rootNode = PlaitNode.get(this.board, path.slice(0, 1));
+                this._rootContainerG = PlaitElement.getContainerG(rootNode, { suppressThrow: false });
+            }
+        }
+        this.getContainerG().setAttribute('plait-data-id', this.element.id);
+        this.initialized = true;
+    }
+    initializeListRender() {
+        if (this.hasChildren) {
+            this.listRender = new ListRender(this.board, this.viewContainerRef);
+            if (this.board.isExpanded(this.element)) {
+                this.listRender.initialize(this.element.children, this.initializeChildrenContext());
+            }
+        }
+    }
+    getRef() {
+        return this.ref;
+    }
+    updateListRender() {
+        if (this.hasChildren) {
+            if (!this.listRender) {
+                throw new Error('incorrectly initialize list render');
+            }
+            if (this.board.isExpanded(this.element)) {
+                this.listRender.update(this.element.children, this.initializeChildrenContext());
+            }
+            else {
+                if (this.listRender.initialized) {
+                    this.listRender.destroy();
+                }
+            }
+        }
+    }
+    initializeChildrenContext() {
+        if (!this._rootContainerG) {
+            throw new Error('can not resolve root container g');
+        }
+        return {
+            board: this.board,
+            parent: this.element,
+            parentG: this._rootContainerG
+        };
+    }
+    ngOnDestroy() {
+        if (NODE_TO_G.get(this.element) === this._g) {
+            NODE_TO_G.delete(this.element);
+        }
+        if (NODE_TO_CONTAINER_G.get(this.element) === this._containerG) {
+            NODE_TO_CONTAINER_G.delete(this.element);
+        }
+        if (ELEMENT_TO_REF.get(this.element) === this.ref) {
+            ELEMENT_TO_REF.set(this.element, this.ref);
+        }
+        removeSelectedElement(this.board, this.element);
+        this.getContainerG().remove();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined }], propDecorators: { context: [{
+                type: Input
+            }] } });
+
 /**
  * 1.create board instance
  * 2.build fake node weak map
@@ -6345,5 +6348,5 @@ const isDebug = (key) => {
  * Generated bundle index. Do not edit.
  */
 
-export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitContextService, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardOperationType, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, isSnapPoint, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
+export { A, ACTIVE_MOVING_CLASS_NAME, ACTIVE_STROKE_WIDTH, ALT, APOSTROPHE, ATTACHED_ELEMENT_CLASS_NAME, AT_SIGN, B, BACKSLASH, BACKSPACE, BOARD_TO_AFTER_CHANGE, BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_MOVING_POINT_IN_BOARD, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_TOUCH_REF, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, C, CAPS_LOCK, CLOSE_SQUARE_BRACKET, COMMA, CONTEXT_MENU, CONTROL, ColorfulThemeColor, CoreTransforms, CursorClass, D, DASH, DELETE, DOWN_ARROW, DarkThemeColor, DebugGenerator, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_REF, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_CONTAINER_G, NODE_TO_G, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitContextService, PlaitElement, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RESIZE_HANDLE_CLASS_NAME, RIGHT_ARROW, ROTATE_HANDLE_CLASS_NAME, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SNAP_TOLERANCE, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardOperationType, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, canSetZIndex, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawDashedLines, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawPendingNodesG, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, getAngleByElement, getBarPoint, getBoardRectangle, getBoundingRectangleByElements, getClipboardData, getClipboardFromHtml, getCrossingPointsBetweenEllipseAndSegment, getDataTransferClipboard, getDataTransferClipboardText, getEditingGroup, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getElementsIndices, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestIndexOfElement, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMinPointDelta, getMovingElements, getNearestDelta, getNearestPointBetweenPointAndEllipse, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, getValidElements, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isIndicesContinuous, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, isSnapPoint, moveElementsToNewPath, moveElementsToNewPathAfterAddGroup, nonGroupInHighestSelectedElements, normalizeAngle, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setFragment, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, sortElements, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map