@plait/core 0.54.0 → 0.55.1

package/fesm2022/plait-core.mjs

@@ -1,17 +1,18 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Injectable, Component, ChangeDetectionStrategy, EventEmitter, ElementRef, Output, HostBinding, ViewChild, ContentChildren } from '@angular/core';
+import { IterableDiffers, inject, ViewContainerRef, Directive, Input, Injectable, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, Output, HostBinding, ViewChild, ContentChildren } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { timer, Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, tap } from 'rxjs/operators';
 import { isKeyHotkey, isHotkey } from 'is-hotkey';
-import { produce, createDraft, finishDraft, isDraft } from 'immer';
-import { NgFor } from '@angular/common';
+import { createDraft, finishDraft, isDraft } from 'immer';
 
 // 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 NODE_TO_G = new WeakMap();
+const NODE_TO_CONTAINER_G = new WeakMap();
 const IS_TEXT_EDITABLE = new WeakMap();
 const BOARD_TO_ON_CHANGE = new WeakMap();
 const BOARD_TO_AFTER_CHANGE = new WeakMap();
@@ -77,11 +78,11 @@ const Selection = {
     }
 };
 
-const sortElements = (board, elements) => {
+const sortElements = (board, elements, ascendingOrder = true) => {
     return [...elements].sort((a, b) => {
         const pathA = PlaitBoard.findPath(board, a);
         const pathB = PlaitBoard.findPath(board, b);
-        return pathA[0] - pathB[0];
+        return ascendingOrder ? pathA[0] - pathB[0] : pathB[0] - pathA[0];
     });
 };
 
@@ -506,6 +507,8 @@ 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 = {
@@ -621,7 +624,216 @@ function hasOnContextChanged(value) {
     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);
@@ -632,20 +844,28 @@ class PlaitPluginElementComponent {
             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);
+            this.updateListRender();
             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);
+            if (PlaitElement.isRootElement(this.element) && this.hasChildren) {
+                this._g = createG();
+                this._containerG = createG();
+                this._containerG.append(this._g);
             }
             else {
-                this.g = createG();
+                this._g = createG();
+                this._containerG = this._g;
             }
+            NODE_TO_G.set(this.element, this._g);
+            NODE_TO_CONTAINER_G.set(this.element, this._containerG);
         }
     }
     get context() {
@@ -660,25 +880,79 @@ class PlaitPluginElementComponent {
     get selected() {
         return this.context && this.context.selected;
     }
-    get effect() {
-        return this.context && this.context.effect;
+    getContainerG() {
+        return this._containerG;
+    }
+    getElementG() {
+        return this._g;
     }
     constructor(cdr) {
         this.cdr = cdr;
+        this.viewContainerRef = inject(ViewContainerRef);
         this.initialized = false;
     }
     ngOnInit() {
         if (this.element.type) {
-            (this.rootG || this.g).setAttribute(`plait-${this.element.type}`, 'true');
+            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());
+            }
+        }
+    }
+    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);
+        }
         removeSelectedElement(this.board, this.element);
-        (this.rootG || this.g).remove();
+        this.getContainerG().remove();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.4", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
@@ -968,6 +1242,42 @@ function toFixed(v) {
 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);
@@ -1055,6 +1365,42 @@ function uniqueById(elements) {
     });
     return Array.from(uniqueMap.values());
 }
+const findLastIndex = (array, cb, fromIndex = array.length - 1) => {
+    if (fromIndex < 0) {
+        fromIndex = array.length + fromIndex;
+    }
+    fromIndex = Math.min(array.length - 1, Math.max(fromIndex, 0));
+    let index = fromIndex + 1;
+    while (--index > -1) {
+        if (cb(array[index], index, array)) {
+            return index;
+        }
+    }
+    return -1;
+};
+const findIndex = (array, cb, fromIndex = 0) => {
+    // fromIndex = 2
+    if (fromIndex < 0) {
+        fromIndex = array.length + fromIndex;
+    }
+    fromIndex = Math.min(array.length, Math.max(fromIndex, 0));
+    let index = fromIndex - 1;
+    while (++index < array.length) {
+        if (cb(array[index], index, array)) {
+            return index;
+        }
+    }
+    return -1;
+};
+const isIndicesContinuous = (indexes) => {
+    indexes.sort((a, b) => a - b);
+    for (let i = 1; i < indexes.length; i++) {
+        if (indexes[i] !== indexes[i - 1] + 1) {
+            return false;
+        }
+    }
+    return true;
+};
 
 /**
  * Check whether to merge an operation into the previous operation.
@@ -1694,157 +2040,458 @@ const setIsFromViewportChange = (board, state) => {
 };
 function scrollToRectangle(board, client) { }
 
-const BOARD_TO_RAF = new WeakMap();
-const getTimerId = (board, key) => {
-    const state = getRAFState(board);
-    return state[key] || null;
-};
-const getRAFState = (board) => {
-    return BOARD_TO_RAF.get(board) || {};
-};
-const throttleRAF = (board, key, fn) => {
-    const scheduleFunc = () => {
-        let timerId = requestAnimationFrame(() => {
-            const value = BOARD_TO_RAF.get(board) || {};
-            value[key] = null;
-            BOARD_TO_RAF.set(board, value);
-            PlaitBoard.isAlive(board) && fn();
-        });
-        const state = getRAFState(board);
-        state[key] = timerId;
-        BOARD_TO_RAF.set(board, state);
-    };
-    let timerId = getTimerId(board, key);
-    if (timerId !== null) {
-        cancelAnimationFrame(timerId);
-    }
-    scheduleFunc();
-};
-const debounce = (func, wait, options) => {
-    let timerSubscription = null;
-    return () => {
-        if (timerSubscription && !timerSubscription.closed) {
-            timerSubscription.unsubscribe();
-            timerSubscription = timer(wait).subscribe(() => {
-                func();
-            });
+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 {
-            if (options?.leading) {
-                timer(0).subscribe(() => {
-                    func();
-                });
-            }
-            timerSubscription = timer(wait).subscribe();
+            paths = paths.slice(0, -1);
         }
-    };
-};
-
-const IS_DRAGGING = new WeakMap();
-const isDragging = (board) => {
-    return !!IS_DRAGGING.get(board);
-};
-const setDragging = (board, state) => {
-    IS_DRAGGING.set(board, state);
-};
-
-const getMovingElements = (board) => {
-    return BOARD_TO_MOVING_ELEMENT.get(board) || [];
-};
-const isMovingElements = (board) => {
-    return (BOARD_TO_MOVING_ELEMENT.get(board) || []).length > 0;
-};
-const removeMovingElements = (board) => {
-    BOARD_TO_MOVING_ELEMENT.delete(board);
-    setDragging(board, false);
-};
-const cacheMovingElements = (board, elements) => {
-    BOARD_TO_MOVING_ELEMENT.set(board, elements);
-    setDragging(board, true);
-};
-
-const IMAGE_CONTAINER = 'plait-image-container';
-/**
- * Is element node
- * @param node
- * @returns
- */
-function isElementNode(node) {
-    return node.nodeType === Node.ELEMENT_NODE;
-}
-/**
- * load image resources
- * @param url image url
- * @returns image element
- */
-function loadImage(src) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.crossOrigin = 'Anonymous';
-        img.onload = () => resolve(img);
-        img.onerror = () => reject(new Error('Failed to load image'));
-        img.src = src;
-    });
-}
-/**
- * create and return canvas and context
- * @param width canvas width
- * @param height canvas height
- * @param fillStyle fill style
- * @returns canvas and context
- */
-function createCanvas(width, height, fillStyle = 'transparent') {
-    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
-    };
-}
-/**
- * convert image to base64
- * @param url image url
- * @returns image base64
- */
-function convertImageToBase64(url) {
-    return loadImage(url).then(img => {
-        const { canvas, ctx } = createCanvas(img.width, img.height);
-        ctx?.drawImage(img, 0, 0);
-        return canvas.toDataURL('image/png');
-    });
-}
-/**
- * clone node style
- * @param nativeNode source node
- * @param clonedNode clone node
- */
-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));
-        });
-    }
-}
-/**
- * batch clone target styles
- * @param sourceNode
+        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 previous path of a root path [${path}], because it has no previous index.`);
+        }
+        const last = path[path.length - 1];
+        if (last <= 0) {
+            throw new Error(`Cannot get the previous path of a first child path [${path}] because it would result in a negative index.`);
+        }
+        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) {
+        if (!path)
+            return null;
+        // PERF: use destructing instead of immer
+        const p = [...path];
+        // PERF: Exit early if the operation is guaranteed not to have an effect.
+        if (path.length === 0) {
+            return p;
+        }
+        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 p;
+                }
+                if (Path.isAncestor(op, p) || Path.equals(op, p)) {
+                    const copy = onp.slice();
+                    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;
+    },
+    first(board, path) {
+        const p = path.slice();
+        let n = PlaitNode.get(board, p);
+        if (!n.children) {
+            return n;
+        }
+        while (n) {
+            if (n.children.length === 0) {
+                break;
+            }
+            else {
+                n = n.children[0];
+                p.push(0);
+            }
+        }
+        return n;
+    }
+};
+
+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
+};
+
+const BOARD_TO_RAF = new WeakMap();
+const getTimerId = (board, key) => {
+    const state = getRAFState(board);
+    return state[key] || null;
+};
+const getRAFState = (board) => {
+    return BOARD_TO_RAF.get(board) || {};
+};
+const throttleRAF = (board, key, fn) => {
+    const scheduleFunc = () => {
+        let timerId = requestAnimationFrame(() => {
+            const value = BOARD_TO_RAF.get(board) || {};
+            value[key] = null;
+            BOARD_TO_RAF.set(board, value);
+            PlaitBoard.isAlive(board) && fn();
+        });
+        const state = getRAFState(board);
+        state[key] = timerId;
+        BOARD_TO_RAF.set(board, state);
+    };
+    let timerId = getTimerId(board, key);
+    if (timerId !== null) {
+        cancelAnimationFrame(timerId);
+    }
+    scheduleFunc();
+};
+const debounce = (func, wait, options) => {
+    let timerSubscription = null;
+    return () => {
+        if (timerSubscription && !timerSubscription.closed) {
+            timerSubscription.unsubscribe();
+            timerSubscription = timer(wait).subscribe(() => {
+                func();
+            });
+        }
+        else {
+            if (options?.leading) {
+                timer(0).subscribe(() => {
+                    func();
+                });
+            }
+            timerSubscription = timer(wait).subscribe();
+        }
+    };
+};
+const getElementsIndices = (board, elements) => {
+    sortElements(board, elements);
+    return elements
+        .map(item => {
+        return board.children.map(item => item.id).indexOf(item.id);
+    })
+        .filter(item => item >= 0);
+};
+const getHighestIndexOfElement = (board, elements) => {
+    const indices = getElementsIndices(board, elements);
+    return indices[indices.length - 1];
+};
+const moveElementsToNewPath = (board, moveOptions) => {
+    moveOptions
+        .map(item => {
+        const path = PlaitBoard.findPath(board, item.element);
+        const ref = board.pathRef(path);
+        return () => {
+            ref.current && NodeTransforms.moveNode(board, ref.current, item.newPath);
+            ref.unref();
+        };
+    })
+        .forEach(action => {
+        action();
+    });
+};
+
+const IS_DRAGGING = new WeakMap();
+const isDragging = (board) => {
+    return !!IS_DRAGGING.get(board);
+};
+const setDragging = (board, state) => {
+    IS_DRAGGING.set(board, state);
+};
+
+const getMovingElements = (board) => {
+    return BOARD_TO_MOVING_ELEMENT.get(board) || [];
+};
+const isMovingElements = (board) => {
+    return (BOARD_TO_MOVING_ELEMENT.get(board) || []).length > 0;
+};
+const removeMovingElements = (board) => {
+    BOARD_TO_MOVING_ELEMENT.delete(board);
+    setDragging(board, false);
+};
+const cacheMovingElements = (board, elements) => {
+    BOARD_TO_MOVING_ELEMENT.set(board, elements);
+    setDragging(board, true);
+};
+
+const IMAGE_CONTAINER = 'plait-image-container';
+/**
+ * Is element node
+ * @param node
+ * @returns
+ */
+function isElementNode(node) {
+    return node.nodeType === Node.ELEMENT_NODE;
+}
+/**
+ * load image resources
+ * @param url image url
+ * @returns image element
+ */
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'Anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('Failed to load image'));
+        img.src = src;
+    });
+}
+/**
+ * create and return canvas and context
+ * @param width canvas width
+ * @param height canvas height
+ * @param fillStyle fill style
+ * @returns canvas and context
+ */
+function createCanvas(width, height, fillStyle = 'transparent') {
+    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
+    };
+}
+/**
+ * convert image to base64
+ * @param url image url
+ * @returns image base64
+ */
+function convertImageToBase64(url) {
+    return loadImage(url).then(img => {
+        const { canvas, ctx } = createCanvas(img.width, img.height);
+        ctx?.drawImage(img, 0, 0);
+        return canvas.toDataURL('image/png');
+    });
+}
+/**
+ * clone node style
+ * @param nativeNode source node
+ * @param clonedNode clone node
+ */
+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));
+        });
+    }
+}
+/**
+ * batch clone target styles
+ * @param sourceNode
  * @param cloneNode
  * @param inlineStyleClassNames
  */
@@ -1899,7 +2546,7 @@ async function cloneSvg(board, elements, rectangle, options) {
     const { width, height, x, y } = rectangle;
     const { padding = 4, inlineStyleClassNames } = options;
     const sourceSvg = PlaitBoard.getHost(board);
-    const selectedGElements = elements.map(value => PlaitElement.getComponent(value).g);
+    const selectedGElements = elements.map(value => PlaitElement.getElementG(value));
     const cloneSvgElement = sourceSvg.cloneNode();
     const newHostElement = PlaitBoard.getElementHost(board).cloneNode();
     cloneSvgElement.style.width = `${width}px`;
@@ -2013,19 +2660,19 @@ const getProbablySupportsClipboardWriteText = () => {
 const getProbablySupportsClipboardRead = () => {
     return 'clipboard' in navigator && 'read' in navigator.clipboard;
 };
-const createClipboardContext = (type, data, text) => {
+const createClipboardContext = (type, elements, text) => {
     return {
         type,
-        data,
+        elements,
         text
     };
 };
 const addClipboardContext = (clipboardContext, addition) => {
-    const { type, data, text } = clipboardContext;
+    const { type, elements, text } = clipboardContext;
     if (type === addition.type) {
         return {
             type,
-            data: data.concat(addition.data),
+            elements: elements.concat(addition.elements),
             text: text + ' ' + addition.text
         };
     }
@@ -2150,297 +2797,75 @@ const getClipboardData = async (dataTransfer) => {
         return await getNavigatorClipboard();
     }
     return clipboardData;
-};
-const setClipboardData = async (dataTransfer, clipboardContext) => {
-    if (!clipboardContext) {
-        return;
-    }
-    const { type, data, text } = clipboardContext;
-    if (getProbablySupportsClipboardWrite()) {
-        return await setNavigatorClipboard(type, data, text);
-    }
-    if (dataTransfer) {
-        setDataTransferClipboard(dataTransfer, type, data);
-        setDataTransferClipboardText(dataTransfer, text);
-        return;
-    }
-    // Compatible with situations where navigator.clipboard.write is not supported and dataTransfer is empty
-    // Such as contextmenu copy in Firefox.
-    if (getProbablySupportsClipboardWriteText()) {
-        return await navigator.clipboard.writeText(buildPlaitHtml(type, data));
-    }
-};
-
-const BOARD_TO_TOUCH_REF = new WeakMap();
-const isPreventTouchMove = (board) => {
-    return !!BOARD_TO_TOUCH_REF.get(board);
-};
-const preventTouchMove = (board, event, state) => {
-    const hostElement = PlaitBoard.getElementHost(board);
-    const activeHostElement = PlaitBoard.getElementActiveHost(board);
-    if (state) {
-        if ((event.target instanceof HTMLElement || event.target instanceof SVGElement) &&
-            (hostElement.contains(event.target) || activeHostElement.contains(event.target))) {
-            BOARD_TO_TOUCH_REF.set(board, { state, target: event.target instanceof SVGElement ? event.target : undefined });
-        }
-        else {
-            BOARD_TO_TOUCH_REF.set(board, { state, target: undefined });
-        }
-    }
-    else {
-        const ref = BOARD_TO_TOUCH_REF.get(board);
-        if (ref) {
-            BOARD_TO_TOUCH_REF.delete(board);
-            ref.host?.remove();
-        }
-    }
-};
-/**
- * some intersection maybe cause target is removed from current browser window,
- * after it was removed touch move event will not be fired
- * so scroll behavior will can not be prevented in mobile browser device
- * this function will prevent target element being remove.
- */
-const handleTouchTarget = (board) => {
-    const touchRef = BOARD_TO_TOUCH_REF.get(board);
-    if (touchRef &&
-        touchRef.target &&
-        !PlaitBoard.getElementHost(board).contains(touchRef.target) &&
-        !PlaitBoard.getElementActiveHost(board).contains(touchRef.target)) {
-        touchRef.target.style.opacity = '0';
-        const host = createG();
-        host.appendChild(touchRef.target);
-        touchRef.host = host;
-        host.classList.add('touch-target');
-        PlaitBoard.getElementActiveHost(board).append(host);
-    }
-};
-
-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?.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 setClipboardData = async (dataTransfer, clipboardContext) => {
+    if (!clipboardContext) {
+        return;
+    }
+    const { type, elements, text } = clipboardContext;
+    if (getProbablySupportsClipboardWrite()) {
+        return await setNavigatorClipboard(type, elements, text);
+    }
+    if (dataTransfer) {
+        setDataTransferClipboard(dataTransfer, type, elements);
+        setDataTransferClipboardText(dataTransfer, text);
+        return;
+    }
+    // Compatible with situations where navigator.clipboard.write is not supported and dataTransfer is empty
+    // Such as contextmenu copy in Firefox.
+    if (getProbablySupportsClipboardWriteText()) {
+        return await navigator.clipboard.writeText(buildPlaitHtml(type, elements));
     }
 };
 
-const PlaitNode = {
-    parent: (board, path) => {
-        const parentPath = Path.parent(path);
-        const p = PlaitNode.get(board, parentPath);
-        return p;
-    },
-    /**
-     * Return a generator of all the ancestor nodes above a specific path.
-     *
-     * By default the order is top-down, from highest to lowest ancestor in
-     * the tree, but you can pass the `reverse: true` option to go bottom-up.
-     */
-    *parents(root, path, options = {}) {
-        for (const p of Path.ancestors(path, options)) {
-            const n = PlaitNode.get(root, p);
-            yield n;
+const BOARD_TO_TOUCH_REF = new WeakMap();
+const isPreventTouchMove = (board) => {
+    return !!BOARD_TO_TOUCH_REF.get(board);
+};
+const preventTouchMove = (board, event, state) => {
+    const hostElement = PlaitBoard.getElementHost(board);
+    const activeHostElement = PlaitBoard.getElementActiveHost(board);
+    if (state) {
+        if ((event.target instanceof HTMLElement || event.target instanceof SVGElement) &&
+            (hostElement.contains(event.target) || activeHostElement.contains(event.target))) {
+            BOARD_TO_TOUCH_REF.set(board, { state, target: event.target instanceof SVGElement ? event.target : undefined });
         }
-    },
-    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];
+        else {
+            BOARD_TO_TOUCH_REF.set(board, { state, target: undefined });
         }
-        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];
+    }
+    else {
+        const ref = BOARD_TO_TOUCH_REF.get(board);
+        if (ref) {
+            BOARD_TO_TOUCH_REF.delete(board);
+            ref.host?.remove();
         }
-        return n;
+    }
+};
+/**
+ * some intersection maybe cause target is removed from current browser window,
+ * after it was removed touch move event will not be fired
+ * so scroll behavior will can not be prevented in mobile browser device
+ * this function will prevent target element being remove.
+ */
+const handleTouchTarget = (board) => {
+    const touchRef = BOARD_TO_TOUCH_REF.get(board);
+    if (touchRef &&
+        touchRef.target &&
+        !PlaitBoard.getElementHost(board).contains(touchRef.target) &&
+        !PlaitBoard.getElementActiveHost(board).contains(touchRef.target)) {
+        touchRef.target.style.opacity = '0';
+        const host = createG();
+        host.appendChild(touchRef.target);
+        touchRef.host = host;
+        host.classList.add('touch-target');
+        PlaitBoard.getElementActiveHost(board).append(host);
+    }
+};
+
+const Viewport = {
+    isViewport: (value) => {
+        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
     }
 };
 
@@ -2586,40 +3011,65 @@ const GeneralTransforms = {
     }
 };
 
-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 addGroup = (board, elements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
+    const highestSelectedElements = [...selectedGroups, ...selectedIsolatedElements];
+    const group = createGroup();
+    if (canAddGroup(board)) {
+        highestSelectedElements.forEach(item => {
+            const path = PlaitBoard.findPath(board, item);
+            NodeTransforms.setNode(board, { groupId: group.id }, path);
+        });
+        const selectedElements = getSelectedElements(board);
+        const highestIndexOfSelectedElement = getHighestIndexOfElement(board, selectedElements);
+        const indices = getElementsIndices(board, highestSelectedElements);
+        const isContinuous = isIndicesContinuous(indices);
+        if (!isContinuous) {
+            moveElementsToNewPathAfterAddGroup(board, selectedElements, [highestIndexOfSelectedElement - 1]);
+        }
+        if (hasSelectedElementsInSameGroup(highestSelectedElements)) {
+            const newGroupId = selectedIsolatedElements[0].groupId;
+            NodeTransforms.insertNode(board, {
+                ...group,
+                groupId: newGroupId
+            }, [board.children.length]);
+        }
+        else {
+            NodeTransforms.insertNode(board, group, [board.children.length]);
         }
     }
-    const operation = { type: 'set_node', properties, newProperties, path };
-    board.apply(operation);
-}
-function removeNode(board, path) {
-    const node = PlaitNode.get(board, path);
-    const operation = { type: 'remove_node', path, node };
-    board.apply(operation);
-}
-function moveNode(board, path, newPath) {
-    const operation = { type: 'move_node', path, newPath };
-    board.apply(operation);
-}
-const NodeTransforms = {
-    insertNode,
-    setNode,
-    removeNode,
-    moveNode
+};
+const removeGroup = (board, elements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    if (canRemoveGroup(board)) {
+        selectedGroups.forEach(group => {
+            const elementsInGroup = findElements(board, {
+                match: item => item.groupId === group.id,
+                recursion: () => false
+            });
+            elementsInGroup.forEach(element => {
+                const path = PlaitBoard.findPath(board, element);
+                NodeTransforms.setNode(board, { groupId: group.groupId || undefined }, path);
+            });
+        });
+        selectedGroups
+            .map(group => {
+            const groupPath = PlaitBoard.findPath(board, group);
+            const groupRef = board.pathRef(groupPath);
+            return () => {
+                groupRef.current && NodeTransforms.removeNode(board, groupRef.current);
+                groupRef.unref();
+            };
+        })
+            .forEach(action => {
+            action();
+        });
+    }
+};
+const GroupTransforms = {
+    addGroup,
+    removeGroup
 };
 
 function setSelection(board, selection) {
@@ -2646,6 +3096,184 @@ function addSelectionWithTemporaryElements(board, elements) {
     }
 }
 
+const getOneMoveOptions = (board, direction) => {
+    const indicesToMove = getElementsIndices(board, getSelectedElements(board));
+    let groupedIndices = toContiguousGroups(board, indicesToMove);
+    if (direction === 'up') {
+        groupedIndices = groupedIndices.reverse();
+    }
+    let moveContents = [];
+    groupedIndices.forEach((indices, i) => {
+        const leadingIndex = indices[0];
+        const trailingIndex = indices[indices.length - 1];
+        const boundaryIndex = direction === 'down' ? leadingIndex : trailingIndex;
+        const targetIndex = getTargetIndex(board, boundaryIndex, direction);
+        if (targetIndex === -1 || boundaryIndex === targetIndex) {
+            return;
+        }
+        if (direction === 'down') {
+            indices = indices.reverse();
+        }
+        moveContents.push(...indices.map(path => {
+            return {
+                element: board.children[path],
+                newPath: [targetIndex]
+            };
+        }));
+    });
+    return moveContents;
+};
+const getAllMoveOptions = (board, direction) => {
+    const indicesToMove = getElementsIndices(board, getSelectedElements(board));
+    let groupedIndices = toContiguousGroups(board, indicesToMove);
+    let moveContents = [];
+    if (direction === 'down') {
+        groupedIndices = groupedIndices.reverse();
+    }
+    groupedIndices.forEach(indices => {
+        const leadingIndex = indices[0];
+        const trailingIndex = indices[indices.length - 1];
+        const boundaryIndex = direction === 'down' ? leadingIndex : trailingIndex;
+        const sourceElement = board.children[boundaryIndex];
+        const editingGroup = getEditingGroup(board, sourceElement);
+        let targetIndex = direction === 'down' ? 0 : board.children.length - 1;
+        if (editingGroup) {
+            const elementsInGroup = sortElements(board, getElementsInGroup(board, editingGroup, true, true));
+            targetIndex =
+                direction === 'down'
+                    ? board.children.indexOf(elementsInGroup[0])
+                    : board.children.indexOf(elementsInGroup[elementsInGroup.length - 1]);
+        }
+        if (direction === 'down') {
+            indices = indices.reverse();
+        }
+        moveContents.push(...indices.map(path => {
+            return {
+                element: board.children[path],
+                newPath: [targetIndex]
+            };
+        }));
+    });
+    return moveContents;
+};
+const canSetZIndex = (board) => {
+    const selectedElements = getSelectedElements(board).filter(item => board.canSetZIndex(item));
+    return selectedElements.length > 0;
+};
+const toContiguousGroups = (board, array) => {
+    let cursor = 0;
+    return array.reduce((acc, value, index) => {
+        if (index > 0) {
+            const currentElement = board.children[value];
+            const previousElement = board.children[array[index - 1]];
+            const isContiguous = value - 1 === array[index - 1]
+                ? true
+                : board.children.every((item, childIndex) => {
+                    if (childIndex > array[index - 1] && childIndex <= value - 1) {
+                        return PlaitGroupElement.isGroup(item);
+                    }
+                    return true;
+                });
+            let isPartialSelectGroupElement = false;
+            if (previousElement?.groupId || (currentElement?.groupId && previousElement?.groupId !== currentElement?.groupId)) {
+                let isPartialSelectPreviousGroup = false;
+                let isPartialSelectCurrentElement = false;
+                if (previousElement.groupId) {
+                    const highestGroup = getHighestGroup(board, previousElement);
+                    isPartialSelectPreviousGroup = !isSelectedAllElementsInGroup(board, highestGroup);
+                }
+                if (currentElement.groupId) {
+                    const highestGroup = getHighestGroup(board, currentElement);
+                    isPartialSelectCurrentElement = !isSelectedAllElementsInGroup(board, highestGroup);
+                }
+                isPartialSelectGroupElement = isPartialSelectPreviousGroup || isPartialSelectCurrentElement;
+            }
+            if (!isContiguous || isPartialSelectGroupElement) {
+                cursor = ++cursor;
+            }
+        }
+        (acc[cursor] || (acc[cursor] = [])).push(value);
+        return acc;
+    }, []);
+};
+/**
+ * Returns next candidate index that's available to be moved to. Currently that
+ *  is a non-deleted element, and not inside a group (unless we're editing it).
+ */
+const getTargetIndex = (board, boundaryIndex, direction) => {
+    if ((boundaryIndex === 0 && direction === 'down') || (boundaryIndex === board.children.length - 1 && direction === 'up')) {
+        return -1;
+    }
+    const indexFilter = (element) => {
+        if (element.isDeleted || PlaitGroupElement.isGroup(element)) {
+            return false;
+        }
+        return true;
+    };
+    const candidateIndex = direction === 'down'
+        ? findLastIndex(board.children, el => indexFilter(el), Math.max(0, boundaryIndex - 1))
+        : findIndex(board.children, el => indexFilter(el), boundaryIndex + 1);
+    const nextElement = board.children[candidateIndex];
+    if (!nextElement) {
+        return -1;
+    }
+    const elements = [...board.children];
+    const sourceElement = elements[boundaryIndex];
+    const editingGroup = getEditingGroup(board, sourceElement);
+    const nextElementGroups = (getGroupByElement(board, nextElement, true) || []);
+    // candidate element is a sibling in current editing group → return
+    if (editingGroup && sourceElement?.groupId !== nextElement?.groupId) {
+        // candidate element is outside current editing group → prevent
+        if (!nextElementGroups.find(item => item.id === editingGroup.id)) {
+            return -1;
+        }
+    }
+    if (!nextElement.groupId) {
+        return candidateIndex;
+    }
+    let siblingGroup;
+    if (editingGroup) {
+        siblingGroup = nextElementGroups[nextElementGroups.indexOf(editingGroup) - 1];
+    }
+    else {
+        siblingGroup = nextElementGroups[nextElementGroups.length - 1];
+    }
+    if (siblingGroup) {
+        let elementsInSiblingGroup = getElementsInGroup(board, siblingGroup, true, false);
+        if (elementsInSiblingGroup.length) {
+            elementsInSiblingGroup.sort((a, b) => {
+                const indexA = board.children.findIndex(child => child.id === a.id);
+                const indexB = board.children.findIndex(child => child.id === b.id);
+                return indexA - indexB;
+            });
+            // assumes getElementsInGroup() returned elements are sorted
+            // by zIndex (ascending)
+            return direction === 'down'
+                ? elements.indexOf(elementsInSiblingGroup[0])
+                : elements.indexOf(elementsInSiblingGroup[elementsInSiblingGroup.length - 1]);
+        }
+    }
+    return candidateIndex;
+};
+
+const moveToTop = (board) => {
+    const moveOptions = getAllMoveOptions(board, 'up');
+    moveElementsToNewPath(board, moveOptions);
+};
+const moveToBottom = (board) => {
+    const moveOptions = getAllMoveOptions(board, 'down');
+    moveElementsToNewPath(board, moveOptions);
+};
+const moveUp = (board) => {
+    const moveOptions = getOneMoveOptions(board, 'up');
+    moveElementsToNewPath(board, moveOptions);
+};
+const moveDown = (board) => {
+    const moveOptions = getOneMoveOptions(board, 'down');
+    moveElementsToNewPath(board, moveOptions);
+};
+const ZIndexTransforms = { moveUp, moveDown, moveToTop, moveToBottom };
+
 const removeElements = (board, elements) => {
     elements
         .map(element => {
@@ -2665,55 +3293,13 @@ const CoreTransforms = {
     removeElements
 };
 
-const addGroup = (board, elements) => {
-    const selectedGroups = getHighestSelectedGroups(board, elements);
-    const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
-    const highestSelectedElements = [...selectedGroups, ...selectedIsolatedElements];
-    const group = createGroup();
-    if (canAddGroup(board)) {
-        highestSelectedElements.forEach(item => {
-            const path = PlaitBoard.findPath(board, item);
-            NodeTransforms.setNode(board, { groupId: group.id }, path);
-        });
-        if (hasSelectedElementsInSameGroup(highestSelectedElements)) {
-            const newGroupId = selectedIsolatedElements[0].groupId;
-            NodeTransforms.insertNode(board, {
-                ...group,
-                groupId: newGroupId
-            }, [board.children.length]);
-        }
-        else {
-            NodeTransforms.insertNode(board, group, [board.children.length]);
-        }
-    }
-};
-const removeGroup = (board, elements) => {
-    const selectedGroups = getHighestSelectedGroups(board, elements);
-    if (canRemoveGroup(board)) {
-        selectedGroups.map(group => {
-            const elementsInGroup = findElements(board, {
-                match: item => item.groupId === group.id,
-                recursion: () => false
-            });
-            elementsInGroup.forEach(item => {
-                const path = PlaitBoard.findPath(board, item);
-                NodeTransforms.setNode(board, { groupId: group.groupId || undefined }, path);
-            });
-            const groupPath = PlaitBoard.findPath(board, group);
-            NodeTransforms.removeNode(board, groupPath);
-        });
-    }
-};
-const GroupTransforms = {
-    addGroup,
-    removeGroup
-};
-
 const Transforms = {
     ...GeneralTransforms,
     ...ViewportTransforms$1,
     ...SelectionTransforms,
-    ...NodeTransforms
+    ...NodeTransforms,
+    ...GroupTransforms,
+    ...ZIndexTransforms
 };
 
 const rotatePoints = (points, centerPoint, angle) => {
@@ -2820,11 +3406,25 @@ function rotateElements(board, elements, angle) {
     const selectionCenterPoint = RectangleClient.getCenterPoint(selectionRectangle);
     elements.forEach(item => {
         const originAngle = item.angle;
-        const points = rotatedDataPoints(item.points, selectionCenterPoint, angle);
+        const points = rotatedDataPoints(item.points, selectionCenterPoint, normalizeAngle(angle));
         const path = PlaitBoard.findPath(board, item);
-        Transforms.setNode(board, { points, angle: originAngle + angle }, path);
+        Transforms.setNode(board, { points, angle: normalizeAngle(originAngle + angle) }, path);
     });
 }
+const normalizeAngle = (angle) => {
+    if (angle < 0) {
+        return angle + 2 * Math.PI;
+    }
+    if (angle >= 2 * Math.PI) {
+        return angle - 2 * Math.PI;
+    }
+    return angle;
+};
+const getAngleBetweenPoints = (startPoint, endPoint, centerPoint) => {
+    const startAngle = (5 * Math.PI) / 2 + Math.atan2(startPoint[1] - centerPoint[1], startPoint[0] - centerPoint[0]);
+    const endAngle = (5 * Math.PI) / 2 + Math.atan2(endPoint[1] - centerPoint[1], endPoint[0] - centerPoint[0]);
+    return normalizeAngle(endAngle - startAngle);
+};
 
 function isSelectionMoving(board) {
     return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
@@ -3103,12 +3703,15 @@ const getHighestSelectedElements = (board, elements) => {
     return [...getHighestSelectedGroups(board, elements), ...getSelectedIsolatedElements(board, elements)];
 };
 const createGroupRectangleG = (board, elements) => {
-    const selectedElements = getSelectedElements(board);
-    const groupRectangleG = createG();
+    const selectedElementIds = getSelectedElements(board).map(item => item.id);
+    let groupRectangleG = null;
     const isMoving = isSelectionMoving(board);
     elements.forEach(item => {
-        const isRender = (!selectedElements.includes(item) && !isMoving) || isMoving;
+        const isRender = (!selectedElementIds.includes(item.id) && !isMoving) || isMoving;
         if (item.groupId && isRender) {
+            if (!groupRectangleG) {
+                groupRectangleG = createG();
+            }
             const elements = getElementsInGroupByElement(board, item);
             const rectangle = getRectangleByElements(board, elements, false);
             const rectangleG = drawRectangle(board, rectangle, {
@@ -3151,16 +3754,262 @@ const canAddGroup = (board, elements) => {
     }
     return false;
 };
-const canRemoveGroup = (board, elements) => {
-    const selectedGroups = getHighestSelectedGroups(board, elements);
-    const selectedElements = elements || getSelectedElements(board);
-    return selectedElements.length > 0 && selectedGroups.length > 0;
+const canRemoveGroup = (board, elements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    const selectedElements = elements || getSelectedElements(board);
+    return selectedElements.length > 0 && selectedGroups.length > 0;
+};
+const getEditingGroup = (board, element) => {
+    const groups = getGroupByElement(board, element, true);
+    let editingGroup = null;
+    if (groups?.length) {
+        for (let i = 0; i < groups?.length; i++) {
+            if (!isSelectedAllElementsInGroup(board, groups[i])) {
+                editingGroup = groups[i];
+                break;
+            }
+        }
+    }
+    return editingGroup;
+};
+const moveElementsToNewPathAfterAddGroup = (board, selectedElements, newPath) => {
+    const moveElements = [...selectedElements];
+    sortElements(board, moveElements);
+    moveElements.pop();
+    moveElementsToNewPath(board, moveElements.map(element => {
+        return {
+            element,
+            newPath
+        };
+    }));
 };
 
 const deleteFragment = (board) => {
     const elements = board.getDeletedFragment([]);
     board.deleteFragment(elements);
 };
+const setFragment = (board, type, clipboardData) => {
+    const selectedElements = getSelectedElements(board);
+    const rectangle = getRectangleByElements(board, selectedElements, false);
+    const clipboardContext = board.buildFragment(null, rectangle, type);
+    clipboardContext && setClipboardData(clipboardData, clipboardContext);
+};
+const duplicateElements = (board, elements) => {
+    const selectedElements = elements || getSelectedElements(board);
+    const rectangle = getRectangleByElements(board, selectedElements, false);
+    const clipboardContext = board.buildFragment(null, rectangle, 'copy');
+    const stringifiedContext = clipboardContext && JSON.stringify(clipboardContext);
+    const clonedContext = stringifiedContext && JSON.parse(stringifiedContext);
+    clonedContext &&
+        board.insertFragment({
+            ...clonedContext,
+            text: undefined
+        }, [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2]);
+};
+
+const SNAP_TOLERANCE = 2;
+const SNAP_SPACING = 24;
+function getSnapRectangles(board, activeElements) {
+    const elements = findElements(board, {
+        match: element => board.isAlign(element) && !activeElements.some(item => item.id === element.id),
+        recursion: () => true,
+        isReverse: false
+    });
+    return elements.map(item => getRectangleByAngle(board.getRectangle(item), item.angle) || board.getRectangle(item));
+}
+function getBarPoint(point, isHorizontal) {
+    return isHorizontal
+        ? [
+            [point[0], point[1] - 4],
+            [point[0], point[1] + 4]
+        ]
+        : [
+            [point[0] - 4, point[1]],
+            [point[0] + 4, point[1]]
+        ];
+}
+function getMinPointDelta(pointRectangles, axis, isHorizontal) {
+    let delta = SNAP_TOLERANCE;
+    pointRectangles.forEach(item => {
+        const distance = getNearestDelta(axis, item, isHorizontal);
+        if (Math.abs(distance) < Math.abs(delta)) {
+            delta = distance;
+        }
+    });
+    return delta;
+}
+const getNearestDelta = (axis, rectangle, isHorizontal) => {
+    const pointAxis = getTripleAxis(rectangle, isHorizontal);
+    const deltas = pointAxis.map(item => item - axis);
+    const absDeltas = deltas.map(item => Math.abs(item));
+    const index = absDeltas.indexOf(Math.min(...absDeltas));
+    return deltas[index];
+};
+const getTripleAxis = (rectangle, isHorizontal) => {
+    const axis = isHorizontal ? 'x' : 'y';
+    const side = isHorizontal ? 'width' : 'height';
+    return [rectangle[axis], rectangle[axis] + rectangle[side] / 2, rectangle[axis] + rectangle[side]];
+};
+function getNearestPointRectangle(snapRectangles, activeRectangle) {
+    let minDistance = Infinity;
+    let nearestRectangle = snapRectangles[0];
+    snapRectangles.forEach(item => {
+        const distance = Math.sqrt(Math.pow(activeRectangle.x - item.x, 2) + Math.pow(activeRectangle.y - item.y, 2));
+        if (distance < minDistance) {
+            minDistance = distance;
+            nearestRectangle = item;
+        }
+    });
+    return nearestRectangle;
+}
+const isSnapPoint = (axis, rectangle, isHorizontal) => {
+    const pointAxis = getTripleAxis(rectangle, isHorizontal);
+    return pointAxis.includes(axis);
+};
+function drawPointSnapLines(board, activeRectangle, snapRectangles, drawHorizontal = true, drawVertical = true, snapMiddle = false) {
+    let pointLinePoints = [];
+    const pointAxisX = getTripleAxis(activeRectangle, true);
+    const pointAxisY = getTripleAxis(activeRectangle, false);
+    const pointLineRefs = [
+        {
+            axis: pointAxisX[0],
+            isHorizontal: true,
+            pointRectangles: []
+        },
+        {
+            axis: pointAxisX[1],
+            isHorizontal: true,
+            pointRectangles: []
+        },
+        {
+            axis: pointAxisX[2],
+            isHorizontal: true,
+            pointRectangles: []
+        },
+        {
+            axis: pointAxisY[0],
+            isHorizontal: false,
+            pointRectangles: []
+        },
+        {
+            axis: pointAxisY[1],
+            isHorizontal: false,
+            pointRectangles: []
+        },
+        {
+            axis: pointAxisY[2],
+            isHorizontal: false,
+            pointRectangles: []
+        }
+    ];
+    for (let index = 0; index < snapRectangles.length; index++) {
+        const element = snapRectangles[index];
+        if (isSnapPoint(pointLineRefs[0].axis, element, pointLineRefs[0].isHorizontal)) {
+            pointLineRefs[0].pointRectangles.push(element);
+        }
+        if (isSnapPoint(pointLineRefs[1].axis, element, pointLineRefs[1].isHorizontal)) {
+            pointLineRefs[1].pointRectangles.push(element);
+        }
+        if (isSnapPoint(pointLineRefs[2].axis, element, pointLineRefs[2].isHorizontal)) {
+            pointLineRefs[2].pointRectangles.push(element);
+        }
+        if (isSnapPoint(pointLineRefs[3].axis, element, pointLineRefs[3].isHorizontal)) {
+            pointLineRefs[3].pointRectangles.push(element);
+        }
+        if (isSnapPoint(pointLineRefs[4].axis, element, pointLineRefs[4].isHorizontal)) {
+            pointLineRefs[4].pointRectangles.push(element);
+        }
+        if (isSnapPoint(pointLineRefs[5].axis, element, pointLineRefs[5].isHorizontal)) {
+            pointLineRefs[5].pointRectangles.push(element);
+        }
+    }
+    const setResizePointSnapLine = (axis, pointRectangle, isHorizontal) => {
+        const boundingRectangle = RectangleClient.inflate(RectangleClient.getBoundingRectangle([activeRectangle, pointRectangle]), SNAP_SPACING);
+        if (isHorizontal) {
+            const pointStart = [axis, boundingRectangle.y];
+            const pointEnd = [axis, boundingRectangle.y + boundingRectangle.height];
+            pointLinePoints.push([pointStart, pointEnd]);
+        }
+        else {
+            const pointStart = [boundingRectangle.x, axis];
+            const pointEnd = [boundingRectangle.x + boundingRectangle.width, axis];
+            pointLinePoints.push([pointStart, pointEnd]);
+        }
+    };
+    if (drawHorizontal && pointLineRefs[0].pointRectangles.length) {
+        const leftRectangle = pointLineRefs[0].pointRectangles.length === 1
+            ? pointLineRefs[0].pointRectangles[0]
+            : getNearestPointRectangle(pointLineRefs[0].pointRectangles, activeRectangle);
+        setResizePointSnapLine(pointLineRefs[0].axis, leftRectangle, pointLineRefs[0].isHorizontal);
+    }
+    if (drawHorizontal && snapMiddle && pointLineRefs[1].pointRectangles.length) {
+        const middleRectangle = pointLineRefs[1].pointRectangles.length === 1
+            ? pointLineRefs[1].pointRectangles[0]
+            : getNearestPointRectangle(pointLineRefs[1].pointRectangles, activeRectangle);
+        setResizePointSnapLine(pointLineRefs[1].axis, middleRectangle, pointLineRefs[1].isHorizontal);
+    }
+    if (drawHorizontal && pointLineRefs[2].pointRectangles.length) {
+        const rightRectangle = pointLineRefs[2].pointRectangles.length === 1
+            ? pointLineRefs[2].pointRectangles[0]
+            : getNearestPointRectangle(pointLineRefs[2].pointRectangles, activeRectangle);
+        setResizePointSnapLine(pointLineRefs[2].axis, rightRectangle, pointLineRefs[2].isHorizontal);
+    }
+    if (drawVertical && pointLineRefs[3].pointRectangles.length) {
+        const topRectangle = pointLineRefs[3].pointRectangles.length === 1
+            ? pointLineRefs[3].pointRectangles[0]
+            : getNearestPointRectangle(pointLineRefs[3].pointRectangles, activeRectangle);
+        setResizePointSnapLine(pointLineRefs[3].axis, topRectangle, pointLineRefs[3].isHorizontal);
+    }
+    if (drawVertical && snapMiddle && pointLineRefs[4].pointRectangles.length) {
+        const middleRectangle = pointLineRefs[4].pointRectangles.length === 1
+            ? pointLineRefs[4].pointRectangles[0]
+            : getNearestPointRectangle(pointLineRefs[4].pointRectangles, activeRectangle);
+        setResizePointSnapLine(pointLineRefs[4].axis, middleRectangle, pointLineRefs[4].isHorizontal);
+    }
+    if (drawVertical && pointLineRefs[5].pointRectangles.length) {
+        const rightRectangle = pointLineRefs[5].pointRectangles.length === 1
+            ? pointLineRefs[5].pointRectangles[0]
+            : getNearestPointRectangle(pointLineRefs[5].pointRectangles, activeRectangle);
+        setResizePointSnapLine(pointLineRefs[5].axis, rightRectangle, pointLineRefs[5].isHorizontal);
+    }
+    return drawDashedLines(board, pointLinePoints);
+}
+function drawDashedLines(board, lines) {
+    const g = createG();
+    lines.forEach(points => {
+        if (!points.length)
+            return;
+        const line = PlaitBoard.getRoughSVG(board).line(points[0][0], points[0][1], points[1][0], points[1][1], {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: 1,
+            strokeLineDash: [4, 4]
+        });
+        g.appendChild(line);
+    });
+    return g;
+}
+function drawSolidLines(board, lines) {
+    const g = createG();
+    lines.forEach(points => {
+        if (!points.length)
+            return;
+        let isHorizontal = points[0][1] === points[1][1];
+        const line = PlaitBoard.getRoughSVG(board).line(points[0][0], points[0][1], points[1][0], points[1][1], {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: 1
+        });
+        g.appendChild(line);
+        points.forEach(point => {
+            const barPoint = getBarPoint(point, isHorizontal);
+            const bar = PlaitBoard.getRoughSVG(board).line(barPoint[0][0], barPoint[0][1], barPoint[1][0], barPoint[1][1], {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: 1
+            });
+            g.appendChild(bar);
+        });
+    });
+    return g;
+}
 
 const PlaitElement = {
     isRootElement(value) {
@@ -3174,6 +4023,32 @@ const PlaitElement = {
     },
     getComponent(value) {
         return ELEMENT_TO_COMPONENT.get(value);
+    },
+    getElementG(value) {
+        const g = NODE_TO_G.get(value);
+        if (!g) {
+            throw new Error(`can not resolve element g: ${JSON.stringify(value)}`);
+        }
+        return g;
+    },
+    hasMounted(element) {
+        const containerG = PlaitElement.getContainerG(element, { suppressThrow: true });
+        if (containerG) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    getContainerG(value, options) {
+        const containerG = NODE_TO_CONTAINER_G.get(value) || null;
+        if (!containerG) {
+            if (options.suppressThrow) {
+                return null;
+            }
+            throw new Error('can not resolve container g');
+        }
+        return containerG;
     }
 };
 
@@ -3437,7 +4312,7 @@ const PlaitBoard = {
         return isBoard;
     },
     isAlive(board) {
-        const isAlive = IS_BOARD_CACHE.get(board);
+        const isAlive = IS_BOARD_ALIVE.get(board);
         return !!isAlive;
     },
     findPath(board, node) {
@@ -3615,18 +4490,16 @@ function createBoard(children, options) {
         globalKeyDown: (event) => { },
         keyUp: (event) => { },
         dblClick: (event) => { },
-        setFragment: (data, clipboardContext) => {
-            setClipboardData(data, clipboardContext);
-        },
-        insertFragment: (data) => { },
+        buildFragment: (clipboardContext) => clipboardContext,
+        insertFragment: () => { },
         deleteFragment: (elements) => {
             CoreTransforms.removeElements(board, elements);
         },
         getDeletedFragment: (data) => data,
         getRelatedFragment: (data, originData) => data,
-        drawElement: (context) => [],
-        redrawElement: (context, previousContext) => { },
-        destroyElement: (context) => { },
+        drawElement: (context) => {
+            throw new Error(`can not resolve plugin element component type: ${context.element.type}`);
+        },
         isWithinSelection: element => false,
         isRectangleHit: element => false,
         isHit: element => false,
@@ -3645,7 +4518,9 @@ function createBoard(children, options) {
         globalPointerMove: pointer => { },
         globalPointerUp: pointer => { },
         isImageBindingAllowed: (element) => false,
-        canAddToGroup: (element) => true
+        canAddToGroup: (element) => true,
+        canSetZIndex: (element) => true,
+        isExpanded: (element) => true
     };
     return board;
 }
@@ -4039,354 +4914,194 @@ function withViewport(board) {
     return board;
 }
 
-const SNAP_TOLERANCE = 2;
-class MovingSnapReaction {
-    constructor(board, activeElements, activeRectangle) {
-        this.board = board;
-        this.activeElements = activeElements;
-        this.activeRectangle = activeRectangle;
-        this.alignRectangles = this.getAlignRectangle();
-    }
-    getAlignRectangle() {
-        const result = [];
-        depthFirstRecursion(this.board, node => {
-            if (PlaitBoard.isBoard(node) || this.activeElements.some(element => node.id === element.id) || !this.board.isAlign(node)) {
-                return;
-            }
-            const rectangle = this.board.getRectangle(node);
-            rectangle && result.push(getRectangleByAngle(rectangle, node.angle) || rectangle);
-        }, node => {
-            if (node && (PlaitBoard.isBoard(node) || this.board.isRecursion(node))) {
-                return true;
-            }
-            else {
-                return false;
+function getSnapMovingRef(board, activeRectangle, activeElements) {
+    const snapRectangles = getSnapRectangles(board, activeElements);
+    const snapG = createG();
+    let snapDelta = getPointLineDelta(activeRectangle, snapRectangles);
+    const pointLinesG = drawMovingPointSnapLines(board, snapDelta, activeRectangle, snapRectangles);
+    snapG.append(pointLinesG);
+    const result = getGapSnapLinesAndDelta(board, snapDelta, activeRectangle, snapRectangles);
+    snapDelta = result.snapDelta;
+    snapG.append(result.snapG);
+    return { ...snapDelta, snapG };
+}
+function getPointLineDeltas(activeRectangle, snapRectangles, isHorizontal) {
+    const axis = getTripleAxis(activeRectangle, isHorizontal);
+    const deltaStart = getMinPointDelta(snapRectangles, axis[0], isHorizontal);
+    const deltaMiddle = getMinPointDelta(snapRectangles, axis[1], isHorizontal);
+    const deltaEnd = getMinPointDelta(snapRectangles, axis[2], isHorizontal);
+    return [deltaStart, deltaMiddle, deltaEnd];
+}
+function getPointLineDelta(activeRectangle, snapRectangles) {
+    let snapDelta = {
+        deltaX: 0,
+        deltaY: 0
+    };
+    function getDelta(isHorizontal) {
+        let delta = 0;
+        const deltas = getPointLineDeltas(activeRectangle, snapRectangles, isHorizontal);
+        for (let i = 0; i < deltas.length; i++) {
+            if (Math.abs(deltas[i]) < SNAP_TOLERANCE) {
+                delta = deltas[i];
+                break;
             }
-        }, true);
-        return result;
+        }
+        return delta;
     }
-    handleSnapping() {
-        const alignRectangles = this.getAlignRectangle();
-        const g = createG();
-        let alignLines = [];
-        const offset = 12;
-        let deltaX = 0;
-        let deltaY = 0;
-        let isCorrectX = false;
-        let isCorrectY = false;
-        for (let alignRectangle of alignRectangles) {
-            const closestDistances = this.calculateClosestDistances(this.activeRectangle, alignRectangle);
-            let canDrawHorizontal = false;
-            if (!isCorrectX && closestDistances.absXDistance < SNAP_TOLERANCE) {
-                deltaX = closestDistances.xDistance;
-                this.activeRectangle.x -= deltaX;
-                isCorrectX = true;
-                canDrawHorizontal = true;
-            }
-            if (closestDistances.absXDistance === 0) {
-                canDrawHorizontal = true;
+    snapDelta.deltaX = getDelta(true);
+    snapDelta.deltaY = getDelta(false);
+    return snapDelta;
+}
+function updateActiveRectangle(snapDelta, activeRectangle) {
+    const { deltaX, deltaY } = snapDelta;
+    const { x, y, width, height } = activeRectangle;
+    return {
+        x: x + deltaX,
+        y: y + deltaY,
+        width,
+        height
+    };
+}
+function drawMovingPointSnapLines(board, snapDelta, activeRectangle, snapRectangles) {
+    const newActiveRectangle = updateActiveRectangle(snapDelta, activeRectangle);
+    return drawPointSnapLines(board, newActiveRectangle, snapRectangles, true, true, true);
+}
+function getGapSnapLinesAndDelta(board, snapDelta, activeRectangle, snapRectangles) {
+    let deltaX = snapDelta.deltaX;
+    let deltaY = snapDelta.deltaY;
+    const gapHorizontalResult = getGapLinesAndDelta(activeRectangle, snapRectangles, true);
+    const gapVerticalResult = getGapLinesAndDelta(activeRectangle, snapRectangles, false);
+    const gapSnapLines = [...gapHorizontalResult.lines, ...gapVerticalResult.lines];
+    if (gapHorizontalResult.delta) {
+        deltaX = gapHorizontalResult.delta;
+    }
+    if (gapVerticalResult.delta) {
+        deltaY = gapVerticalResult.delta;
+    }
+    return {
+        snapDelta: { deltaX, deltaY },
+        snapG: drawSolidLines(board, gapSnapLines)
+    };
+}
+function getGapLinesAndDelta(activeRectangle, snapRectangles, isHorizontal) {
+    let lines = [];
+    let delta = 0;
+    let rectangles = [];
+    const axis = isHorizontal ? 'x' : 'y';
+    const side = isHorizontal ? 'width' : 'height';
+    const activeRectangleCenter = activeRectangle[axis] + activeRectangle[side] / 2;
+    snapRectangles.forEach(rec => {
+        const isCross = isHorizontal ? isHorizontalCross(rec, activeRectangle) : isVerticalCross(rec, activeRectangle);
+        if (isCross && !RectangleClient.isHit(rec, activeRectangle)) {
+            rectangles.push(rec);
+        }
+    });
+    rectangles = [...rectangles, activeRectangle].sort((a, b) => a[axis] - b[axis]);
+    const refArray = [];
+    let gapDistance = 0;
+    let beforeIndex = undefined;
+    let afterIndex = undefined;
+    for (let i = 0; i < rectangles.length; i++) {
+        for (let j = i + 1; j < rectangles.length; j++) {
+            const before = rectangles[i];
+            const after = rectangles[j];
+            const distance = after[axis] - (before[axis] + before[side]);
+            let dif = Infinity;
+            if (refArray[i]?.after) {
+                refArray[i].after.push({ distance, index: j });
             }
-            if (canDrawHorizontal) {
-                const verticalY = [
-                    alignRectangle.y,
-                    alignRectangle.y + alignRectangle.height,
-                    this.activeRectangle.y,
-                    this.activeRectangle.y + this.activeRectangle.height
-                ];
-                const lineTopY = Math.min(...verticalY) - offset;
-                const lineBottomY = Math.max(...verticalY) + offset;
-                const leftLine = [this.activeRectangle.x, lineTopY, this.activeRectangle.x, lineBottomY];
-                const middleLine = [
-                    this.activeRectangle.x + this.activeRectangle.width / 2,
-                    lineTopY,
-                    this.activeRectangle.x + this.activeRectangle.width / 2,
-                    lineBottomY
-                ];
-                const rightLine = [
-                    this.activeRectangle.x + this.activeRectangle.width,
-                    lineTopY,
-                    this.activeRectangle.x + this.activeRectangle.width,
-                    lineBottomY
-                ];
-                const shouldDrawLeftLine = closestDistances.indexX === 0 ||
-                    closestDistances.indexX === 1 ||
-                    (closestDistances.indexX === 2 && this.activeRectangle.width === alignRectangle.width);
-                if (shouldDrawLeftLine && !alignLines[0]) {
-                    alignLines[0] = leftLine;
-                }
-                const shouldDrawRightLine = closestDistances.indexX === 2 ||
-                    closestDistances.indexX === 3 ||
-                    (closestDistances.indexX === 0 && this.activeRectangle.width === alignRectangle.width);
-                if (shouldDrawRightLine && !alignLines[2]) {
-                    alignLines[2] = rightLine;
-                }
-                const shouldDrawMiddleLine = closestDistances.indexX === 4 || (!shouldDrawLeftLine && !shouldDrawRightLine);
-                if (shouldDrawMiddleLine && !alignLines[1]) {
-                    alignLines[1] = middleLine;
-                }
-                isCorrectX = true;
+            else {
+                refArray[i] = { ...refArray[i], after: [{ distance, index: j }] };
             }
-            let canDrawVertical = false;
-            if (!isCorrectY && closestDistances.absYDistance < SNAP_TOLERANCE) {
-                deltaY = closestDistances.yDistance;
-                this.activeRectangle.y -= deltaY;
-                isCorrectY = true;
-                canDrawVertical = true;
+            if (refArray[j]?.before) {
+                refArray[j].before.push({ distance, index: i });
             }
-            if (closestDistances.absYDistance === 0) {
-                canDrawVertical = true;
+            else {
+                refArray[j] = { ...refArray[j], before: [{ distance, index: i }] };
             }
-            if (canDrawVertical) {
-                const horizontalX = [
-                    alignRectangle.x,
-                    alignRectangle.x + alignRectangle.width,
-                    this.activeRectangle.x,
-                    this.activeRectangle.x + this.activeRectangle.width
-                ];
-                const lineLeftX = Math.min(...horizontalX) - offset;
-                const lineRightX = Math.max(...horizontalX) + offset;
-                const topLine = [lineLeftX, this.activeRectangle.y, lineRightX, this.activeRectangle.y];
-                const horizontalMiddleLine = [
-                    lineLeftX,
-                    this.activeRectangle.y + this.activeRectangle.height / 2,
-                    lineRightX,
-                    this.activeRectangle.y + this.activeRectangle.height / 2
-                ];
-                const bottomLine = [
-                    lineLeftX,
-                    this.activeRectangle.y + this.activeRectangle.height,
-                    lineRightX,
-                    this.activeRectangle.y + this.activeRectangle.height
-                ];
-                const shouldDrawTopLine = closestDistances.indexY === 0 ||
-                    closestDistances.indexY === 1 ||
-                    (closestDistances.indexY === 2 && this.activeRectangle.height === alignRectangle.height);
-                if (shouldDrawTopLine && !alignLines[3]) {
-                    alignLines[3] = topLine;
-                }
-                const shouldDrawBottomLine = closestDistances.indexY === 2 ||
-                    closestDistances.indexY === 3 ||
-                    (closestDistances.indexY === 0 && this.activeRectangle.width === alignRectangle.width);
-                if (shouldDrawBottomLine && !alignLines[5]) {
-                    alignLines[5] = bottomLine;
-                }
-                const shouldDrawMiddleLine = closestDistances.indexY === 4 || (!shouldDrawTopLine && !shouldDrawBottomLine);
-                if (shouldDrawMiddleLine && !alignLines[4]) {
-                    alignLines[4] = horizontalMiddleLine;
-                }
+            //middle
+            let _center = (before[axis] + before[side] + after[axis]) / 2;
+            dif = Math.abs(_center - activeRectangleCenter);
+            if (dif < SNAP_TOLERANCE) {
+                gapDistance = (after[axis] - (before[axis] + before[side]) - activeRectangle[side]) / 2;
+                delta = _center - activeRectangleCenter;
+                beforeIndex = i;
+                afterIndex = j;
             }
-        }
-        const alignDeltaX = deltaX;
-        const alignDeltaY = deltaY;
-        this.activeRectangle.x += deltaX;
-        this.activeRectangle.y += deltaY;
-        const distributeHorizontalResult = this.alignDistribute(alignRectangles, true);
-        const distributeVerticalResult = this.alignDistribute(alignRectangles, false);
-        const distributeLines = [...distributeHorizontalResult.distributeLines, ...distributeVerticalResult.distributeLines];
-        if (distributeHorizontalResult.delta) {
-            deltaX = distributeHorizontalResult.delta;
-            if (alignDeltaX !== deltaX) {
-                alignLines[0] = [];
-                alignLines[1] = [];
-                alignLines[2] = [];
+            //after
+            const distanceRight = after[axis] - (before[axis] + before[side]);
+            _center = after[axis] + after[side] + distanceRight + activeRectangle[side] / 2;
+            dif = Math.abs(_center - activeRectangleCenter);
+            if (!gapDistance && dif < SNAP_TOLERANCE) {
+                gapDistance = distanceRight;
+                beforeIndex = j;
+                delta = _center - activeRectangleCenter;
             }
-        }
-        if (distributeVerticalResult.delta) {
-            deltaY = distributeVerticalResult.delta;
-            if (alignDeltaY !== deltaY) {
-                alignLines[3] = [];
-                alignLines[4] = [];
-                alignLines[5] = [];
+            //before
+            const distanceBefore = after[axis] - (before[axis] + before[side]);
+            _center = before[axis] - distanceBefore - activeRectangle[side] / 2;
+            dif = Math.abs(_center - activeRectangleCenter);
+            if (!gapDistance && dif < SNAP_TOLERANCE) {
+                gapDistance = distanceBefore;
+                afterIndex = i;
+                delta = _center - activeRectangleCenter;
             }
         }
-        if (alignLines.length) {
-            this.drawAlignLines(alignLines, g);
-        }
-        if (distributeLines.length) {
-            this.drawDistributeLines(distributeLines, g);
-        }
-        return { deltaX, deltaY, g };
-    }
-    calculateClosestDistances(activeRectangle, alignRectangle) {
-        const activeRectangleCenter = [activeRectangle.x + activeRectangle.width / 2, activeRectangle.y + activeRectangle.height / 2];
-        const alignRectangleCenter = [alignRectangle.x + alignRectangle.width / 2, alignRectangle.y + alignRectangle.height / 2];
-        const centerXDistance = activeRectangleCenter[0] - alignRectangleCenter[0];
-        const centerYDistance = activeRectangleCenter[1] - alignRectangleCenter[1];
-        const leftToLeft = activeRectangle.x - alignRectangle.x;
-        const leftToRight = activeRectangle.x - (alignRectangle.x + alignRectangle.width);
-        const rightToRight = activeRectangle.x + activeRectangle.width - (alignRectangle.x + alignRectangle.width);
-        const rightToLeft = activeRectangle.x + activeRectangle.width - alignRectangle.x;
-        const topToTop = activeRectangle.y - alignRectangle.y;
-        const topToBottom = activeRectangle.y - (alignRectangle.y + alignRectangle.height);
-        const bottomToTop = activeRectangle.y + activeRectangle.height - alignRectangle.y;
-        const bottomToBottom = activeRectangle.y + activeRectangle.height - (alignRectangle.y + alignRectangle.height);
-        const xDistances = [leftToLeft, leftToRight, rightToRight, rightToLeft, centerXDistance];
-        const yDistances = [topToTop, topToBottom, bottomToBottom, bottomToTop, centerYDistance];
-        const xDistancesAbs = xDistances.map(distance => Math.abs(distance));
-        const yDistancesAbs = yDistances.map(distance => Math.abs(distance));
-        const indexX = xDistancesAbs.indexOf(Math.min(...xDistancesAbs));
-        const indexY = yDistancesAbs.indexOf(Math.min(...yDistancesAbs));
-        return {
-            absXDistance: xDistancesAbs[indexX],
-            xDistance: xDistances[indexX],
-            absYDistance: yDistancesAbs[indexY],
-            yDistance: yDistances[indexY],
-            indexX,
-            indexY
-        };
     }
-    alignDistribute(alignRectangles, isHorizontal) {
-        let distributeLines = [];
-        let delta = 0;
-        let rectangles = [];
-        const axis = isHorizontal ? 'x' : 'y';
-        const side = isHorizontal ? 'width' : 'height';
-        const activeRectangleCenter = this.activeRectangle[axis] + this.activeRectangle[side] / 2;
-        alignRectangles.forEach(rec => {
-            const isCross = isHorizontal ? isHorizontalCross(rec, this.activeRectangle) : isVerticalCross(rec, this.activeRectangle);
-            if (isCross && !RectangleClient.isHit(rec, this.activeRectangle)) {
-                rectangles.push(rec);
-            }
-        });
-        rectangles = [...rectangles, this.activeRectangle].sort((a, b) => a[axis] - b[axis]);
-        const refArray = [];
-        let distributeDistance = 0;
-        let beforeIndex = undefined;
-        let afterIndex = undefined;
-        for (let i = 0; i < rectangles.length; i++) {
-            for (let j = i + 1; j < rectangles.length; j++) {
-                const before = rectangles[i];
-                const after = rectangles[j];
-                const distance = after[axis] - (before[axis] + before[side]);
-                let dif = Infinity;
-                if (refArray[i]?.after) {
-                    refArray[i].after.push({ distance, index: j });
-                }
-                else {
-                    refArray[i] = { ...refArray[i], after: [{ distance, index: j }] };
-                }
-                if (refArray[j]?.before) {
-                    refArray[j].before.push({ distance, index: i });
-                }
-                else {
-                    refArray[j] = { ...refArray[j], before: [{ distance, index: i }] };
-                }
-                //middle
-                let _center = (before[axis] + before[side] + after[axis]) / 2;
-                dif = Math.abs(activeRectangleCenter - _center);
-                if (dif < SNAP_TOLERANCE) {
-                    distributeDistance = (after[axis] - (before[axis] + before[side]) - this.activeRectangle[side]) / 2;
-                    delta = activeRectangleCenter - _center;
-                    beforeIndex = i;
-                    afterIndex = j;
-                }
-                //after
-                const distanceRight = after[axis] - (before[axis] + before[side]);
-                _center = after[axis] + after[side] + distanceRight + this.activeRectangle[side] / 2;
-                dif = Math.abs(activeRectangleCenter - _center);
-                if (!distributeDistance && dif < SNAP_TOLERANCE) {
-                    distributeDistance = distanceRight;
-                    beforeIndex = j;
-                    delta = activeRectangleCenter - _center;
-                }
-                //before
-                const distanceBefore = after[axis] - (before[axis] + before[side]);
-                _center = before[axis] - distanceBefore - this.activeRectangle[side] / 2;
-                dif = Math.abs(activeRectangleCenter - _center);
-                if (!distributeDistance && dif < SNAP_TOLERANCE) {
-                    distributeDistance = distanceBefore;
-                    afterIndex = i;
-                    delta = activeRectangleCenter - _center;
-                }
-            }
-        }
-        const activeIndex = rectangles.indexOf(this.activeRectangle);
-        let beforeIndexes = [];
-        let afterIndexes = [];
-        if (beforeIndex !== undefined) {
-            beforeIndexes.push(beforeIndex);
-            findRectangle(distributeDistance, refArray[beforeIndex], 'before', beforeIndexes);
-        }
-        if (afterIndex !== undefined) {
-            afterIndexes.push(afterIndex);
-            findRectangle(distributeDistance, refArray[afterIndex], 'after', afterIndexes);
-        }
-        if (beforeIndexes.length || afterIndexes.length) {
-            const indexArr = [...beforeIndexes.reverse(), activeIndex, ...afterIndexes];
-            this.activeRectangle[axis] -= delta;
-            for (let i = 1; i < indexArr.length; i++) {
-                distributeLines.push(getLinePoints(rectangles[indexArr[i - 1]], rectangles[indexArr[i]]));
-            }
+    const activeIndex = rectangles.indexOf(activeRectangle);
+    let beforeIndexes = [];
+    let afterIndexes = [];
+    if (beforeIndex !== undefined) {
+        beforeIndexes.push(beforeIndex);
+        findRectangle(gapDistance, refArray[beforeIndex], 'before', beforeIndexes);
+    }
+    if (afterIndex !== undefined) {
+        afterIndexes.push(afterIndex);
+        findRectangle(gapDistance, refArray[afterIndex], 'after', afterIndexes);
+    }
+    if (beforeIndexes.length || afterIndexes.length) {
+        const indexArr = [...beforeIndexes.reverse(), activeIndex, ...afterIndexes];
+        activeRectangle[axis] += delta;
+        for (let i = 1; i < indexArr.length; i++) {
+            lines.push(getLinePoints(rectangles[indexArr[i - 1]], rectangles[indexArr[i]]));
         }
-        function findRectangle(distance, ref, direction, rectangleIndexes) {
-            const arr = ref[direction];
-            const index = refArray.indexOf(ref);
-            if ((index === 0 && direction === 'before') || (index === refArray.length - 1 && direction === 'after'))
+    }
+    function findRectangle(distance, ref, direction, rectangleIndexes) {
+        const arr = ref[direction];
+        const index = refArray.indexOf(ref);
+        if ((index === 0 && direction === 'before') || (index === refArray.length - 1 && direction === 'after'))
+            return;
+        for (let i = 0; i < arr.length; i++) {
+            if (Math.abs(arr[i].distance - distance) < 0.1) {
+                rectangleIndexes.push(arr[i].index);
+                findRectangle(distance, refArray[arr[i].index], direction, rectangleIndexes);
                 return;
-            for (let i = 0; i < arr.length; i++) {
-                if (Math.abs(arr[i].distance - distance) < 0.1) {
-                    rectangleIndexes.push(arr[i].index);
-                    findRectangle(distance, refArray[arr[i].index], direction, rectangleIndexes);
-                    return;
-                }
             }
         }
-        function getLinePoints(beforeRectangle, afterRectangle) {
-            const oppositeAxis = axis === 'x' ? 'y' : 'x';
-            const oppositeSide = side === 'width' ? 'height' : 'width';
-            const align = [
-                beforeRectangle[oppositeAxis],
-                beforeRectangle[oppositeAxis] + beforeRectangle[oppositeSide],
-                afterRectangle[oppositeAxis],
-                afterRectangle[oppositeAxis] + afterRectangle[oppositeSide]
-            ];
-            const sortArr = align.sort((a, b) => a - b);
-            const average = (sortArr[1] + sortArr[2]) / 2;
-            const offset = 3;
-            return isHorizontal
-                ? [
-                    [beforeRectangle.x + beforeRectangle.width + offset, average],
-                    [afterRectangle.x - offset, average]
-                ]
-                : [
-                    [average, beforeRectangle.y + beforeRectangle.height + offset],
-                    [average, afterRectangle.y - offset]
-                ];
-        }
-        return { delta, distributeLines };
-    }
-    drawAlignLines(lines, g) {
-        lines.forEach(points => {
-            if (!points.length)
-                return;
-            const xAlign = PlaitBoard.getRoughSVG(this.board).line(points[0], points[1], points[2], points[3], {
-                stroke: SELECTION_BORDER_COLOR,
-                strokeWidth: 1,
-                strokeLineDash: [4, 4]
-            });
-            g.appendChild(xAlign);
-        });
     }
-    drawDistributeLines(lines, g) {
-        lines.forEach(line => {
-            if (!line.length)
-                return;
-            let isHorizontal = line[0][1] === line[1][1];
-            const yAlign = PlaitBoard.getRoughSVG(this.board).line(line[0][0], line[0][1], line[1][0], line[1][1], {
-                stroke: SELECTION_BORDER_COLOR,
-                strokeWidth: 1
-            });
-            g.appendChild(yAlign);
-            line.forEach(point => {
-                const barPoint = getBarPoint(point, isHorizontal);
-                const bar = PlaitBoard.getRoughSVG(this.board).line(barPoint[0][0], barPoint[0][1], barPoint[1][0], barPoint[1][1], {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: 1
-                });
-                g.appendChild(bar);
-            });
-        });
+    function getLinePoints(beforeRectangle, afterRectangle) {
+        const oppositeAxis = axis === 'x' ? 'y' : 'x';
+        const oppositeSide = side === 'width' ? 'height' : 'width';
+        const snap = [
+            beforeRectangle[oppositeAxis],
+            beforeRectangle[oppositeAxis] + beforeRectangle[oppositeSide],
+            afterRectangle[oppositeAxis],
+            afterRectangle[oppositeAxis] + afterRectangle[oppositeSide]
+        ];
+        const sortArr = snap.sort((a, b) => a - b);
+        const average = (sortArr[1] + sortArr[2]) / 2;
+        const offset = 3;
+        return isHorizontal
+            ? [
+                [beforeRectangle.x + beforeRectangle.width + offset, average],
+                [afterRectangle.x - offset, average]
+            ]
+            : [
+                [average, beforeRectangle.y + beforeRectangle.height + offset],
+                [average, afterRectangle.y - offset]
+            ];
     }
+    return { delta, lines };
 }
 function isHorizontalCross(rectangle, other) {
     return !(rectangle.y + rectangle.height < other.y || rectangle.y > other.y + other.height);
@@ -4394,17 +5109,6 @@ function isHorizontalCross(rectangle, other) {
 function isVerticalCross(rectangle, other) {
     return !(rectangle.x + rectangle.width < other.x || rectangle.x > other.x + other.width);
 }
-function getBarPoint(point, isHorizontal) {
-    return isHorizontal
-        ? [
-            [point[0], point[1] - 4],
-            [point[0], point[1] + 4]
-        ]
-        : [
-            [point[0] - 4, point[1]],
-            [point[0] + 4, point[1]]
-        ];
-}
 
 function withMoving(board) {
     const { pointerDown, pointerMove, globalPointerUp, globalPointerMove } = board;
@@ -4413,7 +5117,7 @@ function withMoving(board) {
     let isPreventDefault = false;
     let startPoint;
     let activeElements = [];
-    let alignG = null;
+    let snapG = null;
     let activeElementsRectangle = null;
     let selectedTargetElements = null;
     let hitTargetElement = undefined;
@@ -4462,7 +5166,7 @@ function withMoving(board) {
             if (!isPreventDefault) {
                 isPreventDefault = true;
             }
-            alignG?.remove();
+            snapG?.remove();
             const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             offsetX = endPoint[0] - startPoint[0];
             offsetY = endPoint[1] - startPoint[1];
@@ -4483,13 +5187,13 @@ function withMoving(board) {
                         x: activeElementsRectangle.x + offsetX,
                         y: activeElementsRectangle.y + offsetY
                     };
-                    const movingSnapReaction = new MovingSnapReaction(board, activeElements, getRectangleByAngle(newRectangle, getSelectionAngle(activeElements)) || newRectangle);
-                    const ref = movingSnapReaction.handleSnapping();
-                    offsetX -= ref.deltaX;
-                    offsetY -= ref.deltaY;
-                    alignG = ref.g;
-                    alignG.classList.add(ACTIVE_MOVING_CLASS_NAME);
-                    PlaitBoard.getElementActiveHost(board).append(alignG);
+                    const activeRectangle = getRectangleByAngle(newRectangle, getSelectionAngle(activeElements)) || newRectangle;
+                    const ref = getSnapMovingRef(board, activeRectangle, activeElements);
+                    offsetX += ref.deltaX;
+                    offsetY += ref.deltaY;
+                    snapG = ref.snapG;
+                    snapG.classList.add(ACTIVE_MOVING_CLASS_NAME);
+                    PlaitBoard.getElementActiveHost(board).append(snapG);
                     handleTouchTarget(board);
                     const currentElements = updatePoints(board, activeElements, offsetX, offsetY);
                     PlaitBoard.getBoardContainer(board).classList.add('element-moving');
@@ -4524,7 +5228,7 @@ function withMoving(board) {
         globalPointerUp(event);
     };
     function cancelMove(board) {
-        alignG?.remove();
+        snapG?.remove();
         startPoint = null;
         activeElementsRectangle = null;
         offsetX = 0;
@@ -4708,7 +5412,36 @@ const withHotkey = (board) => {
             Transforms.addSelectionWithTemporaryElements(board, elements);
             return;
         }
+        if (!PlaitBoard.isReadonly(board)) {
+            if (isKeyHotkey('mod+]', event)) {
+                event.preventDefault();
+                Transforms.moveUp(board);
+                return;
+            }
+            if (isKeyHotkey('mod+[', event)) {
+                event.preventDefault();
+                Transforms.moveDown(board);
+                return;
+            }
+            if (isKeyHotkey('mod+option+‘', event)) {
+                event.preventDefault();
+                Transforms.moveToTop(board);
+                return;
+            }
+            if (isKeyHotkey('mod+option+“', event)) {
+                event.preventDefault();
+                Transforms.moveToBottom(board);
+                return;
+            }
+        }
         const selectedElements = getSelectedElements(board);
+        if (!PlaitBoard.isReadonly(board) && selectedElements.length > 0) {
+            if (isKeyHotkey('mod+d', event)) {
+                event.preventDefault();
+                duplicateElements(board, selectedElements);
+                return;
+            }
+        }
         if (!PlaitBoard.isReadonly(board) &&
             selectedElements.length > 0 &&
             (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
@@ -4750,6 +5483,7 @@ const withHotkey = (board) => {
 
 class PlaitContextService {
     constructor() {
+        this._stable = new Subject();
         this.uploadingFiles = [];
     }
     getUploadingFile(url) {
@@ -4761,6 +5495,12 @@ class PlaitContextService {
     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 }); }
 }
@@ -4768,162 +5508,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
             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());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PlaitElementComponent, isStandalone: true, 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: "17.2.4", ngImport: i0, type: PlaitElementComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-element',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ 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 PlaitChildrenElementComponent {
-    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);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitChildrenElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: PlaitChildrenElementComponent, isStandalone: true, 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: NgFor, 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: "17.2.4", ngImport: i0, type: PlaitChildrenElementComponent, 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>
-    `,
-                    standalone: true,
-                    imports: [NgFor, PlaitElementComponent]
-                }]
-        }], ctorParameters: () => [], propDecorators: { board: [{
-                type: Input
-            }], parent: [{
-                type: Input
-            }], effect: [{
-                type: Input
-            }], parentG: [{
-                type: Input
-            }] } });
-
 function withRelatedFragment(board) {
-    const { setFragment } = board;
-    board.setFragment = (data, clipboardContext, rectangle, type) => {
+    const { buildFragment } = board;
+    board.buildFragment = (clipboardContext, rectangle, type) => {
         const relatedFragment = board.getRelatedFragment([]);
         if (!clipboardContext) {
             clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
@@ -4932,10 +5519,10 @@ function withRelatedFragment(board) {
             clipboardContext = addClipboardContext(clipboardContext, {
                 text: '',
                 type: WritableClipboardType.elements,
-                data: relatedFragment
+                elements: relatedFragment
             });
         }
-        setFragment(data, clipboardContext, rectangle, type);
+        return buildFragment(clipboardContext, rectangle, type);
     };
     return board;
 }
@@ -4980,12 +5567,12 @@ class PlaitBoardComponent {
         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.contextService = inject(PlaitContextService);
         this.trackBy = (index, element) => {
             return element.id;
         };
@@ -5023,7 +5610,7 @@ class PlaitBoardComponent {
         });
         BOARD_TO_ON_CHANGE.set(this.board, () => {
             this.ngZone.run(() => {
-                this.update();
+                this.updateListRender();
             });
         });
         BOARD_TO_AFTER_CHANGE.set(this.board, () => {
@@ -5039,15 +5626,12 @@ class PlaitBoardComponent {
                 this.plaitChange.emit(changeEvent);
             });
         });
+        this.initializeListRender();
         this.hasInitialized = true;
     }
     ngAfterContentInit() {
         this.initializeIslands();
     }
-    update() {
-        this.effect = {};
-        this.cdr.detectChanges();
-    }
     ngOnChanges(changes) {
         if (this.hasInitialized) {
             const valueChange = changes['plaitValue'];
@@ -5165,10 +5749,8 @@ class PlaitBoardComponent {
         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, null, rectangle, 'copy');
+            setFragment(this.board, 'copy', event.clipboardData);
         });
         fromEvent(document, 'paste')
             .pipe(takeUntil(this.destroy$), filter(() => this.isFocused && !PlaitBoard.isReadonly(this.board) && !PlaitBoard.hasBeenTextEditing(this.board)))
@@ -5177,19 +5759,32 @@ class PlaitBoardComponent {
             if (mousePoint) {
                 const targetPoint = toViewBoxPoint(this.board, toHostPoint(this.board, mousePoint[0], mousePoint[1]));
                 const clipboardData = await getClipboardData(clipboardEvent.clipboardData);
-                this.board.insertFragment(clipboardEvent.clipboardData, clipboardData, targetPoint);
+                this.board.insertFragment(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, null, rectangle, 'cut');
+            setFragment(this.board, 'cut', event.clipboardData);
             deleteFragment(this.board);
         });
     }
+    initializeListRender() {
+        this.listRender = new ListRender(this.board, this.viewContainerRef);
+        this.listRender.initialize(this.board.children, this.initializeChildrenContext());
+    }
+    updateListRender() {
+        this.listRender.update(this.board.children, this.initializeChildrenContext());
+        this.contextService.nextStable();
+    }
+    initializeChildrenContext() {
+        return {
+            board: this.board,
+            parent: this.board,
+            parentG: PlaitBoard.getElementHost(this.board)
+        };
+    }
     viewportScrollListener() {
         fromEvent(this.viewportContainer.nativeElement, 'scroll')
             .pipe(takeUntil(this.destroy$), filter(() => {
@@ -5287,10 +5882,9 @@ class PlaitBoardComponent {
                 <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: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PlaitBoardComponent, decorators: [{
             type: Component,
@@ -5303,14 +5897,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 <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],
-                    standalone: true,
-                    imports: [PlaitChildrenElementComponent]
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { plaitValue: [{
                 type: Input
@@ -5607,5 +6199,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, 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, GroupTransforms, 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_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, PlaitChildrenElementComponent, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RIGHT_ARROW, 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, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, 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, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, filterSelectedGroups, findElements, getAllElementsInGroup, getBoardRectangle, getClipboardData, getClipboardFromHtml, getDataTransferClipboard, getDataTransferClipboardText, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getOffsetAfterRotate, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getTemporaryElements, getTemporaryRef, 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, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, nonGroupInHighestSelectedElements, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, 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_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, 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, 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, drawPointSnapLines, drawRectangle, drawRoundRectangle, drawSolidLines, duplicateElements, fakeNodeWeakMap, filterSelectedGroups, findElements, findIndex, findLastIndex, getAllElementsInGroup, getAllMoveOptions, getAngleBetweenPoints, 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, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getNearestPointRectangle, getOffsetAfterRotate, getOneMoveOptions, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getSnapRectangles, getTemporaryElements, getTemporaryRef, getTripleAxis, 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