@plait/core 0.52.0-next.0 → 0.53.0

package/fesm2022/plait-core.mjs

@@ -493,6 +493,7 @@ var CursorClass;
 (function (CursorClass) {
     CursorClass["crosshair"] = "crosshair";
 })(CursorClass || (CursorClass = {}));
+const RESIZE_CURSORS = [ResizeCursorClass.ns, ResizeCursorClass.nesw, ResizeCursorClass.ew, ResizeCursorClass.nwse];
 
 const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
 const ACTIVE_STROKE_WIDTH = 1;
@@ -952,6 +953,16 @@ function toDomPrecision(v) {
 function toFixed(v) {
     return +v.toFixed(2);
 }
+/**
+ * Whether two numbers numbers a and b are approximately equal.
+ *
+ * @param a - The first point.
+ * @param b - The second point.
+ * @public
+ */
+function approximately(a, b, precision = 0.000001) {
+    return Math.abs(a - b) <= precision;
+}
 
 function isInPlaitBoard(board, x, y) {
     const plaitBoardElement = PlaitBoard.getBoardContainer(board);
@@ -1030,6 +1041,15 @@ const RgbaToHEX = (Rgb, opacity) => {
 function isContextmenu(event) {
     return event.button === 2;
 }
+function uniqueById(elements) {
+    const uniqueMap = new Map();
+    elements.forEach(item => {
+        if (!uniqueMap.has(item.id)) {
+            uniqueMap.set(item.id, item);
+        }
+    });
+    return Array.from(uniqueMap.values());
+}
 
 /**
  * Check whether to merge an operation into the previous operation.
@@ -2151,8 +2171,16 @@ const isPreventTouchMove = (board) => {
     return !!BOARD_TO_TOUCH_REF.get(board);
 };
 const preventTouchMove = (board, event, state) => {
-    if (state && (event.target instanceof HTMLElement || event.target instanceof SVGElement)) {
-        BOARD_TO_TOUCH_REF.set(board, { state, target: event.target instanceof SVGElement ? event.target : undefined });
+    const hostElement = PlaitBoard.getElementHost(board);
+    const activeHostElement = PlaitBoard.getElementActiveHost(board);
+    if (state) {
+        if ((event.target instanceof HTMLElement || event.target instanceof SVGElement) &&
+            (hostElement.contains(event.target) || activeHostElement.contains(event.target))) {
+            BOARD_TO_TOUCH_REF.set(board, { state, target: event.target instanceof SVGElement ? event.target : undefined });
+        }
+        else {
+            BOARD_TO_TOUCH_REF.set(board, { state, target: undefined });
+        }
     }
     else {
         const ref = BOARD_TO_TOUCH_REF.get(board);
@@ -2170,7 +2198,10 @@ const preventTouchMove = (board, event, state) => {
  */
 const handleTouchTarget = (board) => {
     const touchRef = BOARD_TO_TOUCH_REF.get(board);
-    if (touchRef && touchRef.target && !touchRef.target.contains(PlaitBoard.getElementActiveHost(board))) {
+    if (touchRef &&
+        touchRef.target &&
+        !PlaitBoard.getElementHost(board).contains(touchRef.target) &&
+        !PlaitBoard.getElementActiveHost(board).contains(touchRef.target)) {
         touchRef.target.style.opacity = '0';
         const host = createG();
         host.appendChild(touchRef.target);
@@ -2180,1057 +2211,1262 @@ const handleTouchTarget = (board) => {
     }
 };
 
-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 Viewport = {
-    isViewport: (value) => {
-        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
+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 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));
+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);
         }
-        if (reverse) {
-            list.reverse();
+        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);
+            }
         }
-        return list;
-    },
-    parent(path) {
-        if (path.length === 0) {
-            throw new Error(`Cannot get the parent path of the root path [${path}].`);
+    }
+}
+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 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 {
+            pendingElements.push(...selectedElementsInGroup, ...elements);
         }
-        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.`);
+    }
+    elementsInHighestGroup.forEach(element => {
+        if (newElements.includes(element)) {
+            newElements.splice(newElements.indexOf(element), 1);
         }
-        const last = path[path.length - 1];
-        return path.slice(0, -1).concat(last - 1);
-    },
-    /**
-     * Check if a path is an ancestor of another.
-     */
-    isAncestor(path, another) {
-        return path.length < another.length && Path.compare(path, another) === 0;
-    },
-    /**
-     * Compare a path to another, returning an integer indicating whether the path
-     * was before, at, or after the other.
-     *
-     * Note: Two paths of unequal length can still receive a `0` result if one is
-     * directly above or below the other. If you want exact matching, use
-     * [[Path.equals]] instead.
-     */
-    compare(path, another) {
-        const min = Math.min(path.length, another.length);
-        for (let i = 0; i < min; i++) {
-            if (path[i] < another[i])
-                return -1;
-            if (path[i] > another[i])
-                return 1;
+    });
+    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 0;
-    },
-    /**
-     * Check if a path is exactly equal to another.
-     */
-    equals(path, another) {
-        return path.length === another.length && path.every((n, i) => n === another[i]);
-    },
-    /**
-     * Check if a path ends before one of the indexes in another.
-     */
-    endsBefore(path, another) {
-        const i = path.length - 1;
-        const as = path.slice(0, i);
-        const bs = another.slice(0, i);
-        const av = path[i];
-        const bv = another[i];
-        return Path.equals(as, bs) && av < bv;
-    },
-    /**
-     * Check if a path is a sibling of another.
-     */
-    isSibling(path, another) {
-        if (path.length !== another.length) {
-            return false;
+    }
+    else {
+        const elementsInGroup = getAllElementsInGroup(board, hitElementGroups[hitElementGroups.length - 1], true);
+        if (!isSelectGroupElement) {
+            newElements = elementsInGroup;
         }
-        const as = path.slice(0, -1);
-        const bs = another.slice(0, -1);
-        const al = path[path.length - 1];
-        const bl = another[another.length - 1];
-        return al !== bl && Path.equals(as, bs);
-    },
-    transform(path, operation) {
-        return produce(path, p => {
-            // PERF: Exit early if the operation is guaranteed not to have an effect.
-            if (!path || path?.length === 0) {
-                return;
+    }
+    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));
             }
-            if (p === null) {
-                return null;
+            else {
+                result.push(item);
             }
-            switch (operation.type) {
-                case 'insert_node': {
-                    const { path: op } = operation;
-                    if (Path.equals(op, p) || Path.endsBefore(op, p) || Path.isAncestor(op, p)) {
-                        p[op.length - 1] += 1;
-                    }
-                    break;
-                }
-                case 'remove_node': {
-                    const { path: op } = operation;
-                    if (Path.equals(op, p) || Path.isAncestor(op, p)) {
-                        return null;
-                    }
-                    else if (Path.endsBefore(op, p)) {
-                        p[op.length - 1] -= 1;
-                    }
-                    break;
-                }
-                case 'move_node': {
-                    const { path: op, newPath: onp } = operation;
-                    // If the old and new path are the same, it's a no-op.
-                    if (Path.equals(op, onp)) {
-                        return;
-                    }
-                    if (Path.isAncestor(op, p) || Path.equals(op, p)) {
-                        const copy = onp.slice();
-                        // op.length <= onp.length is different for slate
-                        // resolve drag from [0, 0] to [0, 3] issue
-                        if (Path.endsBefore(op, onp) && op.length <= onp.length) {
-                            copy[op.length - 1] -= 1;
-                        }
-                        return copy.concat(p.slice(op.length));
-                    }
-                    else if (Path.isSibling(op, onp) && (Path.isAncestor(onp, p) || Path.equals(onp, p))) {
-                        if (Path.endsBefore(op, p)) {
-                            p[op.length - 1] -= 1;
-                        }
-                        else {
-                            p[op.length - 1] += 1;
-                        }
-                    }
-                    else if (Path.endsBefore(onp, p) || Path.equals(onp, p) || Path.isAncestor(onp, p)) {
-                        if (Path.endsBefore(op, p)) {
-                            p[op.length - 1] -= 1;
-                        }
-                        p[onp.length - 1] += 1;
-                    }
-                    else if (Path.endsBefore(op, p)) {
-                        if (Path.equals(onp, p)) {
-                            p[onp.length - 1] += 1;
-                        }
-                        p[op.length - 1] -= 1;
-                    }
-                    break;
-                }
-            }
-            return p;
         });
     }
+    else {
+        result = includeGroup ? elements : elements.filter(item => !PlaitGroupElement.isGroup(item));
+    }
+    return result;
 };
-
-const PlaitNode = {
-    parent: (board, path) => {
-        const parentPath = Path.parent(path);
-        const p = PlaitNode.get(board, parentPath);
-        return p;
-    },
-    /**
-     * Return a generator of all the ancestor nodes above a specific path.
-     *
-     * By default the order is top-down, from highest to lowest ancestor in
-     * the tree, but you can pass the `reverse: true` option to go bottom-up.
-     */
-    *parents(root, path, options = {}) {
-        for (const p of Path.ancestors(path, options)) {
-            const n = PlaitNode.get(root, p);
-            yield n;
-        }
-    },
-    get(root, path) {
-        let node = root;
-        for (let i = 0; i < path.length; i++) {
-            const p = path[i];
-            if (!node || !node.children || !node.children[p]) {
-                throw new Error(`Cannot find a descendant at path [${path}]`);
-            }
-            node = node.children[p];
+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 node;
-    },
-    last(board, path) {
-        let n = PlaitNode.get(board, path);
-        while (n && n.children && n.children.length > 0) {
-            const i = n.children.length - 1;
-            n = n.children[i];
+        return 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 n;
+    });
+    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 applyToDraft = (board, selection, viewport, theme, op) => {
-    switch (op.type) {
-        case 'insert_node': {
-            const { path, node } = op;
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            if (!parent.children || index > parent.children.length) {
-                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+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);
             }
-            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;
+    });
+    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);
         }
-        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.`);
+        else {
+            const group = getHighestSelectedGroup(board, item, elements);
+            if (!group) {
+                result.push(item);
             }
-            const node = PlaitNode.get(board, path);
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            // This is tricky, but since the `path` and `newPath` both refer to
-            // the same snapshot in time, there's a mismatch. After either
-            // removing the original position, the second step's path can be out
-            // of date. So instead of using the `op.newPath` directly, we
-            // transform `op.path` to ascertain what the `newPath` would be after
-            // the operation was applied.
-            parent.children?.splice(index, 1);
-            const truePath = Path.transform(path, op);
-            const newParent = PlaitNode.get(board, Path.parent(truePath));
-            const newIndex = truePath[truePath.length - 1];
-            newParent.children?.splice(newIndex, 0, node);
-            break;
         }
-        case 'set_node': {
-            const { path, properties, newProperties } = op;
-            if (path.length === 0) {
-                throw new Error(`Cannot set properties on the root node!`);
-            }
-            const node = PlaitNode.get(board, path);
-            for (const key in newProperties) {
-                const value = newProperties[key];
-                if (value == null) {
-                    delete node[key];
-                }
-                else {
-                    node[key] = value;
-                }
-            }
-            // properties that were previously defined, but are now missing, must be deleted
-            for (const key in properties) {
-                if (!newProperties.hasOwnProperty(key)) {
-                    delete node[key];
-                }
-            }
-            break;
+    });
+    return 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]
+            }));
         }
-        case 'set_viewport': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                viewport = newProperties;
-            }
-            else {
-                if (viewport == null) {
-                    if (!Viewport.isViewport(newProperties)) {
-                        throw new Error(`Cannot apply an incomplete "set_viewport" operation properties ${JSON.stringify(newProperties)} when there is no current viewport.`);
-                    }
-                    viewport = { ...newProperties };
-                }
-                for (const key in newProperties) {
-                    const value = newProperties[key];
-                    if (value == null) {
-                        delete viewport[key];
-                    }
-                    else {
-                        viewport[key] = value;
-                    }
-                }
-            }
-            break;
+    });
+    return groupRectangleG;
+};
+const createGroup = (groupId) => {
+    return groupId
+        ? {
+            id: idCreator(),
+            type: 'group',
+            groupId
         }
-        case 'set_selection': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                selection = newProperties;
-            }
-            else {
-                if (selection === null) {
-                    selection = op.newProperties;
-                }
-                else {
-                    selection = newProperties;
-                }
-            }
-            break;
+        : {
+            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;
         }
-        case 'set_theme': {
-            const { newProperties } = op;
-            theme = newProperties;
-            break;
+        else {
+            return false;
         }
+    },
+    getComponent(value) {
+        return ELEMENT_TO_COMPONENT.get(value);
     }
-    return { selection, viewport, theme };
 };
-const GeneralTransforms = {
+
+const Path = {
     /**
-     * Transform the board by an operation.
+     * 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.
      */
-    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;
+    ancestors(path, options = {}) {
+        const { reverse = false } = options;
+        let paths = Path.levels(path, options);
+        if (reverse) {
+            paths = paths.slice(1);
         }
-        finally {
-            board.children = finishDraft(board.children);
-            if (selection) {
-                board.selection = isDraft(selection) ? finishDraft(selection) : selection;
+        else {
+            paths = paths.slice(0, -1);
+        }
+        return paths;
+    },
+    /**
+     * Get a list of paths at every level down to a path. Note: this is the same
+     * as `Path.ancestors`, but including the path itself.
+     *
+     * The paths are sorted from shallowest to deepest. However, if the `reverse:
+     * true` option is passed, they are reversed.
+     */
+    levels(path, options = {}) {
+        const { reverse = false } = options;
+        const list = [];
+        for (let i = 0; i <= path.length; i++) {
+            list.push(path.slice(0, i));
+        }
+        if (reverse) {
+            list.reverse();
+        }
+        return list;
+    },
+    parent(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the parent path of the root path [${path}].`);
+        }
+        return path.slice(0, -1);
+    },
+    next(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the next path of a root path [${path}], because it has no next index.`);
+        }
+        const last = path[path.length - 1];
+        return path.slice(0, -1).concat(last + 1);
+    },
+    hasPrevious(path) {
+        return path[path.length - 1] > 0;
+    },
+    previous(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the next path of a root path [${path}], because it has no previous index.`);
+        }
+        const last = path[path.length - 1];
+        return path.slice(0, -1).concat(last - 1);
+    },
+    /**
+     * Check if a path is an ancestor of another.
+     */
+    isAncestor(path, another) {
+        return path.length < another.length && Path.compare(path, another) === 0;
+    },
+    /**
+     * Compare a path to another, returning an integer indicating whether the path
+     * was before, at, or after the other.
+     *
+     * Note: Two paths of unequal length can still receive a `0` result if one is
+     * directly above or below the other. If you want exact matching, use
+     * [[Path.equals]] instead.
+     */
+    compare(path, another) {
+        const min = Math.min(path.length, another.length);
+        for (let i = 0; i < min; i++) {
+            if (path[i] < another[i])
+                return -1;
+            if (path[i] > another[i])
+                return 1;
+        }
+        return 0;
+    },
+    /**
+     * Check if a path is exactly equal to another.
+     */
+    equals(path, another) {
+        return path.length === another.length && path.every((n, i) => n === another[i]);
+    },
+    /**
+     * Check if a path ends before one of the indexes in another.
+     */
+    endsBefore(path, another) {
+        const i = path.length - 1;
+        const as = path.slice(0, i);
+        const bs = another.slice(0, i);
+        const av = path[i];
+        const bv = another[i];
+        return Path.equals(as, bs) && av < bv;
+    },
+    /**
+     * Check if a path is a sibling of another.
+     */
+    isSibling(path, another) {
+        if (path.length !== another.length) {
+            return false;
+        }
+        const as = path.slice(0, -1);
+        const bs = another.slice(0, -1);
+        const al = path[path.length - 1];
+        const bl = another[another.length - 1];
+        return al !== bl && Path.equals(as, bs);
+    },
+    transform(path, operation) {
+        return produce(path, p => {
+            // PERF: Exit early if the operation is guaranteed not to have an effect.
+            if (!path || path?.length === 0) {
+                return;
             }
-            else {
-                board.selection = null;
+            if (p === null) {
+                return null;
             }
-            board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
-            board.theme = isDraft(theme) ? finishDraft(theme) : theme;
-        }
-    }
-};
-
-function insertNode(board, node, path) {
-    const operation = { type: 'insert_node', node, path };
-    board.apply(operation);
-}
-function setNode(board, props, path) {
-    const properties = {};
-    const newProperties = {};
-    const node = PlaitNode.get(board, path);
-    for (const k in props) {
-        if (node[k] !== props[k]) {
-            if (node.hasOwnProperty(k)) {
-                properties[k] = node[k];
+            switch (operation.type) {
+                case 'insert_node': {
+                    const { path: op } = operation;
+                    if (Path.equals(op, p) || Path.endsBefore(op, p) || Path.isAncestor(op, p)) {
+                        p[op.length - 1] += 1;
+                    }
+                    break;
+                }
+                case 'remove_node': {
+                    const { path: op } = operation;
+                    if (Path.equals(op, p) || Path.isAncestor(op, p)) {
+                        return null;
+                    }
+                    else if (Path.endsBefore(op, p)) {
+                        p[op.length - 1] -= 1;
+                    }
+                    break;
+                }
+                case 'move_node': {
+                    const { path: op, newPath: onp } = operation;
+                    // If the old and new path are the same, it's a no-op.
+                    if (Path.equals(op, onp)) {
+                        return;
+                    }
+                    if (Path.isAncestor(op, p) || Path.equals(op, p)) {
+                        const copy = onp.slice();
+                        // op.length <= onp.length is different for slate
+                        // resolve drag from [0, 0] to [0, 3] issue
+                        if (Path.endsBefore(op, onp) && op.length <= onp.length) {
+                            copy[op.length - 1] -= 1;
+                        }
+                        return copy.concat(p.slice(op.length));
+                    }
+                    else if (Path.isSibling(op, onp) && (Path.isAncestor(onp, p) || Path.equals(onp, p))) {
+                        if (Path.endsBefore(op, p)) {
+                            p[op.length - 1] -= 1;
+                        }
+                        else {
+                            p[op.length - 1] += 1;
+                        }
+                    }
+                    else if (Path.endsBefore(onp, p) || Path.equals(onp, p) || Path.isAncestor(onp, p)) {
+                        if (Path.endsBefore(op, p)) {
+                            p[op.length - 1] -= 1;
+                        }
+                        p[onp.length - 1] += 1;
+                    }
+                    else if (Path.endsBefore(op, p)) {
+                        if (Path.equals(onp, p)) {
+                            p[onp.length - 1] += 1;
+                        }
+                        p[op.length - 1] -= 1;
+                    }
+                    break;
+                }
             }
-            if (props[k] != null)
-                newProperties[k] = props[k];
-        }
-    }
-    const operation = { type: 'set_node', properties, newProperties, path };
-    board.apply(operation);
-}
-function removeNode(board, path) {
-    const node = PlaitNode.get(board, path);
-    const operation = { type: 'remove_node', path, node };
-    board.apply(operation);
-}
-function moveNode(board, path, newPath) {
-    const operation = { type: 'move_node', path, newPath };
-    board.apply(operation);
-}
-const NodeTransforms = {
-    insertNode,
-    setNode,
-    removeNode,
-    moveNode
-};
-
-function setSelection(board, selection) {
-    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
-    board.apply(operation);
-}
-const SelectionTransforms = {
-    setSelection,
-    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 });
+            return p;
+        });
     }
-}
-
-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 Transforms = {
-    ...GeneralTransforms,
-    ...ViewportTransforms$1,
-    ...SelectionTransforms,
-    ...NodeTransforms
-};
-
-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);
-        return selectionRectangleG;
+const PlaitNode = {
+    parent: (board, path) => {
+        const parentPath = Path.parent(path);
+        const p = PlaitNode.get(board, parentPath);
+        return p;
+    },
+    /**
+     * Return a generator of all the ancestor nodes above a specific path.
+     *
+     * By default the order is top-down, from highest to lowest ancestor in
+     * the tree, but you can pass the `reverse: true` option to go bottom-up.
+     */
+    *parents(root, path, options = {}) {
+        for (const p of Path.ancestors(path, options)) {
+            const n = PlaitNode.get(root, p);
+            yield n;
+        }
+    },
+    get(root, path) {
+        let node = root;
+        for (let i = 0; i < path.length; i++) {
+            const p = path[i];
+            if (!node || !node.children || !node.children[p]) {
+                throw new Error(`Cannot find a descendant at path [${path}]`);
+            }
+            node = node.children[p];
+        }
+        return node;
+    },
+    last(board, path) {
+        let n = PlaitNode.get(board, path);
+        while (n && n.children && n.children.length > 0) {
+            const i = n.children.length - 1;
+            n = n.children[i];
+        }
+        return n;
     }
-    return null;
-}
+};
 
-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));
+const isSetViewportOperation = (value) => {
+    return value.type === 'set_viewport';
+};
+const inverse = (op) => {
+    switch (op.type) {
+        case 'insert_node': {
+            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 { 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
+                };
+            }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: null,
+                    newProperties: properties
+                };
             }
             else {
-                result.push(item);
+                return { ...op, properties: newProperties, newProperties: properties };
             }
-        });
-    }
-    else {
-        result = includeGroup ? elements : elements.filter(item => !PlaitGroupElement.isGroup(item));
+        }
+        case 'set_viewport': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: newProperties
+                };
+            }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: properties,
+                    newProperties: properties
+                };
+            }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
+            }
+        }
+        case 'set_theme': {
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
+        }
     }
-    return result;
 };
-const getRectangleByGroup = (board, group, recursion) => {
-    const elementsInGroup = getElementsInGroup(board, group, recursion);
-    return getRectangleByElements(board, elementsInGroup, false);
+const PlaitOperation = {
+    isSetViewportOperation,
+    inverse
 };
-const getGroupByElement = (board, element, recursion) => {
-    const group = board.children.find(item => item.id === element?.groupId);
-    if (!group) {
-        return recursion ? [] : null;
-    }
-    if (recursion) {
-        const groups = [group];
-        const grandGroups = getGroupByElement(board, group, recursion);
-        if (grandGroups.length) {
-            groups.push(...grandGroups);
-        }
-        return groups;
-    }
-    else {
-        return group;
+
+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 getHighestGroup = (board, element) => {
-    const groups = getGroupByElement(board, element, true);
-    if (groups.length) {
-        return groups[groups.length - 1];
+
+const Viewport = {
+    isViewport: (value) => {
+        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
     }
-    return null;
 };
-const getElementsInGroupByElement = (board, element) => {
-    const highestGroup = getHighestGroup(board, element);
-    if (highestGroup) {
-        return getElementsInGroup(board, highestGroup, true);
-    }
-    else {
-        return [element];
-    }
+
+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 isSelectedElementOrGroup = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    if (PlaitGroupElement.isGroup(element)) {
-        return isSelectedAllElementsInGroup(board, element);
-    }
-    return selectedElements.includes(element);
+const ColorfulThemeColor = {
+    mode: ThemeColorMode.colorful,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
 };
-const isSelectedAllElementsInGroup = (board, group) => {
-    const selectedElements = getSelectedElements(board);
-    const elementsInGroup = getElementsInGroup(board, group, true);
-    return elementsInGroup.every(item => selectedElements.includes(item));
+const SoftThemeColor = {
+    mode: ThemeColorMode.soft,
+    boardBackground: '#f5f5f5',
+    textColor: '#333333'
 };
-const getSelectedGroups = (board, groups) => {
-    const selectedGroups = [];
-    groups.forEach(item => {
-        if (isSelectedElementOrGroup(board, item)) {
-            selectedGroups.push(item);
-        }
-    });
-    return selectedGroups;
+const RetroThemeColor = {
+    mode: ThemeColorMode.retro,
+    boardBackground: '#f9f8ed',
+    textColor: '#333333'
 };
-const getHighestSelectedGroup = (board, element) => {
-    const groups = getGroupByElement(board, element, true);
-    const selectedGroups = getSelectedGroups(board, groups);
-    if (selectedGroups.length) {
-        return selectedGroups[selectedGroups.length - 1];
-    }
-    return null;
+const DarkThemeColor = {
+    mode: ThemeColorMode.dark,
+    boardBackground: '#141414',
+    textColor: '#FFFFFF'
 };
-const getHighestSelectedGroups = (board) => {
-    let result = [];
-    const selectedElements = getSelectedElements(board);
-    selectedElements.forEach(item => {
-        if (item.groupId) {
-            const group = getHighestSelectedGroup(board, item);
-            if (group && !result.includes(group)) {
-                result.push(group);
-            }
-        }
-    });
-    return result;
+const StarryThemeColor = {
+    mode: ThemeColorMode.starry,
+    boardBackground: '#0d2537',
+    textColor: '#FFFFFF'
 };
-const getSelectedIsolatedElements = (board) => {
-    let result = [];
-    const selectedElements = getSelectedElements(board);
-    selectedElements.forEach(item => {
-        if (!item.groupId) {
-            result.push(item);
+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 = rotatePoints(cornerPoints, RectangleClient.getCenterPoint(nodeRectangle), node.angle || 0);
+            rectanglesCornerPoints.push(rotatedCornerPoints);
         }
         else {
-            const group = getHighestSelectedGroup(board, item);
-            if (!group) {
-                result.push(item);
-            }
+            console.error(`can not get rectangle of element:`, node);
         }
-    });
-    return result;
-};
-const getHighestSelectedElements = (board) => {
-    return [...getHighestSelectedGroups(board), ...getSelectedIsolatedElements(board)];
-};
-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]
-            }));
+    };
+    elements.forEach(element => {
+        if (recursion) {
+            depthFirstRecursion(element, node => callback(node), node => board.isRecursion(node));
+        }
+        else {
+            callback(element);
         }
     });
-    return groupRectangleG;
-};
-const createGroup = () => {
-    return {
-        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 = (highestSelectedElements) => {
-    if (highestSelectedElements.length > 1) {
-        return nonGroupInHighestSelectedElements(highestSelectedElements) || hasSelectedElementsInSameGroup(highestSelectedElements);
-    }
-    return false;
-};
-const addGroup = (board) => {
-    const selectedGroups = getHighestSelectedGroups(board);
-    const selectedIsolatedElements = getSelectedIsolatedElements(board);
-    const highestSelectedElements = [...selectedGroups, ...selectedIsolatedElements];
-    const group = createGroup();
-    if (canAddGroup(highestSelectedElements)) {
-        highestSelectedElements.forEach(item => {
-            const path = PlaitBoard.findPath(board, item);
-            Transforms.setNode(board, { groupId: group.id }, path);
-        });
-        if (hasSelectedElementsInSameGroup(highestSelectedElements)) {
-            const newGroupId = selectedIsolatedElements[0].groupId;
-            Transforms.insertNode(board, {
-                ...group,
-                groupId: newGroupId
-            }, [board.children.length]);
+    if (rectanglesCornerPoints.length > 0) {
+        if (hasSameAngle(elements)) {
+            const angle = getSelectionAngle(elements);
+            return getRotatedBoundingRectangle(rectanglesCornerPoints, angle);
         }
         else {
-            Transforms.insertNode(board, group, [board.children.length]);
+            const flatCornerPoints = rectanglesCornerPoints.reduce((acc, val) => {
+                return acc.concat(val);
+            }, []);
+            return RectangleClient.getRectangleByPoints(flatCornerPoints);
         }
     }
-};
-const canRemoveGroup = (board, selectedGroups) => {
-    const selectedElements = getSelectedElements(board);
-    return selectedElements.length > 0 && selectedGroups.length > 0;
-};
-const removeGroup = (board) => {
-    const selectedGroups = getHighestSelectedGroups(board);
-    if (canRemoveGroup(board, selectedGroups)) {
-        selectedGroups.map(group => {
-            const elementsInGroup = findElements(board, {
-                match: item => item.groupId === group.id,
-                recursion: () => false
-            });
-            elementsInGroup.forEach(item => {
-                const path = PlaitBoard.findPath(board, item);
-                Transforms.setNode(board, { groupId: group.groupId || undefined }, path);
-            });
-            const groupPath = PlaitBoard.findPath(board, group);
-            Transforms.removeNode(board, groupPath);
-        });
+    else {
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
     }
-};
-
-const PlaitElement = {
-    isRootElement(value) {
-        const parent = NODE_TO_PARENT.get(value);
-        if (parent && PlaitBoard.isBoard(parent)) {
+}
+function getBoardRectangle(board) {
+    return getRectangleByElements(board, board.children, true);
+}
+function getElementById(board, id, dataSource) {
+    if (!dataSource) {
+        dataSource = findElements(board, { match: element => true, recursion: element => true });
+    }
+    let element = dataSource.find(element => element.id === id);
+    return element;
+}
+function findElements(board, options) {
+    let elements = [];
+    const isReverse = options.isReverse ?? true;
+    depthFirstRecursion(board, node => {
+        if (!PlaitBoard.isBoard(node) && options.match(node)) {
+            elements.push(node);
+        }
+    }, (value) => {
+        if (PlaitBoard.isBoard(value)) {
             return true;
         }
         else {
-            return false;
+            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;
     },
-    getComponent(value) {
-        return ELEMENT_TO_COMPONENT.get(value);
+    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 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 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 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];
+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'
-};
-const SoftThemeColor = {
-    mode: ThemeColorMode.soft,
-    boardBackground: '#f5f5f5',
-    textColor: '#333333'
-};
-const RetroThemeColor = {
-    mode: ThemeColorMode.retro,
-    boardBackground: '#f9f8ed',
-    textColor: '#333333'
+function setSelection(board, selection) {
+    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
+    board.apply(operation);
+}
+const SelectionTransforms = {
+    setSelection,
+    addSelectionWithTemporaryElements
 };
-const DarkThemeColor = {
-    mode: ThemeColorMode.dark,
-    boardBackground: '#141414',
-    textColor: '#FFFFFF'
+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 () => {
+            removeNode(board, ref.current);
+            ref.unref();
+            removeSelectedElement(board, element, true);
+        };
+    })
+        .forEach(action => {
+        action();
+    });
 };
-const StarryThemeColor = {
-    mode: ThemeColorMode.starry,
-    boardBackground: '#0d2537',
-    textColor: '#FFFFFF'
+const CoreTransforms = {
+    removeElements
 };
-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 = {}));
 
-function getRectangleByElements(board, elements, recursion) {
-    const rectangles = [];
-    const callback = (node) => {
-        const nodeRectangle = board.getRectangle(node);
-        if (nodeRectangle) {
-            rectangles.push(nodeRectangle);
-        }
-        else {
-            console.error(`can not get rectangle of element:`, node);
-        }
-    };
-    elements.forEach(element => {
-        if (recursion) {
-            depthFirstRecursion(element, node => callback(node), node => board.isRecursion(node));
+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 {
-            callback(element);
+            NodeTransforms.insertNode(board, group, [board.children.length]);
         }
-    });
-    if (rectangles.length > 0) {
-        return RectangleClient.getBoundingRectangle(rectangles);
-    }
-    else {
-        return {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
     }
-}
-function getBoardRectangle(board) {
-    return getRectangleByElements(board, board.children, true);
-}
-function getElementById(board, id, dataSource) {
-    if (!dataSource) {
-        dataSource = findElements(board, { match: element => true, recursion: element => true });
+};
+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);
+        });
     }
-    let element = dataSource.find(element => element.id === id);
-    return element;
-}
-function findElements(board, options) {
-    let elements = [];
-    const isReverse = options.isReverse ?? true;
-    depthFirstRecursion(board, node => {
-        if (!PlaitBoard.isBoard(node) && options.match(node)) {
-            elements.push(node);
-        }
-    }, (value) => {
-        if (PlaitBoard.isBoard(value)) {
-            return true;
-        }
-        else {
-            return getIsRecursionFunc(board)(value) && options.recursion(value);
-        }
-    }, isReverse);
-    return elements;
-}
+};
+const GroupTransforms = {
+    addGroup,
+    removeGroup
+};
 
-const PlaitBoard = {
-    isBoard(value) {
-        const cachedIsBoard = IS_BOARD_CACHE.get(value);
-        if (cachedIsBoard !== undefined) {
-            return cachedIsBoard;
-        }
-        const isBoard = typeof value.onChange === 'function' && typeof value.apply === 'function';
-        IS_BOARD_CACHE.set(value, isBoard);
-        return isBoard;
-    },
-    findPath(board, node) {
-        const path = [];
-        let child = node;
-        while (true) {
-            const parent = NODE_TO_PARENT.get(child);
-            if (parent == null) {
-                if (PlaitBoard.isBoard(child)) {
-                    return path;
-                }
-                else {
-                    break;
-                }
-            }
-            const i = NODE_TO_INDEX.get(child);
-            if (i == null) {
-                break;
-            }
-            path.unshift(i);
-            child = parent;
-        }
-        throw new Error(`Unable to find the path for Plait node: ${JSON.stringify(node)}`);
-    },
-    getHost(board) {
-        return BOARD_TO_HOST.get(board);
-    },
-    getElementHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.host;
-    },
-    getElementUpperHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.upperHost;
-    },
-    getElementActiveHost(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.activeHost;
-    },
-    getRoughSVG(board) {
-        return BOARD_TO_ROUGH_SVG.get(board);
-    },
-    getComponent(board) {
-        return BOARD_TO_COMPONENT.get(board);
-    },
-    getBoardContainer(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.container;
-    },
-    getRectangle(board) {
-        return getRectangleByElements(board, board.children, true);
-    },
-    getViewportContainer(board) {
-        return BOARD_TO_ELEMENT_HOST.get(board)?.viewportContainer;
-    },
-    isFocus(board) {
-        return !!board.selection;
-    },
-    isReadonly(board) {
-        return board.options.readonly;
-    },
-    hasBeenTextEditing(board) {
-        return !!IS_TEXT_EDITABLE.get(board);
-    },
-    getPointer(board) {
-        return board.pointer;
-    },
-    isPointer(board, pointer) {
-        return board.pointer === pointer;
-    },
-    isInPointer(board, pointers) {
-        const point = board.pointer;
-        return pointers.includes(point);
-    },
-    getMovingPointInBoard(board) {
-        return BOARD_TO_MOVING_POINT_IN_BOARD.get(board);
-    },
-    isMovingPointInBoard(board) {
-        const point = BOARD_TO_MOVING_POINT.get(board);
-        const rect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
-        if (point && distanceBetweenPointAndRectangle(point[0], point[1], rect) === 0) {
-            return true;
-        }
-        return false;
-    },
-    getThemeColors(board) {
-        return (board.options.themeColors || ThemeColors);
-    }
+const Transforms = {
+    ...GeneralTransforms,
+    ...ViewportTransforms$1,
+    ...SelectionTransforms,
+    ...NodeTransforms
 };
 
 const PathRef = {
@@ -3351,7 +3587,8 @@ function createBoard(children, options) {
         pointerLeave: pointer => { },
         globalPointerMove: pointer => { },
         globalPointerUp: pointer => { },
-        isImageBindingAllowed: (element) => false
+        isImageBindingAllowed: (element) => false,
+        canAddToGroup: (element) => true
     };
     return board;
 }
@@ -3628,112 +3865,46 @@ function withSelection(board) {
                     selectionRectangleG?.remove();
                 }
                 const temporaryElements = getTemporaryElements(board);
-                let elements = temporaryElements ? temporaryElements : getHitElementsBySelection(board);
-                if (!options.isMultiple && elements.length > 1) {
-                    elements = [elements[0]];
+                if (temporaryElements) {
+                    cacheSelectedElements(board, [...temporaryElements]);
                 }
-                const isHitElementWithGroup = elements.some(item => item.groupId);
-                if (isShift) {
-                    const newSelectedElements = [...getSelectedElements(board)];
-                    if (board.selection && Selection.isCollapsed(board.selection)) {
-                        if (isHitElementWithGroup) {
-                            let pendingElements = [...elements];
-                            const hitElement = elements[0];
-                            const groups = getGroupByElement(board, hitElement, true);
-                            const selectedGroups = getSelectedGroups(board, groups);
-                            const elementsInHighestGroup = getElementsInGroup(board, groups[groups.length - 1], true);
-                            if (selectedGroups.length > 0) {
-                                if (selectedGroups.length > 1) {
-                                    pendingElements = getElementsInGroup(board, selectedGroups[selectedGroups.length - 2], true);
-                                }
-                            }
-                            else {
-                                if (!newSelectedElements.includes(hitElement)) {
-                                    const selectedElementsInGroup = elementsInHighestGroup.filter(item => newSelectedElements.includes(item));
-                                    // When partially selected elements belong to a group,
-                                    // only select those elements along with the hit elements.
-                                    if (selectedElementsInGroup.length) {
-                                        pendingElements.push(...selectedElementsInGroup);
+                else {
+                    let elements = getHitElementsBySelection(board);
+                    if (!options.isMultiple && elements.length > 1) {
+                        elements = [elements[0]];
+                    }
+                    const isHitElementWithGroup = elements.some(item => item.groupId);
+                    const selectedElements = getSelectedElements(board);
+                    if (isHitElementWithGroup) {
+                        setSelectedElementsWithGroup(board, elements, isShift);
+                    }
+                    else {
+                        if (isShift) {
+                            const newElements = [...selectedElements];
+                            if (board.selection && Selection.isCollapsed(board.selection)) {
+                                elements.forEach(element => {
+                                    if (newElements.includes(element)) {
+                                        newElements.splice(newElements.indexOf(element), 1);
                                     }
                                     else {
-                                        pendingElements = elementsInHighestGroup;
+                                        newElements.push(element);
                                     }
-                                }
-                                else {
-                                    pendingElements = [];
-                                }
+                                });
+                                cacheSelectedElements(board, newElements);
                             }
-                            elementsInHighestGroup.forEach(element => {
-                                if (newSelectedElements.includes(element)) {
-                                    newSelectedElements.splice(newSelectedElements.indexOf(element), 1);
-                                }
-                            });
-                            if (pendingElements.length) {
-                                newSelectedElements.push(...pendingElements);
-                            }
-                        }
-                        else {
-                            elements.forEach(element => {
-                                if (newSelectedElements.includes(element)) {
-                                    newSelectedElements.splice(newSelectedElements.indexOf(element), 1);
-                                }
-                                else {
-                                    newSelectedElements.push(element);
-                                }
-                            });
-                        }
-                        cacheSelectedElements(board, newSelectedElements);
-                    }
-                    else {
-                        let newElements = [...elements];
-                        if (isHitElementWithGroup) {
-                            elements.forEach(item => {
-                                if (!item.groupId) {
-                                    newElements.push(item);
-                                }
-                                else {
-                                    newElements.push(...getElementsInGroupByElement(board, item));
-                                }
-                            });
-                        }
-                        newElements.forEach(element => {
-                            if (!newSelectedElements.includes(element)) {
-                                newSelectedElements.push(element);
+                            else {
+                                elements.forEach(element => {
+                                    if (!newElements.includes(element)) {
+                                        newElements.push(element);
+                                    }
+                                });
+                                cacheSelectedElements(board, [...newElements]);
                             }
-                        });
-                        cacheSelectedElements(board, newSelectedElements);
-                    }
-                }
-                else {
-                    let newSelectedElements = [...elements];
-                    if (isHitElementWithGroup) {
-                        const isCollapsed = Selection.isCollapsed(board.selection);
-                        if (!isCollapsed) {
-                            newSelectedElements = [];
-                            elements.forEach(item => {
-                                if (!item.groupId) {
-                                    newSelectedElements.push(item);
-                                }
-                                else {
-                                    newSelectedElements.push(...getElementsInGroupByElement(board, item));
-                                }
-                            });
                         }
                         else {
-                            const hitElement = elements[0];
-                            const groups = getGroupByElement(board, hitElement, true);
-                            const selectedGroups = getSelectedGroups(board, groups);
-                            if (selectedGroups.length > 0) {
-                                if (selectedGroups.length > 1) {
-                                    newSelectedElements = getElementsInGroup(board, selectedGroups[selectedGroups.length - 2], true);
-                                }
-                            }
-                            else {
-                                newSelectedElements = getElementsInGroup(board, groups[groups.length - 1], true);
-                            }
+                            cacheSelectedElements(board, [...elements]);
                         }
                     }
-                    cacheSelectedElements(board, newSelectedElements);
                 }
                 const newElements = getSelectedElements(board);
                 previousSelectedElements = newElements;
@@ -4185,6 +4356,9 @@ function withMoving(board) {
     let activeElements = [];
     let alignG = null;
     let activeElementsRectangle = null;
+    let selectedTargetElements = null;
+    let hitTargetElement = undefined;
+    let isHitSelectedTarget = undefined;
     board.pointerDown = (event) => {
         if (PlaitBoard.isReadonly(board) ||
             !PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
@@ -4194,24 +4368,31 @@ function withMoving(board) {
             return;
         }
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const targetElements = getTargetElements(board);
-        const targetRectangle = targetElements.length > 0 && getRectangleByElements(board, targetElements, false);
-        const isInTargetRectangle = targetRectangle && RectangleClient.isPointInRectangle(targetRectangle, point);
-        if (isInTargetRectangle) {
+        hitTargetElement = getHitElementByPoint(board, point, el => board.isMovable(el));
+        selectedTargetElements = getSelectedTargetElements(board);
+        isHitSelectedTarget = hitTargetElement && selectedTargetElements.includes(hitTargetElement);
+        if (hitTargetElement && isHitSelectedTarget) {
             startPoint = point;
-            activeElements = targetElements;
+            activeElements = selectedTargetElements;
+            activeElementsRectangle = getRectangleByElements(board, activeElements, true);
             preventTouchMove(board, event, true);
+        }
+        else if (hitTargetElement) {
+            startPoint = point;
+            activeElements = getElementsInGroupByElement(board, hitTargetElement);
             activeElementsRectangle = getRectangleByElements(board, activeElements, true);
+            preventTouchMove(board, event, true);
         }
         else {
-            const targetElement = getHitElementByPoint(board, point, el => board.isMovable(el));
-            if (targetElement) {
+            // 只有判定用户未击中元素之后才可以验证用户是否击中了已选元素所在的空白区域
+            // Only after it is determined that the user has not hit the element can it be verified whether the user hit the blank area where the selected element is located.
+            const targetRectangle = selectedTargetElements.length > 0 && getRectangleByElements(board, selectedTargetElements, false);
+            const isHitInTargetRectangle = targetRectangle && RectangleClient.isPointInRectangle(targetRectangle, point);
+            if (isHitInTargetRectangle) {
                 startPoint = point;
-                activeElements = getElementsInGroupByElement(board, targetElement);
-                if (targetElements.length > 0) {
-                    addSelectionWithTemporaryElements(board, []);
-                }
-                activeElementsRectangle = getRectangleByElements(board, activeElements, true);
+                activeElements = selectedTargetElements;
+                activeElementsRectangle = targetRectangle;
+                preventTouchMove(board, event, true);
             }
         }
         pointerDown(event);
@@ -4227,6 +4408,12 @@ function withMoving(board) {
             offsetY = endPoint[1] - startPoint[1];
             const distance = distanceBetweenPointAndPoint(...endPoint, ...startPoint);
             if (distance > PRESS_AND_MOVE_BUFFER || getMovingElements(board).length > 0) {
+                if (hitTargetElement && !isHitSelectedTarget && selectedTargetElements && selectedTargetElements.length > 0) {
+                    addSelectionWithTemporaryElements(board, []);
+                    hitTargetElement = undefined;
+                    selectedTargetElements = null;
+                    isHitSelectedTarget = undefined;
+                }
                 throttleRAF(board, 'with-moving', () => {
                     if (!activeElementsRectangle) {
                         return;
@@ -4267,6 +4454,9 @@ function withMoving(board) {
     };
     board.globalPointerUp = event => {
         isPreventDefault = false;
+        hitTargetElement = undefined;
+        selectedTargetElements = null;
+        isHitSelectedTarget = undefined;
         if (startPoint) {
             cancelMove(board);
         }
@@ -4315,7 +4505,7 @@ function withArrowMoving(board) {
                     break;
                 }
             }
-            const targetElements = getTargetElements(board);
+            const targetElements = getSelectedTargetElements(board);
             throttleRAF(board, 'with-arrow-moving', () => {
                 updatePoints(board, targetElements, offset[0], offset[1]);
             });
@@ -4328,7 +4518,7 @@ function withArrowMoving(board) {
     };
     return board;
 }
-function getTargetElements(board) {
+function getSelectedTargetElements(board) {
     const selectedElements = getSelectedElements(board);
     const movableElements = board.children.filter(item => board.isMovable(item));
     const targetElements = selectedElements.filter(element => {
@@ -4339,7 +4529,7 @@ function getTargetElements(board) {
     return targetElements;
 }
 function updatePoints(board, targetElements, offsetX, offsetY) {
-    const validElements = targetElements.filter(element => board.children.findIndex(item => item.id === element.id) > -1);
+    const validElements = targetElements.filter(element => !PlaitGroupElement.isGroup(element) && board.children.findIndex(item => item.id === element.id) > -1);
     const currentElements = validElements.map(element => {
         const points = element.points || [];
         const newPoints = points.map(p => [p[0] + offsetX, p[1] + offsetY]);
@@ -4671,27 +4861,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                 type: Input
             }] } });
 
-function withGroup(board) {
-    const { pointerMove, globalPointerUp } = board;
-    let groupRectangleG;
-    board.pointerMove = (event) => {
-        groupRectangleG?.remove();
-        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        let selection = { anchor: point, focus: point };
-        if (board.selection && !Selection.isCollapsed(board.selection)) {
-            selection = board.selection;
+function withRelatedFragment(board) {
+    const { setFragment } = board;
+    board.setFragment = (data, clipboardContext, rectangle, type) => {
+        const relatedFragment = board.getRelatedFragment([]);
+        if (!clipboardContext) {
+            clipboardContext = createClipboardContext(WritableClipboardType.elements, relatedFragment, '');
         }
-        const hitElements = getHitElementsBySelection(board, selection);
-        if (hitElements.length) {
-            groupRectangleG = createGroupRectangleG(board, hitElements);
-            groupRectangleG && PlaitBoard.getElementActiveHost(board).append(groupRectangleG);
+        else {
+            clipboardContext = addClipboardContext(clipboardContext, {
+                text: '',
+                type: WritableClipboardType.elements,
+                data: relatedFragment
+            });
         }
-        pointerMove(event);
-    };
-    board.globalPointerUp = (event) => {
-        groupRectangleG?.remove();
-        groupRectangleG = null;
-        globalPointerUp(event);
+        setFragment(data, clipboardContext, rectangle, type);
     };
     return board;
 }
@@ -4821,7 +5005,7 @@ class PlaitBoardComponent {
         initializeViewportOffset(this.board);
     }
     initializePlugins() {
-        let board = withHotkey(withHandPointer(withHistory(withSelection(withGroup(withMoving(withBoard(withViewport(withOptions(createBoard(this.plaitValue, this.plaitOptions))))))))));
+        let board = withRelatedFragment(withHotkey(withHandPointer(withHistory(withSelection(withMoving(withBoard(withViewport(withOptions(createBoard(this.plaitValue, this.plaitOptions))))))))));
         this.plaitPlugins.forEach(plugin => {
             board = plugin(board);
         });
@@ -5263,6 +5447,81 @@ function createModModifierKeys() {
     return modifiers;
 }
 
+const TEMPORARY_G = new Map();
+const getTemporaryGArray = (debugKey) => {
+    return TEMPORARY_G.get(debugKey) || [];
+};
+const setTemporaryGArray = (debugKey, gArray) => {
+    TEMPORARY_G.set(debugKey, gArray);
+};
+class DebugGenerator {
+    constructor(debugKey) {
+        this.debugKey = debugKey;
+    }
+    isDebug() {
+        return isDebug(this.debugKey);
+    }
+    clear() {
+        if (!this.isDebug()) {
+            return;
+        }
+        const gArray = getTemporaryGArray(this.debugKey);
+        setTemporaryGArray(this.debugKey, []);
+        gArray.forEach(g => g.remove());
+    }
+    drawPolygon(board, points, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        const polygonG = PlaitBoard.getRoughSVG(board).polygon(points, options || { stroke: 'red' });
+        PlaitBoard.getElementActiveHost(board).append(polygonG);
+        const gArray = getTemporaryGArray(this.debugKey);
+        gArray.push(polygonG);
+        setTemporaryGArray(this.debugKey, gArray);
+        return polygonG;
+    }
+    drawRectangle(board, data, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        let rectangle;
+        if (data instanceof Array) {
+            rectangle = RectangleClient.getRectangleByPoints(data);
+        }
+        else {
+            rectangle = data;
+        }
+        const rectangleG = PlaitBoard.getRoughSVG(board).rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, options || { stroke: 'red' });
+        PlaitBoard.getElementActiveHost(board).append(rectangleG);
+        const gArray = getTemporaryGArray(this.debugKey);
+        gArray.push(rectangleG);
+        setTemporaryGArray(this.debugKey, gArray);
+        return rectangleG;
+    }
+    drawCircles(board, points, diameter = 0, isCumulativeDiameter = false, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        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 || {}));
+            PlaitBoard.getElementActiveHost(board).append(circle);
+            const gArray = getTemporaryGArray(this.debugKey);
+            gArray.push(circle);
+            result.push(circle);
+            setTemporaryGArray(this.debugKey, gArray);
+        });
+        return result;
+    }
+}
+const createDebugGenerator = (debugKey) => {
+    return new DebugGenerator(debugKey);
+};
+const isDebug = (key) => {
+    const defaultKey = 'debug:plait';
+    return localStorage.getItem(key || defaultKey) === 'true';
+};
+
 /*
  * Public API Surface of plait
  */
@@ -5271,5 +5530,5 @@ function createModModifierKeys() {
  * 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, DefaultThemeColor, Direction, E, EIGHT, ELEMENT_TO_COMPONENT, END, ENTER, EQUALS, ESCAPE, F, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, FF_EQUALS, FF_MINUS, FF_MUTE, FF_SEMICOLON, FF_VOLUME_DOWN, FF_VOLUME_UP, FIRST_MEDIA, FIVE, FLUSHING, FOUR, G, H, HIT_DISTANCE_BUFFER, HOME, HOST_CLASS_NAME, I, INSERT, IS_APPLE, IS_BOARD_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, 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, addGroup, addSelectedElement, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, calcNewViewBox, canAddGroup, canRemoveGroup, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, 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, findElements, getBoardRectangle, getClipboardData, getClipboardFromHtml, getDataTransferClipboard, getDataTransferClipboardText, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByElements, getRectangleByGroup, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getTargetElements, getTemporaryElements, getTemporaryRef, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSelectedElementsInSameGroup, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isContextmenu, isDOMElement, isDOMNode, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, nonGroupInHighestSelectedElements, normalizePoint, preventTouchMove, removeGroup, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, 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_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 };
 //# sourceMappingURL=plait-core.mjs.map