@plait/core 0.52.0 → 0.54.0

package/fesm2022/plait-core.mjs

@@ -4,7 +4,7 @@ import rough from 'roughjs/bin/rough';
 import { timer, Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter, tap } from 'rxjs/operators';
 import { isKeyHotkey, isHotkey } from 'is-hotkey';
-import produce, { createDraft, finishDraft, isDraft } from 'immer';
+import { produce, createDraft, finishDraft, isDraft } from 'immer';
 import { NgFor } from '@angular/common';
 
 // record richtext type status
@@ -18,6 +18,7 @@ const BOARD_TO_AFTER_CHANGE = new WeakMap();
 const BOARD_TO_COMPONENT = new WeakMap();
 const BOARD_TO_ROUGH_SVG = new WeakMap();
 const BOARD_TO_HOST = new WeakMap();
+const IS_BOARD_ALIVE = new WeakMap();
 const BOARD_TO_ELEMENT_HOST = new WeakMap();
 const BOARD_TO_SELECTED_ELEMENT = new WeakMap();
 const BOARD_TO_MOVING_POINT_IN_BOARD = new WeakMap();
@@ -64,7 +65,7 @@ const getIsRecursionFunc = (board) => {
 };
 
 const SELECTION_BORDER_COLOR = '#6698FF';
-const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
+const SELECTION_FILL_COLOR = '#6698FF25'; // opacity 0.25
 const Selection = {
     isCollapsed(selection) {
         if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
@@ -185,6 +186,9 @@ const RectangleClient = {
     getCenterPoint: (rectangle) => {
         return [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
     },
+    getCenterPointByPoints: (points) => {
+        return RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(points));
+    },
     getEdgeCenterPoints: (rectangle) => {
         return [
             [rectangle.x + rectangle.width / 2, rectangle.y],
@@ -493,9 +497,11 @@ var CursorClass;
 (function (CursorClass) {
     CursorClass["crosshair"] = "crosshair";
 })(CursorClass || (CursorClass = {}));
+const RESIZE_CURSORS = [ResizeCursorClass.ns, ResizeCursorClass.nesw, ResizeCursorClass.ew, ResizeCursorClass.nwse];
 
 const ATTACHED_ELEMENT_CLASS_NAME = 'plait-board-attached';
 const ACTIVE_STROKE_WIDTH = 1;
+const SNAPPING_STROKE_WIDTH = 2;
 const SELECTION_RECTANGLE_CLASS_NAME = 'selection-rectangle';
 
 const HOST_CLASS_NAME = 'plait-board-container';
@@ -952,6 +958,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 +1046,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.
@@ -1683,7 +1708,7 @@ const throttleRAF = (board, key, fn) => {
             const value = BOARD_TO_RAF.get(board) || {};
             value[key] = null;
             BOARD_TO_RAF.set(board, value);
-            fn();
+            PlaitBoard.isAlive(board) && fn();
         });
         const state = getRAFState(board);
         state[key] = timerId;
@@ -2151,8 +2176,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 +2203,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,12 +2216,6 @@ const handleTouchTarget = (board) => {
     }
 };
 
-const PlaitGroupElement = {
-    isGroup: (value) => {
-        return value.type === 'group';
-    }
-};
-
 const Viewport = {
     isViewport: (value) => {
         return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
@@ -2622,7 +2652,7 @@ const removeElements = (board, elements) => {
         const path = PlaitBoard.findPath(board, element);
         const ref = board.pathRef(path);
         return () => {
-            removeNode(board, ref.current);
+            ref.current && removeNode(board, ref.current);
             ref.unref();
             removeSelectedElement(board, element, true);
         };
@@ -2635,6 +2665,50 @@ const CoreTransforms = {
     removeElements
 };
 
+const addGroup = (board, elements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
+    const highestSelectedElements = [...selectedGroups, ...selectedIsolatedElements];
+    const group = createGroup();
+    if (canAddGroup(board)) {
+        highestSelectedElements.forEach(item => {
+            const path = PlaitBoard.findPath(board, item);
+            NodeTransforms.setNode(board, { groupId: group.id }, path);
+        });
+        if (hasSelectedElementsInSameGroup(highestSelectedElements)) {
+            const newGroupId = selectedIsolatedElements[0].groupId;
+            NodeTransforms.insertNode(board, {
+                ...group,
+                groupId: newGroupId
+            }, [board.children.length]);
+        }
+        else {
+            NodeTransforms.insertNode(board, group, [board.children.length]);
+        }
+    }
+};
+const removeGroup = (board, elements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    if (canRemoveGroup(board)) {
+        selectedGroups.map(group => {
+            const elementsInGroup = findElements(board, {
+                match: item => item.groupId === group.id,
+                recursion: () => false
+            });
+            elementsInGroup.forEach(item => {
+                const path = PlaitBoard.findPath(board, item);
+                NodeTransforms.setNode(board, { groupId: group.groupId || undefined }, path);
+            });
+            const groupPath = PlaitBoard.findPath(board, group);
+            NodeTransforms.removeNode(board, groupPath);
+        });
+    }
+};
+const GroupTransforms = {
+    addGroup,
+    removeGroup
+};
+
 const Transforms = {
     ...GeneralTransforms,
     ...ViewportTransforms$1,
@@ -2642,6 +2716,116 @@ const Transforms = {
     ...NodeTransforms
 };
 
+const rotatePoints = (points, centerPoint, angle) => {
+    if (!angle) {
+        angle = 0;
+    }
+    if (Array.isArray(points) && typeof points[0] === 'number') {
+        return rotate(points[0], points[1], centerPoint[0], centerPoint[1], angle);
+    }
+    else {
+        return points.map(point => {
+            return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle);
+        });
+    }
+};
+const getSelectionAngle = (elements) => {
+    let angle = elements[0]?.angle || 0;
+    elements.forEach(item => {
+        if (item.angle !== angle && !approximately((item.angle % (Math.PI / 2)) - (angle % (Math.PI / 2)), 0)) {
+            angle = 0;
+        }
+    });
+    return angle;
+};
+const hasSameAngle = (elements) => {
+    if (!elements.length) {
+        return false;
+    }
+    const angle = elements[0].angle;
+    if (angle === undefined) {
+        return false;
+    }
+    return !elements.some(item => item.angle !== angle);
+};
+const getRotatedBoundingRectangle = (rectanglesCornerPoints, angle) => {
+    let rectanglesFromOrigin = [];
+    for (let i = 0; i < rectanglesCornerPoints.length; i++) {
+        const cornerPoints = rectanglesCornerPoints[i];
+        const invertCornerPointsFromOrigin = rotatePoints(cornerPoints, [0, 0], -angle);
+        rectanglesFromOrigin.push(RectangleClient.getRectangleByPoints(invertCornerPointsFromOrigin));
+    }
+    const selectionRectangleFromOrigin = RectangleClient.getBoundingRectangle(rectanglesFromOrigin);
+    const selectionCornerPoints = RectangleClient.getCornerPoints(selectionRectangleFromOrigin);
+    const cornerPointsFromOrigin = rotatePoints(selectionCornerPoints, [0, 0], angle);
+    const centerPoint = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(cornerPointsFromOrigin));
+    return RectangleClient.getRectangleByPoints(rotatePoints(cornerPointsFromOrigin, centerPoint, -angle));
+};
+const getOffsetAfterRotate = (rectangle, rotateCenterPoint, angle) => {
+    const targetCenterPoint = RectangleClient.getCenterPoint(rectangle);
+    const [rotatedCenterPoint] = rotatePoints([targetCenterPoint], rotateCenterPoint, angle);
+    const offsetX = rotatedCenterPoint[0] - targetCenterPoint[0];
+    const offsetY = rotatedCenterPoint[1] - targetCenterPoint[1];
+    return { offsetX, offsetY };
+};
+const rotatedDataPoints = (points, rotateCenterPoint, angle) => {
+    const { offsetX, offsetY } = getOffsetAfterRotate(RectangleClient.getRectangleByPoints(points), rotateCenterPoint, angle);
+    return points.map(p => [p[0] + offsetX, p[1] + offsetY]);
+};
+const hasValidAngle = (node) => {
+    return node.angle && node.angle !== 0;
+};
+const rotatePointsByElement = (points, element) => {
+    if (hasValidAngle(element)) {
+        let rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const centerPoint = RectangleClient.getCenterPoint(rectangle);
+        return rotatePoints(points, centerPoint, element.angle);
+    }
+    else {
+        return null;
+    }
+};
+const rotateAntiPointsByElement = (points, element) => {
+    if (hasValidAngle(element)) {
+        let rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const centerPoint = RectangleClient.getCenterPoint(rectangle);
+        return rotatePoints(points, centerPoint, -element.angle);
+    }
+    else {
+        return null;
+    }
+};
+const getRectangleByAngle = (rectangle, angle) => {
+    if (angle) {
+        const cornerPoints = RectangleClient.getCornerPoints(rectangle);
+        const centerPoint = RectangleClient.getCenterPoint(rectangle);
+        return RectangleClient.getRectangleByPoints(rotatePoints(cornerPoints, centerPoint, angle));
+    }
+    else {
+        return null;
+    }
+};
+const isAxisChangedByAngle = (angle) => {
+    const unitAngle = Math.abs(angle) % Math.PI;
+    return unitAngle >= (1 / 4) * Math.PI && unitAngle <= (3 / 4) * Math.PI;
+};
+function degreesToRadians(d) {
+    return (d / 180) * Math.PI;
+}
+function radiansToDegrees(r) {
+    return (r / Math.PI) * 180;
+}
+function rotateElements(board, elements, angle) {
+    const selectionRectangle = getRectangleByElements(board, elements, false);
+    const selectionCenterPoint = RectangleClient.getCenterPoint(selectionRectangle);
+    elements.forEach(item => {
+        const originAngle = item.angle;
+        const points = rotatedDataPoints(item.points, selectionCenterPoint, angle);
+        const path = PlaitBoard.findPath(board, item);
+        Transforms.setNode(board, { points, angle: originAngle + angle }, path);
+    });
+}
+
 function isSelectionMoving(board) {
     return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
 }
@@ -2677,7 +2861,7 @@ function getTemporaryRef(board) {
 function deleteTemporaryElements(board) {
     BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
 }
-function createSelectionRectangleG(board) {
+function drawEntireActiveRectangleG(board) {
     const elements = getSelectedElements(board);
     const rectangle = getRectangleByElements(board, elements, false);
     if (rectangle.width > 0 && rectangle.height > 0 && elements.length > 1) {
@@ -2687,11 +2871,91 @@ function createSelectionRectangleG(board) {
             fillStyle: 'solid'
         });
         selectionRectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
-        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
+        const angle = getSelectionAngle(elements);
+        if (angle) {
+            setAngleForG(selectionRectangleG, RectangleClient.getCenterPoint(rectangle), angle);
+        }
         return selectionRectangleG;
     }
     return null;
 }
+function setSelectedElementsWithGroup(board, elements, isShift) {
+    if (!board.selection) {
+        return;
+    }
+    const selectedElements = getSelectedElements(board);
+    if (!Selection.isCollapsed(board.selection)) {
+        let newElements = [...selectedElements];
+        elements.forEach(item => {
+            if (!item.groupId) {
+                newElements.push(item);
+            }
+            else {
+                newElements.push(...getElementsInGroupByElement(board, item));
+            }
+        });
+        cacheSelectedElements(board, uniqueById(newElements));
+        return;
+    }
+    if (Selection.isCollapsed(board.selection)) {
+        const hitElement = elements[0];
+        const hitElementGroups = getGroupByElement(board, hitElement, true);
+        if (hitElementGroups.length) {
+            const elementsInHighestGroup = getElementsInGroup(board, hitElementGroups[hitElementGroups.length - 1], true) || [];
+            const isSelectGroupElement = selectedElements.some(element => elementsInHighestGroup.map(item => item.id).includes(element.id));
+            if (isShift) {
+                cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup);
+            }
+            else {
+                cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups);
+            }
+        }
+    }
+}
+function cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup) {
+    const selectedElements = getSelectedElements(board);
+    let newElements = [...selectedElements];
+    const hitElement = elements[0];
+    let pendingElements = [];
+    if (!isSelectGroupElement) {
+        pendingElements = elementsInHighestGroup;
+    }
+    else {
+        const isHitSelectedElement = selectedElements.some(item => item.id === hitElement.id);
+        const selectedElementsInGroup = elementsInHighestGroup.filter(item => selectedElements.includes(item));
+        if (isHitSelectedElement) {
+            pendingElements = selectedElementsInGroup.filter(item => item.id !== hitElement.id);
+        }
+        else {
+            pendingElements.push(...selectedElementsInGroup, ...elements);
+        }
+    }
+    elementsInHighestGroup.forEach(element => {
+        if (newElements.includes(element)) {
+            newElements.splice(newElements.indexOf(element), 1);
+        }
+    });
+    if (pendingElements.length) {
+        newElements.push(...pendingElements);
+    }
+    cacheSelectedElements(board, uniqueById(newElements));
+}
+function cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups) {
+    let newElements = [...elements];
+    const selectedGroups = filterSelectedGroups(board, hitElementGroups);
+    if (selectedGroups.length > 0) {
+        if (selectedGroups.length > 1) {
+            newElements = getAllElementsInGroup(board, selectedGroups[selectedGroups.length - 2], true);
+        }
+    }
+    else {
+        const elementsInGroup = getAllElementsInGroup(board, hitElementGroups[hitElementGroups.length - 1], true);
+        if (!isSelectGroupElement) {
+            newElements = elementsInGroup;
+        }
+    }
+    cacheSelectedElements(board, uniqueById(newElements));
+}
 
 const getElementsInGroup = (board, group, recursion, includeGroup) => {
     let result = [];
@@ -2702,7 +2966,7 @@ const getElementsInGroup = (board, group, recursion, includeGroup) => {
                 if (includeGroup) {
                     result.push(item);
                 }
-                result.push(...getElementsInGroup(board, item, recursion));
+                result.push(...getElementsInGroup(board, item, recursion, includeGroup));
             }
             else {
                 result.push(item);
@@ -2714,18 +2978,28 @@ const getElementsInGroup = (board, group, recursion, includeGroup) => {
     }
     return result;
 };
+const getAllElementsInGroup = (board, group, recursion, includeGroup) => {
+    const elementsInGroup = getElementsInGroup(board, group, recursion, includeGroup);
+    const result = [];
+    elementsInGroup.forEach(element => {
+        depthFirstRecursion(element, node => {
+            result.push(node);
+        }, () => true);
+    });
+    return result;
+};
 const getRectangleByGroup = (board, group, recursion) => {
-    const elementsInGroup = getElementsInGroup(board, group, recursion);
+    const elementsInGroup = getAllElementsInGroup(board, group, recursion);
     return getRectangleByElements(board, elementsInGroup, false);
 };
-const getGroupByElement = (board, element, recursion) => {
-    const group = board.children.find(item => item.id === element?.groupId);
+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);
+        const grandGroups = getGroupByElement(board, group, recursion, source);
         if (grandGroups.length) {
             groups.push(...grandGroups);
         }
@@ -2736,56 +3010,66 @@ const getGroupByElement = (board, element, recursion) => {
     }
 };
 const getHighestGroup = (board, element) => {
-    const groups = getGroupByElement(board, element, true);
-    if (groups.length) {
-        return groups[groups.length - 1];
+    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 getElementsInGroup(board, highestGroup, true);
+        return getAllElementsInGroup(board, highestGroup, true);
     }
     else {
         return [element];
     }
 };
-const isSelectedElementOrGroup = (board, element) => {
-    const selectedElements = getSelectedElements(board);
+const isSelectedElementOrGroup = (board, element, elements) => {
+    const selectedElements = elements || getSelectedElements(board);
     if (PlaitGroupElement.isGroup(element)) {
-        return isSelectedAllElementsInGroup(board, element);
+        return isSelectedAllElementsInGroup(board, element, elements);
     }
-    return selectedElements.includes(element);
+    return selectedElements.map(item => item.id).includes(element.id);
 };
-const isSelectedAllElementsInGroup = (board, group) => {
-    const selectedElements = getSelectedElements(board);
+const isSelectedAllElementsInGroup = (board, group, elements) => {
+    const selectedElements = elements || getSelectedElements(board);
     const elementsInGroup = getElementsInGroup(board, group, true);
-    return elementsInGroup.every(item => selectedElements.includes(item));
+    return elementsInGroup.every(item => selectedElements.map(element => element.id).includes(item.id));
 };
-const getSelectedGroups = (board, groups) => {
+const filterSelectedGroups = (board, groups, elements) => {
     const selectedGroups = [];
     groups.forEach(item => {
-        if (isSelectedElementOrGroup(board, item)) {
+        if (isSelectedElementOrGroup(board, item, elements)) {
             selectedGroups.push(item);
         }
     });
     return selectedGroups;
 };
-const getHighestSelectedGroup = (board, element) => {
-    const groups = getGroupByElement(board, element, true);
-    const selectedGroups = getSelectedGroups(board, groups);
+const getSelectedGroups = (board, elements) => {
+    const highestSelectedGroups = getHighestSelectedGroups(board, elements);
+    const groups = [];
+    highestSelectedGroups.forEach(item => {
+        groups.push(item);
+        const elementsInGroup = getElementsInGroup(board, item, true, true);
+        groups.push(...elementsInGroup.filter(item => PlaitGroupElement.isGroup(item)));
+    });
+    return groups;
+};
+const getHighestSelectedGroup = (board, element, elements) => {
+    const hitElementGroups = getGroupByElement(board, element, true, elements);
+    const selectedGroups = filterSelectedGroups(board, hitElementGroups, elements);
     if (selectedGroups.length) {
         return selectedGroups[selectedGroups.length - 1];
     }
     return null;
 };
-const getHighestSelectedGroups = (board) => {
+const getHighestSelectedGroups = (board, elements) => {
     let result = [];
-    const selectedElements = getSelectedElements(board);
+    const selectedElements = elements || getSelectedElements(board);
     selectedElements.forEach(item => {
         if (item.groupId) {
-            const group = getHighestSelectedGroup(board, item);
+            const group = getHighestSelectedGroup(board, item, elements);
             if (group && !result.includes(group)) {
                 result.push(group);
             }
@@ -2793,15 +3077,17 @@ const getHighestSelectedGroups = (board) => {
     });
     return result;
 };
-const getSelectedIsolatedElements = (board) => {
+const getSelectedIsolatedElements = (board, elements) => {
     let result = [];
-    const selectedElements = getSelectedElements(board);
-    selectedElements.forEach(item => {
+    const selectedElements = elements || getSelectedElements(board);
+    selectedElements
+        .filter(item => !PlaitGroupElement.isGroup(item))
+        .forEach(item => {
         if (!item.groupId) {
             result.push(item);
         }
         else {
-            const group = getHighestSelectedGroup(board, item);
+            const group = getHighestSelectedGroup(board, item, elements);
             if (!group) {
                 result.push(item);
             }
@@ -2809,8 +3095,12 @@ const getSelectedIsolatedElements = (board) => {
     });
     return result;
 };
-const getHighestSelectedElements = (board) => {
-    return [...getHighestSelectedGroups(board), ...getSelectedIsolatedElements(board)];
+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);
@@ -2821,20 +3111,31 @@ const createGroupRectangleG = (board, elements) => {
         if (item.groupId && isRender) {
             const elements = getElementsInGroupByElement(board, item);
             const rectangle = getRectangleByElements(board, elements, false);
-            groupRectangleG.append(drawRectangle(board, rectangle, {
+            const rectangleG = drawRectangle(board, rectangle, {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH,
                 strokeLineDash: [5]
-            }));
+            });
+            const angle = getSelectionAngle(elements);
+            if (angle) {
+                setAngleForG(rectangleG, RectangleClient.getCenterPoint(rectangle), angle);
+            }
+            groupRectangleG.append(rectangleG);
         }
     });
     return groupRectangleG;
 };
-const createGroup = () => {
-    return {
-        id: idCreator(),
-        type: 'group'
-    };
+const createGroup = (groupId) => {
+    return groupId
+        ? {
+            id: idCreator(),
+            type: 'group',
+            groupId
+        }
+        : {
+            id: idCreator(),
+            type: 'group'
+        };
 };
 const nonGroupInHighestSelectedElements = (elements) => {
     return elements.every(item => !item.groupId);
@@ -2842,54 +3143,23 @@ const nonGroupInHighestSelectedElements = (elements) => {
 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);
+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 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]);
-        }
-        else {
-            Transforms.insertNode(board, group, [board.children.length]);
-        }
-    }
-};
-const canRemoveGroup = (board, selectedGroups) => {
-    const selectedElements = getSelectedElements(board);
+const canRemoveGroup = (board, elements) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    const selectedElements = elements || 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);
-        });
-    }
+
+const deleteFragment = (board) => {
+    const elements = board.getDeletedFragment([]);
+    board.deleteFragment(elements);
 };
 
 const PlaitElement = {
@@ -3080,12 +3350,20 @@ var Direction;
     Direction["bottom"] = "bottom";
 })(Direction || (Direction = {}));
 
+const PlaitGroupElement = {
+    isGroup: (value) => {
+        return value.type === 'group';
+    }
+};
+
 function getRectangleByElements(board, elements, recursion) {
-    const rectangles = [];
+    const rectanglesCornerPoints = [];
     const callback = (node) => {
         const nodeRectangle = board.getRectangle(node);
         if (nodeRectangle) {
-            rectangles.push(nodeRectangle);
+            const cornerPoints = RectangleClient.getCornerPoints(nodeRectangle);
+            const rotatedCornerPoints = rotatePointsByElement(cornerPoints, node) || cornerPoints;
+            rectanglesCornerPoints.push(rotatedCornerPoints);
         }
         else {
             console.error(`can not get rectangle of element:`, node);
@@ -3099,8 +3377,17 @@ function getRectangleByElements(board, elements, recursion) {
             callback(element);
         }
     });
-    if (rectangles.length > 0) {
-        return RectangleClient.getBoundingRectangle(rectangles);
+    if (rectanglesCornerPoints.length > 0) {
+        if (hasSameAngle(elements)) {
+            const angle = getSelectionAngle(elements);
+            return getRotatedBoundingRectangle(rectanglesCornerPoints, angle);
+        }
+        else {
+            const flatCornerPoints = rectanglesCornerPoints.reduce((acc, val) => {
+                return acc.concat(val);
+            }, []);
+            return RectangleClient.getRectangleByPoints(flatCornerPoints);
+        }
     }
     else {
         return {
@@ -3149,6 +3436,10 @@ const PlaitBoard = {
         IS_BOARD_CACHE.set(value, isBoard);
         return isBoard;
     },
+    isAlive(board) {
+        const isAlive = IS_BOARD_CACHE.get(board);
+        return !!isAlive;
+    },
     findPath(board, node) {
         const path = [];
         let child = node;
@@ -3311,6 +3602,9 @@ function createBoard(children, options) {
         },
         onChange: () => { },
         afterChange: () => { },
+        drawActiveRectangle: () => {
+            return drawEntireActiveRectangleG(board);
+        },
         mousedown: (event) => { },
         mousemove: (event) => { },
         mouseleave: (event) => { },
@@ -3325,12 +3619,11 @@ function createBoard(children, options) {
             setClipboardData(data, clipboardContext);
         },
         insertFragment: (data) => { },
-        deleteFragment: (data) => {
-            const elements = board.getDeletedFragment([]);
+        deleteFragment: (elements) => {
             CoreTransforms.removeElements(board, elements);
         },
         getDeletedFragment: (data) => data,
-        getRelatedFragment: (data) => data,
+        getRelatedFragment: (data, originData) => data,
         drawElement: (context) => [],
         redrawElement: (context, previousContext) => { },
         destroyElement: (context) => { },
@@ -3351,7 +3644,8 @@ function createBoard(children, options) {
         pointerLeave: pointer => { },
         globalPointerMove: pointer => { },
         globalPointerUp: pointer => { },
-        isImageBindingAllowed: (element) => false
+        isImageBindingAllowed: (element) => false,
+        canAddToGroup: (element) => true
     };
     return board;
 }
@@ -3514,7 +3808,7 @@ function withHandPointer(board) {
 }
 
 function withSelection(board) {
-    const { pointerDown, pointerUp, pointerMove, globalPointerUp, onChange, afterChange } = board;
+    const { pointerDown, pointerUp, pointerMove, globalPointerUp, onChange, afterChange, drawActiveRectangle } = board;
     let start = null;
     let end = null;
     let selectionMovingG;
@@ -3628,112 +3922,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;
@@ -3741,7 +3969,8 @@ function withSelection(board) {
                 if (!isSelectionMoving(board)) {
                     selectionRectangleG?.remove();
                     if (newElements.length > 1) {
-                        selectionRectangleG = createSelectionRectangleG(board);
+                        selectionRectangleG = board.drawActiveRectangle();
+                        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
                     }
                 }
             }
@@ -3760,7 +3989,8 @@ function withSelection(board) {
                         (currentSelectedElements.length !== previousSelectedElements.length ||
                             currentSelectedElements.some((c, index) => c !== previousSelectedElements[index]))) {
                         selectionRectangleG?.remove();
-                        selectionRectangleG = createSelectionRectangleG(board);
+                        selectionRectangleG = board.drawActiveRectangle();
+                        PlaitBoard.getElementActiveHost(board).append(selectionRectangleG);
                         previousSelectedElements = currentSelectedElements;
                     }
                 }
@@ -3809,8 +4039,8 @@ function withViewport(board) {
     return board;
 }
 
-const ALIGN_TOLERANCE = 2;
-class AlignReaction {
+const SNAP_TOLERANCE = 2;
+class MovingSnapReaction {
     constructor(board, activeElements, activeRectangle) {
         this.board = board;
         this.activeElements = activeElements;
@@ -3824,7 +4054,7 @@ class AlignReaction {
                 return;
             }
             const rectangle = this.board.getRectangle(node);
-            rectangle && result.push(rectangle);
+            rectangle && result.push(getRectangleByAngle(rectangle, node.angle) || rectangle);
         }, node => {
             if (node && (PlaitBoard.isBoard(node) || this.board.isRecursion(node))) {
                 return true;
@@ -3835,7 +4065,7 @@ class AlignReaction {
         }, true);
         return result;
     }
-    handleAlign() {
+    handleSnapping() {
         const alignRectangles = this.getAlignRectangle();
         const g = createG();
         let alignLines = [];
@@ -3847,7 +4077,7 @@ class AlignReaction {
         for (let alignRectangle of alignRectangles) {
             const closestDistances = this.calculateClosestDistances(this.activeRectangle, alignRectangle);
             let canDrawHorizontal = false;
-            if (!isCorrectX && closestDistances.absXDistance < ALIGN_TOLERANCE) {
+            if (!isCorrectX && closestDistances.absXDistance < SNAP_TOLERANCE) {
                 deltaX = closestDistances.xDistance;
                 this.activeRectangle.x -= deltaX;
                 isCorrectX = true;
@@ -3897,7 +4127,7 @@ class AlignReaction {
                 isCorrectX = true;
             }
             let canDrawVertical = false;
-            if (!isCorrectY && closestDistances.absYDistance < ALIGN_TOLERANCE) {
+            if (!isCorrectY && closestDistances.absYDistance < SNAP_TOLERANCE) {
                 deltaY = closestDistances.yDistance;
                 this.activeRectangle.y -= deltaY;
                 isCorrectY = true;
@@ -4044,7 +4274,7 @@ class AlignReaction {
                 //middle
                 let _center = (before[axis] + before[side] + after[axis]) / 2;
                 dif = Math.abs(activeRectangleCenter - _center);
-                if (dif < ALIGN_TOLERANCE) {
+                if (dif < SNAP_TOLERANCE) {
                     distributeDistance = (after[axis] - (before[axis] + before[side]) - this.activeRectangle[side]) / 2;
                     delta = activeRectangleCenter - _center;
                     beforeIndex = i;
@@ -4054,7 +4284,7 @@ class AlignReaction {
                 const distanceRight = after[axis] - (before[axis] + before[side]);
                 _center = after[axis] + after[side] + distanceRight + this.activeRectangle[side] / 2;
                 dif = Math.abs(activeRectangleCenter - _center);
-                if (!distributeDistance && dif < ALIGN_TOLERANCE) {
+                if (!distributeDistance && dif < SNAP_TOLERANCE) {
                     distributeDistance = distanceRight;
                     beforeIndex = j;
                     delta = activeRectangleCenter - _center;
@@ -4063,7 +4293,7 @@ class AlignReaction {
                 const distanceBefore = after[axis] - (before[axis] + before[side]);
                 _center = before[axis] - distanceBefore - this.activeRectangle[side] / 2;
                 dif = Math.abs(activeRectangleCenter - _center);
-                if (!distributeDistance && dif < ALIGN_TOLERANCE) {
+                if (!distributeDistance && dif < SNAP_TOLERANCE) {
                     distributeDistance = distanceBefore;
                     afterIndex = i;
                     delta = activeRectangleCenter - _center;
@@ -4185,6 +4415,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 +4427,32 @@ 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;
+            const relatedElements = board.getRelatedFragment([], [hitTargetElement]);
+            activeElements = [...getElementsInGroupByElement(board, hitTargetElement), ...relatedElements];
             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 +4468,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;
@@ -4236,8 +4483,8 @@ function withMoving(board) {
                         x: activeElementsRectangle.x + offsetX,
                         y: activeElementsRectangle.y + offsetY
                     };
-                    const reactionManager = new AlignReaction(board, activeElements, newRectangle);
-                    const ref = reactionManager.handleAlign();
+                    const movingSnapReaction = new MovingSnapReaction(board, activeElements, getRectangleByAngle(newRectangle, getSelectionAngle(activeElements)) || newRectangle);
+                    const ref = movingSnapReaction.handleSnapping();
                     offsetX -= ref.deltaX;
                     offsetY -= ref.deltaY;
                     alignG = ref.g;
@@ -4267,6 +4514,9 @@ function withMoving(board) {
     };
     board.globalPointerUp = event => {
         isPreventDefault = false;
+        hitTargetElement = undefined;
+        selectedTargetElements = null;
+        isHitSelectedTarget = undefined;
         if (startPoint) {
             cancelMove(board);
         }
@@ -4315,7 +4565,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 +4578,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 +4589,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]);
@@ -4463,7 +4713,7 @@ const withHotkey = (board) => {
             selectedElements.length > 0 &&
             (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
             event.preventDefault();
-            board.deleteFragment(null);
+            deleteFragment(board);
         }
         keyDown(event);
     };
@@ -4671,27 +4921,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;
 }
@@ -4769,6 +5013,7 @@ class PlaitBoardComponent {
         BOARD_TO_COMPONENT.set(this.board, this);
         BOARD_TO_ROUGH_SVG.set(this.board, roughSVG);
         BOARD_TO_HOST.set(this.board, this.host);
+        IS_BOARD_ALIVE.set(this.board, true);
         BOARD_TO_ELEMENT_HOST.set(this.board, {
             host: elementHost,
             upperHost: elementUpperHost,
@@ -4821,7 +5066,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);
         });
@@ -4942,7 +5187,7 @@ class PlaitBoardComponent {
             event.preventDefault();
             const rectangle = getRectangleByElements(this.board, selectedElements, false);
             this.board.setFragment(event.clipboardData, null, rectangle, 'cut');
-            this.board.deleteFragment(event.clipboardData);
+            deleteFragment(this.board);
         });
     }
     viewportScrollListener() {
@@ -5024,6 +5269,7 @@ class PlaitBoardComponent {
         BOARD_TO_ROUGH_SVG.delete(this.board);
         BOARD_TO_HOST.delete(this.board);
         BOARD_TO_ELEMENT_HOST.delete(this.board);
+        IS_BOARD_ALIVE.set(this.board, false);
         BOARD_TO_ON_CHANGE.delete(this.board);
         BOARD_TO_AFTER_CHANGE.set(this.board, () => { });
     }
@@ -5263,6 +5509,96 @@ 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' });
+        polygonG.classList.add(this.debugKey);
+        PlaitBoard.getElementActiveHost(board).append(polygonG);
+        const gArray = getTemporaryGArray(this.debugKey);
+        gArray.push(polygonG);
+        setTemporaryGArray(this.debugKey, gArray);
+        return polygonG;
+    }
+    drawLine(board, points, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        const lineG = PlaitBoard.getRoughSVG(board).linearPath(points, options || { stroke: 'red' });
+        lineG.classList.add(this.debugKey);
+        PlaitBoard.getElementActiveHost(board).append(lineG);
+        const gArray = getTemporaryGArray(this.debugKey);
+        gArray.push(lineG);
+        setTemporaryGArray(this.debugKey, gArray);
+        return lineG;
+    }
+    drawRectangle(board, data, options) {
+        if (!isDebug(this.debugKey)) {
+            return;
+        }
+        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' });
+        rectangleG.classList.add(this.debugKey);
+        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 || {}));
+            circle.classList.add(this.debugKey);
+            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 +5607,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_ALIVE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_DRAGGING, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_MAC, IS_SAFARI, IS_TEXT_EDITABLE, J, K, L, LAST_MEDIA, LEFT_ARROW, M, MAC_ENTER, MAC_META, MAC_WK_CMD_LEFT, MAC_WK_CMD_RIGHT, MAX_RADIUS, MERGING, META, MUTE, N, NINE, NODE_TO_INDEX, NODE_TO_PARENT, NS, NUMPAD_DIVIDE, NUMPAD_EIGHT, NUMPAD_FIVE, NUMPAD_FOUR, NUMPAD_MINUS, NUMPAD_MULTIPLY, NUMPAD_NINE, NUMPAD_ONE, NUMPAD_PERIOD, NUMPAD_PLUS, NUMPAD_SEVEN, NUMPAD_SIX, NUMPAD_THREE, NUMPAD_TWO, NUMPAD_ZERO, NUM_CENTER, NUM_LOCK, O, ONE, OPEN_SQUARE_BRACKET, P, PAGE_DOWN, PAGE_UP, PATH_REFS, PAUSE, PERIOD, PLUS_SIGN, POINTER_BUTTON, PRESS_AND_MOVE_BUFFER, PRINT_SCREEN, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElementComponent, PlaitContextService, PlaitElement, PlaitElementComponent, PlaitGroupElement, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitIslandPopoverBaseComponent, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, Q, QUESTION_MARK, R, RESIZE_CURSORS, RIGHT_ARROW, RectangleClient, ResizeCursorClass, RetroThemeColor, RgbaToHEX, S, SAVING, SCROLL_BAR_WIDTH, SCROLL_LOCK, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, SELECTION_RECTANGLE_CLASS_NAME, SEMICOLON, SEVEN, SHIFT, SINGLE_QUOTE, SIX, SLASH, SNAPPING_STROKE_WIDTH, SPACE, Selection, SoftThemeColor, StarryThemeColor, T, TAB, THREE, TILDE, TWO, ThemeColorMode, ThemeColors, Transforms, U, UP_ARROW, V, VOLUME_DOWN, VOLUME_UP, Viewport, W, WritableClipboardType, X, Y, Z, ZERO, addClipboardContext, addSelectedElement, approximately, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, cacheSelectedElementsWithGroup, cacheSelectedElementsWithGroupOnShift, calcNewViewBox, canAddGroup, canRemoveGroup, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createDebugGenerator, createFakeEvent, createForeignObject, createG, createGroup, createGroupRectangleG, createKeyboardEvent, createMask, createModModifierKeys, createMouseEvent, createPath, createPointerEvent, createRect, createSVG, createTestingBoard, createText, createTouchEvent, debounce, degreesToRadians, deleteFragment, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, distanceBetweenPointAndSegments, downloadImage, drawArrow, drawBezierPath, drawCircle, drawEntireActiveRectangleG, drawLine, drawLinearPath, drawRectangle, drawRoundRectangle, fakeNodeWeakMap, filterSelectedGroups, findElements, getAllElementsInGroup, getBoardRectangle, getClipboardData, getClipboardFromHtml, getDataTransferClipboard, getDataTransferClipboardText, getElementById, getElementHostBBox, getElementsInGroup, getElementsInGroupByElement, getEllipseTangentSlope, getGroupByElement, getHighestGroup, getHighestSelectedElements, getHighestSelectedGroup, getHighestSelectedGroups, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getOffsetAfterRotate, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByAngle, getRectangleByElements, getRectangleByGroup, getRotatedBoundingRectangle, getSelectedElements, getSelectedGroups, getSelectedIsolatedElements, getSelectedIsolatedElementsCanAddToGroup, getSelectedTargetElements, getSelectionAngle, getTemporaryElements, getTemporaryRef, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hasSameAngle, hasSelectedElementsInSameGroup, hasValidAngle, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isAxisChangedByAngle, isContextmenu, isDOMElement, isDOMNode, isDebug, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedAllElementsInGroup, isSelectedElement, isSelectedElementOrGroup, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, nonGroupInHighestSelectedElements, normalizePoint, preventTouchMove, radiansToDegrees, removeMovingElements, removeSelectedElement, rotate, rotateAntiPointsByElement, rotateElements, rotatePoints, rotatePointsByElement, rotatedDataPoints, scrollToRectangle, setAngleForG, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectedElementsWithGroup, setSelectionMoving, setStrokeLinecap, shouldClear, shouldMerge, shouldSave, stripHtml, temporaryDisableSelection, throttleRAF, toDomPrecision, toFixed, toHostPoint, toHostPointFromViewBoxPoint, toImage, toScreenPointFromHostPoint, toViewBoxPoint, toViewBoxPoints, uniqueById, updateForeignObject, updateForeignObjectWidth, updatePoints, updateViewportByScrolling, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withArrowMoving, withMoving, withOptions, withSelection };
 //# sourceMappingURL=plait-core.mjs.map