@plait/core 0.53.0 → 0.55.0

package/fesm2022/plait-core.mjs

@@ -1,23 +1,25 @@
 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();
 const BOARD_TO_COMPONENT = new WeakMap();
 const BOARD_TO_ROUGH_SVG = new WeakMap();
 const BOARD_TO_HOST = new WeakMap();
+const IS_BOARD_ALIVE = new WeakMap();
 const BOARD_TO_ELEMENT_HOST = new WeakMap();
 const BOARD_TO_SELECTED_ELEMENT = new WeakMap();
 const BOARD_TO_MOVING_POINT_IN_BOARD = new WeakMap();
@@ -64,7 +66,7 @@ const getIsRecursionFunc = (board) => {
 };
 
 const SELECTION_BORDER_COLOR = '#6698FF';
-const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
+const SELECTION_FILL_COLOR = '#6698FF25'; // opacity 0.25
 const Selection = {
     isCollapsed(selection) {
         if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
@@ -76,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];
     });
 };
 
@@ -185,6 +187,9 @@ const RectangleClient = {
     getCenterPoint: (rectangle) => {
         return [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
     },
+    getCenterPointByPoints: (points) => {
+        return RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(points));
+    },
     getEdgeCenterPoints: (rectangle) => {
         return [
             [rectangle.x + rectangle.width / 2, rectangle.y],
@@ -497,10 +502,13 @@ const RESIZE_CURSORS = [ResizeCursorClass.ns, ResizeCursorClass.nesw, ResizeCurs
 
 const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
 const ACTIVE_STROKE_WIDTH = 1;
+const SNAPPING_STROKE_WIDTH = 2;
 const SELECTION_RECTANGLE_CLASS_NAME = 'selection-rectangle';
 
 const HOST_CLASS_NAME = 'plait-board-container';
 const ACTIVE_MOVING_CLASS_NAME = 'active-with-moving';
+const ROTATE_HANDLE_CLASS_NAME = 'rotate-handle';
+const RESIZE_HANDLE_CLASS_NAME = 'resize-handle';
 const SCROLL_BAR_WIDTH = 20;
 const MAX_RADIUS = 16;
 const POINTER_BUTTON = {
@@ -616,7 +624,215 @@ 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);
+                }
+                if (record.item === this.children[0]) {
+                    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);
+    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);
@@ -627,20 +843,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() {
@@ -655,25 +879,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 }); }
@@ -963,6 +1241,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);
@@ -1050,6 +1364,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.
@@ -1689,157 +2039,456 @@ 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);
-            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);
+    });
+};
+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
  */
@@ -1894,7 +2543,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`;
@@ -2008,19 +2657,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
         };
     }
@@ -2092,123 +2741,562 @@ const getNavigatorClipboard = async () => {
                     files
                 };
             }
-            if (item.types.includes('text/html')) {
-                const htmlContent = await blobAsString(await item.getType('text/html'));
-                const htmlClipboardData = getClipboardFromHtml(htmlContent);
-                if (htmlClipboardData) {
-                    return htmlClipboardData;
+            if (item.types.includes('text/html')) {
+                const htmlContent = await blobAsString(await item.getType('text/html'));
+                const htmlClipboardData = getClipboardFromHtml(htmlContent);
+                if (htmlClipboardData) {
+                    return htmlClipboardData;
+                }
+                if (htmlContent && htmlContent.trim()) {
+                    clipboardData = { text: stripHtml(htmlContent) };
+                }
+            }
+            if (item.types.includes('text/plain')) {
+                const textContent = await blobAsString(await item.getType('text/plain'));
+                clipboardData = {
+                    text: stripHtml(textContent)
+                };
+            }
+        }
+    }
+    return clipboardData;
+};
+const isFile = (item) => {
+    return item.types.find(i => i.match(/^image\//));
+};
+const blobAsString = (blob) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener('loadend', () => {
+            const text = reader.result;
+            resolve(text);
+        });
+        reader.addEventListener('error', () => {
+            reject(reader.error);
+        });
+        reader.readAsText(blob);
+    });
+};
+
+const getClipboardData = async (dataTransfer) => {
+    let clipboardData = {};
+    if (dataTransfer) {
+        if (dataTransfer.files.length) {
+            return { files: Array.from(dataTransfer.files) };
+        }
+        clipboardData = getDataTransferClipboard(dataTransfer);
+        if (Object.keys(clipboardData).length === 0) {
+            clipboardData = getDataTransferClipboardText(dataTransfer);
+        }
+        return clipboardData;
+    }
+    if (getProbablySupportsClipboardRead()) {
+        return await getNavigatorClipboard();
+    }
+    return clipboardData;
+};
+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 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 applyToDraft = (board, selection, viewport, theme, op) => {
+    switch (op.type) {
+        case 'insert_node': {
+            const { path, node } = op;
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            if (!parent.children || index > parent.children.length) {
+                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+            }
+            parent.children.splice(index, 0, node);
+            break;
+        }
+        case 'remove_node': {
+            const { path } = op;
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            if (!parent.children || index > parent.children.length) {
+                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+            }
+            parent.children.splice(index, 1);
+            break;
+        }
+        case 'move_node': {
+            const { path, newPath } = op;
+            if (Path.isAncestor(path, newPath)) {
+                throw new Error(`Cannot move a path [${path}] to new path [${newPath}] because the destination is inside itself.`);
+            }
+            const node = PlaitNode.get(board, path);
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            // This is tricky, but since the `path` and `newPath` both refer to
+            // the same snapshot in time, there's a mismatch. After either
+            // removing the original position, the second step's path can be out
+            // of date. So instead of using the `op.newPath` directly, we
+            // transform `op.path` to ascertain what the `newPath` would be after
+            // the operation was applied.
+            parent.children?.splice(index, 1);
+            const truePath = Path.transform(path, op);
+            const newParent = PlaitNode.get(board, Path.parent(truePath));
+            const newIndex = truePath[truePath.length - 1];
+            newParent.children?.splice(newIndex, 0, node);
+            break;
+        }
+        case 'set_node': {
+            const { path, properties, newProperties } = op;
+            if (path.length === 0) {
+                throw new Error(`Cannot set properties on the root node!`);
+            }
+            const node = PlaitNode.get(board, path);
+            for (const key in newProperties) {
+                const value = newProperties[key];
+                if (value == null) {
+                    delete node[key];
+                }
+                else {
+                    node[key] = value;
+                }
+            }
+            // properties that were previously defined, but are now missing, must be deleted
+            for (const key in properties) {
+                if (!newProperties.hasOwnProperty(key)) {
+                    delete node[key];
+                }
+            }
+            break;
+        }
+        case 'set_viewport': {
+            const { newProperties } = op;
+            if (newProperties == null) {
+                viewport = newProperties;
+            }
+            else {
+                if (viewport == null) {
+                    if (!Viewport.isViewport(newProperties)) {
+                        throw new Error(`Cannot apply an incomplete "set_viewport" operation properties ${JSON.stringify(newProperties)} when there is no current viewport.`);
+                    }
+                    viewport = { ...newProperties };
+                }
+                for (const key in newProperties) {
+                    const value = newProperties[key];
+                    if (value == null) {
+                        delete viewport[key];
+                    }
+                    else {
+                        viewport[key] = value;
+                    }
+                }
+            }
+            break;
+        }
+        case 'set_selection': {
+            const { newProperties } = op;
+            if (newProperties == null) {
+                selection = newProperties;
+            }
+            else {
+                if (selection === null) {
+                    selection = op.newProperties;
                 }
-                if (htmlContent && htmlContent.trim()) {
-                    clipboardData = { text: stripHtml(htmlContent) };
+                else {
+                    selection = newProperties;
                 }
             }
-            if (item.types.includes('text/plain')) {
-                const textContent = await blobAsString(await item.getType('text/plain'));
-                clipboardData = {
-                    text: stripHtml(textContent)
-                };
-            }
+            break;
+        }
+        case 'set_theme': {
+            const { newProperties } = op;
+            theme = newProperties;
+            break;
         }
     }
-    return clipboardData;
-};
-const isFile = (item) => {
-    return item.types.find(i => i.match(/^image\//));
+    return { selection, viewport, theme };
 };
-const blobAsString = (blob) => {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.addEventListener('loadend', () => {
-            const text = reader.result;
-            resolve(text);
-        });
-        reader.addEventListener('error', () => {
-            reject(reader.error);
-        });
-        reader.readAsText(blob);
-    });
+const GeneralTransforms = {
+    /**
+     * Transform the board by an operation.
+     */
+    transform(board, op) {
+        board.children = createDraft(board.children);
+        let viewport = board.viewport && createDraft(board.viewport);
+        let selection = board.selection && createDraft(board.selection);
+        let theme = board.theme && createDraft(board.theme);
+        try {
+            const state = applyToDraft(board, selection, viewport, theme, op);
+            viewport = state.viewport;
+            selection = state.selection;
+            theme = state.theme;
+        }
+        finally {
+            board.children = finishDraft(board.children);
+            if (selection) {
+                board.selection = isDraft(selection) ? finishDraft(selection) : selection;
+            }
+            else {
+                board.selection = null;
+            }
+            board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
+            board.theme = isDraft(theme) ? finishDraft(theme) : theme;
+        }
+    }
 };
 
-const getClipboardData = async (dataTransfer) => {
-    let clipboardData = {};
-    if (dataTransfer) {
-        if (dataTransfer.files.length) {
-            return { files: Array.from(dataTransfer.files) };
+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]);
         }
-        clipboardData = getDataTransferClipboard(dataTransfer);
-        if (Object.keys(clipboardData).length === 0) {
-            clipboardData = getDataTransferClipboardText(dataTransfer);
+        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]);
         }
-        return clipboardData;
-    }
-    if (getProbablySupportsClipboardRead()) {
-        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 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
+};
 
-const BOARD_TO_TOUCH_REF = new WeakMap();
-const isPreventTouchMove = (board) => {
-    return !!BOARD_TO_TOUCH_REF.get(board);
+function setSelection(board, selection) {
+    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
+    board.apply(operation);
+}
+const SelectionTransforms = {
+    setSelection,
+    addSelectionWithTemporaryElements
 };
-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 });
-        }
+function addSelectionWithTemporaryElements(board, elements) {
+    const timeoutId = setTimeout(() => {
+        setSelection(board, { anchor: [0, 0], focus: [0, 0] });
+    }, 0);
+    let ref = getTemporaryRef(board);
+    if (ref) {
+        clearTimeout(ref.timeoutId);
+        const currentElements = ref.elements;
+        ref.elements.push(...elements.filter(element => !currentElements.includes(element)));
+        ref.timeoutId = timeoutId;
     }
     else {
-        const ref = BOARD_TO_TOUCH_REF.get(board);
-        if (ref) {
-            BOARD_TO_TOUCH_REF.delete(board);
-            ref.host?.remove();
-        }
+        BOARD_TO_TEMPORARY_ELEMENTS.set(board, { timeoutId, 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;
+    }, []);
 };
 /**
- * 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.
+ * 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 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 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 => {
+        const path = PlaitBoard.findPath(board, element);
+        const ref = board.pathRef(path);
+        return () => {
+            ref.current && removeNode(board, ref.current);
+            ref.unref();
+            removeSelectedElement(board, element, true);
+        };
+    })
+        .forEach(action => {
+        action();
+    });
+};
+const CoreTransforms = {
+    removeElements
+};
+
+const Transforms = {
+    ...GeneralTransforms,
+    ...ViewportTransforms$1,
+    ...SelectionTransforms,
+    ...NodeTransforms,
+    ...GroupTransforms,
+    ...ZIndexTransforms
 };
 
 const rotatePoints = (points, centerPoint, angle) => {
@@ -2234,7 +3322,14 @@ const getSelectionAngle = (elements) => {
     return angle;
 };
 const hasSameAngle = (elements) => {
-    return !!getSelectionAngle(elements);
+    if (!elements.length) {
+        return false;
+    }
+    const angle = elements[0].angle;
+    if (angle === undefined) {
+        return false;
+    }
+    return !elements.some(item => item.angle !== angle);
 };
 const getRotatedBoundingRectangle = (rectanglesCornerPoints, angle) => {
     let rectanglesFromOrigin = [];
@@ -2273,16 +3368,60 @@ const rotatePointsByElement = (points, element) => {
         return null;
     }
 };
-const rotateAntiPointsByElement = (points, element) => {
-    if (hasValidAngle(element)) {
-        let rectangle = RectangleClient.getRectangleByPoints(element.points);
+const rotateAntiPointsByElement = (points, element) => {
+    if (hasValidAngle(element)) {
+        let rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const centerPoint = RectangleClient.getCenterPoint(rectangle);
+        return rotatePoints(points, centerPoint, -element.angle);
+    }
+    else {
+        return null;
+    }
+};
+const getRectangleByAngle = (rectangle, angle) => {
+    if (angle) {
+        const cornerPoints = RectangleClient.getCornerPoints(rectangle);
         const centerPoint = RectangleClient.getCenterPoint(rectangle);
-        return rotatePoints(points, centerPoint, -element.angle);
+        return RectangleClient.getRectangleByPoints(rotatePoints(cornerPoints, centerPoint, angle));
     }
     else {
         return null;
     }
 };
+const isAxisChangedByAngle = (angle) => {
+    const unitAngle = Math.abs(angle) % Math.PI;
+    return unitAngle >= (1 / 4) * Math.PI && unitAngle <= (3 / 4) * Math.PI;
+};
+function degreesToRadians(d) {
+    return (d / 180) * Math.PI;
+}
+function radiansToDegrees(r) {
+    return (r / Math.PI) * 180;
+}
+function rotateElements(board, elements, angle) {
+    const selectionRectangle = getRectangleByElements(board, elements, false);
+    const selectionCenterPoint = RectangleClient.getCenterPoint(selectionRectangle);
+    elements.forEach(item => {
+        const originAngle = item.angle;
+        const points = rotatedDataPoints(item.points, selectionCenterPoint, normalizeAngle(angle));
+        const path = PlaitBoard.findPath(board, item);
+        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);
@@ -2319,7 +3458,7 @@ function getTemporaryRef(board) {
 function deleteTemporaryElements(board) {
     BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
 }
-function createSelectionRectangleG(board) {
+function drawEntireActiveRectangleG(board) {
     const elements = getSelectedElements(board);
     const rectangle = getRectangleByElements(board, elements, false);
     if (rectangle.width > 0 && rectangle.height > 0 && elements.length > 1) {
@@ -2329,7 +3468,6 @@ function createSelectionRectangleG(board) {
             fillStyle: 'solid'
         });
         selectionRectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
-        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
         const angle = getSelectionAngle(elements);
         if (angle) {
             setAngleForG(selectionRectangleG, RectangleClient.getCenterPoint(rectangle), angle);
@@ -2570,11 +3708,16 @@ const createGroupRectangleG = (board, elements) => {
         if (item.groupId && isRender) {
             const elements = getElementsInGroupByElement(board, item);
             const rectangle = getRectangleByElements(board, elements, false);
-            groupRectangleG.append(drawRectangle(board, rectangle, {
+            const rectangleG = drawRectangle(board, rectangle, {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH,
                 strokeLineDash: [5]
-            }));
+            });
+            const angle = getSelectionAngle(elements);
+            if (angle) {
+                setAngleForG(rectangleG, RectangleClient.getCenterPoint(rectangle), angle);
+            }
+            groupRectangleG.append(rectangleG);
         }
     });
     return groupRectangleG;
@@ -2610,6 +3753,255 @@ const canRemoveGroup = (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');
+    clipboardContext &&
+        board.insertFragment({
+            ...clipboardContext,
+            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) {
@@ -2623,228 +4015,32 @@ const PlaitElement = {
     },
     getComponent(value) {
         return ELEMENT_TO_COMPONENT.get(value);
-    }
-};
-
-const Path = {
-    /**
-     * Get a list of ancestor paths for a given path.
-     *
-     * The paths are sorted from shallowest to deepest ancestor. However, if the
-     * `reverse: true` option is passed, they are reversed.
-     */
-    ancestors(path, options = {}) {
-        const { reverse = false } = options;
-        let paths = Path.levels(path, options);
-        if (reverse) {
-            paths = paths.slice(1);
-        }
-        else {
-            paths = paths.slice(0, -1);
-        }
-        return paths;
-    },
-    /**
-     * Get a list of paths at every level down to a path. Note: this is the same
-     * as `Path.ancestors`, but including the path itself.
-     *
-     * The paths are sorted from shallowest to deepest. However, if the `reverse:
-     * true` option is passed, they are reversed.
-     */
-    levels(path, options = {}) {
-        const { reverse = false } = options;
-        const list = [];
-        for (let i = 0; i <= path.length; i++) {
-            list.push(path.slice(0, i));
-        }
-        if (reverse) {
-            list.reverse();
-        }
-        return list;
-    },
-    parent(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the parent path of the root path [${path}].`);
-        }
-        return path.slice(0, -1);
-    },
-    next(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the next path of a root path [${path}], because it has no next index.`);
-        }
-        const last = path[path.length - 1];
-        return path.slice(0, -1).concat(last + 1);
-    },
-    hasPrevious(path) {
-        return path[path.length - 1] > 0;
-    },
-    previous(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the next path of a root path [${path}], because it has no previous index.`);
-        }
-        const last = path[path.length - 1];
-        return path.slice(0, -1).concat(last - 1);
-    },
-    /**
-     * Check if a path is an ancestor of another.
-     */
-    isAncestor(path, another) {
-        return path.length < another.length && Path.compare(path, another) === 0;
     },
-    /**
-     * Compare a path to another, returning an integer indicating whether the path
-     * was before, at, or after the other.
-     *
-     * Note: Two paths of unequal length can still receive a `0` result if one is
-     * directly above or below the other. If you want exact matching, use
-     * [[Path.equals]] instead.
-     */
-    compare(path, another) {
-        const min = Math.min(path.length, another.length);
-        for (let i = 0; i < min; i++) {
-            if (path[i] < another[i])
-                return -1;
-            if (path[i] > another[i])
-                return 1;
+    getElementG(value) {
+        const g = NODE_TO_G.get(value);
+        if (!g) {
+            throw new Error(`can not resolve element g: ${JSON.stringify(value)}`);
         }
-        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;
+        return g;
     },
-    /**
-     * Check if a path is a sibling of another.
-     */
-    isSibling(path, another) {
-        if (path.length !== another.length) {
-            return false;
+    hasMounted(element) {
+        const containerG = PlaitElement.getContainerG(element, { suppressThrow: true });
+        if (containerG) {
+            return true;
         }
-        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 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;
+        else {
+            return false;
         }
     },
-    get(root, path) {
-        let node = root;
-        for (let i = 0; i < path.length; i++) {
-            const p = path[i];
-            if (!node || !node.children || !node.children[p]) {
-                throw new Error(`Cannot find a descendant at path [${path}]`);
+    getContainerG(value, options) {
+        const containerG = NODE_TO_CONTAINER_G.get(value) || null;
+        if (!containerG) {
+            if (options.suppressThrow) {
+                return null;
             }
-            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];
+            throw new Error('can not resolve container g');
         }
-        return n;
+        return containerG;
     }
 };
 
@@ -2962,12 +4158,6 @@ const Point = {
     }
 };
 
-const Viewport = {
-    isViewport: (value) => {
-        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
-    }
-};
-
 const SAVING = new WeakMap();
 const MERGING = new WeakMap();
 
@@ -3029,445 +4219,177 @@ var Direction;
 
 const PlaitGroupElement = {
     isGroup: (value) => {
-        return value.type === 'group';
-    }
-};
-
-function getRectangleByElements(board, elements, recursion) {
-    const rectanglesCornerPoints = [];
-    const callback = (node) => {
-        const nodeRectangle = board.getRectangle(node);
-        if (nodeRectangle) {
-            const cornerPoints = RectangleClient.getCornerPoints(nodeRectangle);
-            const rotatedCornerPoints = rotatePoints(cornerPoints, RectangleClient.getCenterPoint(nodeRectangle), node.angle || 0);
-            rectanglesCornerPoints.push(rotatedCornerPoints);
-        }
-        else {
-            console.error(`can not get rectangle of element:`, node);
-        }
-    };
-    elements.forEach(element => {
-        if (recursion) {
-            depthFirstRecursion(element, node => callback(node), node => board.isRecursion(node));
-        }
-        else {
-            callback(element);
-        }
-    });
-    if (rectanglesCornerPoints.length > 0) {
-        if (hasSameAngle(elements)) {
-            const angle = getSelectionAngle(elements);
-            return getRotatedBoundingRectangle(rectanglesCornerPoints, angle);
-        }
-        else {
-            const flatCornerPoints = rectanglesCornerPoints.reduce((acc, val) => {
-                return acc.concat(val);
-            }, []);
-            return RectangleClient.getRectangleByPoints(flatCornerPoints);
-        }
-    }
-    else {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
-    }
-}
-function getBoardRectangle(board) {
-    return getRectangleByElements(board, board.children, true);
-}
-function getElementById(board, id, dataSource) {
-    if (!dataSource) {
-        dataSource = findElements(board, { match: element => true, recursion: element => true });
-    }
-    let element = dataSource.find(element => element.id === id);
-    return element;
-}
-function findElements(board, options) {
-    let elements = [];
-    const isReverse = options.isReverse ?? true;
-    depthFirstRecursion(board, node => {
-        if (!PlaitBoard.isBoard(node) && options.match(node)) {
-            elements.push(node);
-        }
-    }, (value) => {
-        if (PlaitBoard.isBoard(value)) {
-            return true;
-        }
-        else {
-            return getIsRecursionFunc(board)(value) && options.recursion(value);
-        }
-    }, isReverse);
-    return elements;
-}
-
-const PlaitBoard = {
-    isBoard(value) {
-        const cachedIsBoard = IS_BOARD_CACHE.get(value);
-        if (cachedIsBoard !== undefined) {
-            return cachedIsBoard;
-        }
-        const isBoard = typeof value.onChange === 'function' && typeof value.apply === 'function';
-        IS_BOARD_CACHE.set(value, isBoard);
-        return isBoard;
-    },
-    findPath(board, node) {
-        const path = [];
-        let child = node;
-        while (true) {
-            const parent = NODE_TO_PARENT.get(child);
-            if (parent == null) {
-                if (PlaitBoard.isBoard(child)) {
-                    return path;
-                }
-                else {
-                    break;
-                }
-            }
-            const i = NODE_TO_INDEX.get(child);
-            if (i == null) {
-                break;
-            }
-            path.unshift(i);
-            child = parent;
-        }
-        throw new Error(`Unable to find the path for Plait node: ${JSON.stringify(node)}`);
-    },
-    getHost(board) {
-        return BOARD_TO_HOST.get(board);
-    },
-    getElementHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.host;
-    },
-    getElementUpperHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.upperHost;
-    },
-    getElementActiveHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.activeHost;
-    },
-    getRoughSVG(board) {
-        return BOARD_TO_ROUGH_SVG.get(board);
-    },
-    getComponent(board) {
-        return BOARD_TO_COMPONENT.get(board);
-    },
-    getBoardContainer(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.container;
-    },
-    getRectangle(board) {
-        return getRectangleByElements(board, board.children, true);
-    },
-    getViewportContainer(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.viewportContainer;
-    },
-    isFocus(board) {
-        return !!board.selection;
-    },
-    isReadonly(board) {
-        return board.options.readonly;
-    },
-    hasBeenTextEditing(board) {
-        return !!IS_TEXT_EDITABLE.get(board);
-    },
-    getPointer(board) {
-        return board.pointer;
-    },
-    isPointer(board, pointer) {
-        return board.pointer === pointer;
-    },
-    isInPointer(board, pointers) {
-        const point = board.pointer;
-        return pointers.includes(point);
-    },
-    getMovingPointInBoard(board) {
-        return BOARD_TO_MOVING_POINT_IN_BOARD.get(board);
-    },
-    isMovingPointInBoard(board) {
-        const point = BOARD_TO_MOVING_POINT.get(board);
-        const rect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-        if (point && distanceBetweenPointAndRectangle(point[0], point[1], rect) === 0) {
-            return true;
-        }
-        return false;
-    },
-    getThemeColors(board) {
-        return (board.options.themeColors || ThemeColors);
-    }
-};
-
-const applyToDraft = (board, selection, viewport, theme, op) => {
-    switch (op.type) {
-        case 'insert_node': {
-            const { path, node } = op;
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            if (!parent.children || index > parent.children.length) {
-                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
-            }
-            parent.children.splice(index, 0, node);
-            break;
-        }
-        case 'remove_node': {
-            const { path } = op;
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            if (!parent.children || index > parent.children.length) {
-                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
-            }
-            parent.children.splice(index, 1);
-            break;
-        }
-        case 'move_node': {
-            const { path, newPath } = op;
-            if (Path.isAncestor(path, newPath)) {
-                throw new Error(`Cannot move a path [${path}] to new path [${newPath}] because the destination is inside itself.`);
-            }
-            const node = PlaitNode.get(board, path);
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            // This is tricky, but since the `path` and `newPath` both refer to
-            // the same snapshot in time, there's a mismatch. After either
-            // removing the original position, the second step's path can be out
-            // of date. So instead of using the `op.newPath` directly, we
-            // transform `op.path` to ascertain what the `newPath` would be after
-            // the operation was applied.
-            parent.children?.splice(index, 1);
-            const truePath = Path.transform(path, op);
-            const newParent = PlaitNode.get(board, Path.parent(truePath));
-            const newIndex = truePath[truePath.length - 1];
-            newParent.children?.splice(newIndex, 0, node);
-            break;
-        }
-        case 'set_node': {
-            const { path, properties, newProperties } = op;
-            if (path.length === 0) {
-                throw new Error(`Cannot set properties on the root node!`);
-            }
-            const node = PlaitNode.get(board, path);
-            for (const key in newProperties) {
-                const value = newProperties[key];
-                if (value == null) {
-                    delete node[key];
-                }
-                else {
-                    node[key] = value;
-                }
-            }
-            // properties that were previously defined, but are now missing, must be deleted
-            for (const key in properties) {
-                if (!newProperties.hasOwnProperty(key)) {
-                    delete node[key];
-                }
-            }
-            break;
+        return value.type === 'group';
+    }
+};
+
+function getRectangleByElements(board, elements, recursion) {
+    const rectanglesCornerPoints = [];
+    const callback = (node) => {
+        const nodeRectangle = board.getRectangle(node);
+        if (nodeRectangle) {
+            const cornerPoints = RectangleClient.getCornerPoints(nodeRectangle);
+            const rotatedCornerPoints = rotatePointsByElement(cornerPoints, node) || cornerPoints;
+            rectanglesCornerPoints.push(rotatedCornerPoints);
         }
-        case 'set_viewport': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                viewport = newProperties;
-            }
-            else {
-                if (viewport == null) {
-                    if (!Viewport.isViewport(newProperties)) {
-                        throw new Error(`Cannot apply an incomplete "set_viewport" operation properties ${JSON.stringify(newProperties)} when there is no current viewport.`);
-                    }
-                    viewport = { ...newProperties };
-                }
-                for (const key in newProperties) {
-                    const value = newProperties[key];
-                    if (value == null) {
-                        delete viewport[key];
-                    }
-                    else {
-                        viewport[key] = value;
-                    }
-                }
-            }
-            break;
+        else {
+            console.error(`can not get rectangle of element:`, node);
         }
-        case 'set_selection': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                selection = newProperties;
-            }
-            else {
-                if (selection === null) {
-                    selection = op.newProperties;
-                }
-                else {
-                    selection = newProperties;
-                }
-            }
-            break;
+    };
+    elements.forEach(element => {
+        if (recursion) {
+            depthFirstRecursion(element, node => callback(node), node => board.isRecursion(node));
         }
-        case 'set_theme': {
-            const { newProperties } = op;
-            theme = newProperties;
-            break;
+        else {
+            callback(element);
         }
-    }
-    return { selection, viewport, theme };
-};
-const GeneralTransforms = {
-    /**
-     * Transform the board by an operation.
-     */
-    transform(board, op) {
-        board.children = createDraft(board.children);
-        let viewport = board.viewport && createDraft(board.viewport);
-        let selection = board.selection && createDraft(board.selection);
-        let theme = board.theme && createDraft(board.theme);
-        try {
-            const state = applyToDraft(board, selection, viewport, theme, op);
-            viewport = state.viewport;
-            selection = state.selection;
-            theme = state.theme;
+    });
+    if (rectanglesCornerPoints.length > 0) {
+        if (hasSameAngle(elements)) {
+            const angle = getSelectionAngle(elements);
+            return getRotatedBoundingRectangle(rectanglesCornerPoints, angle);
         }
-        finally {
-            board.children = finishDraft(board.children);
-            if (selection) {
-                board.selection = isDraft(selection) ? finishDraft(selection) : selection;
-            }
-            else {
-                board.selection = null;
-            }
-            board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
-            board.theme = isDraft(theme) ? finishDraft(theme) : theme;
+        else {
+            const flatCornerPoints = rectanglesCornerPoints.reduce((acc, val) => {
+                return acc.concat(val);
+            }, []);
+            return RectangleClient.getRectangleByPoints(flatCornerPoints);
         }
     }
-};
-
-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];
-        }
+    else {
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
     }
-    const operation = { type: 'set_node', properties, newProperties, path };
-    board.apply(operation);
-}
-function removeNode(board, path) {
-    const node = PlaitNode.get(board, path);
-    const operation = { type: 'remove_node', path, node };
-    board.apply(operation);
-}
-function moveNode(board, path, newPath) {
-    const operation = { type: 'move_node', path, newPath };
-    board.apply(operation);
 }
-const NodeTransforms = {
-    insertNode,
-    setNode,
-    removeNode,
-    moveNode
-};
-
-function setSelection(board, selection) {
-    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
-    board.apply(operation);
+function getBoardRectangle(board) {
+    return getRectangleByElements(board, board.children, true);
 }
-const SelectionTransforms = {
-    setSelection,
-    addSelectionWithTemporaryElements
-};
-function addSelectionWithTemporaryElements(board, elements) {
-    const timeoutId = setTimeout(() => {
-        setSelection(board, { anchor: [0, 0], focus: [0, 0] });
-    }, 0);
-    let ref = getTemporaryRef(board);
-    if (ref) {
-        clearTimeout(ref.timeoutId);
-        const currentElements = ref.elements;
-        ref.elements.push(...elements.filter(element => !currentElements.includes(element)));
-        ref.timeoutId = timeoutId;
-    }
-    else {
-        BOARD_TO_TEMPORARY_ELEMENTS.set(board, { timeoutId, elements });
+function getElementById(board, id, dataSource) {
+    if (!dataSource) {
+        dataSource = findElements(board, { match: element => true, recursion: element => true });
     }
+    let element = dataSource.find(element => element.id === id);
+    return element;
 }
-
-const removeElements = (board, elements) => {
-    elements
-        .map(element => {
-        const path = PlaitBoard.findPath(board, element);
-        const ref = board.pathRef(path);
-        return () => {
-            removeNode(board, ref.current);
-            ref.unref();
-            removeSelectedElement(board, element, true);
-        };
-    })
-        .forEach(action => {
-        action();
-    });
-};
-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]);
+function findElements(board, options) {
+    let elements = [];
+    const isReverse = options.isReverse ?? true;
+    depthFirstRecursion(board, node => {
+        if (!PlaitBoard.isBoard(node) && options.match(node)) {
+            elements.push(node);
+        }
+    }, (value) => {
+        if (PlaitBoard.isBoard(value)) {
+            return true;
         }
         else {
-            NodeTransforms.insertNode(board, group, [board.children.length]);
+            return getIsRecursionFunc(board)(value) && options.recursion(value);
+        }
+    }, isReverse);
+    return elements;
+}
+
+const PlaitBoard = {
+    isBoard(value) {
+        const cachedIsBoard = IS_BOARD_CACHE.get(value);
+        if (cachedIsBoard !== undefined) {
+            return cachedIsBoard;
+        }
+        const isBoard = typeof value.onChange === 'function' && typeof value.apply === 'function';
+        IS_BOARD_CACHE.set(value, isBoard);
+        return isBoard;
+    },
+    isAlive(board) {
+        const isAlive = IS_BOARD_ALIVE.get(board);
+        return !!isAlive;
+    },
+    findPath(board, node) {
+        const path = [];
+        let child = node;
+        while (true) {
+            const parent = NODE_TO_PARENT.get(child);
+            if (parent == null) {
+                if (PlaitBoard.isBoard(child)) {
+                    return path;
+                }
+                else {
+                    break;
+                }
+            }
+            const i = NODE_TO_INDEX.get(child);
+            if (i == null) {
+                break;
+            }
+            path.unshift(i);
+            child = parent;
+        }
+        throw new Error(`Unable to find the path for Plait node: ${JSON.stringify(node)}`);
+    },
+    getHost(board) {
+        return BOARD_TO_HOST.get(board);
+    },
+    getElementHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.host;
+    },
+    getElementUpperHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.upperHost;
+    },
+    getElementActiveHost(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.activeHost;
+    },
+    getRoughSVG(board) {
+        return BOARD_TO_ROUGH_SVG.get(board);
+    },
+    getComponent(board) {
+        return BOARD_TO_COMPONENT.get(board);
+    },
+    getBoardContainer(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.container;
+    },
+    getRectangle(board) {
+        return getRectangleByElements(board, board.children, true);
+    },
+    getViewportContainer(board) {
+        return BOARD_TO_ELEMENT_HOST.get(board)?.viewportContainer;
+    },
+    isFocus(board) {
+        return !!board.selection;
+    },
+    isReadonly(board) {
+        return board.options.readonly;
+    },
+    hasBeenTextEditing(board) {
+        return !!IS_TEXT_EDITABLE.get(board);
+    },
+    getPointer(board) {
+        return board.pointer;
+    },
+    isPointer(board, pointer) {
+        return board.pointer === pointer;
+    },
+    isInPointer(board, pointers) {
+        const point = board.pointer;
+        return pointers.includes(point);
+    },
+    getMovingPointInBoard(board) {
+        return BOARD_TO_MOVING_POINT_IN_BOARD.get(board);
+    },
+    isMovingPointInBoard(board) {
+        const point = BOARD_TO_MOVING_POINT.get(board);
+        const rect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
+        if (point && distanceBetweenPointAndRectangle(point[0], point[1], rect) === 0) {
+            return true;
         }
+        return false;
+    },
+    getThemeColors(board) {
+        return (board.options.themeColors || ThemeColors);
     }
 };
-const 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
-};
 
 const PathRef = {
     transform(ref, op) {
@@ -3547,6 +4469,9 @@ function createBoard(children, options) {
         },
         onChange: () => { },
         afterChange: () => { },
+        drawActiveRectangle: () => {
+            return drawEntireActiveRectangleG(board);
+        },
         mousedown: (event) => { },
         mousemove: (event) => { },
         mouseleave: (event) => { },
@@ -3557,19 +4482,16 @@ function createBoard(children, options) {
         globalKeyDown: (event) => { },
         keyUp: (event) => { },
         dblClick: (event) => { },
-        setFragment: (data, clipboardContext) => {
-            setClipboardData(data, clipboardContext);
-        },
-        insertFragment: (data) => { },
-        deleteFragment: (data) => {
-            const elements = board.getDeletedFragment([]);
+        buildFragment: (clipboardContext) => clipboardContext,
+        insertFragment: () => { },
+        deleteFragment: (elements) => {
             CoreTransforms.removeElements(board, elements);
         },
         getDeletedFragment: (data) => data,
-        getRelatedFragment: (data) => data,
-        drawElement: (context) => [],
-        redrawElement: (context, previousContext) => { },
-        destroyElement: (context) => { },
+        getRelatedFragment: (data, originData) => data,
+        drawElement: (context) => {
+            throw new Error(`can not resolve plugin element component type: ${context.element.type}`);
+        },
         isWithinSelection: element => false,
         isRectangleHit: element => false,
         isHit: element => false,
@@ -3588,7 +4510,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;
 }
@@ -3751,7 +4675,7 @@ function withHandPointer(board) {
 }
 
 function withSelection(board) {
-    const { pointerDown, pointerUp, pointerMove, globalPointerUp, onChange, afterChange } = board;
+    const { pointerDown, pointerUp, pointerMove, globalPointerUp, onChange, afterChange, drawActiveRectangle } = board;
     let start = null;
     let end = null;
     let selectionMovingG;
@@ -3912,7 +4836,8 @@ function withSelection(board) {
                 if (!isSelectionMoving(board)) {
                     selectionRectangleG?.remove();
                     if (newElements.length > 1) {
-                        selectionRectangleG = createSelectionRectangleG(board);
+                        selectionRectangleG = board.drawActiveRectangle();
+                        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
                     }
                 }
             }
@@ -3931,7 +4856,8 @@ function withSelection(board) {
                         (currentSelectedElements.length !== previousSelectedElements.length ||
                             currentSelectedElements.some((c, index) => c !== previousSelectedElements[index]))) {
                         selectionRectangleG?.remove();
-                        selectionRectangleG = createSelectionRectangleG(board);
+                        selectionRectangleG = board.drawActiveRectangle();
+                        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
                         previousSelectedElements = currentSelectedElements;
                     }
                 }
@@ -3980,354 +4906,194 @@ function withViewport(board) {
     return board;
 }
 
-const ALIGN_TOLERANCE = 2;
-class AlignReaction {
-    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(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;
     }
-    handleAlign() {
-        const alignRectangles = this.getAlignRectangle();
-        const g = createG();
-        let alignLines = [];
-        const offset = 12;
-        let deltaX = 0;
-        let deltaY = 0;
-        let isCorrectX = false;
-        let isCorrectY = false;
-        for (let alignRectangle of alignRectangles) {
-            const closestDistances = this.calculateClosestDistances(this.activeRectangle, alignRectangle);
-            let canDrawHorizontal = false;
-            if (!isCorrectX && closestDistances.absXDistance < ALIGN_TOLERANCE) {
-                deltaX = closestDistances.xDistance;
-                this.activeRectangle.x -= deltaX;
-                isCorrectX = true;
-                canDrawHorizontal = true;
-            }
-            if (closestDistances.absXDistance === 0) {
-                canDrawHorizontal = true;
+    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 < ALIGN_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 < ALIGN_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 < ALIGN_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 < ALIGN_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);
@@ -4335,17 +5101,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;
@@ -4354,7 +5109,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;
@@ -4379,7 +5134,8 @@ function withMoving(board) {
         }
         else if (hitTargetElement) {
             startPoint = point;
-            activeElements = getElementsInGroupByElement(board, hitTargetElement);
+            const relatedElements = board.getRelatedFragment([], [hitTargetElement]);
+            activeElements = [...getElementsInGroupByElement(board, hitTargetElement), ...relatedElements];
             activeElementsRectangle = getRectangleByElements(board, activeElements, true);
             preventTouchMove(board, event, true);
         }
@@ -4402,7 +5158,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];
@@ -4423,13 +5179,13 @@ function withMoving(board) {
                         x: activeElementsRectangle.x + offsetX,
                         y: activeElementsRectangle.y + offsetY
                     };
-                    const reactionManager = new AlignReaction(board, activeElements, newRectangle);
-                    const ref = reactionManager.handleAlign();
-                    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');
@@ -4464,7 +5220,7 @@ function withMoving(board) {
         globalPointerUp(event);
     };
     function cancelMove(board) {
-        alignG?.remove();
+        snapG?.remove();
         startPoint = null;
         activeElementsRectangle = null;
         offsetX = 0;
@@ -4648,12 +5404,41 @@ 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))) {
             event.preventDefault();
-            board.deleteFragment(null);
+            deleteFragment(board);
         }
         keyDown(event);
     };
@@ -4708,162 +5493,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, '');
@@ -4872,10 +5504,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;
 }
@@ -4920,7 +5552,6 @@ class PlaitBoardComponent {
         this.elementRef = elementRef;
         this.ngZone = ngZone;
         this.hasInitialized = false;
-        this.effect = {};
         this.destroy$ = new Subject();
         this.plaitValue = [];
         this.plaitPlugins = [];
@@ -4953,6 +5584,7 @@ class PlaitBoardComponent {
         BOARD_TO_COMPONENT.set(this.board, this);
         BOARD_TO_ROUGH_SVG.set(this.board, roughSVG);
         BOARD_TO_HOST.set(this.board, this.host);
+        IS_BOARD_ALIVE.set(this.board, true);
         BOARD_TO_ELEMENT_HOST.set(this.board, {
             host: elementHost,
             upperHost: elementUpperHost,
@@ -4962,7 +5594,7 @@ class PlaitBoardComponent {
         });
         BOARD_TO_ON_CHANGE.set(this.board, () => {
             this.ngZone.run(() => {
-                this.update();
+                this.updateListRender();
             });
         });
         BOARD_TO_AFTER_CHANGE.set(this.board, () => {
@@ -4978,15 +5610,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'];
@@ -5104,10 +5733,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)))
@@ -5116,19 +5743,31 @@ 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');
-            this.board.deleteFragment(event.clipboardData);
+            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());
+    }
+    initializeChildrenContext() {
+        return {
+            board: this.board,
+            parent: this.board,
+            parentG: PlaitBoard.getElementHost(this.board)
+        };
+    }
     viewportScrollListener() {
         fromEvent(this.viewportContainer.nativeElement, 'scroll')
             .pipe(takeUntil(this.destroy$), filter(() => {
@@ -5208,6 +5847,7 @@ class PlaitBoardComponent {
         BOARD_TO_ROUGH_SVG.delete(this.board);
         BOARD_TO_HOST.delete(this.board);
         BOARD_TO_ELEMENT_HOST.delete(this.board);
+        IS_BOARD_ALIVE.set(this.board, false);
         BOARD_TO_ON_CHANGE.delete(this.board);
         BOARD_TO_AFTER_CHANGE.set(this.board, () => { });
     }
@@ -5225,10 +5865,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,
@@ -5241,14 +5880,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
@@ -5474,12 +6111,25 @@ class DebugGenerator {
             return;
         }
         const polygonG = PlaitBoard.getRoughSVG(board).polygon(points, options || { stroke: 'red' });
+        polygonG.classList.add(this.debugKey);
         PlaitBoard.getElementActiveHost(board).append(polygonG);
         const gArray = getTemporaryGArray(this.debugKey);
         gArray.push(polygonG);
         setTemporaryGArray(this.debugKey, gArray);
         return polygonG;
     }
+    drawLine(board, points, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        const lineG = PlaitBoard.getRoughSVG(board).linearPath(points, options || { stroke: 'red' });
+        lineG.classList.add(this.debugKey);
+        PlaitBoard.getElementActiveHost(board).append(lineG);
+        const gArray = getTemporaryGArray(this.debugKey);
+        gArray.push(lineG);
+        setTemporaryGArray(this.debugKey, gArray);
+        return lineG;
+    }
     drawRectangle(board, data, options) {
         if (!isDebug(this.debugKey)) {
             return;
@@ -5492,6 +6142,7 @@ class DebugGenerator {
             rectangle = data;
         }
         const rectangleG = PlaitBoard.getRoughSVG(board).rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, options || { stroke: 'red' });
+        rectangleG.classList.add(this.debugKey);
         PlaitBoard.getElementActiveHost(board).append(rectangleG);
         const gArray = getTemporaryGArray(this.debugKey);
         gArray.push(rectangleG);
@@ -5505,6 +6156,7 @@ class DebugGenerator {
         const result = [];
         points.forEach((p, i) => {
             const circle = PlaitBoard.getRoughSVG(board).circle(p[0], p[1], isCumulativeDiameter ? diameter * (i + 1) : diameter, Object.assign({}, { stroke: 'red', fill: 'red', fillStyle: 'solid' }, options || {}));
+            circle.classList.add(this.debugKey);
             PlaitBoard.getElementActiveHost(board).append(circle);
             const gArray = getTemporaryGArray(this.debugKey);
             gArray.push(circle);
@@ -5530,5 +6182,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_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, 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, createSelectionRectangleG, createTestingBoard, createText, createTouchEvent, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, 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, 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, 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, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, 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