@plait/draw 0.54.0 → 0.55.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, createDebugGenerator, Point, RectangleClient, getElementById, rotatePointsByElement, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, rotateAntiPointsByElement, rotatePoints, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, idCreator, catmullRomFitting, findElements, createMask, createRect, getSelectedElements, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, Direction, hasValidAngle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, PlaitElement, getHitElementByPoint, preventTouchMove, createClipboardContext, WritableClipboardType, addClipboardContext, getSelectionAngle, getRectangleByAngle, getRectangleByElements, rotatedDataPoints, isAxisChangedByAngle, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
-import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, TRANSPARENT, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, getMemorizedLatest, memorizeLatest, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByVector, getOppositeDirection, getDirectionFactor, rotateVector, getDirectionByPointOfRectangle, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, resetPointsAfterResize, getDirectionFactorByDirectionComponent, isCornerHandle, getFirstTextManage, withResize, drawHandle, getIndexByResizeHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, isResizingByCondition, getRatioByPoint, ImageGenerator, ResizeHandle } from '@plait/common';
+import { ACTIVE_STROKE_WIDTH, ThemeColorMode, createDebugGenerator, Point, RectangleClient, getElementById, rotatePointsByElement, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, rotateAntiPointsByElement, rotatePoints, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, idCreator, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, getSelectedElements, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, Direction, hasValidAngle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, PlaitElement, getHitElementByPoint, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, preventTouchMove, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, degreesToRadians, normalizeAngle, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME } from '@plait/core';
+import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, TRANSPARENT, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, getMemorizedLatest, memorizeLatest, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByVector, getOppositeDirection, getDirectionFactor, rotateVector, getDirectionByPointOfRectangle, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isCornerHandle, getIndexByResizeHandle, resetPointsAfterResize, getFirstTextManage, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, TextManage } from '@plait/text';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
@@ -30,6 +30,7 @@ var BasicShapes;
     BasicShapes["twoWayArrow"] = "twoWayArrow";
     BasicShapes["comment"] = "comment";
     BasicShapes["roundComment"] = "roundComment";
+    BasicShapes["cloud"] = "cloud";
 })(BasicShapes || (BasicShapes = {}));
 var FlowchartSymbols;
 (function (FlowchartSymbols) {
@@ -44,6 +45,10 @@ var FlowchartSymbols;
     FlowchartSymbols["merge"] = "merge";
     FlowchartSymbols["delay"] = "delay";
     FlowchartSymbols["storedData"] = "storedData";
+    FlowchartSymbols["or"] = "or";
+    FlowchartSymbols["summingJunction"] = "summingJunction";
+    FlowchartSymbols["predefinedProcess"] = "predefinedProcess";
+    FlowchartSymbols["offPage"] = "offPage";
 })(FlowchartSymbols || (FlowchartSymbols = {}));
 const PlaitGeometry = {};
 
@@ -66,6 +71,12 @@ const DefaultBasicShapeProperty = {
     strokeColor: '#333',
     strokeWidth: 2
 };
+const DefaultCloudShapeProperty = {
+    width: 120,
+    height: 100,
+    strokeColor: '#333',
+    strokeWidth: 2
+};
 const DefaultTextProperty = {
     width: 36,
     height: 20,
@@ -109,7 +120,11 @@ const DefaultFlowchartPropertyMap = {
     [FlowchartSymbols.manualLoop]: DefaultFlowchartProperty,
     [FlowchartSymbols.merge]: DefaultMergeProperty,
     [FlowchartSymbols.delay]: DefaultFlowchartProperty,
-    [FlowchartSymbols.storedData]: DefaultFlowchartProperty
+    [FlowchartSymbols.storedData]: DefaultFlowchartProperty,
+    [FlowchartSymbols.or]: DefaultConnectorProperty,
+    [FlowchartSymbols.summingJunction]: DefaultConnectorProperty,
+    [FlowchartSymbols.predefinedProcess]: DefaultFlowchartProperty,
+    [FlowchartSymbols.offPage]: DefaultFlowchartProperty
 };
 const LINE_HIT_GEOMETRY_BUFFER = 10;
 const LINE_SNAPPING_BUFFER = 6;
@@ -950,6 +965,14 @@ const traverseDrawShapes = (board, callback) => {
         }
     }, getIsRecursionFunc(board), true);
 };
+const getRotateHandleRectangle = (rectangle) => {
+    return {
+        x: rectangle.x - ROTATE_HANDLE_DISTANCE_TO_ELEMENT - ROTATE_HANDLE_SIZE,
+        y: rectangle.y + rectangle.height + ROTATE_HANDLE_DISTANCE_TO_ELEMENT,
+        width: ROTATE_HANDLE_SIZE,
+        height: ROTATE_HANDLE_SIZE
+    };
+};
 
 const SHAPE_MAX_LENGTH = 6;
 const memorizedShape = new WeakMap();
@@ -1158,6 +1181,9 @@ const drawLine = (board, element) => {
     }
     const id = idCreator();
     line.setAttribute('mask', `url(#${id})`);
+    if (element.strokeStyle === StrokeStyle.dotted) {
+        setStrokeLinecap(line, 'round');
+    }
     lineG.appendChild(line);
     const { mask, maskTargetFillRect } = drawMask(board, element, id);
     lineG.appendChild(mask);
@@ -1457,44 +1483,55 @@ const DiamondEngine = createPolygonEngine({
     }
 });
 
-const EllipseEngine = {
-    draw(board, rectangle, options) {
-        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
-        const rs = PlaitBoard.getRoughSVG(board);
-        return rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
-    },
-    isInsidePoint(rectangle, point) {
-        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
-        return isPointInEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
-    },
-    getCornerPoints(rectangle) {
-        return RectangleClient.getEdgeCenterPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
-        return getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
-    },
-    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
-        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
-        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
-        const a = rectangle.width / 2;
-        const b = rectangle.height / 2;
-        const slope = getEllipseTangentSlope(point[0], point[1], a, b);
-        const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
-        return vector;
-    },
-    getConnectorPoints(rectangle) {
-        return RectangleClient.getEdgeCenterPoints(rectangle);
-    },
-    getTextRectangle(element) {
-        const rectangle = getTextRectangle(element);
-        const width = rectangle.width;
-        rectangle.width = (rectangle.width * 3) / 4;
-        rectangle.x += width / 8;
-        return rectangle;
+function createEllipseEngine(createOptions) {
+    const engine = {
+        draw(board, rectangle, options) {
+            const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+            const rs = PlaitBoard.getRoughSVG(board);
+            return rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+        },
+        isInsidePoint(rectangle, point) {
+            const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+            return isPointInEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
+        },
+        getCornerPoints(rectangle) {
+            return RectangleClient.getEdgeCenterPoints(rectangle);
+        },
+        getNearestPoint(rectangle, point) {
+            const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+            return getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
+        },
+        getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+            const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+            const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+            const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+            const a = rectangle.width / 2;
+            const b = rectangle.height / 2;
+            const slope = getEllipseTangentSlope(point[0], point[1], a, b);
+            const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
+            return vector;
+        },
+        getConnectorPoints(rectangle) {
+            return RectangleClient.getEdgeCenterPoints(rectangle);
+        },
+        getTextRectangle(element) {
+            const rectangle = getTextRectangle(element);
+            const width = rectangle.width;
+            rectangle.width = (rectangle.width * 3) / 4;
+            rectangle.x += width / 8;
+            return rectangle;
+        }
+    };
+    if (createOptions?.draw) {
+        engine.draw = createOptions.draw;
     }
-};
+    if (createOptions?.getTextRectangle) {
+        engine.getTextRectangle = createOptions.getTextRectangle;
+    }
+    return engine;
+}
+
+const EllipseEngine = createEllipseEngine();
 function getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation = 0) {
     const rectangleClient = {
         x: center[0] - rx,
@@ -2282,6 +2319,176 @@ const StoredDataEngine = {
     }
 };
 
+const PredefinedProcessEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} H${rectangle.x + rectangle.width} V${rectangle.y + rectangle.height} H${rectangle.x} Z M${rectangle.x + rectangle.width * 0.06} ${rectangle.y} L${rectangle.x + rectangle.width * 0.06} ${rectangle.y +
+            rectangle.height} M${rectangle.x + rectangle.width - rectangle.width * 0.06} ${rectangle.y} L${rectangle.x +
+            rectangle.width -
+            rectangle.width * 0.06} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getPolygonEdgeByConnectionPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle: (element) => {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.06 * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const getOffPagePoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height / 2]
+    ];
+};
+const OffPageEngine = createPolygonEngine({
+    getPolygonPoints: getOffPagePoints,
+    getConnectorPoints: (rectangle) => {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle: (element) => {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        return {
+            width: width > 0 ? width : 0,
+            height: height,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - elementRectangle.height / 2 - height) / 2
+        };
+    }
+});
+
+const CloudEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const divisionWidth = rectangle.width / 7;
+        const divisionHeight = rectangle.height / 3.2;
+        const xRadius = divisionWidth / 8.5;
+        const yRadius = divisionHeight / 20;
+        const svgElement = rs.path(`M ${rectangle.x + divisionWidth} ${rectangle.y + divisionHeight}
+             A ${xRadius} ${yRadius * 1.2} 0 1 1 ${rectangle.x + divisionWidth * 2} ${rectangle.y + divisionHeight / 2}
+             A ${xRadius} ${yRadius} 0 1 1 ${rectangle.x + divisionWidth * 4.2} ${rectangle.y + divisionHeight / 2.2}
+             A ${xRadius} ${yRadius} 0 1 1 ${rectangle.x + divisionWidth * 5.8} ${rectangle.y + divisionHeight}
+             A ${xRadius} ${yRadius * 1.3} 0 1 1 ${rectangle.x + divisionWidth * 6} ${rectangle.y + divisionHeight * 2.2}
+             A ${xRadius} ${yRadius * 1.2} 0 1 1 ${rectangle.x + divisionWidth * 5} ${rectangle.y + divisionHeight * 2.8}
+             A ${xRadius} ${yRadius / 1.2} 0 1 1 ${rectangle.x + divisionWidth * 2.8} ${rectangle.y + divisionHeight * 2.8}
+             A ${xRadius} ${yRadius} 0 1 1 ${rectangle.x + divisionWidth} ${rectangle.y + divisionHeight * 2.2}
+             A ${xRadius} ${yRadius * 1.42} 0 1 1 ${rectangle.x + divisionWidth} ${rectangle.y + divisionHeight}
+            Z`, { ...options, fillStyle: 'solid' });
+        setPathStrokeLinecap(svgElement, 'round');
+        return svgElement;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, CloudEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = CloudEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getPolygonEdgeByConnectionPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle(element) {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        const width = originWidth / 1.5;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
+            y: elementRectangle.y + elementRectangle.height / 6 + ((elementRectangle.height * 4) / 6 - height) / 2
+        };
+    }
+};
+
+const OrEngine = createEllipseEngine({
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const rx = rectangle.width / 2;
+        const ry = rectangle.height / 2;
+        const startPoint = [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2];
+        return rs.path(`M${startPoint[0]} ${startPoint[1]}
+        A${rx},${ry} 0 1,1 ${startPoint[0]} ${startPoint[1] - 0.01}
+        M${rectangle.x} ${rectangle.y + rectangle.height / 2}
+        L${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}
+        M${rectangle.x + rectangle.width / 2} ${rectangle.y}
+        L${rectangle.x + rectangle.width / 2} ${rectangle.y + rectangle.height}
+        `, { ...options, fillStyle: 'solid' });
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        rectangle.width = 0;
+        rectangle.height = 0;
+        return rectangle;
+    }
+});
+
+const SummingJunctionEngine = createEllipseEngine({
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const rx = rectangle.width / 2;
+        const ry = rectangle.height / 2;
+        const startPoint = [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2];
+        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+        const line1Points = getCrossingPointsBetweenEllipseAndSegment([rectangle.x, rectangle.y], [rectangle.x + rectangle.width, rectangle.y + rectangle.height], centerPoint[0], centerPoint[1], rx, ry);
+        const line2Points = getCrossingPointsBetweenEllipseAndSegment([rectangle.x + rectangle.width, rectangle.y], [rectangle.x, rectangle.y + rectangle.height], centerPoint[0], centerPoint[1], rx, ry);
+        return rs.path(`M${startPoint[0]} ${startPoint[1]}
+        A${rx},${ry} 0 1,1 ${startPoint[0]} ${startPoint[1] - 0.01}
+        M${line1Points[0][0]} ${line1Points[0][1]}
+        L${line1Points[1][0]} ${line1Points[1][1]}
+        M${line2Points[0][0]} ${line2Points[0][1]}
+        L${line2Points[1][0]} ${line2Points[1][1]}
+        `, { ...options, fillStyle: 'solid' });
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        rectangle.width = 0;
+        rectangle.height = 0;
+        return rectangle;
+    }
+});
+
 const ShapeEngineMap = {
     [BasicShapes.rectangle]: RectangleEngine,
     [BasicShapes.diamond]: DiamondEngine,
@@ -2303,6 +2510,7 @@ const ShapeEngineMap = {
     [BasicShapes.twoWayArrow]: TwoWayArrowEngine,
     [BasicShapes.comment]: CommentEngine,
     [BasicShapes.roundComment]: RoundCommentEngine,
+    [BasicShapes.cloud]: CloudEngine,
     [FlowchartSymbols.process]: RectangleEngine,
     [FlowchartSymbols.decision]: DiamondEngine,
     [FlowchartSymbols.connector]: EllipseEngine,
@@ -2313,7 +2521,11 @@ const ShapeEngineMap = {
     [FlowchartSymbols.manualLoop]: ManualLoopEngine,
     [FlowchartSymbols.merge]: MergeEngine,
     [FlowchartSymbols.delay]: DelayEngine,
-    [FlowchartSymbols.storedData]: StoredDataEngine
+    [FlowchartSymbols.storedData]: StoredDataEngine,
+    [FlowchartSymbols.or]: OrEngine,
+    [FlowchartSymbols.summingJunction]: SummingJunctionEngine,
+    [FlowchartSymbols.predefinedProcess]: PredefinedProcessEngine,
+    [FlowchartSymbols.offPage]: OffPageEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
@@ -2502,6 +2714,9 @@ const getDefaultGeometryProperty = (pointer) => {
         return getDefaultFlowchartProperty(pointer);
     }
     else {
+        if (pointer === BasicShapes.cloud) {
+            return DefaultCloudShapeProperty;
+        }
         return DefaultBasicShapeProperty;
     }
 };
@@ -2553,7 +2768,14 @@ const getFillByElement = (board, element) => {
     return fill;
 };
 const getLineDashByElement = (element) => {
-    return element.strokeStyle === 'dashed' ? [8, 8 + getStrokeWidthByElement(element)] : undefined;
+    switch (element.strokeStyle) {
+        case StrokeStyle.dashed:
+            return [8, 8 + getStrokeWidthByElement(element)];
+        case StrokeStyle.dotted:
+            return [0, 4 + getStrokeWidthByElement(element)];
+        default:
+            return undefined;
+    }
 };
 const getStrokeStyleByElement = (element) => {
     return element.strokeStyle || StrokeStyle.solid;
@@ -2747,6 +2969,7 @@ var StrokeStyle;
 (function (StrokeStyle) {
     StrokeStyle["solid"] = "solid";
     StrokeStyle["dashed"] = "dashed";
+    StrokeStyle["dotted"] = "dotted";
 })(StrokeStyle || (StrokeStyle = {}));
 var MemorizeKey;
 (function (MemorizeKey) {
@@ -3095,9 +3318,8 @@ class GeometryComponent extends CommonPluginElement {
     get textManage() {
         return this.getTextManages()[0];
     }
-    constructor(viewContainerRef, cdr) {
+    constructor(cdr) {
         super(cdr);
-        this.viewContainerRef = viewContainerRef;
         this.cdr = cdr;
         this.destroy$ = new Subject();
     }
@@ -3139,7 +3361,7 @@ class GeometryComponent extends CommonPluginElement {
     ngOnInit() {
         super.ngOnInit();
         this.initializeGenerator();
-        this.shapeGenerator.processDrawing(this.element, this.g);
+        this.shapeGenerator.processDrawing(this.element, this.getElementG());
         this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
         this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
             selected: this.selected
@@ -3149,7 +3371,7 @@ class GeometryComponent extends CommonPluginElement {
     onContextChanged(value, previous) {
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
         if (value.element !== previous.element || isChangeTheme) {
-            this.shapeGenerator.processDrawing(this.element, this.g);
+            this.shapeGenerator.processDrawing(this.element, this.getElementG());
             this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
             this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
                 selected: this.selected
@@ -3173,7 +3395,7 @@ class GeometryComponent extends CommonPluginElement {
     }
     drawText() {
         this.textManage.draw(this.element.text);
-        this.g.append(this.textManage.g);
+        this.getElementG().append(this.textManage.g);
         const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
         this.textManage.updateAngle(centerPoint, this.element.angle);
     }
@@ -3224,7 +3446,7 @@ class GeometryComponent extends CommonPluginElement {
         this.activeGenerator.destroy();
         this.lineAutoCompleteGenerator.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GeometryComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryComponent, decorators: [{
@@ -3235,7 +3457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 class LineActiveGenerator extends Generator {
     constructor() {
@@ -3311,9 +3533,8 @@ class LineActiveGenerator extends Generator {
 const debugKey$2 = 'debug:plait:line-turning';
 const debugGenerator$2 = createDebugGenerator(debugKey$2);
 class LineComponent extends CommonPluginElement {
-    constructor(viewContainerRef, cdr) {
+    constructor(cdr) {
         super(cdr);
-        this.viewContainerRef = viewContainerRef;
         this.cdr = cdr;
         this.destroy$ = new Subject();
         this.boundedElements = {};
@@ -3325,7 +3546,7 @@ class LineComponent extends CommonPluginElement {
     }
     ngOnInit() {
         this.initializeGenerator();
-        this.shapeGenerator.processDrawing(this.element, this.g);
+        this.shapeGenerator.processDrawing(this.element, this.getElementG());
         const linePoints = getLinePoints(this.board, this.element);
         this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
             selected: this.selected,
@@ -3359,7 +3580,7 @@ class LineComponent extends CommonPluginElement {
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
         const linePoints = getLinePoints(this.board, this.element);
         if (value.element !== previous.element || isChangeTheme) {
-            this.shapeGenerator.processDrawing(this.element, this.g);
+            this.shapeGenerator.processDrawing(this.element, this.getElementG());
             this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
@@ -3377,7 +3598,7 @@ class LineComponent extends CommonPluginElement {
             }
         }
         if (isBoundedElementsChanged) {
-            this.shapeGenerator.processDrawing(this.element, this.g);
+            this.shapeGenerator.processDrawing(this.element, this.getElementG());
             this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
@@ -3400,7 +3621,7 @@ class LineComponent extends CommonPluginElement {
         if (this.element.texts?.length) {
             this.getTextManages().forEach((manage, index) => {
                 manage.draw(this.element.texts[index].text);
-                this.g.append(manage.g);
+                this.getElementG().append(manage.g);
             });
         }
     }
@@ -3457,7 +3678,7 @@ class LineComponent extends CommonPluginElement {
         this.destroy$.complete();
         this.destroyTextManages();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LineComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LineComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LineComponent, isStandalone: true, selector: "plait-draw-line", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LineComponent, decorators: [{
@@ -3468,7 +3689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 const withDrawHotkey = (board) => {
     const { keyDown, dblClick } = board;
@@ -3503,583 +3724,388 @@ const withDrawHotkey = (board) => {
     return board;
 };
 
-const withGeometryCreateByDrag = (board) => {
-    const { pointerMove, globalPointerUp } = board;
-    let geometryShapeG = null;
-    let temporaryElement = null;
-    let fakeCreateTextRef = null;
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const pointer = PlaitBoard.getPointer(board);
-        if (dragMode) {
-            const memorizedLatest = getMemorizedLatestByPointer(pointer);
-            if (pointer === BasicShapes.text) {
-                const property = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']);
-                const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(movingPoint, property.width, property.height));
-                temporaryElement = createTextElement(board, points);
-                if (!fakeCreateTextRef) {
-                    const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
-                        getRectangle: () => {
-                            return getTextRectangle(temporaryElement);
-                        }
-                    });
-                    PlaitBoard.getComponent(board)
-                        .viewContainerRef.injector.get(NgZone)
-                        .run(() => {
-                        textManage.draw(temporaryElement.text);
-                    });
-                    fakeCreateTextRef = {
-                        g: createG(),
-                        textManage
-                    };
-                    PlaitBoard.getHost(board).append(fakeCreateTextRef.g);
-                    fakeCreateTextRef.g.append(textManage.g);
-                }
-                else {
-                    fakeCreateTextRef.textManage.updateRectangle();
-                    fakeCreateTextRef.g.append(fakeCreateTextRef.textManage.g);
-                }
-            }
-            else {
-                const points = getDefaultGeometryPoints(pointer, movingPoint);
-                temporaryElement = createDefaultGeometry(board, points, pointer);
-                geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-        }
-        pointerMove(event);
-    };
-    board.globalPointerUp = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        if (dragMode && temporaryElement) {
-            insertElement(board, temporaryElement);
-            fakeCreateTextRef?.textManage.destroy();
-            fakeCreateTextRef?.g.remove();
-            fakeCreateTextRef = null;
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        preventTouchMove(board, event, false);
-        globalPointerUp(event);
+const debugKey$1 = 'debug:plait:resize-for-rotation';
+const debugGenerator$1 = createDebugGenerator(debugKey$1);
+function withDrawResize(board) {
+    const { afterChange, drawActiveRectangle } = board;
+    let snapG;
+    let handleG;
+    let needCustomActiveRectangle = false;
+    let resizeActivePoints = null;
+    const canResize = () => {
+        const elements = getSelectedElements(board);
+        return elements.length > 1 && elements.every(el => PlaitDrawElement.isDrawElement(el));
     };
-    return board;
-};
-const withGeometryCreateByDrawing = (board) => {
-    const { pointerDown, pointerMove, pointerUp, keyDown, keyUp } = board;
-    let start = null;
-    let geometryShapeG = null;
-    let temporaryElement = null;
-    let isShift = false;
-    board.keyDown = (event) => {
-        isShift = isKeyHotkey('shift', event);
-        keyDown(event);
-    };
-    board.keyUp = (event) => {
-        isShift = false;
-        keyUp(event);
-    };
-    board.pointerDown = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        if (!PlaitBoard.isReadonly(board) && isGeometryPointer && isDrawingMode(board)) {
-            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            start = point;
-            const pointer = PlaitBoard.getPointer(board);
-            preventTouchMove(board, event, true);
-            if (pointer === BasicShapes.text) {
-                const memorizedLatest = getMemorizedLatestByPointer(pointer);
-                const property = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']);
-                const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, property.width, property.height));
-                const textElement = createTextElement(board, points);
-                insertElement(board, textElement);
-                start = null;
+    const options = {
+        key: 'draw-elements',
+        canResize,
+        hitTest: (point) => {
+            const elements = getSelectedElements(board);
+            const boundingRectangle = getRectangleByElements(board, elements, false);
+            const angle = getSelectionAngle(elements);
+            const handleRef = getHitRectangleResizeHandleRef(board, boundingRectangle, point, angle);
+            if (handleRef) {
+                return {
+                    element: elements,
+                    rectangle: boundingRectangle,
+                    handle: handleRef.handle,
+                    cursorClass: handleRef.cursorClass
+                };
+            }
+            return null;
+        },
+        onResize: (resizeRef, resizeState) => {
+            snapG?.remove();
+            debugGenerator$1.isDebug() && debugGenerator$1.clear();
+            const isFromCorner = isCornerHandle(board, resizeRef.handle);
+            const isAspectRatio = resizeState.isShift || isFromCorner;
+            const centerPoint = RectangleClient.getCenterPoint(resizeRef.rectangle);
+            const handleIndex = getIndexByResizeHandle(resizeRef.handle);
+            const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, handleIndex, resizeRef.rectangle);
+            const angle = getSelectionAngle(resizeRef.element);
+            let bulkRotationRef;
+            if (angle) {
+                bulkRotationRef = {
+                    angle: angle,
+                    offsetX: 0,
+                    offsetY: 0,
+                    newCenterPoint: [0, 0]
+                };
+                const [rotatedStartPoint, rotateEndPoint] = rotatePoints([resizeState.startPoint, resizeState.endPoint], centerPoint, -bulkRotationRef.angle);
+                resizeState.startPoint = rotatedStartPoint;
+                resizeState.endPoint = rotateEndPoint;
+            }
+            const resizeSnapRefOptions = getSnapResizingRefOptions(board, resizeRef, resizeState, {
+                originPoint,
+                handlePoint
+            }, isAspectRatio, isFromCorner);
+            const resizeSnapRef = getSnapResizingRef(board, resizeRef.element, resizeSnapRefOptions);
+            resizeActivePoints = resizeSnapRef.activePoints;
+            snapG = resizeSnapRef.snapG;
+            PlaitBoard.getElementActiveHost(board).append(snapG);
+            if (bulkRotationRef) {
+                const boundingBoxCornerPoints = RectangleClient.getPoints(resizeRef.rectangle);
+                const resizedBoundingBoxCornerPoints = boundingBoxCornerPoints.map(p => {
+                    return movePointByZoomAndOriginPoint(p, originPoint, resizeSnapRef.xZoom, resizeSnapRef.yZoom);
+                });
+                const newBoundingBox = RectangleClient.getRectangleByPoints(resizedBoundingBoxCornerPoints);
+                debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(board, newBoundingBox, { stroke: 'blue' });
+                const newBoundingBoxCenter = RectangleClient.getCenterPoint(newBoundingBox);
+                const adjustedNewBoundingBoxPoints = resetPointsAfterResize(RectangleClient.getRectangleByPoints(boundingBoxCornerPoints), RectangleClient.getRectangleByPoints(resizedBoundingBoxCornerPoints), centerPoint, newBoundingBoxCenter, bulkRotationRef.angle);
+                const newCenter = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(adjustedNewBoundingBoxPoints));
+                bulkRotationRef = Object.assign(bulkRotationRef, {
+                    offsetX: newCenter[0] - newBoundingBoxCenter[0],
+                    offsetY: newCenter[1] - newBoundingBoxCenter[1],
+                    newCenterPoint: newCenter
+                });
+                debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(board, adjustedNewBoundingBoxPoints);
+            }
+            resizeRef.element.forEach(target => {
+                const path = PlaitBoard.findPath(board, target);
+                let points;
+                if (bulkRotationRef) {
+                    const reversedPoints = rotatedDataPoints(target.points, centerPoint, -bulkRotationRef.angle);
+                    points = reversedPoints.map((p) => {
+                        return movePointByZoomAndOriginPoint(p, originPoint, resizeSnapRef.xZoom, resizeSnapRef.yZoom);
+                    });
+                    const adjustTargetPoints = points.map(p => [
+                        p[0] + bulkRotationRef.offsetX,
+                        p[1] + bulkRotationRef.offsetY
+                    ]);
+                    points = rotatedDataPoints(adjustTargetPoints, bulkRotationRef.newCenterPoint, bulkRotationRef.angle);
+                }
+                else {
+                    if (hasValidAngle(target)) {
+                        needCustomActiveRectangle = true;
+                    }
+                    if (hasValidAngle(target) && isAxisChangedByAngle(target.angle)) {
+                        points = getResizePointsByOtherwiseAxis(board, target.points, originPoint, resizeSnapRef.xZoom, resizeSnapRef.yZoom);
+                    }
+                    else {
+                        points = target.points.map(p => {
+                            return movePointByZoomAndOriginPoint(p, originPoint, resizeSnapRef.xZoom, resizeSnapRef.yZoom);
+                        });
+                    }
+                }
+                if (PlaitDrawElement.isGeometry(target)) {
+                    const { height: textHeight } = getFirstTextManage(target).getSize();
+                    DrawTransforms.resizeGeometry(board, points, textHeight, path);
+                }
+                else if (PlaitDrawElement.isLine(target)) {
+                    Transforms.setNode(board, { points }, path);
+                }
+                else if (PlaitDrawElement.isImage(target)) {
+                    if (isAspectRatio) {
+                        Transforms.setNode(board, { points }, path);
+                    }
+                    else {
+                        // The image element does not follow the resize, but moves based on the center point.
+                        const targetRectangle = RectangleClient.getRectangleByPoints(target.points);
+                        const centerPoint = RectangleClient.getCenterPoint(targetRectangle);
+                        const newCenterPoint = movePointByZoomAndOriginPoint(centerPoint, originPoint, resizeSnapRef.xZoom, resizeSnapRef.yZoom);
+                        const newTargetRectangle = RectangleClient.getRectangleByCenterPoint(newCenterPoint, targetRectangle.width, targetRectangle.height);
+                        Transforms.setNode(board, { points: RectangleClient.getPoints(newTargetRectangle) }, path);
+                    }
+                }
+            });
+        },
+        afterResize: (resizeRef) => {
+            snapG?.remove();
+            snapG = null;
+            if (needCustomActiveRectangle) {
+                needCustomActiveRectangle = false;
+                resizeActivePoints = null;
+                const selectedElements = getSelectedElements(board);
+                Transforms.addSelectionWithTemporaryElements(board, selectedElements);
             }
         }
-        pointerDown(event);
     };
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const drawMode = !!start;
-        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const pointer = PlaitBoard.getPointer(board);
-        if (drawMode && pointer !== BasicShapes.text) {
-            const points = normalizeShapePoints([start, movingPoint], isShift);
-            temporaryElement = createDefaultGeometry(board, points, pointer);
-            geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+    withResize(board, options);
+    board.afterChange = () => {
+        afterChange();
+        if (handleG) {
+            handleG.remove();
+            handleG = null;
         }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const isDrawMode = !!start;
-        if (isDrawMode) {
-            const targetPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const { width, height } = RectangleClient.getRectangleByPoints([start, targetPoint]);
-            if (Math.hypot(width, height) === 0) {
-                const pointer = PlaitBoard.getPointer(board);
-                if (pointer !== BasicShapes.text) {
-                    const points = getDefaultGeometryPoints(pointer, targetPoint);
-                    temporaryElement = createDefaultGeometry(board, points, pointer);
-                }
+        if (canResize() && !isSelectionMoving(board)) {
+            handleG = createG();
+            const elements = getSelectedElements(board);
+            const boundingRectangle = needCustomActiveRectangle
+                ? RectangleClient.getRectangleByPoints(resizeActivePoints)
+                : getRectangleByElements(board, elements, false);
+            let corners = RectangleClient.getCornerPoints(boundingRectangle);
+            const angle = getSelectionAngle(elements);
+            if (angle) {
+                const centerPoint = RectangleClient.getCenterPoint(boundingRectangle);
+                corners = rotatePoints(corners, centerPoint, angle);
             }
+            corners.forEach(corner => {
+                const g = drawHandle(board, corner);
+                handleG && handleG.append(g);
+            });
+            PlaitBoard.getElementActiveHost(board).append(handleG);
         }
-        if (temporaryElement) {
-            insertElement(board, temporaryElement);
+    };
+    board.drawActiveRectangle = () => {
+        if (needCustomActiveRectangle) {
+            const rectangle = RectangleClient.getRectangleByPoints(resizeActivePoints);
+            return drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: ACTIVE_STROKE_WIDTH
+            });
         }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        start = null;
-        temporaryElement = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
+        return drawActiveRectangle();
     };
     return board;
+}
+const getResizeOriginPointAndHandlePoint = (board, handleIndex, rectangle) => {
+    const symmetricHandleIndex = getSymmetricHandleIndex(board, handleIndex);
+    const originPoint = getResizeHandlePointByIndex(rectangle, symmetricHandleIndex);
+    const handlePoint = getResizeHandlePointByIndex(rectangle, handleIndex);
+    return {
+        originPoint,
+        handlePoint
+    };
 };
-
-const buildClipboardData = (board, elements, startPoint) => {
-    return elements.map(element => {
-        if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element)) {
-            const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
-            return { ...element, points };
+const getResizeZoom = (resizeStartAndEnd, resizeOriginPoint, resizeHandlePoint, isFromCorner, isAspectRatio) => {
+    const [startPoint, endPoint] = resizeStartAndEnd;
+    let xZoom = 0;
+    let yZoom = 0;
+    if (isFromCorner) {
+        if (isAspectRatio) {
+            let normalizedOffsetX = Point.getOffsetX(startPoint, endPoint);
+            xZoom = normalizedOffsetX / (resizeHandlePoint[0] - resizeOriginPoint[0]);
+            yZoom = xZoom;
         }
-        if (PlaitDrawElement.isLine(element)) {
-            let source = { ...element.source };
-            let target = { ...element.target };
-            let points = [...element.points];
-            if (element.source.boundId) {
-                points[0] = getConnectionPoint(getElementById(board, element.source.boundId), element.source.connection);
-                if (!getElementById(board, element.source.boundId, elements)) {
-                    delete source.boundId;
-                    delete source.connection;
-                }
+        else {
+            let normalizedOffsetX = Point.getOffsetX(startPoint, endPoint);
+            let normalizedOffsetY = Point.getOffsetY(startPoint, endPoint);
+            xZoom = normalizedOffsetX / (resizeHandlePoint[0] - resizeOriginPoint[0]);
+            yZoom = normalizedOffsetY / (resizeHandlePoint[1] - resizeOriginPoint[1]);
+        }
+    }
+    else {
+        const isHorizontal = Point.isHorizontal(resizeOriginPoint, resizeHandlePoint, 0.1) || false;
+        let normalizedOffset = isHorizontal ? Point.getOffsetX(startPoint, endPoint) : Point.getOffsetY(startPoint, endPoint);
+        let benchmarkOffset = isHorizontal ? resizeHandlePoint[0] - resizeOriginPoint[0] : resizeHandlePoint[1] - resizeOriginPoint[1];
+        const zoom = normalizedOffset / benchmarkOffset;
+        if (isAspectRatio) {
+            xZoom = zoom;
+            yZoom = zoom;
+        }
+        else {
+            if (isHorizontal) {
+                xZoom = zoom;
             }
-            if (element.target.boundId) {
-                points[points.length - 1] = getConnectionPoint(getElementById(board, element.target.boundId), element.target.connection);
-                if (!getElementById(board, element.target.boundId, elements)) {
-                    delete target.boundId;
-                    delete target.connection;
-                }
+            else {
+                yZoom = zoom;
             }
-            points = points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
-            return { ...element, points, source, target };
         }
-        return element;
-    });
+    }
+    return { xZoom, yZoom };
 };
-const insertClipboardData = (board, elements, startPoint) => {
-    const lines = elements.filter(value => PlaitDrawElement.isLine(value));
-    const geometries = elements.filter(value => PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isImage(value));
-    geometries.forEach(element => {
-        const sourceLines = [];
-        const targetLines = [];
-        lines.forEach(line => {
-            if (PlaitLine.isBoundElementOfSource(line, element)) {
-                sourceLines.push(line);
-            }
-            if (PlaitLine.isBoundElementOfTarget(line, element)) {
-                targetLines.push(line);
-            }
-        });
-        element.id = idCreator();
-        // update lines
-        sourceLines.forEach(sourceLine => (sourceLine.source.boundId = element.id));
-        targetLines.forEach(targetLine => (targetLine.target.boundId = element.id));
-        element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
-        Transforms.insertNode(board, element, [board.children.length]);
-    });
-    lines.forEach(element => {
-        element.id = idCreator();
-        element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
-        Transforms.insertNode(board, element, [board.children.length]);
+const movePointByZoomAndOriginPoint = (p, resizeOriginPoint, xZoom, yZoom) => {
+    const offsetX = (p[0] - resizeOriginPoint[0]) * xZoom;
+    const offsetY = (p[1] - resizeOriginPoint[1]) * yZoom;
+    return [p[0] + offsetX, p[1] + offsetY];
+};
+/**
+ * 1. Rotate 90°
+ * 2. Scale based on the rotated points
+ * 3. Reverse rotate the scaled points by 90°
+ */
+const getResizePointsByOtherwiseAxis = (board, points, resizeOriginPoint, xZoom, yZoom) => {
+    const currentRectangle = RectangleClient.getRectangleByPoints(points);
+    debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(board, currentRectangle, { stroke: 'black' });
+    let resultPoints = points;
+    resultPoints = rotatePoints(resultPoints, RectangleClient.getCenterPoint(currentRectangle), (1 / 2) * Math.PI);
+    debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(board, resultPoints, { stroke: 'blue' });
+    resultPoints = resultPoints.map(p => {
+        return movePointByZoomAndOriginPoint(p, resizeOriginPoint, xZoom, yZoom);
     });
-    Transforms.addSelectionWithTemporaryElements(board, elements);
+    debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(board, resultPoints);
+    const newRectangle = RectangleClient.getRectangleByPoints(resultPoints);
+    return rotatePoints(resultPoints, RectangleClient.getCenterPoint(newRectangle), -(1 / 2) * Math.PI);
 };
 
-const withDrawFragment = (baseBoard) => {
-    const board = baseBoard;
-    const { getDeletedFragment, setFragment, insertFragment } = board;
-    board.getDeletedFragment = (data) => {
-        const drawElements = getSelectedDrawElements(board);
-        if (drawElements.length) {
-            const geometryElements = drawElements.filter(value => PlaitDrawElement.isGeometry(value));
-            const lineElements = drawElements.filter(value => PlaitDrawElement.isLine(value));
-            const imageElements = drawElements.filter(value => PlaitDrawElement.isImage(value));
-            const boundLineElements = [
-                ...getBoundedLineElements(board, geometryElements),
-                ...getBoundedLineElements(board, imageElements)
-            ].filter(line => !lineElements.includes(line));
-            data.push(...[
-                ...geometryElements,
-                ...lineElements,
-                ...imageElements,
-                ...boundLineElements.filter(line => !lineElements.includes(line))
-            ]);
-        }
-        return getDeletedFragment(data);
+const debugKey = 'debug:plait:point-for-geometry';
+const debugGenerator = createDebugGenerator(debugKey);
+const EQUAL_SPACING = 10;
+function getSnapResizingRefOptions(board, resizeRef, resizeState, resizeOriginPointAndHandlePoint, isAspectRatio, isFromCorner) {
+    const { originPoint, handlePoint } = resizeOriginPointAndHandlePoint;
+    const resizePoints = [resizeState.startPoint, resizeState.endPoint];
+    const { xZoom, yZoom } = getResizeZoom(resizePoints, originPoint, handlePoint, isFromCorner, isAspectRatio);
+    let activeElements;
+    let resizeOriginPoint = [];
+    if (Array.isArray(resizeRef.element)) {
+        activeElements = resizeRef.element;
+        const rectangle = getRectangleByElements(board, resizeRef.element, false);
+        resizeOriginPoint = RectangleClient.getPoints(rectangle);
+    }
+    else {
+        activeElements = [resizeRef.element];
+        resizeOriginPoint = resizeRef.element.points;
+    }
+    const points = resizeOriginPoint.map(p => {
+        return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
+    });
+    const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(points), getSelectionAngle(activeElements)) ||
+        RectangleClient.getRectangleByPoints(points);
+    const resizeHandlePoint = movePointByZoomAndOriginPoint(handlePoint, originPoint, xZoom, yZoom);
+    const [x, y] = getUnitVectorByPointAndPoint(originPoint, resizeHandlePoint);
+    return {
+        resizePoints,
+        resizeOriginPoint,
+        activeRectangle,
+        originPoint,
+        handlePoint,
+        directionFactors: [getDirectionFactorByDirectionComponent(x), getDirectionFactorByDirectionComponent(y)],
+        isAspectRatio,
+        isFromCorner
     };
-    board.setFragment = (data, clipboardContext, rectangle, type) => {
-        const targetDrawElements = getSelectedDrawElements(board);
-        let boundLineElements = [];
-        if (targetDrawElements.length) {
-            if (type === 'cut') {
-                const geometryElements = targetDrawElements.filter(value => PlaitDrawElement.isGeometry(value));
-                const lineElements = targetDrawElements.filter(value => PlaitDrawElement.isLine(value));
-                boundLineElements = getBoundedLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
-            }
-            const selectedElements = [...targetDrawElements, ...boundLineElements];
-            const elements = buildClipboardData(board, selectedElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
-            const text = getElementsText(selectedElements);
-            if (!clipboardContext) {
-                clipboardContext = createClipboardContext(WritableClipboardType.elements, elements, text);
-            }
-            else {
-                clipboardContext = addClipboardContext(clipboardContext, {
-                    text,
-                    type: WritableClipboardType.elements,
-                    data: elements
-                });
-            }
-        }
-        setFragment(data, clipboardContext, rectangle, type);
+}
+function getSnapResizingRef(board, activeElements, resizeSnapOptions) {
+    const snapG = createG();
+    const snapRectangles = getSnapRectangles(board, activeElements);
+    let snapLineDelta = getIsometricLineDelta(snapRectangles, resizeSnapOptions);
+    if (snapLineDelta.deltaX === 0 && snapLineDelta.deltaY === 0) {
+        snapLineDelta = getSnapPointDelta(snapRectangles, resizeSnapOptions);
+    }
+    const angle = getSelectionAngle(activeElements);
+    const activePointAndZoom = getActivePointAndZoom(snapLineDelta, resizeSnapOptions, angle);
+    const isometricLinesG = drawIsometricSnapLines(board, activePointAndZoom.activePoints, snapRectangles, resizeSnapOptions, angle);
+    const pointLinesG = drawResizingPointSnapLines(board, activePointAndZoom.activePoints, snapRectangles, resizeSnapOptions, angle);
+    snapG.append(isometricLinesG, pointLinesG);
+    return { ...activePointAndZoom, ...snapLineDelta, snapG };
+}
+function getSnapPointDelta(snapRectangles, resizeSnapOptions) {
+    let pointLineDelta = {
+        deltaX: 0,
+        deltaY: 0
     };
-    board.insertFragment = (data, clipboardData, targetPoint) => {
-        const selectedElements = getSelectedElements(board);
-        if (clipboardData?.files?.length) {
-            const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
-            const canInsertionImage = !getElementOfFocusedImage(board) && !(selectedElements.length === 1 && board.isImageBindingAllowed(selectedElements[0]));
-            if (acceptImageArray.includes(clipboardData.files[0].type) && canInsertionImage) {
-                const imageFile = clipboardData.files[0];
-                buildImage(board, imageFile, DEFAULT_IMAGE_WIDTH, imageItem => {
-                    DrawTransforms.insertImage(board, imageItem, targetPoint);
-                });
-                return;
-            }
-        }
-        if (clipboardData?.elements?.length) {
-            const drawElements = clipboardData.elements?.filter(value => PlaitDrawElement.isDrawElement(value));
-            if (clipboardData.elements && clipboardData.elements.length > 0 && drawElements.length > 0) {
-                insertClipboardData(board, drawElements, targetPoint);
-            }
-        }
-        if (clipboardData?.text) {
-            if (!clipboardData.elements || clipboardData.elements.length === 0) {
-                // (*￣︶￣)
-                const insertAsChildren = selectedElements.length === 1 && selectedElements[0].children;
-                const insertAsFreeText = !insertAsChildren;
-                if (insertAsFreeText) {
-                    DrawTransforms.insertText(board, targetPoint, clipboardData.text);
-                    return;
-                }
+    const { isAspectRatio, activeRectangle, directionFactors } = resizeSnapOptions;
+    const drawHorizontal = directionFactors[0] !== 0 || isAspectRatio;
+    const drawVertical = directionFactors[1] !== 0 || isAspectRatio;
+    if (drawHorizontal) {
+        const xSnapAxis = getTripleAxis(activeRectangle, true);
+        const pointX = directionFactors[0] === -1 ? xSnapAxis[0] : xSnapAxis[2];
+        const deltaX = getMinPointDelta(snapRectangles, pointX, true);
+        if (Math.abs(deltaX) < SNAP_TOLERANCE) {
+            pointLineDelta.deltaX = deltaX;
+            if (pointLineDelta.deltaX !== 0 && isAspectRatio) {
+                pointLineDelta.deltaY = pointLineDelta.deltaX / (activeRectangle.width / activeRectangle.height);
+                return pointLineDelta;
             }
         }
-        insertFragment(data, clipboardData, targetPoint);
-    };
-    return board;
-};
-const getBoundedLineElements = (board, plaitShapes) => {
-    const lines = getLines(board);
-    return lines.filter(line => plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape)));
-};
-
-const withLineCreateByDraw = (board) => {
-    const { pointerDown, pointerMove, globalPointerUp } = board;
-    let start = null;
-    let sourceElement;
-    let lineShapeG = null;
-    let temporaryElement = null;
-    board.pointerDown = (event) => {
-        const linePointers = getLinePointers();
-        const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
-        if (!PlaitBoard.isReadonly(board) && isLinePointer && isDrawingMode(board)) {
-            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            start = point;
-            const hitElement = getSnappingGeometry(board, point);
-            if (hitElement) {
-                sourceElement = hitElement;
+    }
+    if (drawVertical) {
+        const ySnapAxis = getTripleAxis(activeRectangle, false);
+        const pointY = directionFactors[1] === -1 ? ySnapAxis[0] : ySnapAxis[2];
+        const deltaY = getMinPointDelta(snapRectangles, pointY, false);
+        if (Math.abs(deltaY) < SNAP_TOLERANCE) {
+            pointLineDelta.deltaY = deltaY;
+            if (pointLineDelta.deltaY !== 0 && isAspectRatio) {
+                pointLineDelta.deltaX = pointLineDelta.deltaY * (activeRectangle.width / activeRectangle.height);
+                return pointLineDelta;
             }
-            preventTouchMove(board, event, true);
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        lineShapeG?.remove();
-        lineShapeG = createG();
-        let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        if (start) {
-            const lineShape = PlaitBoard.getPointer(board);
-            temporaryElement = handleLineCreating(board, lineShape, start, movingPoint, sourceElement, lineShapeG);
-        }
-        pointerMove(event);
-    };
-    board.globalPointerUp = (event) => {
-        if (temporaryElement) {
-            Transforms.insertNode(board, temporaryElement, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, temporaryElement);
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
         }
-        lineShapeG?.remove();
-        lineShapeG = null;
-        sourceElement = null;
-        start = null;
-        temporaryElement = null;
-        preventTouchMove(board, event, false);
-        globalPointerUp(event);
-    };
-    return board;
-};
-
-const debugKey$1 = 'debug:plait:align-for-geometry';
-const debugGenerator$1 = createDebugGenerator(debugKey$1);
-const ALIGN_TOLERANCE = 2;
-const EQUAL_SPACING = 10;
-const ALIGN_SPACING = 24;
-class ResizeSnapReaction {
-    constructor(board, activeElements) {
-        this.board = board;
-        this.activeElements = activeElements;
-        this.alignRectangles = this.getAlignRectangle();
-        this.angle = getSelectionAngle(activeElements);
-    }
-    getAlignRectangle() {
-        const elements = findElements(this.board, {
-            match: element => this.board.isAlign(element) && !this.activeElements.some(item => item.id === element.id),
-            recursion: () => false,
-            isReverse: false
-        });
-        return elements.map(item => getRectangleByAngle(this.board.getRectangle(item), item.angle) || this.board.getRectangle(item));
-    }
-    getSnapRef(resizeAlignDelta, resizeSnapOptions) {
-        const { deltaX, deltaY } = resizeAlignDelta;
-        const { resizeState, originPoint, handlePoint, isFromCorner, isAspectRatio, resizeOriginPoints } = resizeSnapOptions;
-        const newResizeState = {
-            ...resizeState,
-            endPoint: [resizeState.endPoint[0] + deltaX, resizeState.endPoint[1] + deltaY]
-        };
-        const { xZoom, yZoom } = getResizeZoom(newResizeState, originPoint, handlePoint, isFromCorner, isAspectRatio);
-        let activePoints = resizeOriginPoints.map(p => {
+    }
+    return pointLineDelta;
+}
+function getActivePointAndZoom(resizeSnapDelta, resizeSnapOptions, angle) {
+    const { deltaX, deltaY } = resizeSnapDelta;
+    const { resizePoints, isCreate } = resizeSnapOptions;
+    const newResizePoints = [resizePoints[0], [resizePoints[1][0] + deltaX, resizePoints[1][1] + deltaY]];
+    let activePoints = newResizePoints;
+    let xZoom = 0;
+    let yZoom = 0;
+    if (!isCreate) {
+        const { originPoint, handlePoint, isFromCorner, isAspectRatio, resizeOriginPoint } = resizeSnapOptions;
+        const resizeZoom = getResizeZoom(newResizePoints, originPoint, handlePoint, isFromCorner, isAspectRatio);
+        xZoom = resizeZoom.xZoom;
+        yZoom = resizeZoom.yZoom;
+        activePoints = resizeOriginPoint.map(p => {
             return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
         });
-        if (this.angle) {
-            activePoints = resetPointsAfterResize(RectangleClient.getRectangleByPoints(resizeOriginPoints), RectangleClient.getRectangleByPoints(activePoints), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeOriginPoints)), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(activePoints)), this.angle);
+        if (angle) {
+            activePoints = resetPointsAfterResize(RectangleClient.getRectangleByPoints(resizeOriginPoint), RectangleClient.getRectangleByPoints(activePoints), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeOriginPoint)), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(activePoints)), angle);
         }
-        return {
-            deltaX,
-            deltaY,
-            xZoom,
-            yZoom,
-            activePoints
-        };
     }
-    getEqualLineDelta(resizeSnapOptions) {
-        let equalLineDelta = {
-            deltaX: 0,
-            deltaY: 0
-        };
-        const { isAspectRatio, activeRectangle } = resizeSnapOptions;
-        const widthAlignRectangle = this.alignRectangles.find(item => Math.abs(item.width - activeRectangle.width) < ALIGN_TOLERANCE);
-        if (widthAlignRectangle) {
-            const deltaWidth = widthAlignRectangle.width - activeRectangle.width;
-            equalLineDelta.deltaX = deltaWidth * resizeSnapOptions.directionFactors[0];
-            if (isAspectRatio) {
-                const deltaHeight = deltaWidth / (activeRectangle.width / activeRectangle.height);
-                equalLineDelta.deltaY = deltaHeight * resizeSnapOptions.directionFactors[1];
-                return equalLineDelta;
-            }
-        }
-        const heightAlignRectangle = this.alignRectangles.find(item => Math.abs(item.height - activeRectangle.height) < ALIGN_TOLERANCE);
-        if (heightAlignRectangle) {
-            const deltaHeight = heightAlignRectangle.height - activeRectangle.height;
-            equalLineDelta.deltaY = deltaHeight * resizeSnapOptions.directionFactors[1];
-            if (isAspectRatio) {
-                const deltaWidth = deltaHeight * (activeRectangle.width / activeRectangle.height);
-                equalLineDelta.deltaX = deltaWidth * resizeSnapOptions.directionFactors[0];
-                return equalLineDelta;
-            }
-        }
-        return equalLineDelta;
-    }
-    drawEqualLines(activePoints, resizeSnapOptions) {
-        let widthEqualPoints = [];
-        let heightEqualPoints = [];
-        const drawHorizontalLine = resizeSnapOptions.directionFactors[0] !== 0 || resizeSnapOptions.isAspectRatio;
-        const drawVerticalLine = resizeSnapOptions.directionFactors[1] !== 0 || resizeSnapOptions.isAspectRatio;
-        const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(activePoints), this.angle) ||
-            RectangleClient.getRectangleByPoints(activePoints);
-        for (let alignRectangle of this.alignRectangles) {
-            if (activeRectangle.width === alignRectangle.width && drawHorizontalLine) {
-                widthEqualPoints.push(getEqualLinePoints(alignRectangle, true));
-            }
-            if (activeRectangle.height === alignRectangle.height && drawVerticalLine) {
-                heightEqualPoints.push(getEqualLinePoints(alignRectangle, false));
-            }
-        }
-        if (widthEqualPoints.length && drawHorizontalLine) {
-            widthEqualPoints.push(getEqualLinePoints(activeRectangle, true));
-        }
-        if (heightEqualPoints.length && drawVerticalLine) {
-            heightEqualPoints.push(getEqualLinePoints(activeRectangle, false));
+    return {
+        xZoom,
+        yZoom,
+        activePoints
+    };
+}
+function getIsometricLineDelta(snapRectangles, resizeSnapOptions) {
+    let isometricLineDelta = {
+        deltaX: 0,
+        deltaY: 0
+    };
+    const { isAspectRatio, activeRectangle } = resizeSnapOptions;
+    const widthSnapRectangle = snapRectangles.find(item => Math.abs(item.width - activeRectangle.width) < SNAP_TOLERANCE);
+    if (widthSnapRectangle) {
+        const deltaWidth = widthSnapRectangle.width - activeRectangle.width;
+        isometricLineDelta.deltaX = deltaWidth * resizeSnapOptions.directionFactors[0];
+        if (isAspectRatio) {
+            const deltaHeight = deltaWidth / (activeRectangle.width / activeRectangle.height);
+            isometricLineDelta.deltaY = deltaHeight * resizeSnapOptions.directionFactors[1];
+            return isometricLineDelta;
         }
-        const equalLinePoints = [...widthEqualPoints, ...heightEqualPoints];
-        return drawEqualLines(this.board, equalLinePoints);
     }
-    getAlignLineDelta(resizeSnapOptions) {
-        let alignLineDelta = {
-            deltaX: 0,
-            deltaY: 0
-        };
-        const { isAspectRatio, activeRectangle, directionFactors } = resizeSnapOptions;
-        const drawHorizontal = directionFactors[0] !== 0 || isAspectRatio;
-        const drawVertical = directionFactors[1] !== 0 || isAspectRatio;
-        if (drawHorizontal) {
-            const xAlignAxis = getTripleAlignAxis(activeRectangle, true);
-            const alignX = directionFactors[0] === -1 ? xAlignAxis[0] : xAlignAxis[2];
-            const deltaX = getMinAlignDelta(this.alignRectangles, alignX, true);
-            if (Math.abs(deltaX) < ALIGN_TOLERANCE) {
-                alignLineDelta.deltaX = deltaX;
-                if (alignLineDelta.deltaX !== 0 && isAspectRatio) {
-                    alignLineDelta.deltaY = alignLineDelta.deltaX / (activeRectangle.width / activeRectangle.height);
-                    return alignLineDelta;
-                }
-            }
-        }
-        if (drawVertical) {
-            const yAlignAxis = getTripleAlignAxis(activeRectangle, false);
-            const alignY = directionFactors[1] === -1 ? yAlignAxis[0] : yAlignAxis[2];
-            const deltaY = getMinAlignDelta(this.alignRectangles, alignY, false);
-            if (Math.abs(deltaY) < ALIGN_TOLERANCE) {
-                alignLineDelta.deltaY = deltaY;
-                if (alignLineDelta.deltaY !== 0 && isAspectRatio) {
-                    alignLineDelta.deltaX = alignLineDelta.deltaY * (activeRectangle.width / activeRectangle.height);
-                    return alignLineDelta;
-                }
-            }
-        }
-        return alignLineDelta;
-    }
-    drawAlignLines(activePoints, resizeSnapOptions) {
-        debugGenerator$1.isDebug() && debugGenerator$1.clear();
-        let alignLinePoints = [];
-        const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(activePoints), this.angle) ||
-            RectangleClient.getRectangleByPoints(activePoints);
-        debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(this.board, activeRectangle, { stroke: 'green' });
-        const alignAxisX = getTripleAlignAxis(activeRectangle, true);
-        const alignAxisY = getTripleAlignAxis(activeRectangle, false);
-        const alignLineRefs = [
-            {
-                axis: alignAxisX[0],
-                isHorizontal: true,
-                alignRectangles: []
-            },
-            {
-                axis: alignAxisX[2],
-                isHorizontal: true,
-                alignRectangles: []
-            },
-            {
-                axis: alignAxisY[0],
-                isHorizontal: false,
-                alignRectangles: []
-            },
-            {
-                axis: alignAxisY[2],
-                isHorizontal: false,
-                alignRectangles: []
-            }
-        ];
-        const setAlignLine = (axis, alignRectangle, isHorizontal) => {
-            const boundingRectangle = RectangleClient.inflate(RectangleClient.getBoundingRectangle([activeRectangle, alignRectangle]), ALIGN_SPACING);
-            if (isHorizontal) {
-                const pointStart = [axis, boundingRectangle.y];
-                const pointEnd = [axis, boundingRectangle.y + boundingRectangle.height];
-                alignLinePoints.push([pointStart, pointEnd]);
-            }
-            else {
-                const pointStart = [boundingRectangle.x, axis];
-                const pointEnd = [boundingRectangle.x + boundingRectangle.width, axis];
-                alignLinePoints.push([pointStart, pointEnd]);
-            }
-        };
-        const { isAspectRatio, directionFactors } = resizeSnapOptions;
-        const drawHorizontal = directionFactors[0] !== 0 || isAspectRatio;
-        const drawVertical = directionFactors[1] !== 0 || isAspectRatio;
-        for (let index = 0; index < this.alignRectangles.length; index++) {
-            const element = this.alignRectangles[index];
-            debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(this.board, element);
-            if (isAlign(alignLineRefs[0].axis, element, alignLineRefs[0].isHorizontal)) {
-                alignLineRefs[0].alignRectangles.push(element);
-            }
-            if (isAlign(alignLineRefs[1].axis, element, alignLineRefs[1].isHorizontal)) {
-                alignLineRefs[1].alignRectangles.push(element);
-            }
-            if (isAlign(alignLineRefs[2].axis, element, alignLineRefs[2].isHorizontal)) {
-                alignLineRefs[2].alignRectangles.push(element);
-            }
-            if (isAlign(alignLineRefs[3].axis, element, alignLineRefs[3].isHorizontal)) {
-                alignLineRefs[3].alignRectangles.push(element);
-            }
+    const heightSnapRectangle = snapRectangles.find(item => Math.abs(item.height - activeRectangle.height) < SNAP_TOLERANCE);
+    if (heightSnapRectangle) {
+        const deltaHeight = heightSnapRectangle.height - activeRectangle.height;
+        isometricLineDelta.deltaY = deltaHeight * resizeSnapOptions.directionFactors[1];
+        if (isAspectRatio) {
+            const deltaWidth = deltaHeight * (activeRectangle.width / activeRectangle.height);
+            isometricLineDelta.deltaX = deltaWidth * resizeSnapOptions.directionFactors[0];
+            return isometricLineDelta;
         }
-        if (drawHorizontal && alignLineRefs[0].alignRectangles.length) {
-            const leftRectangle = alignLineRefs[0].alignRectangles.length === 1
-                ? alignLineRefs[0].alignRectangles[0]
-                : getNearestAlignRectangle(alignLineRefs[0].alignRectangles, activeRectangle);
-            setAlignLine(alignLineRefs[0].axis, leftRectangle, alignLineRefs[0].isHorizontal);
-        }
-        if (drawHorizontal && alignLineRefs[1].alignRectangles.length) {
-            const rightRectangle = alignLineRefs[1].alignRectangles.length === 1
-                ? alignLineRefs[1].alignRectangles[0]
-                : getNearestAlignRectangle(alignLineRefs[1].alignRectangles, activeRectangle);
-            setAlignLine(alignLineRefs[1].axis, rightRectangle, alignLineRefs[1].isHorizontal);
-        }
-        if (drawVertical && alignLineRefs[2].alignRectangles.length) {
-            const topRectangle = alignLineRefs[2].alignRectangles.length === 1
-                ? alignLineRefs[2].alignRectangles[0]
-                : getNearestAlignRectangle(alignLineRefs[2].alignRectangles, activeRectangle);
-            setAlignLine(alignLineRefs[2].axis, topRectangle, alignLineRefs[2].isHorizontal);
-        }
-        if (drawVertical && alignLineRefs[3].alignRectangles.length) {
-            const bottomRectangle = alignLineRefs[3].alignRectangles.length === 1
-                ? alignLineRefs[3].alignRectangles[0]
-                : getNearestAlignRectangle(alignLineRefs[3].alignRectangles, activeRectangle);
-            setAlignLine(alignLineRefs[3].axis, bottomRectangle, alignLineRefs[3].isHorizontal);
-        }
-        return drawAlignLines(this.board, alignLinePoints);
-    }
-    handleResizeSnap(resizeSnapOptions) {
-        const alignG = createG();
-        let alignLineDelta = this.getEqualLineDelta(resizeSnapOptions);
-        if (alignLineDelta.deltaX === 0 && alignLineDelta.deltaY === 0) {
-            alignLineDelta = this.getAlignLineDelta(resizeSnapOptions);
-        }
-        const equalLineRef = this.getSnapRef(alignLineDelta, resizeSnapOptions);
-        const equalLinesG = this.drawEqualLines(equalLineRef.activePoints, resizeSnapOptions);
-        const alignLinesG = this.drawAlignLines(equalLineRef.activePoints, resizeSnapOptions);
-        alignG.append(equalLinesG, alignLinesG);
-        return { ...equalLineRef, alignG };
     }
+    return isometricLineDelta;
 }
-function getBarPoint(point, isHorizontal) {
-    return isHorizontal
-        ? [
-            [point[0], point[1] - 4],
-            [point[0], point[1] + 4]
-        ]
-        : [
-            [point[0] - 4, point[1]],
-            [point[0] + 4, point[1]]
-        ];
-}
-function getEqualLinePoints(rectangle, isHorizontal) {
+function getIsometricLinePoints(rectangle, isHorizontal) {
     return isHorizontal
         ? [
             [rectangle.x, rectangle.y - EQUAL_SPACING],
@@ -4090,359 +4116,393 @@ function getEqualLinePoints(rectangle, isHorizontal) {
             [rectangle.x - EQUAL_SPACING, rectangle.y + rectangle.height]
         ];
 }
-function drawEqualLines(board, lines) {
-    const g = createG();
-    lines.forEach(line => {
-        if (!line.length)
-            return;
-        const yAlign = PlaitBoard.getRoughSVG(board).line(line[0][0], line[0][1], line[1][0], line[1][1], {
-            stroke: SELECTION_BORDER_COLOR,
-            strokeWidth: 1
-        });
-        g.appendChild(yAlign);
-        line.forEach(point => {
-            const barPoint = getBarPoint(point, !!Point.isHorizontal(line[0], line[1]));
-            const bar = PlaitBoard.getRoughSVG(board).line(barPoint[0][0], barPoint[0][1], barPoint[1][0], barPoint[1][1], {
-                stroke: SELECTION_BORDER_COLOR,
-                strokeWidth: 1
-            });
-            g.appendChild(bar);
-        });
-    });
-    return g;
-}
-function drawAlignLines(board, lines) {
-    const g = createG();
-    lines.forEach(points => {
-        if (!points.length)
-            return;
-        const xAlign = PlaitBoard.getRoughSVG(board).line(points[0][0], points[0][1], points[1][0], points[1][1], {
-            stroke: SELECTION_BORDER_COLOR,
-            strokeWidth: 1,
-            strokeLineDash: [4, 4]
-        });
-        g.appendChild(xAlign);
-    });
-    return g;
+function drawResizingPointSnapLines(board, activePoints, snapRectangles, resizeSnapOptions, angle) {
+    debugGenerator.isDebug() && debugGenerator.clear();
+    const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(activePoints), angle) ||
+        RectangleClient.getRectangleByPoints(activePoints);
+    const { isAspectRatio, directionFactors } = resizeSnapOptions;
+    const drawHorizontal = directionFactors[0] !== 0 || isAspectRatio;
+    const drawVertical = directionFactors[1] !== 0 || isAspectRatio;
+    return drawPointSnapLines(board, activeRectangle, snapRectangles, drawHorizontal, drawVertical);
 }
-const getTripleAlignAxis = (rectangle, isHorizontal) => {
-    const axis = isHorizontal ? 'x' : 'y';
-    const side = isHorizontal ? 'width' : 'height';
-    return [rectangle[axis], rectangle[axis] + rectangle[side] / 2, rectangle[axis] + rectangle[side]];
-};
-const isAlign = (axis, rectangle, isHorizontal) => {
-    const alignAxis = getTripleAlignAxis(rectangle, isHorizontal);
-    return alignAxis.includes(axis);
-};
-const getClosestDelta = (axis, rectangle, isHorizontal) => {
-    const alignAxis = getTripleAlignAxis(rectangle, isHorizontal);
-    const deltas = alignAxis.map(item => item - axis);
-    const absDeltas = deltas.map(item => Math.abs(item));
-    const index = absDeltas.indexOf(Math.min(...absDeltas));
-    return deltas[index];
-};
-function getMinAlignDelta(alignRectangles, axis, isHorizontal) {
-    let delta = ALIGN_TOLERANCE;
-    alignRectangles.forEach(item => {
-        const distance = getClosestDelta(axis, item, isHorizontal);
-        if (Math.abs(distance) < Math.abs(delta)) {
-            delta = distance;
+function drawIsometricSnapLines(board, activePoints, snapRectangles, resizeSnapOptions, angle) {
+    let widthIsometricPoints = [];
+    let heightIsometricPoints = [];
+    const drawHorizontalLine = resizeSnapOptions.directionFactors[0] !== 0 || resizeSnapOptions.isAspectRatio;
+    const drawVerticalLine = resizeSnapOptions.directionFactors[1] !== 0 || resizeSnapOptions.isAspectRatio;
+    const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(activePoints), angle) ||
+        RectangleClient.getRectangleByPoints(activePoints);
+    for (let snapRectangle of snapRectangles) {
+        if (activeRectangle.width === snapRectangle.width && drawHorizontalLine) {
+            widthIsometricPoints.push(getIsometricLinePoints(snapRectangle, true));
         }
-    });
-    return delta;
-}
-function getNearestAlignRectangle(alignRectangles, activeRectangle) {
-    let minDistance = Infinity;
-    let nearestRectangle = alignRectangles[0];
-    alignRectangles.forEach(item => {
-        const distance = Math.sqrt(Math.pow(activeRectangle.x - item.x, 2) + Math.pow(activeRectangle.y - item.y, 2));
-        if (distance < minDistance) {
-            minDistance = distance;
-            nearestRectangle = item;
+        if (activeRectangle.height === snapRectangle.height && drawVerticalLine) {
+            heightIsometricPoints.push(getIsometricLinePoints(snapRectangle, false));
         }
-    });
-    return nearestRectangle;
-}
-function getResizeSnapRef(board, resizeRef, resizeState, resizeOriginPointAndHandlePoint, isAspectRatio, isFromCorner) {
-    const { originPoint, handlePoint } = resizeOriginPointAndHandlePoint;
-    const { xZoom, yZoom } = getResizeZoom(resizeState, originPoint, handlePoint, isFromCorner, isAspectRatio);
-    let activeElements;
-    let resizeOriginPoints = [];
-    if (Array.isArray(resizeRef.element)) {
-        activeElements = resizeRef.element;
-        const rectangle = getRectangleByElements(board, resizeRef.element, false);
-        resizeOriginPoints = RectangleClient.getPoints(rectangle);
     }
-    else {
-        activeElements = [resizeRef.element];
-        resizeOriginPoints = resizeRef.element.points;
+    if (widthIsometricPoints.length && drawHorizontalLine) {
+        widthIsometricPoints.push(getIsometricLinePoints(activeRectangle, true));
     }
-    const points = resizeOriginPoints.map(p => {
-        return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
-    });
-    const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(points), getSelectionAngle(activeElements)) ||
-        RectangleClient.getRectangleByPoints(points);
-    const resizeSnapReaction = new ResizeSnapReaction(board, activeElements);
-    const resizeHandlePoint = movePointByZoomAndOriginPoint(handlePoint, originPoint, xZoom, yZoom);
-    const [x, y] = getUnitVectorByPointAndPoint(originPoint, resizeHandlePoint);
-    return resizeSnapReaction.handleResizeSnap({
-        resizeState,
-        resizeOriginPoints,
-        activeRectangle,
-        originPoint,
-        handlePoint,
-        directionFactors: [getDirectionFactorByDirectionComponent(x), getDirectionFactorByDirectionComponent(y)],
-        isAspectRatio,
-        isFromCorner
-    });
+    if (heightIsometricPoints.length && drawVerticalLine) {
+        heightIsometricPoints.push(getIsometricLinePoints(activeRectangle, false));
+    }
+    const isometricLines = [...widthIsometricPoints, ...heightIsometricPoints];
+    return drawSolidLines(board, isometricLines);
 }
 
-const debugKey = 'debug:plait:resize-for-rotation';
-const debugGenerator = createDebugGenerator(debugKey);
-function withDrawResize(board) {
-    const { afterChange, drawActiveRectangle } = board;
-    let alignG;
-    let handleG;
-    let needCustomActiveRectangle = false;
-    let resizeActivePoints = null;
-    const canResize = () => {
-        const elements = getSelectedElements(board);
-        return elements.length > 1 && elements.every(el => PlaitDrawElement.isDrawElement(el));
-    };
-    const options = {
-        key: 'draw-elements',
-        canResize,
-        hitTest: (point) => {
-            const elements = getSelectedElements(board);
-            const boundingRectangle = getRectangleByElements(board, elements, false);
-            const angle = getSelectionAngle(elements);
-            const handleRef = getHitRectangleResizeHandleRef(board, boundingRectangle, point, angle);
-            if (handleRef) {
-                return {
-                    element: elements,
-                    rectangle: boundingRectangle,
-                    handle: handleRef.handle,
-                    cursorClass: handleRef.cursorClass
-                };
-            }
-            return null;
-        },
-        onResize: (resizeRef, resizeState) => {
-            alignG?.remove();
-            debugGenerator.isDebug() && debugGenerator.clear();
-            const isFromCorner = isCornerHandle(board, resizeRef.handle);
-            const isAspectRatio = resizeState.isShift || isFromCorner;
-            const centerPoint = RectangleClient.getCenterPoint(resizeRef.rectangle);
-            const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, resizeRef);
-            const angle = getSelectionAngle(resizeRef.element);
-            let bulkRotationRef;
-            if (angle) {
-                bulkRotationRef = {
-                    angle: angle,
-                    offsetX: 0,
-                    offsetY: 0,
-                    newCenterPoint: [0, 0]
-                };
-                const [rotatedStartPoint, rotateEndPoint] = rotatePoints([resizeState.startPoint, resizeState.endPoint], centerPoint, -bulkRotationRef.angle);
-                resizeState.startPoint = rotatedStartPoint;
-                resizeState.endPoint = rotateEndPoint;
-            }
-            const resizeAlignRef = getResizeSnapRef(board, resizeRef, resizeState, {
-                originPoint,
-                handlePoint
-            }, isAspectRatio, isFromCorner);
-            resizeActivePoints = resizeAlignRef.activePoints;
-            alignG = resizeAlignRef.alignG;
-            PlaitBoard.getElementActiveHost(board).append(alignG);
-            if (bulkRotationRef) {
-                const boundingBoxCornerPoints = RectangleClient.getPoints(resizeRef.rectangle);
-                const resizedBoundingBoxCornerPoints = boundingBoxCornerPoints.map(p => {
-                    return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
-                });
-                const newBoundingBox = RectangleClient.getRectangleByPoints(resizedBoundingBoxCornerPoints);
-                debugGenerator.isDebug() && debugGenerator.drawRectangle(board, newBoundingBox, { stroke: 'blue' });
-                const newBoundingBoxCenter = RectangleClient.getCenterPoint(newBoundingBox);
-                const adjustedNewBoundingBoxPoints = resetPointsAfterResize(RectangleClient.getRectangleByPoints(boundingBoxCornerPoints), RectangleClient.getRectangleByPoints(resizedBoundingBoxCornerPoints), centerPoint, newBoundingBoxCenter, bulkRotationRef.angle);
-                const newCenter = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(adjustedNewBoundingBoxPoints));
-                bulkRotationRef = Object.assign(bulkRotationRef, {
-                    offsetX: newCenter[0] - newBoundingBoxCenter[0],
-                    offsetY: newCenter[1] - newBoundingBoxCenter[1],
-                    newCenterPoint: newCenter
-                });
-                debugGenerator.isDebug() && debugGenerator.drawRectangle(board, adjustedNewBoundingBoxPoints);
-            }
-            resizeRef.element.forEach(target => {
-                const path = PlaitBoard.findPath(board, target);
-                let points;
-                if (bulkRotationRef) {
-                    const reversedPoints = rotatedDataPoints(target.points, centerPoint, -bulkRotationRef.angle);
-                    points = reversedPoints.map((p) => {
-                        return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
+const withGeometryCreateByDrag = (board) => {
+    const { pointerMove, globalPointerUp } = board;
+    let geometryShapeG = null;
+    let temporaryElement = null;
+    let fakeCreateTextRef = null;
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const pointer = PlaitBoard.getPointer(board);
+        if (dragMode) {
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
+            if (pointer === BasicShapes.text) {
+                const property = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']);
+                const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(movingPoint, property.width, property.height));
+                temporaryElement = createTextElement(board, points);
+                if (!fakeCreateTextRef) {
+                    const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
+                        getRectangle: () => {
+                            return getTextRectangle(temporaryElement);
+                        }
                     });
-                    const adjustTargetPoints = points.map(p => [
-                        p[0] + bulkRotationRef.offsetX,
-                        p[1] + bulkRotationRef.offsetY
-                    ]);
-                    points = rotatedDataPoints(adjustTargetPoints, bulkRotationRef.newCenterPoint, bulkRotationRef.angle);
+                    PlaitBoard.getComponent(board)
+                        .viewContainerRef.injector.get(NgZone)
+                        .run(() => {
+                        textManage.draw(temporaryElement.text);
+                    });
+                    fakeCreateTextRef = {
+                        g: createG(),
+                        textManage
+                    };
+                    PlaitBoard.getHost(board).append(fakeCreateTextRef.g);
+                    fakeCreateTextRef.g.append(textManage.g);
                 }
                 else {
-                    if (hasValidAngle(target)) {
-                        needCustomActiveRectangle = true;
-                    }
-                    if (hasValidAngle(target) && isAxisChangedByAngle(target.angle)) {
-                        points = getResizePointsByOtherwiseAxis(board, target.points, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
-                    }
-                    else {
-                        points = target.points.map(p => {
-                            return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
-                        });
-                    }
+                    fakeCreateTextRef.textManage.updateRectangle();
+                    fakeCreateTextRef.g.append(fakeCreateTextRef.textManage.g);
                 }
-                if (PlaitDrawElement.isGeometry(target)) {
-                    const { height: textHeight } = getFirstTextManage(target).getSize();
-                    DrawTransforms.resizeGeometry(board, points, textHeight, path);
+            }
+            else {
+                const points = getDefaultGeometryPoints(pointer, movingPoint);
+                temporaryElement = createDefaultGeometry(board, points, pointer);
+                geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+        }
+        pointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        if (dragMode && temporaryElement) {
+            insertElement(board, temporaryElement);
+            fakeCreateTextRef?.textManage.destroy();
+            fakeCreateTextRef?.g.remove();
+            fakeCreateTextRef = null;
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        preventTouchMove(board, event, false);
+        globalPointerUp(event);
+    };
+    return board;
+};
+const withGeometryCreateByDrawing = (board) => {
+    const { pointerDown, pointerMove, pointerUp, keyDown, keyUp } = board;
+    let start = null;
+    let geometryShapeG = null;
+    let temporaryElement = null;
+    let isShift = false;
+    let snapG;
+    board.keyDown = (event) => {
+        isShift = isKeyHotkey('shift', event);
+        keyDown(event);
+    };
+    board.keyUp = (event) => {
+        isShift = false;
+        keyUp(event);
+    };
+    board.pointerDown = (event) => {
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        if (!PlaitBoard.isReadonly(board) && isGeometryPointer && isDrawingMode(board)) {
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            start = point;
+            const pointer = PlaitBoard.getPointer(board);
+            preventTouchMove(board, event, true);
+            if (pointer === BasicShapes.text) {
+                const memorizedLatest = getMemorizedLatestByPointer(pointer);
+                const property = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']);
+                const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, property.width, property.height));
+                const textElement = createTextElement(board, points);
+                insertElement(board, textElement);
+                start = null;
+            }
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const pointer = PlaitBoard.getPointer(board);
+        snapG?.remove();
+        if (start && pointer !== BasicShapes.text) {
+            let points = normalizeShapePoints([start, movingPoint], isShift);
+            const activeRectangle = RectangleClient.getRectangleByPoints(points);
+            const [x, y] = getUnitVectorByPointAndPoint(start, movingPoint);
+            const resizeSnapRef = getSnapResizingRef(board, [], {
+                resizePoints: points,
+                activeRectangle,
+                directionFactors: [getDirectionFactorByDirectionComponent(x), getDirectionFactorByDirectionComponent(y)],
+                isAspectRatio: isShift,
+                isFromCorner: true,
+                isCreate: true
+            });
+            snapG = resizeSnapRef.snapG;
+            PlaitBoard.getElementActiveHost(board).append(snapG);
+            points = normalizeShapePoints(resizeSnapRef.activePoints, isShift);
+            temporaryElement = createDefaultGeometry(board, points, pointer);
+            geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
+            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const isDrawMode = !!start;
+        if (isDrawMode) {
+            const targetPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            const { width, height } = RectangleClient.getRectangleByPoints([start, targetPoint]);
+            if (Math.hypot(width, height) === 0) {
+                const pointer = PlaitBoard.getPointer(board);
+                if (pointer !== BasicShapes.text) {
+                    const points = getDefaultGeometryPoints(pointer, targetPoint);
+                    temporaryElement = createDefaultGeometry(board, points, pointer);
                 }
-                else if (PlaitDrawElement.isLine(target)) {
-                    Transforms.setNode(board, { points }, path);
+            }
+        }
+        if (temporaryElement) {
+            insertElement(board, temporaryElement);
+        }
+        snapG?.remove();
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        start = null;
+        temporaryElement = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
+};
+
+const buildClipboardData = (board, elements, startPoint) => {
+    return elements.map(element => {
+        if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element)) {
+            const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
+            return { ...element, points };
+        }
+        if (PlaitDrawElement.isLine(element)) {
+            let source = { ...element.source };
+            let target = { ...element.target };
+            let points = [...element.points];
+            if (element.source.boundId) {
+                points[0] = getConnectionPoint(getElementById(board, element.source.boundId), element.source.connection);
+                if (!getElementById(board, element.source.boundId, elements)) {
+                    delete source.boundId;
+                    delete source.connection;
                 }
-                else if (PlaitDrawElement.isImage(target)) {
-                    if (isAspectRatio) {
-                        Transforms.setNode(board, { points }, path);
-                    }
-                    else {
-                        // The image element does not follow the resize, but moves based on the center point.
-                        const targetRectangle = RectangleClient.getRectangleByPoints(target.points);
-                        const centerPoint = RectangleClient.getCenterPoint(targetRectangle);
-                        const newCenterPoint = movePointByZoomAndOriginPoint(centerPoint, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
-                        const newTargetRectangle = RectangleClient.getRectangleByCenterPoint(newCenterPoint, targetRectangle.width, targetRectangle.height);
-                        Transforms.setNode(board, { points: RectangleClient.getPoints(newTargetRectangle) }, path);
-                    }
+            }
+            if (element.target.boundId) {
+                points[points.length - 1] = getConnectionPoint(getElementById(board, element.target.boundId), element.target.connection);
+                if (!getElementById(board, element.target.boundId, elements)) {
+                    delete target.boundId;
+                    delete target.connection;
                 }
-            });
-        },
-        afterResize: (resizeRef) => {
-            alignG?.remove();
-            alignG = null;
-            if (needCustomActiveRectangle) {
-                needCustomActiveRectangle = false;
-                resizeActivePoints = null;
-                const selectedElements = getSelectedElements(board);
-                Transforms.addSelectionWithTemporaryElements(board, selectedElements);
+            }
+            points = points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
+            return { ...element, points, source, target };
+        }
+        return element;
+    });
+};
+const insertClipboardData = (board, elements, startPoint) => {
+    const lines = elements.filter(value => PlaitDrawElement.isLine(value));
+    const geometries = elements.filter(value => PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isImage(value));
+    geometries.forEach(element => {
+        const sourceLines = [];
+        const targetLines = [];
+        lines.forEach(line => {
+            if (PlaitLine.isBoundElementOfSource(line, element)) {
+                sourceLines.push(line);
+            }
+            if (PlaitLine.isBoundElementOfTarget(line, element)) {
+                targetLines.push(line);
+            }
+        });
+        element.id = idCreator();
+        // update lines
+        sourceLines.forEach(sourceLine => (sourceLine.source.boundId = element.id));
+        targetLines.forEach(targetLine => (targetLine.target.boundId = element.id));
+        element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
+        Transforms.insertNode(board, element, [board.children.length]);
+    });
+    lines.forEach(element => {
+        element.id = idCreator();
+        element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
+        Transforms.insertNode(board, element, [board.children.length]);
+    });
+    Transforms.addSelectionWithTemporaryElements(board, elements);
+};
+
+const withDrawFragment = (baseBoard) => {
+    const board = baseBoard;
+    const { getDeletedFragment, buildFragment, insertFragment } = board;
+    board.getDeletedFragment = (data) => {
+        const drawElements = getSelectedDrawElements(board);
+        if (drawElements.length) {
+            const geometryElements = drawElements.filter(value => PlaitDrawElement.isGeometry(value));
+            const lineElements = drawElements.filter(value => PlaitDrawElement.isLine(value));
+            const imageElements = drawElements.filter(value => PlaitDrawElement.isImage(value));
+            const boundLineElements = [
+                ...getBoundedLineElements(board, geometryElements),
+                ...getBoundedLineElements(board, imageElements)
+            ].filter(line => !lineElements.includes(line));
+            data.push(...[
+                ...geometryElements,
+                ...lineElements,
+                ...imageElements,
+                ...boundLineElements.filter(line => !lineElements.includes(line))
+            ]);
+        }
+        return getDeletedFragment(data);
+    };
+    board.buildFragment = (clipboardContext, rectangle, type) => {
+        const targetDrawElements = getSelectedDrawElements(board);
+        let boundLineElements = [];
+        if (targetDrawElements.length) {
+            if (type === 'cut') {
+                const geometryElements = targetDrawElements.filter(value => PlaitDrawElement.isGeometry(value));
+                const lineElements = targetDrawElements.filter(value => PlaitDrawElement.isLine(value));
+                boundLineElements = getBoundedLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
+            }
+            const selectedElements = [...targetDrawElements, ...boundLineElements];
+            const elements = buildClipboardData(board, selectedElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
+            const text = getElementsText(selectedElements);
+            if (!clipboardContext) {
+                clipboardContext = createClipboardContext(WritableClipboardType.elements, elements, text);
+            }
+            else {
+                clipboardContext = addClipboardContext(clipboardContext, {
+                    text,
+                    type: WritableClipboardType.elements,
+                    elements
+                });
             }
         }
+        return buildFragment(clipboardContext, rectangle, type);
     };
-    withResize(board, options);
-    board.afterChange = () => {
-        afterChange();
-        if (handleG) {
-            handleG.remove();
-            handleG = null;
+    board.insertFragment = (clipboardData, targetPoint) => {
+        const selectedElements = getSelectedElements(board);
+        if (clipboardData?.files?.length) {
+            const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
+            const canInsertionImage = !getElementOfFocusedImage(board) && !(selectedElements.length === 1 && board.isImageBindingAllowed(selectedElements[0]));
+            if (acceptImageArray.includes(clipboardData.files[0].type) && canInsertionImage) {
+                const imageFile = clipboardData.files[0];
+                buildImage(board, imageFile, DEFAULT_IMAGE_WIDTH, imageItem => {
+                    DrawTransforms.insertImage(board, imageItem, targetPoint);
+                });
+                return;
+            }
         }
-        if (canResize() && !isSelectionMoving(board)) {
-            handleG = createG();
-            const elements = getSelectedElements(board);
-            const boundingRectangle = needCustomActiveRectangle
-                ? RectangleClient.getRectangleByPoints(resizeActivePoints)
-                : getRectangleByElements(board, elements, false);
-            let corners = RectangleClient.getCornerPoints(boundingRectangle);
-            const angle = getSelectionAngle(elements);
-            if (angle) {
-                const centerPoint = RectangleClient.getCenterPoint(boundingRectangle);
-                corners = rotatePoints(corners, centerPoint, angle);
+        if (clipboardData?.elements?.length) {
+            const drawElements = clipboardData.elements?.filter(value => PlaitDrawElement.isDrawElement(value));
+            if (clipboardData.elements && clipboardData.elements.length > 0 && drawElements.length > 0) {
+                insertClipboardData(board, drawElements, targetPoint);
             }
-            corners.forEach(corner => {
-                const g = drawHandle(board, corner);
-                handleG && handleG.append(g);
-            });
-            PlaitBoard.getElementActiveHost(board).append(handleG);
         }
-    };
-    board.drawActiveRectangle = () => {
-        if (needCustomActiveRectangle) {
-            const rectangle = RectangleClient.getRectangleByPoints(resizeActivePoints);
-            return drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
-                stroke: SELECTION_BORDER_COLOR,
-                strokeWidth: ACTIVE_STROKE_WIDTH
-            });
+        if (clipboardData?.text) {
+            if (!clipboardData.elements || clipboardData.elements.length === 0) {
+                // (*￣︶￣)
+                const insertAsChildren = selectedElements.length === 1 && selectedElements[0].children;
+                const insertAsFreeText = !insertAsChildren;
+                if (insertAsFreeText) {
+                    DrawTransforms.insertText(board, targetPoint, clipboardData.text);
+                    return;
+                }
+            }
         }
-        return drawActiveRectangle();
+        insertFragment(clipboardData, targetPoint);
     };
     return board;
-}
-const getResizeOriginPointAndHandlePoint = (board, resizeRef) => {
-    const handleIndex = getIndexByResizeHandle(resizeRef.handle);
-    const symmetricHandleIndex = getSymmetricHandleIndex(board, handleIndex);
-    const originPoint = getResizeHandlePointByIndex(resizeRef.rectangle, symmetricHandleIndex);
-    const handlePoint = getResizeHandlePointByIndex(resizeRef.rectangle, handleIndex);
-    return {
-        originPoint,
-        handlePoint
-    };
 };
-const getResizeZoom = (resizeState, resizeOriginPoint, resizeHandlePoint, isFromCorner, isAspectRatio) => {
-    const startPoint = resizeState.startPoint;
-    const endPoint = resizeState.endPoint;
-    let xZoom = 0;
-    let yZoom = 0;
-    if (isFromCorner) {
-        if (isAspectRatio) {
-            let normalizedOffsetX = Point.getOffsetX(startPoint, endPoint);
-            xZoom = normalizedOffsetX / (resizeHandlePoint[0] - resizeOriginPoint[0]);
-            yZoom = xZoom;
-        }
-        else {
-            let normalizedOffsetX = Point.getOffsetX(startPoint, endPoint);
-            let normalizedOffsetY = Point.getOffsetY(startPoint, endPoint);
-            xZoom = normalizedOffsetX / (resizeHandlePoint[0] - resizeOriginPoint[0]);
-            yZoom = normalizedOffsetY / (resizeHandlePoint[1] - resizeOriginPoint[1]);
+const getBoundedLineElements = (board, plaitShapes) => {
+    const lines = getLines(board);
+    return lines.filter(line => plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape)));
+};
+
+const withLineCreateByDraw = (board) => {
+    const { pointerDown, pointerMove, globalPointerUp } = board;
+    let start = null;
+    let sourceElement;
+    let lineShapeG = null;
+    let temporaryElement = null;
+    board.pointerDown = (event) => {
+        const linePointers = getLinePointers();
+        const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
+        if (!PlaitBoard.isReadonly(board) && isLinePointer && isDrawingMode(board)) {
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            start = point;
+            const hitElement = getSnappingGeometry(board, point);
+            if (hitElement) {
+                sourceElement = hitElement;
+            }
+            preventTouchMove(board, event, true);
         }
-    }
-    else {
-        const isHorizontal = Point.isHorizontal(resizeOriginPoint, resizeHandlePoint, 0.1) || false;
-        let normalizedOffset = isHorizontal ? Point.getOffsetX(startPoint, endPoint) : Point.getOffsetY(startPoint, endPoint);
-        let benchmarkOffset = isHorizontal ? resizeHandlePoint[0] - resizeOriginPoint[0] : resizeHandlePoint[1] - resizeOriginPoint[1];
-        const zoom = normalizedOffset / benchmarkOffset;
-        if (isAspectRatio) {
-            xZoom = zoom;
-            yZoom = zoom;
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        lineShapeG?.remove();
+        lineShapeG = createG();
+        let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        if (start) {
+            const lineShape = PlaitBoard.getPointer(board);
+            temporaryElement = handleLineCreating(board, lineShape, start, movingPoint, sourceElement, lineShapeG);
         }
-        else {
-            if (isHorizontal) {
-                xZoom = zoom;
-            }
-            else {
-                yZoom = zoom;
-            }
+        pointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        if (temporaryElement) {
+            Transforms.insertNode(board, temporaryElement, [board.children.length]);
+            clearSelectedElement(board);
+            addSelectedElement(board, temporaryElement);
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
         }
-    }
-    return { xZoom, yZoom };
-};
-const movePointByZoomAndOriginPoint = (p, resizeOriginPoint, xZoom, yZoom) => {
-    const offsetX = (p[0] - resizeOriginPoint[0]) * xZoom;
-    const offsetY = (p[1] - resizeOriginPoint[1]) * yZoom;
-    return [p[0] + offsetX, p[1] + offsetY];
-};
-/**
- * 1. Rotate 90°
- * 2. Scale based on the rotated points
- * 3. Reverse rotate the scaled points by 90°
- */
-const getResizePointsByOtherwiseAxis = (board, points, resizeOriginPoint, xZoom, yZoom) => {
-    const currentRectangle = RectangleClient.getRectangleByPoints(points);
-    debugGenerator.isDebug() && debugGenerator.drawRectangle(board, currentRectangle, { stroke: 'black' });
-    let resultPoints = points;
-    resultPoints = rotatePoints(resultPoints, RectangleClient.getCenterPoint(currentRectangle), (1 / 2) * Math.PI);
-    debugGenerator.isDebug() && debugGenerator.drawRectangle(board, resultPoints, { stroke: 'blue' });
-    resultPoints = resultPoints.map(p => {
-        return movePointByZoomAndOriginPoint(p, resizeOriginPoint, xZoom, yZoom);
-    });
-    debugGenerator.isDebug() && debugGenerator.drawRectangle(board, resultPoints);
-    const newRectangle = RectangleClient.getRectangleByPoints(resultPoints);
-    return rotatePoints(resultPoints, RectangleClient.getCenterPoint(newRectangle), -(1 / 2) * Math.PI);
+        lineShapeG?.remove();
+        lineShapeG = null;
+        sourceElement = null;
+        start = null;
+        temporaryElement = null;
+        preventTouchMove(board, event, false);
+        globalPointerUp(event);
+    };
+    return board;
 };
 
 const withGeometryResize = (board) => {
-    let alignG;
+    let snapG;
     const options = {
         key: 'draw-geometry',
         canResize: () => {
@@ -4470,20 +4530,21 @@ const withGeometryResize = (board) => {
             return null;
         },
         onResize: (resizeRef, resizeState) => {
-            const centerPoint = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeRef.element.points));
             resizeState.startPoint = rotateAntiPointsByElement(resizeState.startPoint, resizeRef.element) || resizeState.startPoint;
             resizeState.endPoint = rotateAntiPointsByElement(resizeState.endPoint, resizeRef.element) || resizeState.endPoint;
-            alignG?.remove();
+            snapG?.remove();
             const isFromCorner = isCornerHandle(board, resizeRef.handle);
             const isAspectRatio = resizeState.isShift || PlaitDrawElement.isImage(resizeRef.element);
-            const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, resizeRef);
-            const resizeAlignRef = getResizeSnapRef(board, resizeRef, resizeState, {
+            const handleIndex = getIndexByResizeHandle(resizeRef.handle);
+            const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, handleIndex, resizeRef.rectangle);
+            const resizeSnapRefOptions = getSnapResizingRefOptions(board, resizeRef, resizeState, {
                 originPoint,
                 handlePoint
             }, isAspectRatio, isFromCorner);
-            alignG = resizeAlignRef.alignG;
-            PlaitBoard.getElementActiveHost(board).append(alignG);
-            let points = resizeAlignRef.activePoints;
+            const resizeSnapRef = getSnapResizingRef(board, [resizeRef.element], resizeSnapRefOptions);
+            snapG = resizeSnapRef.snapG;
+            PlaitBoard.getElementActiveHost(board).append(snapG);
+            let points = resizeSnapRef.activePoints;
             if (PlaitDrawElement.isGeometry(resizeRef.element)) {
                 const { height: textHeight } = getFirstTextManage(resizeRef.element).getSize();
                 DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
@@ -4494,8 +4555,8 @@ const withGeometryResize = (board) => {
             }
         },
         afterResize: (resizeRef) => {
-            alignG?.remove();
-            alignG = null;
+            snapG?.remove();
+            snapG = null;
         }
     };
     withResize(board, options);
@@ -4751,9 +4812,8 @@ class ImageComponent extends CommonPluginElement {
     get activeGenerator() {
         return this.imageGenerator.componentRef.instance.activeGenerator;
     }
-    constructor(viewContainerRef, cdr) {
+    constructor(cdr) {
         super(cdr);
-        this.viewContainerRef = viewContainerRef;
         this.cdr = cdr;
         this.destroy$ = new Subject();
     }
@@ -4780,14 +4840,14 @@ class ImageComponent extends CommonPluginElement {
     ngOnInit() {
         super.ngOnInit();
         this.initializeGenerator();
-        this.imageGenerator.processDrawing(this.element, this.g, this.viewContainerRef);
+        this.imageGenerator.processDrawing(this.element, this.getElementG(), this.viewContainerRef);
         this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
             selected: this.selected
         });
     }
     onContextChanged(value, previous) {
         if (value.element !== previous.element) {
-            this.imageGenerator.updateImage(this.g, previous.element, value.element);
+            this.imageGenerator.updateImage(this.getElementG(), previous.element, value.element);
             this.imageGenerator.componentRef.instance.isFocus = this.selected;
             this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
                 selected: this.selected
@@ -4811,7 +4871,7 @@ class ImageComponent extends CommonPluginElement {
         this.imageGenerator.destroy();
         this.lineAutoCompleteGenerator.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ImageComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageComponent, decorators: [{
@@ -4822,7 +4882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 const withLineAutoCompleteReaction = (board) => {
     const { pointerMove } = board;
@@ -4892,12 +4952,13 @@ const withLineAutoComplete = (board) => {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getElementShape(sourceElement);
                 const engine = getEngine(shape);
+                let sourcePoint = autoCompletePoint;
                 if (engine.getNearestCrossingPoint) {
                     const crossingPoint = engine.getNearestCrossingPoint(rectangle, autoCompletePoint);
-                    autoCompletePoint = crossingPoint;
+                    sourcePoint = crossingPoint;
                 }
                 // source point must be click point
-                const rotatedSourcePoint = rotatePointsByElement(autoCompletePoint, sourceElement) || autoCompletePoint;
+                const rotatedSourcePoint = rotatePointsByElement(sourcePoint, sourceElement) || sourcePoint;
                 temporaryElement = handleLineCreating(board, LineShape.elbow, rotatedSourcePoint, movingPoint, sourceElement, lineShapeG);
             }
         }
@@ -4972,6 +5033,129 @@ const withLineTextMove = (board) => {
     return board;
 };
 
+const withDrawRotate = (board) => {
+    const { pointerDown, pointerMove, globalPointerUp, afterChange, drawActiveRectangle } = board;
+    let rotateRef = null;
+    let rotateHandleG;
+    let needCustomActiveRectangle = false;
+    const canRotate = () => {
+        const elements = getSelectedElements(board);
+        return elements.length > 0 && elements.every(el => PlaitDrawElement.isGeometry(el) || PlaitDrawElement.isImage(el));
+    };
+    board.pointerDown = (event) => {
+        if (!canRotate() || PlaitBoard.isReadonly(board) || PlaitBoard.hasBeenTextEditing(board) || !isMainPointer(event)) {
+            pointerDown(event);
+            return;
+        }
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const elements = getSelectedElements(board);
+        const boundingRectangle = getRectangleByElements(board, elements, false);
+        const handleRectangle = getRotateHandleRectangle(boundingRectangle);
+        const angle = getSelectionAngle(elements);
+        const rotatedPoint = angle ? rotatePoints(point, RectangleClient.getCenterPoint(boundingRectangle), -angle) : point;
+        if (handleRectangle && RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), handleRectangle)) {
+            rotateRef = {
+                elements: elements,
+                startPoint: point
+            };
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        if (rotateRef) {
+            event.preventDefault();
+            const isShift = !!event.shiftKey;
+            addRotating(board, rotateRef);
+            const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            const selectionRectangle = getRectangleByElements(board, rotateRef.elements, false);
+            const selectionCenterPoint = RectangleClient.getCenterPoint(selectionRectangle);
+            if (!getSelectionAngle(rotateRef.elements) && rotateRef.elements.length > 1) {
+                needCustomActiveRectangle = true;
+            }
+            throttleRAF(board, 'with-common-rotate', () => {
+                if (rotateRef && rotateRef.startPoint) {
+                    let angle = getAngleBetweenPoints(rotateRef.startPoint, endPoint, selectionCenterPoint);
+                    if (isShift) {
+                        angle += Math.PI / 12 / 2;
+                        angle -= angle % (Math.PI / 12);
+                    }
+                    const selectionAngle = getSelectionAngle(rotateRef.elements);
+                    let remainder = (selectionAngle + angle) % (Math.PI / 2);
+                    if (Math.PI / 2 - remainder <= degreesToRadians(5)) {
+                        const snapAngle = Math.PI / 2 - remainder;
+                        angle += snapAngle;
+                    }
+                    if (remainder <= degreesToRadians(5)) {
+                        const snapAngle = -remainder;
+                        angle += snapAngle;
+                    }
+                    rotateRef.angle = normalizeAngle(angle);
+                    if (rotateRef.angle) {
+                        rotateElements(board, rotateRef.elements, rotateRef.angle);
+                    }
+                    PlaitBoard.getBoardContainer(board).classList.add('element-rotating');
+                }
+            });
+            return;
+        }
+        pointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        globalPointerUp(event);
+        if (needCustomActiveRectangle) {
+            needCustomActiveRectangle = false;
+            const selectedElements = getSelectedElements(board);
+            Transforms.addSelectionWithTemporaryElements(board, selectedElements);
+        }
+        PlaitBoard.getBoardContainer(board).classList.remove('element-rotating');
+        removeRotating(board);
+        rotateRef = null;
+        MERGING.set(board, false);
+        preventTouchMove(board, event, false);
+    };
+    board.afterChange = () => {
+        afterChange();
+        if (rotateHandleG) {
+            rotateHandleG.remove();
+            rotateHandleG = null;
+        }
+        if (canRotate() && !isSelectionMoving(board)) {
+            if (needCustomActiveRectangle && rotateRef) {
+                const boundingRectangle = getRectangleByElements(board, rotateRef.elements, false);
+                rotateHandleG = drawRotateHandle(board, boundingRectangle);
+                rotateHandleG.classList.add(ROTATE_HANDLE_CLASS_NAME);
+                if (rotateRef.angle) {
+                    setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingRectangle), rotateRef.angle);
+                }
+            }
+            else {
+                const elements = getSelectedElements(board);
+                const boundingRectangle = getRectangleByElements(board, elements, false);
+                rotateHandleG = drawRotateHandle(board, boundingRectangle);
+                rotateHandleG.classList.add(ROTATE_HANDLE_CLASS_NAME);
+                setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingRectangle), getSelectionAngle(elements));
+            }
+            PlaitBoard.getElementActiveHost(board).append(rotateHandleG);
+        }
+    };
+    board.drawActiveRectangle = () => {
+        if (needCustomActiveRectangle && rotateRef) {
+            const rectangle = getRectangleByElements(board, rotateRef.elements, false);
+            const rectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: ACTIVE_STROKE_WIDTH
+            });
+            rectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
+            if (rotateRef.angle) {
+                setAngleForG(rectangleG, RectangleClient.getCenterPoint(rectangle), rotateRef.angle);
+            }
+            return rectangleG;
+        }
+        return drawActiveRectangle();
+    };
+    return board;
+};
+
 const withDraw = (board) => {
     const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment } = board;
     board.drawElement = (context) => {
@@ -5067,12 +5251,12 @@ const withDraw = (board) => {
         });
         return getRelatedFragment([...elements, ...activeLines], originData);
     };
-    return withDrawResize(withLineTextMove(withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))))));
+    return withDrawResize(withLineTextMove(withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withDrawRotate(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board))))))))))))));
 };
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createLineElement, createTextElement, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getTextShapeProperty, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isRectangleHitDrawElement, isSelfLoop, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, withDraw, withLineAutoComplete };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultCloudShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createLineElement, createTextElement, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getTextShapeProperty, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isRectangleHitDrawElement, isSelfLoop, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, withDraw, withLineAutoComplete };
 //# sourceMappingURL=plait-draw.mjs.map