@plait/core 0.51.2 → 0.51.3

package/fesm2022/plait-core.mjs

@@ -535,9 +535,13 @@ function createRect(rectangle, options) {
 const setStrokeLinecap = (g, value) => {
     g.setAttribute('stroke-linecap', value);
 };
-const setTransformRotate = (g, rectangle, angle) => {
-    var centerX = rectangle.x + rectangle.width / 2;
-    var centerY = rectangle.y + rectangle.height / 2;
+const setAngleForG = (g, centerPoint, angle) => {
+    if (angle === 0) {
+        g.removeAttribute('transform');
+        return;
+    }
+    var centerX = centerPoint[0];
+    var centerY = centerPoint[1];
     let cosTheta = Math.cos(angle);
     let sinTheta = Math.sin(angle);
     let transformMatrix = [
@@ -670,10 +674,10 @@ class PlaitPluginElementComponent {
         removeSelectedElement(this.board, this.element);
         (this.rootG || this.g).remove();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{
                 type: Input
@@ -795,14 +799,19 @@ const isLineHitLine = (a, b, c, d) => {
     const cd = [d[0] - c[0], d[1] - c[1]];
     return crossProduct(ab, ac) * crossProduct(ab, ad) <= 0 && crossProduct(cd, ca) * crossProduct(cd, cb) <= 0;
 };
-const isPolylineHitRectangle = (points, rectangle) => {
+const isPolylineHitRectangle = (points, rectangle, isClose = true) => {
     const rectanglePoints = RectangleClient.getCornerPoints(rectangle);
-    for (let i = 1; i < points.length; i++) {
-        const isIntersect = isLineHitLine(points[i], points[i - 1], rectanglePoints[0], rectanglePoints[1]) ||
-            isLineHitLine(points[i], points[i - 1], rectanglePoints[1], rectanglePoints[2]) ||
-            isLineHitLine(points[i], points[i - 1], rectanglePoints[2], rectanglePoints[3]) ||
-            isLineHitLine(points[i], points[i - 1], rectanglePoints[3], rectanglePoints[0]);
-        if (isIntersect) {
+    const len = points.length;
+    for (let i = 0; i < len; i++) {
+        if (i === len - 1 && !isClose)
+            continue;
+        const p1 = points[i];
+        const p2 = points[(i + 1) % len];
+        const isHit = isLineHitLine(p1, p2, rectanglePoints[0], rectanglePoints[1]) ||
+            isLineHitLine(p1, p2, rectanglePoints[1], rectanglePoints[2]) ||
+            isLineHitLine(p1, p2, rectanglePoints[2], rectanglePoints[3]) ||
+            isLineHitLine(p1, p2, rectanglePoints[3], rectanglePoints[0]);
+        if (isHit || isPointInPolygon(p1, rectanglePoints) || isPointInPolygon(p2, rectanglePoints)) {
             return true;
         }
     }
@@ -2171,18 +2180,15 @@ const handleTouchTarget = (board) => {
     }
 };
 
-const PlaitElement = {
-    isRootElement(value) {
-        const parent = NODE_TO_PARENT.get(value);
-        if (parent && PlaitBoard.isBoard(parent)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    getComponent(value) {
-        return ELEMENT_TO_COMPONENT.get(value);
+const PlaitGroupElement = {
+    isGroup: (value) => {
+        return value.type === 'group';
+    }
+};
+
+const Viewport = {
+    isViewport: (value) => {
+        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
     }
 };
 
@@ -2408,803 +2414,823 @@ const PlaitNode = {
     }
 };
 
-const isSetViewportOperation = (value) => {
-    return value.type === 'set_viewport';
-};
-const inverse = (op) => {
+const applyToDraft = (board, selection, viewport, theme, op) => {
     switch (op.type) {
         case 'insert_node': {
-            return { ...op, type: 'remove_node' };
+            const { path, node } = op;
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            if (!parent.children || index > parent.children.length) {
+                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+            }
+            parent.children.splice(index, 0, node);
+            break;
         }
         case 'remove_node': {
-            return { ...op, type: 'insert_node' };
+            const { path } = op;
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            if (!parent.children || index > parent.children.length) {
+                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+            }
+            parent.children.splice(index, 1);
+            break;
         }
         case 'move_node': {
-            const { newPath, path } = op;
-            // PERF: in this case the move operation is a no-op anyways.
-            if (Path.equals(newPath, path)) {
-                return op;
+            const { path, newPath } = op;
+            if (Path.isAncestor(path, newPath)) {
+                throw new Error(`Cannot move a path [${path}] to new path [${newPath}] because the destination is inside itself.`);
             }
-            // when operation path is [0,0] -> [0,2], should exec Path.transform to get [0,1] -> [0,0]
-            // shoud not return [0,2] -> [0,0] #WIK-8981
-            // if (Path.isSibling(path, newPath)) {
-            //     return { ...op, path: newPath, newPath: path };
-            // }
-            // If the move does not happen within a single parent it is possible
-            // for the move to impact the true path to the location where the node
-            // was removed from and where it was inserted. We have to adjust for this
-            // and find the original path. We can accomplish this (only in non-sibling)
-            // moves by looking at the impact of the move operation on the node
-            // after the original move path.
-            const inversePath = Path.transform(path, op);
-            const inverseNewPath = Path.transform(Path.next(path), op);
-            return { ...op, path: inversePath, newPath: inverseNewPath };
+            const node = PlaitNode.get(board, path);
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            // This is tricky, but since the `path` and `newPath` both refer to
+            // the same snapshot in time, there's a mismatch. After either
+            // removing the original position, the second step's path can be out
+            // of date. So instead of using the `op.newPath` directly, we
+            // transform `op.path` to ascertain what the `newPath` would be after
+            // the operation was applied.
+            parent.children?.splice(index, 1);
+            const truePath = Path.transform(path, op);
+            const newParent = PlaitNode.get(board, Path.parent(truePath));
+            const newIndex = truePath[truePath.length - 1];
+            newParent.children?.splice(newIndex, 0, node);
+            break;
         }
         case 'set_node': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
-        }
-        case 'set_selection': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: null
-                };
+            const { path, properties, newProperties } = op;
+            if (path.length === 0) {
+                throw new Error(`Cannot set properties on the root node!`);
             }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: null,
-                    newProperties: properties
-                };
+            const node = PlaitNode.get(board, path);
+            for (const key in newProperties) {
+                const value = newProperties[key];
+                if (value == null) {
+                    delete node[key];
+                }
+                else {
+                    node[key] = value;
+                }
             }
-            else {
-                return { ...op, properties: newProperties, newProperties: properties };
+            // properties that were previously defined, but are now missing, must be deleted
+            for (const key in properties) {
+                if (!newProperties.hasOwnProperty(key)) {
+                    delete node[key];
+                }
             }
+            break;
         }
         case 'set_viewport': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: newProperties
-                };
+            const { newProperties } = op;
+            if (newProperties == null) {
+                viewport = newProperties;
             }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: properties,
-                    newProperties: properties
-                };
+            else {
+                if (viewport == null) {
+                    if (!Viewport.isViewport(newProperties)) {
+                        throw new Error(`Cannot apply an incomplete "set_viewport" operation properties ${JSON.stringify(newProperties)} when there is no current viewport.`);
+                    }
+                    viewport = { ...newProperties };
+                }
+                for (const key in newProperties) {
+                    const value = newProperties[key];
+                    if (value == null) {
+                        delete viewport[key];
+                    }
+                    else {
+                        viewport[key] = value;
+                    }
+                }
+            }
+            break;
+        }
+        case 'set_selection': {
+            const { newProperties } = op;
+            if (newProperties == null) {
+                selection = newProperties;
             }
             else {
-                return { ...op, properties: newProperties, newProperties: properties };
+                if (selection === null) {
+                    selection = op.newProperties;
+                }
+                else {
+                    selection = newProperties;
+                }
             }
+            break;
         }
         case 'set_theme': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
+            const { newProperties } = op;
+            theme = newProperties;
+            break;
         }
     }
+    return { selection, viewport, theme };
 };
-const PlaitOperation = {
-    isSetViewportOperation,
-    inverse
-};
-
-const Point = {
-    isEquals(point, otherPoint) {
-        return point && otherPoint && point[0] === otherPoint[0] && point[1] === otherPoint[1];
-    },
-    isHorizontal(point, otherPoint, tolerance = 0) {
-        return point && otherPoint && Point.isOverHorizontal([point, otherPoint], tolerance);
-    },
-    isOverHorizontal(points, tolerance = 0) {
-        return points.every(point => Math.abs(point[1] - points[0][1]) <= tolerance);
-    },
-    isVertical(point, otherPoint, tolerance = 0) {
-        return point && otherPoint && Point.isOverVertical([point, otherPoint], tolerance);
-    },
-    isOverVertical(points, tolerance = 0) {
-        return points.every(point => Math.abs(point[0] - points[0][0]) <= tolerance);
-    },
-    isAlign(points, tolerance = 0) {
-        return Point.isOverHorizontal(points, tolerance) || Point.isOverVertical(points, tolerance);
-    },
-    getOffsetX(point1, point2) {
-        return point2[0] - point1[0];
-    },
-    getOffsetY(point1, point2) {
-        return point2[1] - point1[1];
+const GeneralTransforms = {
+    /**
+     * Transform the board by an operation.
+     */
+    transform(board, op) {
+        board.children = createDraft(board.children);
+        let viewport = board.viewport && createDraft(board.viewport);
+        let selection = board.selection && createDraft(board.selection);
+        let theme = board.theme && createDraft(board.theme);
+        try {
+            const state = applyToDraft(board, selection, viewport, theme, op);
+            viewport = state.viewport;
+            selection = state.selection;
+            theme = state.theme;
+        }
+        finally {
+            board.children = finishDraft(board.children);
+            if (selection) {
+                board.selection = isDraft(selection) ? finishDraft(selection) : selection;
+            }
+            else {
+                board.selection = null;
+            }
+            board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
+            board.theme = isDraft(theme) ? finishDraft(theme) : theme;
+        }
     }
 };
 
-const Viewport = {
-    isViewport: (value) => {
-        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor);
+function insertNode(board, node, path) {
+    const operation = { type: 'insert_node', node, path };
+    board.apply(operation);
+}
+function setNode(board, props, path) {
+    const properties = {};
+    const newProperties = {};
+    const node = PlaitNode.get(board, path);
+    for (const k in props) {
+        if (node[k] !== props[k]) {
+            if (node.hasOwnProperty(k)) {
+                properties[k] = node[k];
+            }
+            if (props[k] != null)
+                newProperties[k] = props[k];
+        }
     }
+    const operation = { type: 'set_node', properties, newProperties, path };
+    board.apply(operation);
+}
+function removeNode(board, path) {
+    const node = PlaitNode.get(board, path);
+    const operation = { type: 'remove_node', path, node };
+    board.apply(operation);
+}
+function moveNode(board, path, newPath) {
+    const operation = { type: 'move_node', path, newPath };
+    board.apply(operation);
+}
+const NodeTransforms = {
+    insertNode,
+    setNode,
+    removeNode,
+    moveNode
 };
-
-const SAVING = new WeakMap();
-const MERGING = new WeakMap();
-
-var ThemeColorMode;
-(function (ThemeColorMode) {
-    ThemeColorMode["default"] = "default";
-    ThemeColorMode["colorful"] = "colorful";
-    ThemeColorMode["soft"] = "soft";
-    ThemeColorMode["retro"] = "retro";
-    ThemeColorMode["dark"] = "dark";
-    ThemeColorMode["starry"] = "starry";
-})(ThemeColorMode || (ThemeColorMode = {}));
-const DefaultThemeColor = {
-    mode: ThemeColorMode.default,
-    boardBackground: '#ffffff',
-    textColor: '#333333'
-};
-const ColorfulThemeColor = {
-    mode: ThemeColorMode.colorful,
-    boardBackground: '#ffffff',
-    textColor: '#333333'
-};
-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 = {}));
+const Transforms = {
+    ...GeneralTransforms,
+    ...ViewportTransforms$1,
+    ...SelectionTransforms,
+    ...NodeTransforms
+};
 
-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));
-        }
-        else {
-            callback(element);
-        }
-    });
-    if (rectangles.length > 0) {
-        return RectangleClient.getBoundingRectangle(rectangles);
+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 {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0
-        };
+        return undefined;
     }
 }
-function getBoardRectangle(board) {
-    return getRectangleByElements(board, board.children, true);
+function getTemporaryRef(board) {
+    return BOARD_TO_TEMPORARY_ELEMENTS.get(board);
 }
-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 deleteTemporaryElements(board) {
+    BOARD_TO_TEMPORARY_ELEMENTS.delete(board);
 }
-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;
+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;
+    }
+    return null;
 }
 
-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 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 i = NODE_TO_INDEX.get(child);
-            if (i == null) {
-                break;
+            else {
+                result.push(item);
             }
-            path.unshift(i);
-            child = parent;
+        });
+    }
+    else {
+        result = includeGroup ? elements : elements.filter(item => !PlaitGroupElement.isGroup(item));
+    }
+    return result;
+};
+const getRectangleByGroup = (board, group, recursion) => {
+    const elementsInGroup = getElementsInGroup(board, group, recursion);
+    return getRectangleByElements(board, elementsInGroup, false);
+};
+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);
         }
-        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 groups;
+    }
+    else {
+        return group;
+    }
+};
+const getHighestGroup = (board, element) => {
+    const groups = getGroupByElement(board, element, true);
+    if (groups.length) {
+        return groups[groups.length - 1];
+    }
+    return null;
+};
+const getElementsInGroupByElement = (board, element) => {
+    const highestGroup = getHighestGroup(board, element);
+    if (highestGroup) {
+        return getElementsInGroup(board, highestGroup, true);
+    }
+    else {
+        return [element];
+    }
+};
+const isSelectedElementOrGroup = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    if (PlaitGroupElement.isGroup(element)) {
+        return isSelectedAllElementsInGroup(board, element);
+    }
+    return selectedElements.includes(element);
+};
+const isSelectedAllElementsInGroup = (board, group) => {
+    const selectedElements = getSelectedElements(board);
+    const elementsInGroup = getElementsInGroup(board, group, true);
+    return elementsInGroup.every(item => selectedElements.includes(item));
+};
+const getSelectedGroups = (board, groups) => {
+    const selectedGroups = [];
+    groups.forEach(item => {
+        if (isSelectedElementOrGroup(board, item)) {
+            selectedGroups.push(item);
+        }
+    });
+    return selectedGroups;
+};
+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 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 getSelectedIsolatedElements = (board) => {
+    let result = [];
+    const selectedElements = getSelectedElements(board);
+    selectedElements.forEach(item => {
+        if (!item.groupId) {
+            result.push(item);
+        }
+        else {
+            const group = getHighestSelectedGroup(board, item);
+            if (!group) {
+                result.push(item);
+            }
+        }
+    });
+    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]
+            }));
+        }
+    });
+    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]);
+        }
+        else {
+            Transforms.insertNode(board, group, [board.children.length]);
+        }
+    }
+};
+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);
+        });
+    }
+};
+
+const PlaitElement = {
+    isRootElement(value) {
+        const parent = NODE_TO_PARENT.get(value);
+        if (parent && PlaitBoard.isBoard(parent)) {
             return true;
         }
-        return false;
+        else {
+            return false;
+        }
     },
-    getThemeColors(board) {
-        return (board.options.themeColors || ThemeColors);
+    getComponent(value) {
+        return ELEMENT_TO_COMPONENT.get(value);
     }
 };
 
-const applyToDraft = (board, selection, viewport, theme, op) => {
+const isSetViewportOperation = (value) => {
+    return value.type === 'set_viewport';
+};
+const inverse = (op) => {
     switch (op.type) {
         case 'insert_node': {
-            const { path, node } = op;
-            const parent = PlaitNode.parent(board, path);
-            const index = path[path.length - 1];
-            if (!parent.children || index > parent.children.length) {
-                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
-            }
-            parent.children.splice(index, 0, node);
-            break;
+            return { ...op, type: 'remove_node' };
         }
         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 { ...op, type: 'insert_node' };
         }
         case 'move_node': {
-            const { path, newPath } = op;
-            if (Path.isAncestor(path, newPath)) {
-                throw new Error(`Cannot move a path [${path}] to new path [${newPath}] because the destination is inside itself.`);
+            const { newPath, path } = op;
+            // PERF: in this case the move operation is a no-op anyways.
+            if (Path.equals(newPath, path)) {
+                return op;
             }
-            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;
+            // when operation path is [0,0] -> [0,2], should exec Path.transform to get [0,1] -> [0,0]
+            // shoud not return [0,2] -> [0,0] #WIK-8981
+            // if (Path.isSibling(path, newPath)) {
+            //     return { ...op, path: newPath, newPath: path };
+            // }
+            // If the move does not happen within a single parent it is possible
+            // for the move to impact the true path to the location where the node
+            // was removed from and where it was inserted. We have to adjust for this
+            // and find the original path. We can accomplish this (only in non-sibling)
+            // moves by looking at the impact of the move operation on the node
+            // after the original move path.
+            const inversePath = Path.transform(path, op);
+            const inverseNewPath = Path.transform(Path.next(path), op);
+            return { ...op, path: inversePath, newPath: inverseNewPath };
         }
         case 'set_node': {
-            const { path, properties, newProperties } = op;
-            if (path.length === 0) {
-                throw new Error(`Cannot set properties on the root node!`);
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
+        }
+        case 'set_selection': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: null
+                };
             }
-            const node = PlaitNode.get(board, path);
-            for (const key in newProperties) {
-                const value = newProperties[key];
-                if (value == null) {
-                    delete node[key];
-                }
-                else {
-                    node[key] = value;
-                }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: null,
+                    newProperties: properties
+                };
             }
-            // properties that were previously defined, but are now missing, must be deleted
-            for (const key in properties) {
-                if (!newProperties.hasOwnProperty(key)) {
-                    delete node[key];
-                }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
             }
-            break;
         }
         case 'set_viewport': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                viewport = newProperties;
-            }
-            else {
-                if (viewport == null) {
-                    if (!Viewport.isViewport(newProperties)) {
-                        throw new Error(`Cannot apply an incomplete "set_viewport" operation properties ${JSON.stringify(newProperties)} when there is no current viewport.`);
-                    }
-                    viewport = { ...newProperties };
-                }
-                for (const key in newProperties) {
-                    const value = newProperties[key];
-                    if (value == null) {
-                        delete viewport[key];
-                    }
-                    else {
-                        viewport[key] = value;
-                    }
-                }
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: newProperties
+                };
             }
-            break;
-        }
-        case 'set_selection': {
-            const { newProperties } = op;
-            if (newProperties == null) {
-                selection = newProperties;
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: properties,
+                    newProperties: properties
+                };
             }
             else {
-                if (selection === null) {
-                    selection = op.newProperties;
-                }
-                else {
-                    selection = newProperties;
-                }
+                return { ...op, properties: newProperties, newProperties: properties };
             }
-            break;
         }
         case 'set_theme': {
-            const { newProperties } = op;
-            theme = newProperties;
-            break;
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
         }
     }
-    return { selection, viewport, theme };
 };
-const GeneralTransforms = {
-    /**
-     * Transform the board by an operation.
-     */
-    transform(board, op) {
-        board.children = createDraft(board.children);
-        let viewport = board.viewport && createDraft(board.viewport);
-        let selection = board.selection && createDraft(board.selection);
-        let theme = board.theme && createDraft(board.theme);
-        try {
-            const state = applyToDraft(board, selection, viewport, theme, op);
-            viewport = state.viewport;
-            selection = state.selection;
-            theme = state.theme;
-        }
-        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 PlaitOperation = {
+    isSetViewportOperation,
+    inverse
 };
 
-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 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 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 withSelection(board) {
-    const { pointerDown, pointerUp, pointerMove, globalPointerUp, onChange, afterChange } = board;
-    let start = null;
-    let end = null;
-    let selectionMovingG;
-    let selectionRectangleG;
-    let previousSelectedElements;
-    let isShift = false;
-    let isTextSelection = false;
-    board.pointerDown = (event) => {
-        if (!isShift && event.shiftKey) {
-            isShift = true;
-        }
-        if (isShift && !event.shiftKey) {
-            isShift = false;
-        }
-        const isHitText = !!(event.target instanceof Element && event.target.closest('.plait-richtext-container'));
-        isTextSelection = isHitText && PlaitBoard.hasBeenTextEditing(board);
-        // prevent text from being selected
-        if (event.shiftKey && !isTextSelection) {
-            event.preventDefault();
+const SAVING = new WeakMap();
+const MERGING = new WeakMap();
+
+var ThemeColorMode;
+(function (ThemeColorMode) {
+    ThemeColorMode["default"] = "default";
+    ThemeColorMode["colorful"] = "colorful";
+    ThemeColorMode["soft"] = "soft";
+    ThemeColorMode["retro"] = "retro";
+    ThemeColorMode["dark"] = "dark";
+    ThemeColorMode["starry"] = "starry";
+})(ThemeColorMode || (ThemeColorMode = {}));
+const DefaultThemeColor = {
+    mode: ThemeColorMode.default,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
+};
+const ColorfulThemeColor = {
+    mode: ThemeColorMode.colorful,
+    boardBackground: '#ffffff',
+    textColor: '#333333'
+};
+const SoftThemeColor = {
+    mode: ThemeColorMode.soft,
+    boardBackground: '#f5f5f5',
+    textColor: '#333333'
+};
+const RetroThemeColor = {
+    mode: ThemeColorMode.retro,
+    boardBackground: '#f9f8ed',
+    textColor: '#333333'
+};
+const DarkThemeColor = {
+    mode: ThemeColorMode.dark,
+    boardBackground: '#141414',
+    textColor: '#FFFFFF'
+};
+const StarryThemeColor = {
+    mode: ThemeColorMode.starry,
+    boardBackground: '#0d2537',
+    textColor: '#FFFFFF'
+};
+const ThemeColors = [
+    DefaultThemeColor,
+    ColorfulThemeColor,
+    SoftThemeColor,
+    RetroThemeColor,
+    DarkThemeColor,
+    StarryThemeColor
+];
+
+var Direction;
+(function (Direction) {
+    Direction["left"] = "left";
+    Direction["top"] = "top";
+    Direction["right"] = "right";
+    Direction["bottom"] = "bottom";
+})(Direction || (Direction = {}));
+
+function getRectangleByElements(board, elements, recursion) {
+    const rectangles = [];
+    const callback = (node) => {
+        const nodeRectangle = board.getRectangle(node);
+        if (nodeRectangle) {
+            rectangles.push(nodeRectangle);
         }
-        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const selectedElements = getSelectedElements(board);
-        const hitElement = getHitElementByPoint(board, point);
-        const hitSelectedElements = selectedElements.length > 1 ? getHitSelectedElements(board, point) : [];
-        const isHitTarget = hitElement || hitSelectedElements.length > 0;
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && !isHitTarget && options.isMultiple && !options.isDisabledSelect) {
-            preventTouchMove(board, event, true);
-            // start rectangle selection
-            start = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        else {
+            console.error(`can not get rectangle of element:`, node);
         }
-        pointerDown(event);
     };
-    board.pointerMove = (event) => {
-        if (!isTextSelection) {
-            // prevent text from being selected
-            event.preventDefault();
-        }
-        if (start && PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
-            const movedTarget = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const rectangle = RectangleClient.getRectangleByPoints([start, movedTarget]);
-            selectionMovingG?.remove();
-            if (Math.hypot(rectangle.width, rectangle.height) > PRESS_AND_MOVE_BUFFER || isSelectionMoving(board)) {
-                end = movedTarget;
-                throttleRAF(board, 'with-selection', () => {
-                    if (start && end) {
-                        Transforms.setSelection(board, { anchor: start, focus: end });
-                    }
-                });
-                setSelectionMoving(board);
-                selectionMovingG = drawRectangle(board, rectangle, {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: 1,
-                    fill: SELECTION_FILL_COLOR,
-                    fillStyle: 'solid'
-                });
-                PlaitBoard.getElementActiveHost(board).append(selectionMovingG);
-            }
+    elements.forEach(element => {
+        if (recursion) {
+            depthFirstRecursion(element, node => callback(node), node => board.isRecursion(node));
         }
-        pointerMove(event);
-    };
-    // handle the end of click select
-    board.pointerUp = (event) => {
-        const isSetSelectionPointer = PlaitBoard.isPointer(board, PlaitPointerType.selection) || PlaitBoard.isPointer(board, PlaitPointerType.hand);
-        const isSkip = !isMainPointer(event) || isDragging(board) || !isSetSelectionPointer;
-        if (isSkip) {
-            pointerUp(event);
-            return;
+        else {
+            callback(element);
         }
-        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const selection = { anchor: point, focus: point };
-        Transforms.setSelection(board, selection);
-        pointerUp(event);
-    };
-    board.globalPointerUp = (event) => {
-        if (start && end) {
-            selectionMovingG?.remove();
-            clearSelectionMoving(board);
-            Transforms.setSelection(board, { anchor: start, focus: end });
+    });
+    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 });
+    }
+    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);
         }
-        if (PlaitBoard.isFocus(board)) {
-            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
-            const isInDocument = event.target instanceof Node && document.contains(event.target);
-            const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
-            // Clear selection when mouse board outside area
-            // The framework needs to determine whether the board is focused through selection
-            if (!isInBoard && !start && !isAttachedElement && isInDocument) {
-                Transforms.setSelection(board, null);
-            }
+    }, (value) => {
+        if (PlaitBoard.isBoard(value)) {
+            return true;
         }
-        start = null;
-        end = null;
-        isTextSelection = false;
-        preventTouchMove(board, event, false);
-        globalPointerUp(event);
-    };
-    board.onChange = () => {
-        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
-        if (options.isDisabledSelect) {
-            clearSelectedElement(board);
+        else {
+            return getIsRecursionFunc(board)(value) && options.recursion(value);
         }
-        // remove selected element if include
-        board.operations.forEach(op => {
-            if (op.type === 'remove_node') {
-                removeSelectedElement(board, op.node, true);
-            }
-        });
-        if (isHandleSelection(board) && isSetSelectionOperation(board)) {
-            try {
-                if (!isShift) {
-                    selectionRectangleG?.remove();
-                }
-                const temporaryElements = getTemporaryElements(board);
-                let elements = temporaryElements ? temporaryElements : getHitElementsBySelection(board);
-                if (!options.isMultiple && elements.length > 1) {
-                    elements = [elements[0]];
-                }
-                if (isShift) {
-                    if (board.selection && Selection.isCollapsed(board.selection)) {
-                        const newSelectedElements = [...getSelectedElements(board)];
-                        elements.forEach(element => {
-                            if (newSelectedElements.includes(element)) {
-                                newSelectedElements.splice(newSelectedElements.indexOf(element), 1);
-                            }
-                            else {
-                                newSelectedElements.push(element);
-                            }
-                        });
-                        cacheSelectedElements(board, newSelectedElements);
-                    }
-                    else {
-                        const newSelectedElements = [...getSelectedElements(board)];
-                        elements.forEach(element => {
-                            if (!newSelectedElements.includes(element)) {
-                                newSelectedElements.push(element);
-                            }
-                        });
-                        cacheSelectedElements(board, newSelectedElements);
-                    }
-                }
-                else {
-                    const newSelectedElements = [...elements];
-                    cacheSelectedElements(board, newSelectedElements);
-                }
-                const newElements = getSelectedElements(board);
-                previousSelectedElements = newElements;
-                deleteTemporaryElements(board);
-                if (!isSelectionMoving(board) && newElements.length > 1) {
-                    selectionRectangleG?.remove();
-                    selectionRectangleG = createSelectionRectangleG(board);
-                }
-            }
-            catch (error) {
-                console.error(error);
-            }
+    }, isReverse);
+    return elements;
+}
+
+const PlaitBoard = {
+    isBoard(value) {
+        const cachedIsBoard = IS_BOARD_CACHE.get(value);
+        if (cachedIsBoard !== undefined) {
+            return cachedIsBoard;
         }
-        onChange();
-    };
-    board.afterChange = () => {
-        if (isHandleSelection(board) && !isSetSelectionOperation(board)) {
-            try {
-                const currentSelectedElements = getSelectedElements(board);
-                if (currentSelectedElements.length && currentSelectedElements.length > 1) {
-                    if (currentSelectedElements.length !== previousSelectedElements.length ||
-                        currentSelectedElements.some((c, index) => c !== previousSelectedElements[index])) {
-                        selectionRectangleG?.remove();
-                        selectionRectangleG = createSelectionRectangleG(board);
-                        previousSelectedElements = currentSelectedElements;
-                    }
+        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 {
-                    selectionRectangleG?.remove();
+                    break;
                 }
             }
-            catch (error) {
-                console.error(error);
+            const i = NODE_TO_INDEX.get(child);
+            if (i == null) {
+                break;
             }
+            path.unshift(i);
+            child = parent;
         }
-        afterChange();
-    };
-    board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isMultiple: true,
-        isDisabledSelect: false
-    });
-    return board;
-}
-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 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 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;
-    }
-    return null;
-}
-
-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 });
+        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 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
 };
 
 const PathRef = {
@@ -3487,6 +3513,274 @@ function withHandPointer(board) {
     return board;
 }
 
+function withSelection(board) {
+    const { pointerDown, pointerUp, pointerMove, globalPointerUp, onChange, afterChange } = board;
+    let start = null;
+    let end = null;
+    let selectionMovingG;
+    let selectionRectangleG;
+    let previousSelectedElements;
+    let isShift = false;
+    let isTextSelection = false;
+    board.pointerDown = (event) => {
+        if (!isShift && event.shiftKey) {
+            isShift = true;
+        }
+        if (isShift && !event.shiftKey) {
+            isShift = false;
+        }
+        const isHitText = !!(event.target instanceof Element && event.target.closest('.plait-richtext-container'));
+        isTextSelection = isHitText && PlaitBoard.hasBeenTextEditing(board);
+        // prevent text from being selected
+        if (event.shiftKey && !isTextSelection) {
+            event.preventDefault();
+        }
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const selectedElements = getSelectedElements(board);
+        const hitElement = getHitElementByPoint(board, point);
+        const hitSelectedElements = selectedElements.length > 1 ? getHitSelectedElements(board, point) : [];
+        const isHitTarget = hitElement || hitSelectedElements.length > 0;
+        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && !isHitTarget && options.isMultiple && !options.isDisabledSelect) {
+            preventTouchMove(board, event, true);
+            // start rectangle selection
+            start = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        if (!isTextSelection) {
+            // prevent text from being selected
+            event.preventDefault();
+        }
+        if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && start) {
+            const movedTarget = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            const rectangle = RectangleClient.getRectangleByPoints([start, movedTarget]);
+            selectionMovingG?.remove();
+            if (Math.hypot(rectangle.width, rectangle.height) > PRESS_AND_MOVE_BUFFER || isSelectionMoving(board)) {
+                end = movedTarget;
+                throttleRAF(board, 'with-selection', () => {
+                    if (start && end) {
+                        Transforms.setSelection(board, { anchor: start, focus: end });
+                    }
+                });
+                setSelectionMoving(board);
+                selectionMovingG = drawRectangle(board, rectangle, {
+                    stroke: SELECTION_BORDER_COLOR,
+                    strokeWidth: 1,
+                    fill: SELECTION_FILL_COLOR,
+                    fillStyle: 'solid'
+                });
+                PlaitBoard.getElementActiveHost(board).append(selectionMovingG);
+            }
+        }
+        pointerMove(event);
+    };
+    // handle the end of click select
+    board.pointerUp = (event) => {
+        const isSetSelectionPointer = PlaitBoard.isPointer(board, PlaitPointerType.selection) || PlaitBoard.isPointer(board, PlaitPointerType.hand);
+        const isSkip = !isMainPointer(event) || isDragging(board) || !isSetSelectionPointer;
+        if (isSkip) {
+            pointerUp(event);
+            return;
+        }
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const selection = { anchor: point, focus: point };
+        Transforms.setSelection(board, selection);
+        pointerUp(event);
+    };
+    board.globalPointerUp = (event) => {
+        if (start && end) {
+            selectionMovingG?.remove();
+            clearSelectionMoving(board);
+            Transforms.setSelection(board, { anchor: start, focus: end });
+        }
+        if (PlaitBoard.isFocus(board)) {
+            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
+            const isInDocument = event.target instanceof Node && document.contains(event.target);
+            const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
+            // Clear selection when mouse board outside area
+            // The framework needs to determine whether the board is focused through selection
+            if (!isInBoard && !start && !isAttachedElement && isInDocument) {
+                Transforms.setSelection(board, null);
+            }
+        }
+        start = null;
+        end = null;
+        isTextSelection = false;
+        preventTouchMove(board, event, false);
+        globalPointerUp(event);
+    };
+    board.onChange = () => {
+        const options = board.getPluginOptions(PlaitPluginKey.withSelection);
+        if (options.isDisabledSelect) {
+            clearSelectedElement(board);
+        }
+        // remove selected element if include
+        board.operations.forEach(op => {
+            if (op.type === 'remove_node') {
+                removeSelectedElement(board, op.node, true);
+            }
+        });
+        if (isHandleSelection(board) && isSetSelectionOperation(board)) {
+            try {
+                if (!isShift) {
+                    selectionRectangleG?.remove();
+                }
+                const temporaryElements = getTemporaryElements(board);
+                let elements = temporaryElements ? temporaryElements : getHitElementsBySelection(board);
+                if (!options.isMultiple && elements.length > 1) {
+                    elements = [elements[0]];
+                }
+                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 {
+                                        pendingElements = elementsInHighestGroup;
+                                    }
+                                }
+                                else {
+                                    pendingElements = [];
+                                }
+                            }
+                            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);
+                            }
+                        });
+                        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, newSelectedElements);
+                }
+                const newElements = getSelectedElements(board);
+                previousSelectedElements = newElements;
+                deleteTemporaryElements(board);
+                if (!isSelectionMoving(board)) {
+                    selectionRectangleG?.remove();
+                    if (newElements.length > 1) {
+                        selectionRectangleG = createSelectionRectangleG(board);
+                    }
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        onChange();
+    };
+    board.afterChange = () => {
+        if (isHandleSelection(board) && !isSetSelectionOperation(board)) {
+            try {
+                const currentSelectedElements = getSelectedElements(board);
+                if (currentSelectedElements.length && currentSelectedElements.length > 1) {
+                    if (previousSelectedElements &&
+                        (currentSelectedElements.length !== previousSelectedElements.length ||
+                            currentSelectedElements.some((c, index) => c !== previousSelectedElements[index]))) {
+                        selectionRectangleG?.remove();
+                        selectionRectangleG = createSelectionRectangleG(board);
+                        previousSelectedElements = currentSelectedElements;
+                    }
+                }
+                else {
+                    selectionRectangleG?.remove();
+                }
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        afterChange();
+    };
+    board.setPluginOptions(PlaitPluginKey.withSelection, {
+        isMultiple: true,
+        isDisabledSelect: false
+    });
+    return board;
+}
+
 function withViewport(board) {
     const { onChange } = board;
     const throttleUpdate = debounce(() => {
@@ -3913,7 +4207,7 @@ function withMoving(board) {
             const targetElement = getHitElementByPoint(board, point, el => board.isMovable(el));
             if (targetElement) {
                 startPoint = point;
-                activeElements = [targetElement];
+                activeElements = getElementsInGroupByElement(board, targetElement);
                 if (targetElements.length > 0) {
                     addSelectionWithTemporaryElements(board, []);
                 }
@@ -4083,10 +4377,10 @@ class PlaitIslandBaseComponent {
     markForCheck() {
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitIslandBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PlaitIslandBaseComponent, host: { classAttribute: "plait-island-container" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitIslandBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", type: PlaitIslandBaseComponent, host: { classAttribute: "plait-island-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitIslandBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitIslandBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -4119,10 +4413,10 @@ class PlaitIslandPopoverBaseComponent {
         this.subscription?.unsubscribe();
         this.islandOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitIslandPopoverBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PlaitIslandPopoverBaseComponent, inputs: { board: "board" }, host: { classAttribute: "plait-island-popover-container" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitIslandPopoverBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", type: PlaitIslandPopoverBaseComponent, inputs: { board: "board" }, host: { classAttribute: "plait-island-popover-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitIslandPopoverBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitIslandPopoverBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -4217,10 +4511,10 @@ class PlaitContextService {
     removeUploadingFile(fileEntry) {
         this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitContextService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitContextService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitContextService, decorators: [{
             type: Injectable
         }] });
 
@@ -4297,10 +4591,10 @@ class PlaitElementComponent {
     ngOnDestroy() {
         this.board.destroyElement(this.getContext());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PlaitElementComponent, isStandalone: true, selector: "plait-element", inputs: { index: "index", element: "element", parent: "parent", board: "board", effect: "effect", parentG: "parentG" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: PlaitElementComponent, isStandalone: true, selector: "plait-element", inputs: { index: "index", element: "element", parent: "parent", board: "board", effect: "effect", parentG: "parentG" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-element',
@@ -4336,8 +4630,8 @@ class PlaitChildrenElementComponent {
             this.parentG = PlaitBoard.getElementHost(this.board);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitChildrenElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PlaitChildrenElementComponent, isStandalone: true, selector: "plait-children", inputs: { board: "board", parent: "parent", effect: "effect", parentG: "parentG" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitChildrenElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: PlaitChildrenElementComponent, isStandalone: true, selector: "plait-children", inputs: { board: "board", parent: "parent", effect: "effect", parentG: "parentG" }, ngImport: i0, template: `
         <plait-element
             *ngFor="let item of parent.children; let index = index; trackBy: trackBy"
             [index]="index"
@@ -4349,7 +4643,7 @@ class PlaitChildrenElementComponent {
         ></plait-element>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "parent", "board", "effect", "parentG"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitChildrenElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitChildrenElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-children',
@@ -4377,6 +4671,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 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;
+        }
+        const hitElements = getHitElementsBySelection(board, selection);
+        if (hitElements.length) {
+            groupRectangleG = createGroupRectangleG(board, hitElements);
+            groupRectangleG && PlaitBoard.getElementActiveHost(board).append(groupRectangleG);
+        }
+        pointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        groupRectangleG?.remove();
+        groupRectangleG = null;
+        globalPointerUp(event);
+    };
+    return board;
+}
+
 const ElementHostClass = 'element-host';
 const ElementUpperHostClass = 'element-upper-host';
 const ElementActiveHostClass = 'element-active-host';
@@ -4502,7 +4821,7 @@ class PlaitBoardComponent {
         initializeViewportOffset(this.board);
     }
     initializePlugins() {
-        let board = withHotkey(withHandPointer(withHistory(withSelection(withMoving(withBoard(withViewport(withOptions(createBoard(this.plaitValue, this.plaitOptions)))))))));
+        let board = withHotkey(withHandPointer(withHistory(withSelection(withGroup(withMoving(withBoard(withViewport(withOptions(createBoard(this.plaitValue, this.plaitOptions))))))))));
         this.plaitPlugins.forEach(plugin => {
             board = plugin(board);
         });
@@ -4714,8 +5033,8 @@ class PlaitBoardComponent {
             this.updateIslands();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PlaitBoardComponent, isStandalone: true, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, providers: [PlaitContextService], queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: PlaitBoardComponent, isStandalone: true, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions", plaitTheme: "plaitTheme" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused", "class.disabled-scroll": "this.disabledScrollOnNonFocus" } }, providers: [PlaitContextService], queries: [{ propertyName: "islands", predicate: PlaitIslandBaseComponent, descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;" class="board-host-svg">
                 <g class="element-host"></g>
@@ -4727,7 +5046,7 @@ class PlaitBoardComponent {
         <ng-content></ng-content>
     `, isInline: true, dependencies: [{ kind: "component", type: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitBoardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: PlaitBoardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-board',
@@ -4952,5 +5271,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, 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, addSelectedElement, arrowPoints, buildPlaitHtml, cacheMovingElements, cacheSelectedElements, calcNewViewBox, catmullRomFitting, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createClipboardContext, createFakeEvent, createForeignObject, createG, 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, getEllipseTangentSlope, getHitElementByPoint, getHitElementsBySelection, getHitSelectedElements, getIsRecursionFunc, getMovingElements, getNearestPointBetweenPointAndSegment, getNearestPointBetweenPointAndSegments, getProbablySupportsClipboardRead, getProbablySupportsClipboardWrite, getProbablySupportsClipboardWriteText, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTargetElements, getTemporaryElements, getTemporaryRef, getVectorFromPointAndSlope, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, handleTouchTarget, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isContextmenu, isDOMElement, isDOMNode, isDragging, isFromScrolling, isFromViewportChange, isHandleSelection, isInPlaitBoard, isLineHitLine, isMainPointer, isMovingElements, isNullOrUndefined, isPointInEllipse, isPointInPolygon, isPointInRoundRectangle, isPolylineHitRectangle, isPreventTouchMove, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetSelectionOperation, isSetViewportOperation, normalizePoint, preventTouchMove, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setDragging, setIsFromScrolling, setIsFromViewportChange, setPathStrokeLinecap, setSVGViewBox, setSelectionMoving, setStrokeLinecap, setTransformRotate, 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, 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 };
 //# sourceMappingURL=plait-core.mjs.map