@plait/core 0.53.0 → 0.54.0

package/fesm2022/plait-core.mjs

@@ -4,7 +4,7 @@ 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 { produce, createDraft, finishDraft, isDraft } from 'immer';
 import { NgFor } from '@angular/common';
 
 // record richtext type status
@@ -18,6 +18,7 @@ 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 +65,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]) {
@@ -185,6 +186,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,6 +501,7 @@ 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';
@@ -1703,7 +1708,7 @@ const throttleRAF = (board, key, fn) => {
             const value = BOARD_TO_RAF.get(board) || {};
             value[key] = null;
             BOARD_TO_RAF.set(board, value);
-            fn();
+            PlaitBoard.isAlive(board) && fn();
         });
         const state = getRAFState(board);
         state[key] = timerId;
@@ -2211,476 +2216,67 @@ const handleTouchTarget = (board) => {
     }
 };
 
-const rotatePoints = (points, centerPoint, angle) => {
-    if (!angle) {
-        angle = 0;
-    }
-    if (Array.isArray(points) && typeof points[0] === 'number') {
-        return rotate(points[0], points[1], centerPoint[0], centerPoint[1], angle);
-    }
-    else {
-        return points.map(point => {
-            return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle);
-        });
-    }
-};
-const getSelectionAngle = (elements) => {
-    let angle = elements[0]?.angle || 0;
-    elements.forEach(item => {
-        if (item.angle !== angle && !approximately((item.angle % (Math.PI / 2)) - (angle % (Math.PI / 2)), 0)) {
-            angle = 0;
-        }
-    });
-    return angle;
-};
-const hasSameAngle = (elements) => {
-    return !!getSelectionAngle(elements);
-};
-const getRotatedBoundingRectangle = (rectanglesCornerPoints, angle) => {
-    let rectanglesFromOrigin = [];
-    for (let i = 0; i < rectanglesCornerPoints.length; i++) {
-        const cornerPoints = rectanglesCornerPoints[i];
-        const invertCornerPointsFromOrigin = rotatePoints(cornerPoints, [0, 0], -angle);
-        rectanglesFromOrigin.push(RectangleClient.getRectangleByPoints(invertCornerPointsFromOrigin));
-    }
-    const selectionRectangleFromOrigin = RectangleClient.getBoundingRectangle(rectanglesFromOrigin);
-    const selectionCornerPoints = RectangleClient.getCornerPoints(selectionRectangleFromOrigin);
-    const cornerPointsFromOrigin = rotatePoints(selectionCornerPoints, [0, 0], angle);
-    const centerPoint = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(cornerPointsFromOrigin));
-    return RectangleClient.getRectangleByPoints(rotatePoints(cornerPointsFromOrigin, centerPoint, -angle));
-};
-const getOffsetAfterRotate = (rectangle, rotateCenterPoint, angle) => {
-    const targetCenterPoint = RectangleClient.getCenterPoint(rectangle);
-    const [rotatedCenterPoint] = rotatePoints([targetCenterPoint], rotateCenterPoint, angle);
-    const offsetX = rotatedCenterPoint[0] - targetCenterPoint[0];
-    const offsetY = rotatedCenterPoint[1] - targetCenterPoint[1];
-    return { offsetX, offsetY };
-};
-const rotatedDataPoints = (points, rotateCenterPoint, angle) => {
-    const { offsetX, offsetY } = getOffsetAfterRotate(RectangleClient.getRectangleByPoints(points), rotateCenterPoint, angle);
-    return points.map(p => [p[0] + offsetX, p[1] + offsetY]);
-};
-const hasValidAngle = (node) => {
-    return node.angle && node.angle !== 0;
-};
-const rotatePointsByElement = (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 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 Viewport = {
+    isViewport: (value) => {
+        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
     }
 };
 
-function isSelectionMoving(board) {
-    return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
-}
-function setSelectionMoving(board) {
-    PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
-    BOARD_TO_IS_SELECTION_MOVING.set(board, true);
-    setDragging(board, true);
-}
-function clearSelectionMoving(board) {
-    PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
-    BOARD_TO_IS_SELECTION_MOVING.delete(board);
-    setDragging(board, false);
-}
-function isHandleSelection(board) {
-    const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-    return board.pointer !== PlaitPointerType.hand && !options.isDisabledSelect && !PlaitBoard.isReadonly(board);
-}
-function isSetSelectionOperation(board) {
-    return !!board.operations.find(value => value.type === 'set_selection');
-}
-function getTemporaryElements(board) {
-    const ref = BOARD_TO_TEMPORARY_ELEMENTS.get(board);
-    if (ref) {
-        return ref.elements;
-    }
-    else {
-        return undefined;
-    }
-}
-function getTemporaryRef(board) {
-    return BOARD_TO_TEMPORARY_ELEMENTS.get(board);
-}
-function deleteTemporaryElements(board) {
-    BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
-}
-function createSelectionRectangleG(board) {
-    const elements = getSelectedElements(board);
-    const rectangle = getRectangleByElements(board, elements, false);
-    if (rectangle.width > 0 && rectangle.height > 0 && elements.length > 1) {
-        const selectionRectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
-            stroke: SELECTION_BORDER_COLOR,
-            strokeWidth: ACTIVE_STROKE_WIDTH,
-            fillStyle: 'solid'
-        });
-        selectionRectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
-        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
-        const angle = getSelectionAngle(elements);
-        if (angle) {
-            setAngleForG(selectionRectangleG, RectangleClient.getCenterPoint(rectangle), angle);
+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);
         }
-        return selectionRectangleG;
-    }
-    return null;
-}
-function setSelectedElementsWithGroup(board, elements, isShift) {
-    if (!board.selection) {
-        return;
-    }
-    const selectedElements = getSelectedElements(board);
-    if (!Selection.isCollapsed(board.selection)) {
-        let newElements = [...selectedElements];
-        elements.forEach(item => {
-            if (!item.groupId) {
-                newElements.push(item);
-            }
-            else {
-                newElements.push(...getElementsInGroupByElement(board, item));
-            }
-        });
-        cacheSelectedElements(board, uniqueById(newElements));
-        return;
-    }
-    if (Selection.isCollapsed(board.selection)) {
-        const hitElement = elements[0];
-        const hitElementGroups = getGroupByElement(board, hitElement, true);
-        if (hitElementGroups.length) {
-            const elementsInHighestGroup = getElementsInGroup(board, hitElementGroups[hitElementGroups.length - 1], true) || [];
-            const isSelectGroupElement = selectedElements.some(element => elementsInHighestGroup.map(item => item.id).includes(element.id));
-            if (isShift) {
-                cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup);
-            }
-            else {
-                cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups);
-            }
+        else {
+            paths = paths.slice(0, -1);
         }
-    }
-}
-function cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup) {
-    const selectedElements = getSelectedElements(board);
-    let newElements = [...selectedElements];
-    const hitElement = elements[0];
-    let pendingElements = [];
-    if (!isSelectGroupElement) {
-        pendingElements = elementsInHighestGroup;
-    }
-    else {
-        const isHitSelectedElement = selectedElements.some(item => item.id === hitElement.id);
-        const selectedElementsInGroup = elementsInHighestGroup.filter(item => selectedElements.includes(item));
-        if (isHitSelectedElement) {
-            pendingElements = selectedElementsInGroup.filter(item => item.id !== hitElement.id);
+        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));
         }
-        else {
-            pendingElements.push(...selectedElementsInGroup, ...elements);
+        if (reverse) {
+            list.reverse();
         }
-    }
-    elementsInHighestGroup.forEach(element => {
-        if (newElements.includes(element)) {
-            newElements.splice(newElements.indexOf(element), 1);
+        return list;
+    },
+    parent(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the parent path of the root path [${path}].`);
         }
-    });
-    if (pendingElements.length) {
-        newElements.push(...pendingElements);
-    }
-    cacheSelectedElements(board, uniqueById(newElements));
-}
-function cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups) {
-    let newElements = [...elements];
-    const selectedGroups = filterSelectedGroups(board, hitElementGroups);
-    if (selectedGroups.length > 0) {
-        if (selectedGroups.length > 1) {
-            newElements = getAllElementsInGroup(board, selectedGroups[selectedGroups.length - 2], true);
+        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.`);
         }
-    }
-    else {
-        const elementsInGroup = getAllElementsInGroup(board, hitElementGroups[hitElementGroups.length - 1], true);
-        if (!isSelectGroupElement) {
-            newElements = elementsInGroup;
-        }
-    }
-    cacheSelectedElements(board, uniqueById(newElements));
-}
-
-const getElementsInGroup = (board, group, recursion, includeGroup) => {
-    let result = [];
-    const elements = board.children.filter(value => value.groupId === group.id);
-    if (recursion) {
-        elements.forEach(item => {
-            if (PlaitGroupElement.isGroup(item)) {
-                if (includeGroup) {
-                    result.push(item);
-                }
-                result.push(...getElementsInGroup(board, item, recursion, includeGroup));
-            }
-            else {
-                result.push(item);
-            }
-        });
-    }
-    else {
-        result = includeGroup ? elements : elements.filter(item => !PlaitGroupElement.isGroup(item));
-    }
-    return result;
-};
-const getAllElementsInGroup = (board, group, recursion, includeGroup) => {
-    const elementsInGroup = getElementsInGroup(board, group, recursion, includeGroup);
-    const result = [];
-    elementsInGroup.forEach(element => {
-        depthFirstRecursion(element, node => {
-            result.push(node);
-        }, () => true);
-    });
-    return result;
-};
-const getRectangleByGroup = (board, group, recursion) => {
-    const elementsInGroup = getAllElementsInGroup(board, group, recursion);
-    return getRectangleByElements(board, elementsInGroup, false);
-};
-const getGroupByElement = (board, element, recursion, source) => {
-    const group = (source || board.children).find(item => item.id === element?.groupId);
-    if (!group) {
-        return recursion ? [] : null;
-    }
-    if (recursion) {
-        const groups = [group];
-        const grandGroups = getGroupByElement(board, group, recursion, source);
-        if (grandGroups.length) {
-            groups.push(...grandGroups);
-        }
-        return groups;
-    }
-    else {
-        return group;
-    }
-};
-const getHighestGroup = (board, element) => {
-    const hitElementGroups = getGroupByElement(board, element, true);
-    if (hitElementGroups.length) {
-        return hitElementGroups[hitElementGroups.length - 1];
-    }
-    return null;
-};
-const getElementsInGroupByElement = (board, element) => {
-    const highestGroup = getHighestGroup(board, element);
-    if (highestGroup) {
-        return getAllElementsInGroup(board, highestGroup, true);
-    }
-    else {
-        return [element];
-    }
-};
-const isSelectedElementOrGroup = (board, element, elements) => {
-    const selectedElements = elements || getSelectedElements(board);
-    if (PlaitGroupElement.isGroup(element)) {
-        return isSelectedAllElementsInGroup(board, element, elements);
-    }
-    return selectedElements.map(item => item.id).includes(element.id);
-};
-const isSelectedAllElementsInGroup = (board, group, elements) => {
-    const selectedElements = elements || getSelectedElements(board);
-    const elementsInGroup = getElementsInGroup(board, group, true);
-    return elementsInGroup.every(item => selectedElements.map(element => element.id).includes(item.id));
-};
-const filterSelectedGroups = (board, groups, elements) => {
-    const selectedGroups = [];
-    groups.forEach(item => {
-        if (isSelectedElementOrGroup(board, item, elements)) {
-            selectedGroups.push(item);
-        }
-    });
-    return selectedGroups;
-};
-const getSelectedGroups = (board, elements) => {
-    const highestSelectedGroups = getHighestSelectedGroups(board, elements);
-    const groups = [];
-    highestSelectedGroups.forEach(item => {
-        groups.push(item);
-        const elementsInGroup = getElementsInGroup(board, item, true, true);
-        groups.push(...elementsInGroup.filter(item => PlaitGroupElement.isGroup(item)));
-    });
-    return groups;
-};
-const getHighestSelectedGroup = (board, element, elements) => {
-    const hitElementGroups = getGroupByElement(board, element, true, elements);
-    const selectedGroups = filterSelectedGroups(board, hitElementGroups, elements);
-    if (selectedGroups.length) {
-        return selectedGroups[selectedGroups.length - 1];
-    }
-    return null;
-};
-const getHighestSelectedGroups = (board, elements) => {
-    let result = [];
-    const selectedElements = elements || getSelectedElements(board);
-    selectedElements.forEach(item => {
-        if (item.groupId) {
-            const group = getHighestSelectedGroup(board, item, elements);
-            if (group && !result.includes(group)) {
-                result.push(group);
-            }
-        }
-    });
-    return result;
-};
-const getSelectedIsolatedElements = (board, elements) => {
-    let result = [];
-    const selectedElements = elements || getSelectedElements(board);
-    selectedElements
-        .filter(item => !PlaitGroupElement.isGroup(item))
-        .forEach(item => {
-        if (!item.groupId) {
-            result.push(item);
-        }
-        else {
-            const group = getHighestSelectedGroup(board, item, elements);
-            if (!group) {
-                result.push(item);
-            }
-        }
-    });
-    return result;
-};
-const getSelectedIsolatedElementsCanAddToGroup = (board, elements) => {
-    const selectedIsolatedElements = getSelectedIsolatedElements(board, elements);
-    return selectedIsolatedElements.filter(item => board.canAddToGroup(item));
-};
-const getHighestSelectedElements = (board, elements) => {
-    return [...getHighestSelectedGroups(board, elements), ...getSelectedIsolatedElements(board, elements)];
-};
-const createGroupRectangleG = (board, elements) => {
-    const selectedElements = getSelectedElements(board);
-    const groupRectangleG = createG();
-    const isMoving = isSelectionMoving(board);
-    elements.forEach(item => {
-        const isRender = (!selectedElements.includes(item) && !isMoving) || isMoving;
-        if (item.groupId && isRender) {
-            const elements = getElementsInGroupByElement(board, item);
-            const rectangle = getRectangleByElements(board, elements, false);
-            groupRectangleG.append(drawRectangle(board, rectangle, {
-                stroke: SELECTION_BORDER_COLOR,
-                strokeWidth: ACTIVE_STROKE_WIDTH,
-                strokeLineDash: [5]
-            }));
-        }
-    });
-    return groupRectangleG;
-};
-const createGroup = (groupId) => {
-    return groupId
-        ? {
-            id: idCreator(),
-            type: 'group',
-            groupId
-        }
-        : {
-            id: idCreator(),
-            type: 'group'
-        };
-};
-const nonGroupInHighestSelectedElements = (elements) => {
-    return elements.every(item => !item.groupId);
-};
-const hasSelectedElementsInSameGroup = (elements) => {
-    return elements.every(item => item.groupId && item.groupId === elements[0].groupId);
-};
-const canAddGroup = (board, elements) => {
-    const highestSelectedElements = getHighestSelectedElements(board, elements);
-    const rootElements = highestSelectedElements.filter(item => board.canAddToGroup(item));
-    if (rootElements.length > 1) {
-        return nonGroupInHighestSelectedElements(rootElements) || hasSelectedElementsInSameGroup(rootElements);
-    }
-    return false;
-};
-const canRemoveGroup = (board, elements) => {
-    const selectedGroups = getHighestSelectedGroups(board, elements);
-    const selectedElements = elements || getSelectedElements(board);
-    return selectedElements.length > 0 && selectedGroups.length > 0;
-};
-
-const PlaitElement = {
-    isRootElement(value) {
-        const parent = NODE_TO_PARENT.get(value);
-        if (parent && PlaitBoard.isBoard(parent)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    getComponent(value) {
-        return ELEMENT_TO_COMPONENT.get(value);
-    }
-};
-
-const Path = {
-    /**
-     * Get a list of ancestor paths for a given path.
-     *
-     * The paths are sorted from shallowest to deepest ancestor. However, if the
-     * `reverse: true` option is passed, they are reversed.
-     */
-    ancestors(path, options = {}) {
-        const { reverse = false } = options;
-        let paths = Path.levels(path, options);
-        if (reverse) {
-            paths = paths.slice(1);
-        }
-        else {
-            paths = paths.slice(0, -1);
-        }
-        return paths;
-    },
-    /**
-     * Get a list of paths at every level down to a path. Note: this is the same
-     * as `Path.ancestors`, but including the path itself.
-     *
-     * The paths are sorted from shallowest to deepest. However, if the `reverse:
-     * true` option is passed, they are reversed.
-     */
-    levels(path, options = {}) {
-        const { reverse = false } = options;
-        const list = [];
-        for (let i = 0; i <= path.length; i++) {
-            list.push(path.slice(0, i));
-        }
-        if (reverse) {
-            list.reverse();
-        }
-        return list;
-    },
-    parent(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the parent path of the root path [${path}].`);
-        }
-        return path.slice(0, -1);
-    },
-    next(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the next path of a root path [${path}], because it has no next index.`);
-        }
-        const last = path[path.length - 1];
-        return path.slice(0, -1).concat(last + 1);
-    },
-    hasPrevious(path) {
-        return path[path.length - 1] > 0;
-    },
-    previous(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the next path of a root path [${path}], because it has no previous index.`);
+        const last = path[path.length - 1];
+        return path.slice(0, -1).concat(last + 1);
+    },
+    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);
@@ -2848,625 +2444,1084 @@ const PlaitNode = {
     }
 };
 
-const isSetViewportOperation = (value) => {
-    return value.type === 'set_viewport';
-};
-const inverse = (op) => {
+const applyToDraft = (board, selection, viewport, theme, op) => {
     switch (op.type) {
         case 'insert_node': {
-            return { ...op, type: 'remove_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': {
-            return { ...op, type: 'insert_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 { newPath, path } = op;
-            // PERF: in this case the move operation is a no-op anyways.
-            if (Path.equals(newPath, path)) {
-                return op;
+            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.`);
             }
-            // when operation path is [0,0] -> [0,2], should exec Path.transform to get [0,1] -> [0,0]
-            // shoud not return [0,2] -> [0,0] #WIK-8981
-            // if (Path.isSibling(path, newPath)) {
-            //     return { ...op, path: newPath, newPath: path };
-            // }
-            // If the move does not happen within a single parent it is possible
-            // for the move to impact the true path to the location where the node
-            // was removed from and where it was inserted. We have to adjust for this
-            // and find the original path. We can accomplish this (only in non-sibling)
-            // moves by looking at the impact of the move operation on the node
-            // after the original move path.
-            const inversePath = Path.transform(path, op);
-            const inverseNewPath = Path.transform(Path.next(path), op);
-            return { ...op, path: inversePath, newPath: inverseNewPath };
+            const 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 { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
-        }
-        case 'set_selection': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: null
-                };
+            const { path, properties, newProperties } = op;
+            if (path.length === 0) {
+                throw new Error(`Cannot set properties on the root node!`);
             }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: null,
-                    newProperties: properties
-                };
+            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;
+                }
             }
-            else {
-                return { ...op, properties: newProperties, newProperties: properties };
+            // 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 { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: newProperties
-                };
+            const { newProperties } = op;
+            if (newProperties == null) {
+                viewport = newProperties;
             }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: properties,
-                    newProperties: properties
-                };
+            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 {
-                return { ...op, properties: newProperties, newProperties: properties };
+                if (selection === null) {
+                    selection = op.newProperties;
+                }
+                else {
+                    selection = newProperties;
+                }
             }
+            break;
         }
         case 'set_theme': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
+            const { newProperties } = op;
+            theme = newProperties;
+            break;
         }
     }
+    return { selection, viewport, theme };
 };
-const PlaitOperation = {
-    isSetViewportOperation,
-    inverse
-};
-
-const Point = {
-    isEquals(point, otherPoint) {
-        return point && otherPoint && point[0] === otherPoint[0] && point[1] === otherPoint[1];
-    },
-    isHorizontal(point, otherPoint, tolerance = 0) {
-        return point && otherPoint && Point.isOverHorizontal([point, otherPoint], tolerance);
-    },
-    isOverHorizontal(points, tolerance = 0) {
-        return points.every(point => Math.abs(point[1] - points[0][1]) <= tolerance);
-    },
-    isVertical(point, otherPoint, tolerance = 0) {
-        return point && otherPoint && Point.isOverVertical([point, otherPoint], tolerance);
-    },
-    isOverVertical(points, tolerance = 0) {
-        return points.every(point => Math.abs(point[0] - points[0][0]) <= tolerance);
-    },
-    isAlign(points, tolerance = 0) {
-        return Point.isOverHorizontal(points, tolerance) || Point.isOverVertical(points, tolerance);
-    },
-    getOffsetX(point1, point2) {
-        return point2[0] - point1[0];
-    },
-    getOffsetY(point1, point2) {
-        return point2[1] - point1[1];
+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 Viewport = {
-    isViewport: (value) => {
-        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
+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 SAVING = new WeakMap();
-const MERGING = new WeakMap();
-
-var ThemeColorMode;
-(function (ThemeColorMode) {
-    ThemeColorMode["default"] = "default";
-    ThemeColorMode["colorful"] = "colorful";
-    ThemeColorMode["soft"] = "soft";
-    ThemeColorMode["retro"] = "retro";
-    ThemeColorMode["dark"] = "dark";
-    ThemeColorMode["starry"] = "starry";
-})(ThemeColorMode || (ThemeColorMode = {}));
-const DefaultThemeColor = {
-    mode: ThemeColorMode.default,
-    boardBackground: '#ffffff',
-    textColor: '#333333'
-};
-const ColorfulThemeColor = {
-    mode: ThemeColorMode.colorful,
-    boardBackground: '#ffffff',
-    textColor: '#333333'
+function setSelection(board, selection) {
+    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
+    board.apply(operation);
+}
+const SelectionTransforms = {
+    setSelection,
+    addSelectionWithTemporaryElements
 };
-const SoftThemeColor = {
-    mode: ThemeColorMode.soft,
-    boardBackground: '#f5f5f5',
-    textColor: '#333333'
+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 });
+    }
+}
+
+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 RetroThemeColor = {
-    mode: ThemeColorMode.retro,
-    boardBackground: '#f9f8ed',
-    textColor: '#333333'
+const CoreTransforms = {
+    removeElements
 };
-const DarkThemeColor = {
-    mode: ThemeColorMode.dark,
-    boardBackground: '#141414',
-    textColor: '#FFFFFF'
+
+const addGroup = (board, elements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
+    const highestSelectedElements = [...selectedGroups, ...selectedIsolatedElements];
+    const group = createGroup();
+    if (canAddGroup(board)) {
+        highestSelectedElements.forEach(item => {
+            const path = PlaitBoard.findPath(board, item);
+            NodeTransforms.setNode(board, { groupId: group.id }, path);
+        });
+        if (hasSelectedElementsInSameGroup(highestSelectedElements)) {
+            const newGroupId = selectedIsolatedElements[0].groupId;
+            NodeTransforms.insertNode(board, {
+                ...group,
+                groupId: newGroupId
+            }, [board.children.length]);
+        }
+        else {
+            NodeTransforms.insertNode(board, group, [board.children.length]);
+        }
+    }
 };
-const StarryThemeColor = {
-    mode: ThemeColorMode.starry,
-    boardBackground: '#0d2537',
-    textColor: '#FFFFFF'
+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 ThemeColors = [
-    DefaultThemeColor,
-    ColorfulThemeColor,
-    SoftThemeColor,
-    RetroThemeColor,
-    DarkThemeColor,
-    StarryThemeColor
-];
 
-var Direction;
-(function (Direction) {
-    Direction["left"] = "left";
-    Direction["top"] = "top";
-    Direction["right"] = "right";
-    Direction["bottom"] = "bottom";
-})(Direction || (Direction = {}));
+const Transforms = {
+    ...GeneralTransforms,
+    ...ViewportTransforms$1,
+    ...SelectionTransforms,
+    ...NodeTransforms
+};
 
-const PlaitGroupElement = {
-    isGroup: (value) => {
-        return value.type === 'group';
+const rotatePoints = (points, centerPoint, angle) => {
+    if (!angle) {
+        angle = 0;
+    }
+    if (Array.isArray(points) && typeof points[0] === 'number') {
+        return rotate(points[0], points[1], centerPoint[0], centerPoint[1], angle);
+    }
+    else {
+        return points.map(point => {
+            return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle);
+        });
+    }
+};
+const getSelectionAngle = (elements) => {
+    let angle = elements[0]?.angle || 0;
+    elements.forEach(item => {
+        if (item.angle !== angle && !approximately((item.angle % (Math.PI / 2)) - (angle % (Math.PI / 2)), 0)) {
+            angle = 0;
+        }
+    });
+    return angle;
+};
+const hasSameAngle = (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 = [];
+    for (let i = 0; i < rectanglesCornerPoints.length; i++) {
+        const cornerPoints = rectanglesCornerPoints[i];
+        const invertCornerPointsFromOrigin = rotatePoints(cornerPoints, [0, 0], -angle);
+        rectanglesFromOrigin.push(RectangleClient.getRectangleByPoints(invertCornerPointsFromOrigin));
+    }
+    const selectionRectangleFromOrigin = RectangleClient.getBoundingRectangle(rectanglesFromOrigin);
+    const selectionCornerPoints = RectangleClient.getCornerPoints(selectionRectangleFromOrigin);
+    const cornerPointsFromOrigin = rotatePoints(selectionCornerPoints, [0, 0], angle);
+    const centerPoint = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(cornerPointsFromOrigin));
+    return RectangleClient.getRectangleByPoints(rotatePoints(cornerPointsFromOrigin, centerPoint, -angle));
+};
+const getOffsetAfterRotate = (rectangle, rotateCenterPoint, angle) => {
+    const targetCenterPoint = RectangleClient.getCenterPoint(rectangle);
+    const [rotatedCenterPoint] = rotatePoints([targetCenterPoint], rotateCenterPoint, angle);
+    const offsetX = rotatedCenterPoint[0] - targetCenterPoint[0];
+    const offsetY = rotatedCenterPoint[1] - targetCenterPoint[1];
+    return { offsetX, offsetY };
+};
+const rotatedDataPoints = (points, rotateCenterPoint, angle) => {
+    const { offsetX, offsetY } = getOffsetAfterRotate(RectangleClient.getRectangleByPoints(points), rotateCenterPoint, angle);
+    return points.map(p => [p[0] + offsetX, p[1] + offsetY]);
+};
+const hasValidAngle = (node) => {
+    return node.angle && node.angle !== 0;
+};
+const rotatePointsByElement = (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 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 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, angle);
+        const path = PlaitBoard.findPath(board, item);
+        Transforms.setNode(board, { points, angle: originAngle + angle }, path);
+    });
+}
 
-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);
+function isSelectionMoving(board) {
+    return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
+}
+function setSelectionMoving(board) {
+    PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
+    BOARD_TO_IS_SELECTION_MOVING.set(board, true);
+    setDragging(board, true);
+}
+function clearSelectionMoving(board) {
+    PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
+    BOARD_TO_IS_SELECTION_MOVING.delete(board);
+    setDragging(board, false);
+}
+function isHandleSelection(board) {
+    const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+    return board.pointer !== PlaitPointerType.hand && !options.isDisabledSelect && !PlaitBoard.isReadonly(board);
+}
+function isSetSelectionOperation(board) {
+    return !!board.operations.find(value => value.type === 'set_selection');
+}
+function getTemporaryElements(board) {
+    const ref = BOARD_TO_TEMPORARY_ELEMENTS.get(board);
+    if (ref) {
+        return ref.elements;
+    }
+    else {
+        return undefined;
+    }
+}
+function getTemporaryRef(board) {
+    return BOARD_TO_TEMPORARY_ELEMENTS.get(board);
+}
+function deleteTemporaryElements(board) {
+    BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
+}
+function drawEntireActiveRectangleG(board) {
+    const elements = getSelectedElements(board);
+    const rectangle = getRectangleByElements(board, elements, false);
+    if (rectangle.width > 0 && rectangle.height > 0 && elements.length > 1) {
+        const selectionRectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: ACTIVE_STROKE_WIDTH,
+            fillStyle: 'solid'
+        });
+        selectionRectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
+        const angle = getSelectionAngle(elements);
+        if (angle) {
+            setAngleForG(selectionRectangleG, RectangleClient.getCenterPoint(rectangle), angle);
+        }
+        return selectionRectangleG;
+    }
+    return null;
+}
+function setSelectedElementsWithGroup(board, elements, isShift) {
+    if (!board.selection) {
+        return;
+    }
+    const selectedElements = getSelectedElements(board);
+    if (!Selection.isCollapsed(board.selection)) {
+        let newElements = [...selectedElements];
+        elements.forEach(item => {
+            if (!item.groupId) {
+                newElements.push(item);
+            }
+            else {
+                newElements.push(...getElementsInGroupByElement(board, item));
+            }
+        });
+        cacheSelectedElements(board, uniqueById(newElements));
+        return;
+    }
+    if (Selection.isCollapsed(board.selection)) {
+        const hitElement = elements[0];
+        const hitElementGroups = getGroupByElement(board, hitElement, true);
+        if (hitElementGroups.length) {
+            const elementsInHighestGroup = getElementsInGroup(board, hitElementGroups[hitElementGroups.length - 1], true) || [];
+            const isSelectGroupElement = selectedElements.some(element => elementsInHighestGroup.map(item => item.id).includes(element.id));
+            if (isShift) {
+                cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup);
+            }
+            else {
+                cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups);
+            }
+        }
+    }
+}
+function cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup) {
+    const selectedElements = getSelectedElements(board);
+    let newElements = [...selectedElements];
+    const hitElement = elements[0];
+    let pendingElements = [];
+    if (!isSelectGroupElement) {
+        pendingElements = elementsInHighestGroup;
+    }
+    else {
+        const isHitSelectedElement = selectedElements.some(item => item.id === hitElement.id);
+        const selectedElementsInGroup = elementsInHighestGroup.filter(item => selectedElements.includes(item));
+        if (isHitSelectedElement) {
+            pendingElements = selectedElementsInGroup.filter(item => item.id !== hitElement.id);
         }
         else {
-            console.error(`can not get rectangle of element:`, node);
+            pendingElements.push(...selectedElementsInGroup, ...elements);
         }
-    };
-    elements.forEach(element => {
-        if (recursion) {
-            depthFirstRecursion(element, node => callback(node), node => board.isRecursion(node));
+    }
+    elementsInHighestGroup.forEach(element => {
+        if (newElements.includes(element)) {
+            newElements.splice(newElements.indexOf(element), 1);
+        }
+    });
+    if (pendingElements.length) {
+        newElements.push(...pendingElements);
+    }
+    cacheSelectedElements(board, uniqueById(newElements));
+}
+function cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups) {
+    let newElements = [...elements];
+    const selectedGroups = filterSelectedGroups(board, hitElementGroups);
+    if (selectedGroups.length > 0) {
+        if (selectedGroups.length > 1) {
+            newElements = getAllElementsInGroup(board, selectedGroups[selectedGroups.length - 2], true);
+        }
+    }
+    else {
+        const elementsInGroup = getAllElementsInGroup(board, hitElementGroups[hitElementGroups.length - 1], true);
+        if (!isSelectGroupElement) {
+            newElements = elementsInGroup;
+        }
+    }
+    cacheSelectedElements(board, uniqueById(newElements));
+}
+
+const getElementsInGroup = (board, group, recursion, includeGroup) => {
+    let result = [];
+    const elements = board.children.filter(value => value.groupId === group.id);
+    if (recursion) {
+        elements.forEach(item => {
+            if (PlaitGroupElement.isGroup(item)) {
+                if (includeGroup) {
+                    result.push(item);
+                }
+                result.push(...getElementsInGroup(board, item, recursion, includeGroup));
+            }
+            else {
+                result.push(item);
+            }
+        });
+    }
+    else {
+        result = includeGroup ? elements : elements.filter(item => !PlaitGroupElement.isGroup(item));
+    }
+    return result;
+};
+const getAllElementsInGroup = (board, group, recursion, includeGroup) => {
+    const elementsInGroup = getElementsInGroup(board, group, recursion, includeGroup);
+    const result = [];
+    elementsInGroup.forEach(element => {
+        depthFirstRecursion(element, node => {
+            result.push(node);
+        }, () => true);
+    });
+    return result;
+};
+const getRectangleByGroup = (board, group, recursion) => {
+    const elementsInGroup = getAllElementsInGroup(board, group, recursion);
+    return getRectangleByElements(board, elementsInGroup, false);
+};
+const getGroupByElement = (board, element, recursion, source) => {
+    const group = (source || board.children).find(item => item.id === element?.groupId);
+    if (!group) {
+        return recursion ? [] : null;
+    }
+    if (recursion) {
+        const groups = [group];
+        const grandGroups = getGroupByElement(board, group, recursion, source);
+        if (grandGroups.length) {
+            groups.push(...grandGroups);
+        }
+        return groups;
+    }
+    else {
+        return group;
+    }
+};
+const getHighestGroup = (board, element) => {
+    const hitElementGroups = getGroupByElement(board, element, true);
+    if (hitElementGroups.length) {
+        return hitElementGroups[hitElementGroups.length - 1];
+    }
+    return null;
+};
+const getElementsInGroupByElement = (board, element) => {
+    const highestGroup = getHighestGroup(board, element);
+    if (highestGroup) {
+        return getAllElementsInGroup(board, highestGroup, true);
+    }
+    else {
+        return [element];
+    }
+};
+const isSelectedElementOrGroup = (board, element, elements) => {
+    const selectedElements = elements || getSelectedElements(board);
+    if (PlaitGroupElement.isGroup(element)) {
+        return isSelectedAllElementsInGroup(board, element, elements);
+    }
+    return selectedElements.map(item => item.id).includes(element.id);
+};
+const isSelectedAllElementsInGroup = (board, group, elements) => {
+    const selectedElements = elements || getSelectedElements(board);
+    const elementsInGroup = getElementsInGroup(board, group, true);
+    return elementsInGroup.every(item => selectedElements.map(element => element.id).includes(item.id));
+};
+const filterSelectedGroups = (board, groups, elements) => {
+    const selectedGroups = [];
+    groups.forEach(item => {
+        if (isSelectedElementOrGroup(board, item, elements)) {
+            selectedGroups.push(item);
+        }
+    });
+    return selectedGroups;
+};
+const getSelectedGroups = (board, elements) => {
+    const highestSelectedGroups = getHighestSelectedGroups(board, elements);
+    const groups = [];
+    highestSelectedGroups.forEach(item => {
+        groups.push(item);
+        const elementsInGroup = getElementsInGroup(board, item, true, true);
+        groups.push(...elementsInGroup.filter(item => PlaitGroupElement.isGroup(item)));
+    });
+    return groups;
+};
+const getHighestSelectedGroup = (board, element, elements) => {
+    const hitElementGroups = getGroupByElement(board, element, true, elements);
+    const selectedGroups = filterSelectedGroups(board, hitElementGroups, elements);
+    if (selectedGroups.length) {
+        return selectedGroups[selectedGroups.length - 1];
+    }
+    return null;
+};
+const getHighestSelectedGroups = (board, elements) => {
+    let result = [];
+    const selectedElements = elements || getSelectedElements(board);
+    selectedElements.forEach(item => {
+        if (item.groupId) {
+            const group = getHighestSelectedGroup(board, item, elements);
+            if (group && !result.includes(group)) {
+                result.push(group);
+            }
+        }
+    });
+    return result;
+};
+const getSelectedIsolatedElements = (board, elements) => {
+    let result = [];
+    const selectedElements = elements || getSelectedElements(board);
+    selectedElements
+        .filter(item => !PlaitGroupElement.isGroup(item))
+        .forEach(item => {
+        if (!item.groupId) {
+            result.push(item);
         }
         else {
-            callback(element);
+            const group = getHighestSelectedGroup(board, item, elements);
+            if (!group) {
+                result.push(item);
+            }
         }
     });
-    if (rectanglesCornerPoints.length > 0) {
-        if (hasSameAngle(elements)) {
+    return result;
+};
+const getSelectedIsolatedElementsCanAddToGroup = (board, elements) => {
+    const selectedIsolatedElements = getSelectedIsolatedElements(board, elements);
+    return selectedIsolatedElements.filter(item => board.canAddToGroup(item));
+};
+const getHighestSelectedElements = (board, elements) => {
+    return [...getHighestSelectedGroups(board, elements), ...getSelectedIsolatedElements(board, elements)];
+};
+const createGroupRectangleG = (board, elements) => {
+    const selectedElements = getSelectedElements(board);
+    const groupRectangleG = createG();
+    const isMoving = isSelectionMoving(board);
+    elements.forEach(item => {
+        const isRender = (!selectedElements.includes(item) && !isMoving) || isMoving;
+        if (item.groupId && isRender) {
+            const elements = getElementsInGroupByElement(board, item);
+            const rectangle = getRectangleByElements(board, elements, false);
+            const rectangleG = drawRectangle(board, rectangle, {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: ACTIVE_STROKE_WIDTH,
+                strokeLineDash: [5]
+            });
             const angle = getSelectionAngle(elements);
-            return getRotatedBoundingRectangle(rectanglesCornerPoints, angle);
+            if (angle) {
+                setAngleForG(rectangleG, RectangleClient.getCenterPoint(rectangle), angle);
+            }
+            groupRectangleG.append(rectangleG);
         }
-        else {
-            const flatCornerPoints = rectanglesCornerPoints.reduce((acc, val) => {
-                return acc.concat(val);
-            }, []);
-            return RectangleClient.getRectangleByPoints(flatCornerPoints);
+    });
+    return groupRectangleG;
+};
+const createGroup = (groupId) => {
+    return groupId
+        ? {
+            id: idCreator(),
+            type: 'group',
+            groupId
         }
-    }
-    else {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
+        : {
+            id: idCreator(),
+            type: 'group'
         };
+};
+const nonGroupInHighestSelectedElements = (elements) => {
+    return elements.every(item => !item.groupId);
+};
+const hasSelectedElementsInSameGroup = (elements) => {
+    return elements.every(item => item.groupId && item.groupId === elements[0].groupId);
+};
+const canAddGroup = (board, elements) => {
+    const highestSelectedElements = getHighestSelectedElements(board, elements);
+    const rootElements = highestSelectedElements.filter(item => board.canAddToGroup(item));
+    if (rootElements.length > 1) {
+        return nonGroupInHighestSelectedElements(rootElements) || hasSelectedElementsInSameGroup(rootElements);
     }
-}
-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 false;
+};
+const canRemoveGroup = (board, elements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    const selectedElements = elements || getSelectedElements(board);
+    return selectedElements.length > 0 && selectedGroups.length > 0;
+};
+
+const deleteFragment = (board) => {
+    const elements = board.getDeletedFragment([]);
+    board.deleteFragment(elements);
+};
+
+const PlaitElement = {
+    isRootElement(value) {
+        const parent = NODE_TO_PARENT.get(value);
+        if (parent && PlaitBoard.isBoard(parent)) {
             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;
         }
-        return false;
     },
-    getThemeColors(board) {
-        return (board.options.themeColors || ThemeColors);
+    getComponent(value) {
+        return ELEMENT_TO_COMPONENT.get(value);
     }
 };
 
-const applyToDraft = (board, selection, viewport, theme, op) => {
+const isSetViewportOperation = (value) => {
+    return value.type === 'set_viewport';
+};
+const inverse = (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;
+            return { ...op, type: 'remove_node' };
+        }
+        case 'remove_node': {
+            return { ...op, type: 'insert_node' };
+        }
+        case 'move_node': {
+            const { newPath, path } = op;
+            // PERF: in this case the move operation is a no-op anyways.
+            if (Path.equals(newPath, path)) {
+                return op;
+            }
+            // when operation path is [0,0] -> [0,2], should exec Path.transform to get [0,1] -> [0,0]
+            // shoud not return [0,2] -> [0,0] #WIK-8981
+            // if (Path.isSibling(path, newPath)) {
+            //     return { ...op, path: newPath, newPath: path };
+            // }
+            // If the move does not happen within a single parent it is possible
+            // for the move to impact the true path to the location where the node
+            // was removed from and where it was inserted. We have to adjust for this
+            // and find the original path. We can accomplish this (only in non-sibling)
+            // moves by looking at the impact of the move operation on the node
+            // after the original move path.
+            const inversePath = Path.transform(path, op);
+            const inverseNewPath = Path.transform(Path.next(path), op);
+            return { ...op, path: inversePath, newPath: inverseNewPath };
         }
         case 'set_node': {
-            const { path, properties, newProperties } = op;
-            if (path.length === 0) {
-                throw new Error(`Cannot set properties on the root node!`);
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
+        }
+        case 'set_selection': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: null
+                };
             }
-            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;
-                }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: null,
+                    newProperties: properties
+                };
             }
-            // properties that were previously defined, but are now missing, must be deleted
-            for (const key in properties) {
-                if (!newProperties.hasOwnProperty(key)) {
-                    delete node[key];
-                }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
             }
-            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;
-                    }
-                }
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: newProperties
+                };
             }
-            break;
-        }
-        case 'set_selection': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                selection = newProperties;
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: properties,
+                    newProperties: properties
+                };
             }
             else {
-                if (selection === null) {
-                    selection = op.newProperties;
-                }
-                else {
-                    selection = newProperties;
-                }
+                return { ...op, properties: newProperties, newProperties: properties };
             }
-            break;
         }
         case 'set_theme': {
-            const { newProperties } = op;
-            theme = newProperties;
-            break;
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
         }
     }
-    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;
+const PlaitOperation = {
+    isSetViewportOperation,
+    inverse
+};
+
+const Point = {
+    isEquals(point, otherPoint) {
+        return point && otherPoint && point[0] === otherPoint[0] && point[1] === otherPoint[1];
+    },
+    isHorizontal(point, otherPoint, tolerance = 0) {
+        return point && otherPoint && Point.isOverHorizontal([point, otherPoint], tolerance);
+    },
+    isOverHorizontal(points, tolerance = 0) {
+        return points.every(point => Math.abs(point[1] - points[0][1]) <= tolerance);
+    },
+    isVertical(point, otherPoint, tolerance = 0) {
+        return point && otherPoint && Point.isOverVertical([point, otherPoint], tolerance);
+    },
+    isOverVertical(points, tolerance = 0) {
+        return points.every(point => Math.abs(point[0] - points[0][0]) <= tolerance);
+    },
+    isAlign(points, tolerance = 0) {
+        return Point.isOverHorizontal(points, tolerance) || Point.isOverVertical(points, tolerance);
+    },
+    getOffsetX(point1, point2) {
+        return point2[0] - point1[0];
+    },
+    getOffsetY(point1, point2) {
+        return point2[1] - point1[1];
+    }
+};
+
+const SAVING = new WeakMap();
+const MERGING = new WeakMap();
+
+var ThemeColorMode;
+(function (ThemeColorMode) {
+    ThemeColorMode["default"] = "default";
+    ThemeColorMode["colorful"] = "colorful";
+    ThemeColorMode["soft"] = "soft";
+    ThemeColorMode["retro"] = "retro";
+    ThemeColorMode["dark"] = "dark";
+    ThemeColorMode["starry"] = "starry";
+})(ThemeColorMode || (ThemeColorMode = {}));
+const DefaultThemeColor = {
+    mode: ThemeColorMode.default,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
+};
+const ColorfulThemeColor = {
+    mode: ThemeColorMode.colorful,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
+};
+const SoftThemeColor = {
+    mode: ThemeColorMode.soft,
+    boardBackground: '#f5f5f5',
+    textColor: '#333333'
+};
+const RetroThemeColor = {
+    mode: ThemeColorMode.retro,
+    boardBackground: '#f9f8ed',
+    textColor: '#333333'
+};
+const DarkThemeColor = {
+    mode: ThemeColorMode.dark,
+    boardBackground: '#141414',
+    textColor: '#FFFFFF'
+};
+const StarryThemeColor = {
+    mode: ThemeColorMode.starry,
+    boardBackground: '#0d2537',
+    textColor: '#FFFFFF'
+};
+const ThemeColors = [
+    DefaultThemeColor,
+    ColorfulThemeColor,
+    SoftThemeColor,
+    RetroThemeColor,
+    DarkThemeColor,
+    StarryThemeColor
+];
+
+var Direction;
+(function (Direction) {
+    Direction["left"] = "left";
+    Direction["top"] = "top";
+    Direction["right"] = "right";
+    Direction["bottom"] = "bottom";
+})(Direction || (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 = rotatePointsByElement(cornerPoints, node) || cornerPoints;
+            rectanglesCornerPoints.push(rotatedCornerPoints);
         }
-        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 {
+            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);
         }
-    }
-};
-
-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 {
+            const flatCornerPoints = rectanglesCornerPoints.reduce((acc, val) => {
+                return acc.concat(val);
+            }, []);
+            return RectangleClient.getRectangleByPoints(flatCornerPoints);
         }
     }
-    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);
+    else {
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
+    }
 }
-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);
         }
-    }
-};
-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
-};
+    }, isReverse);
+    return elements;
+}
 
-const Transforms = {
-    ...GeneralTransforms,
-    ...ViewportTransforms$1,
-    ...SelectionTransforms,
-    ...NodeTransforms
+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_CACHE.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 PathRef = {
@@ -3547,6 +3602,9 @@ function createBoard(children, options) {
         },
         onChange: () => { },
         afterChange: () => { },
+        drawActiveRectangle: () => {
+            return drawEntireActiveRectangleG(board);
+        },
         mousedown: (event) => { },
         mousemove: (event) => { },
         mouseleave: (event) => { },
@@ -3561,12 +3619,11 @@ function createBoard(children, options) {
             setClipboardData(data, clipboardContext);
         },
         insertFragment: (data) => { },
-        deleteFragment: (data) => {
-            const elements = board.getDeletedFragment([]);
+        deleteFragment: (elements) => {
             CoreTransforms.removeElements(board, elements);
         },
         getDeletedFragment: (data) => data,
-        getRelatedFragment: (data) => data,
+        getRelatedFragment: (data, originData) => data,
         drawElement: (context) => [],
         redrawElement: (context, previousContext) => { },
         destroyElement: (context) => { },
@@ -3751,7 +3808,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 +3969,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 +3989,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,8 +4039,8 @@ function withViewport(board) {
     return board;
 }
 
-const ALIGN_TOLERANCE = 2;
-class AlignReaction {
+const SNAP_TOLERANCE = 2;
+class MovingSnapReaction {
     constructor(board, activeElements, activeRectangle) {
         this.board = board;
         this.activeElements = activeElements;
@@ -3995,7 +4054,7 @@ class AlignReaction {
                 return;
             }
             const rectangle = this.board.getRectangle(node);
-            rectangle && result.push(rectangle);
+            rectangle && result.push(getRectangleByAngle(rectangle, node.angle) || rectangle);
         }, node => {
             if (node && (PlaitBoard.isBoard(node) || this.board.isRecursion(node))) {
                 return true;
@@ -4006,7 +4065,7 @@ class AlignReaction {
         }, true);
         return result;
     }
-    handleAlign() {
+    handleSnapping() {
         const alignRectangles = this.getAlignRectangle();
         const g = createG();
         let alignLines = [];
@@ -4018,7 +4077,7 @@ class AlignReaction {
         for (let alignRectangle of alignRectangles) {
             const closestDistances = this.calculateClosestDistances(this.activeRectangle, alignRectangle);
             let canDrawHorizontal = false;
-            if (!isCorrectX && closestDistances.absXDistance < ALIGN_TOLERANCE) {
+            if (!isCorrectX && closestDistances.absXDistance < SNAP_TOLERANCE) {
                 deltaX = closestDistances.xDistance;
                 this.activeRectangle.x -= deltaX;
                 isCorrectX = true;
@@ -4068,7 +4127,7 @@ class AlignReaction {
                 isCorrectX = true;
             }
             let canDrawVertical = false;
-            if (!isCorrectY && closestDistances.absYDistance < ALIGN_TOLERANCE) {
+            if (!isCorrectY && closestDistances.absYDistance < SNAP_TOLERANCE) {
                 deltaY = closestDistances.yDistance;
                 this.activeRectangle.y -= deltaY;
                 isCorrectY = true;
@@ -4215,7 +4274,7 @@ class AlignReaction {
                 //middle
                 let _center = (before[axis] + before[side] + after[axis]) / 2;
                 dif = Math.abs(activeRectangleCenter - _center);
-                if (dif < ALIGN_TOLERANCE) {
+                if (dif < SNAP_TOLERANCE) {
                     distributeDistance = (after[axis] - (before[axis] + before[side]) - this.activeRectangle[side]) / 2;
                     delta = activeRectangleCenter - _center;
                     beforeIndex = i;
@@ -4225,7 +4284,7 @@ class AlignReaction {
                 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) {
+                if (!distributeDistance && dif < SNAP_TOLERANCE) {
                     distributeDistance = distanceRight;
                     beforeIndex = j;
                     delta = activeRectangleCenter - _center;
@@ -4234,7 +4293,7 @@ class AlignReaction {
                 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) {
+                if (!distributeDistance && dif < SNAP_TOLERANCE) {
                     distributeDistance = distanceBefore;
                     afterIndex = i;
                     delta = activeRectangleCenter - _center;
@@ -4379,7 +4438,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);
         }
@@ -4423,8 +4483,8 @@ function withMoving(board) {
                         x: activeElementsRectangle.x + offsetX,
                         y: activeElementsRectangle.y + offsetY
                     };
-                    const reactionManager = new AlignReaction(board, activeElements, newRectangle);
-                    const ref = reactionManager.handleAlign();
+                    const movingSnapReaction = new MovingSnapReaction(board, activeElements, getRectangleByAngle(newRectangle, getSelectionAngle(activeElements)) || newRectangle);
+                    const ref = movingSnapReaction.handleSnapping();
                     offsetX -= ref.deltaX;
                     offsetY -= ref.deltaY;
                     alignG = ref.g;
@@ -4653,7 +4713,7 @@ const withHotkey = (board) => {
             selectedElements.length > 0 &&
             (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
             event.preventDefault();
-            board.deleteFragment(null);
+            deleteFragment(board);
         }
         keyDown(event);
     };
@@ -4953,6 +5013,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,
@@ -5126,7 +5187,7 @@ class PlaitBoardComponent {
             event.preventDefault();
             const rectangle = getRectangleByElements(this.board, selectedElements, false);
             this.board.setFragment(event.clipboardData, null, rectangle, 'cut');
-            this.board.deleteFragment(event.clipboardData);
+            deleteFragment(this.board);
         });
     }
     viewportScrollListener() {
@@ -5208,6 +5269,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, () => { });
     }
@@ -5474,12 +5536,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 +5567,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 +5581,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 +5607,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, GroupTransforms, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElementComponent, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, filterSelectedGroups, findElements, getAllElementsInGroup, getBoardRectangle, getClipboardData, getClipboardFromHtml, getDataTransferClipboard, getDataTransferClipboardText, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getOffsetAfterRotate, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getTemporaryElements, getTemporaryRef, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, nonGroupInHighestSelectedElements, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map