@plait/draw 0.53.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, rotatePoints, depthFirstRecursion, rotateAntiPointsByElement, getIsRecursionFunc, idCreator, catmullRomFitting, PlaitBoard, findElements, createMask, createRect, getSelectedElements, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, isPointInPolygon, setStrokeLinecap, getNearestPointBetweenPointAndSegments, isPointInEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, 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, getRectangleByElements, getSelectionAngle, rotatedDataPoints, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
-import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getRectangleResizeHandleRefs, RESIZE_HANDLE_DIAMETER, getMemorizedLatest, memorizeLatest, getPointOnPolyline, TRANSPARENT, 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, getDirectionFactorByDirectionComponent, isCornerHandle, resetPointsAfterResize, 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,9 +120,15 @@ const DefaultFlowchartPropertyMap = {
     [FlowchartSymbols.manualLoop]: DefaultFlowchartProperty,
     [FlowchartSymbols.merge]: DefaultMergeProperty,
     [FlowchartSymbols.delay]: DefaultFlowchartProperty,
-    [FlowchartSymbols.storedData]: DefaultFlowchartProperty
-};
-const REACTION_MARGIN = -4;
+    [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;
+const LINE_SNAPPING_CONNECTOR_BUFFER = 8;
 
 const getGeometryPointers = () => {
     return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols)];
@@ -166,8 +183,8 @@ const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
 const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 const LINE_ALIGN_TOLERANCE = 3;
 
-const debugKey$2 = 'debug:plait:line-mirror';
-const debugGenerator$2 = createDebugGenerator(debugKey$2);
+const debugKey$3 = 'debug:plait:line-mirror';
+const debugGenerator$3 = createDebugGenerator(debugKey$3);
 const alignPoints = (basePoint, movingPoint) => {
     const newPoint = [...movingPoint];
     if (Point.isVertical(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
@@ -304,7 +321,7 @@ function getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRender
         if (midDataPoints.length > 0) {
             const handleRefPair = getLineHandleRefPair(board, element);
             const params = getElbowLineRouteOptions(board, element, handleRefPair);
-            const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params));
+            const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params, board));
             const nextKeyPoints = simplifyOrthogonalPoints(keyPoints.slice(1, keyPoints.length - 1));
             const nextDataPoints = [nextRenderPoints[0], ...midDataPoints, nextRenderPoints[nextRenderPoints.length - 1]];
             const mirrorDataPoints = getMirrorDataPoints(board, nextDataPoints, nextKeyPoints, params);
@@ -431,7 +448,7 @@ function findOrthogonalParallelSegments(segment, keyPoints) {
     return parallelSegments;
 }
 function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, targetRectangle) {
-    debugGenerator$2.isDebug() && debugGenerator$2.clear();
+    debugGenerator$3.isDebug() && debugGenerator$3.clear();
     const mirrorSegments = [];
     for (let index = 0; index < parallelSegments.length; index++) {
         const parallelPath = parallelSegments[index];
@@ -445,7 +462,7 @@ function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, t
         const isValid = !RectangleClient.isHit(fakeRectangle, sourceRectangle) && !RectangleClient.isHit(fakeRectangle, targetRectangle);
         if (isValid) {
             mirrorSegments.push([startPoint, endPoint]);
-            debugGenerator$2.isDebug() && debugGenerator$2.drawPolygon(board, RectangleClient.getCornerPoints(fakeRectangle));
+            debugGenerator$3.isDebug() && debugGenerator$3.drawPolygon(board, RectangleClient.getCornerPoints(fakeRectangle));
         }
     }
     return mirrorSegments;
@@ -471,15 +488,20 @@ const hasIllegalElbowPoint = (midDataPoints) => {
     });
 };
 
+const isSelfLoop = (element) => {
+    return element.source.boundId && element.source.boundId === element.target.boundId;
+};
+const isUseDefaultOrthogonalRoute = (element, options) => {
+    return isSourceAndTargetIntersect(options) && !isSelfLoop(element);
+};
 const getElbowPoints = (board, element) => {
     const handleRefPair = getLineHandleRefPair(board, element);
     const params = getElbowLineRouteOptions(board, element, handleRefPair);
     // console.log(params, 'params');
-    const isIntersect = isSourceAndTargetIntersect(params);
-    if (isIntersect) {
-        return simplifyOrthogonalPoints(getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, 0));
+    if (isUseDefaultOrthogonalRoute(element, params)) {
+        return simplifyOrthogonalPoints(getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, DEFAULT_ROUTE_MARGIN));
     }
-    const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params));
+    const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params, board));
     const nextKeyPoints = keyPoints.slice(1, keyPoints.length - 1);
     if (element.points.length === 2) {
         return simplifyOrthogonalPoints(keyPoints);
@@ -692,7 +714,7 @@ const drawHollowTriangleArrow = (source, target, options) => {
     return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
 };
 
-const getShape = (value) => {
+const getElementShape = (value) => {
     if (PlaitDrawElement.isImage(value)) {
         return BasicShapes.rectangle;
     }
@@ -710,29 +732,246 @@ class LineShapeGenerator extends Generator {
     }
 }
 
+var LineResizeHandle;
+(function (LineResizeHandle) {
+    LineResizeHandle["source"] = "source";
+    LineResizeHandle["target"] = "target";
+    LineResizeHandle["addHandle"] = "addHandle";
+})(LineResizeHandle || (LineResizeHandle = {}));
+const getHitLineResizeHandleRef = (board, element, point) => {
+    let dataPoints = PlaitLine.getPoints(board, element);
+    const index = getHitPointIndex(dataPoints, point);
+    if (index !== -1) {
+        const handleIndex = index;
+        if (index === 0) {
+            return { handle: LineResizeHandle.source, handleIndex };
+        }
+        if (index === dataPoints.length - 1) {
+            return { handle: LineResizeHandle.target, handleIndex };
+        }
+        // elbow line, data points only verify source connection point and target connection point
+        if (element.shape !== LineShape.elbow) {
+            return { handleIndex };
+        }
+    }
+    const middlePoints = getMiddlePoints(board, element);
+    const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
+    if (indexOfMiddlePoints !== -1) {
+        return {
+            handle: LineResizeHandle.addHandle,
+            handleIndex: indexOfMiddlePoints
+        };
+    }
+    return undefined;
+};
+function getHitPointIndex(points, movingPoint) {
+    const rectangles = points.map(point => {
+        return {
+            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
+            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
+            width: RESIZE_HANDLE_DIAMETER,
+            height: RESIZE_HANDLE_DIAMETER
+        };
+    });
+    const rectangle = rectangles.find(rectangle => {
+        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
+    });
+    return rectangle ? rectangles.indexOf(rectangle) : -1;
+}
+const getHitLineTextIndex = (board, element, point) => {
+    const texts = element.texts;
+    if (!texts.length)
+        return -1;
+    const points = getLinePoints(board, element);
+    return texts.findIndex(text => {
+        const center = getPointOnPolyline(points, text.position);
+        const rectangle = {
+            x: center[0] - text.width / 2,
+            y: center[1] - text.height / 2,
+            width: text.width,
+            height: text.height
+        };
+        return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
+    });
+};
+
+const isTextExceedingBounds = (geometry) => {
+    const client = RectangleClient.getRectangleByPoints(geometry.points);
+    if (geometry.textHeight > client.height) {
+        return true;
+    }
+    return false;
+};
+const isHitLineText = (board, element, point) => {
+    return getHitLineTextIndex(board, element, point) !== -1;
+};
+const isHitPolyLine = (pathPoints, point) => {
+    const distance = distanceBetweenPointAndSegments(pathPoints, point);
+    return distance <= HIT_DISTANCE_BUFFER;
+};
+const isHitLine = (board, element, point) => {
+    const points = getLinePoints(board, element);
+    const isHitText = isHitLineText(board, element, point);
+    return isHitText || isHitPolyLine(points, point);
+};
+const isRectangleHitDrawElement = (board, element, selection) => {
+    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
+    if (PlaitDrawElement.isGeometry(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        let rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
+        if (isTextExceedingBounds(element)) {
+            const textClient = getTextRectangle(element);
+            rotatedCornerPoints =
+                rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
+        }
+        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
+        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        const points = getLinePoints(board, element);
+        return isPolylineHitRectangle(points, rangeRectangle);
+    }
+    return null;
+};
+const isHitDrawElement = (board, element, point) => {
+    const rectangle = board.getRectangle(element);
+    point = rotateAntiPointsByElement(point, element) || point;
+    if (PlaitDrawElement.isGeometry(element)) {
+        const fill = getFillByElement(board, element);
+        if (isHitEdgeOfShape(board, element, point, HIT_DISTANCE_BUFFER)) {
+            return true;
+        }
+        const engine = getEngine(getElementShape(element));
+        // when shape equals text, fill is not allowed
+        if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
+            const isHitInside = engine.isInsidePoint(rectangle, point);
+            if (isHitInside) {
+                return isHitInside;
+            }
+        }
+        else {
+            // if shape equals text, only check text rectangle
+            if (PlaitDrawElement.isText(element)) {
+                const textClient = getTextRectangle(element);
+                let isHitText = RectangleClient.isPointInRectangle(textClient, point);
+                return isHitText;
+            }
+            // check textRectangle of element
+            const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
+            const isHitTextRectangle = RectangleClient.isPointInRectangle(textClient, point);
+            if (isHitTextRectangle) {
+                return isHitTextRectangle;
+            }
+        }
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isPointInRectangle(client, point);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        return isHitLine(board, element, point);
+    }
+    return null;
+};
+const isHitEdgeOfShape = (board, element, point, hitDistanceBuffer) => {
+    const nearestPoint = getNearestPoint(element, point);
+    const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
+    return distance <= hitDistanceBuffer;
+};
+const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
+    const client = RectangleClient.inflate(RectangleClient.getRectangleByPoints(element.points), hitDistanceBuffer);
+    return getEngine(getElementShape(element)).isInsidePoint(client, point);
+};
+const isHitElementInside = (board, element, point) => {
+    const rectangle = board.getRectangle(element);
+    point = rotateAntiPointsByElement(point, element) || point;
+    if (PlaitDrawElement.isGeometry(element)) {
+        const engine = getEngine(getElementShape(element));
+        const isHitInside = engine.isInsidePoint(rectangle, point);
+        if (isHitInside) {
+            return isHitInside;
+        }
+        if (engine.getTextRectangle) {
+            const textClient = engine.getTextRectangle(element);
+            const isHitTextRectangle = RectangleClient.isPointInRectangle(textClient, point);
+            if (isHitTextRectangle) {
+                return isHitTextRectangle;
+            }
+        }
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isPointInRectangle(client, point);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        return isHitLine(board, element, point);
+    }
+    return null;
+};
+
 const getHitRectangleResizeHandleRef = (board, rectangle, point, angle = 0) => {
     const centerPoint = RectangleClient.getCenterPoint(rectangle);
-    const rotatedPoint = rotatePoints([point], centerPoint, -angle)[0];
-    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER, angle);
-    const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), resizeHandleRef.rectangle);
+    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
+    if (angle) {
+        const rotatedPoint = rotatePoints([point], centerPoint, -angle)[0];
+        let result = resizeHandleRefs.find(resizeHandleRef => {
+            return RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), resizeHandleRef.rectangle);
+        });
+        if (result) {
+            result.cursorClass = getRotatedResizeCursorClassByAngle(result.cursorClass, angle);
+        }
+        return result;
+    }
+    else {
+        return resizeHandleRefs.find(resizeHandleRef => {
+            return RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), resizeHandleRef.rectangle);
+        });
+    }
+};
+const getSnappingGeometry = (board, point) => {
+    let hitElement = getHitGeometry(board, point);
+    if (hitElement) {
+        const ref = getSnappingRef(board, hitElement, point);
+        if (ref.isHitConnector || ref.isHitEdge) {
+            return hitElement;
+        }
+    }
+    return null;
+};
+const getSnappingRef = (board, hitElement, point) => {
+    const rotatedPoint = rotateAntiPointsByElement(point, hitElement) || point;
+    const connectorPoint = getHitConnectorPoint(rotatedPoint, hitElement);
+    const edgePoint = getNearestPoint(hitElement, rotatedPoint);
+    const isHitEdge = isHitEdgeOfShape(board, hitElement, rotatedPoint, LINE_SNAPPING_BUFFER);
+    return { isHitEdge, isHitConnector: !!connectorPoint, connectorPoint, edgePoint };
+};
+const getHitGeometry = (board, point, offset = LINE_HIT_GEOMETRY_BUFFER) => {
+    let hitShape = null;
+    traverseDrawShapes(board, (element) => {
+        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(point, element) || point, offset * 2)) {
+            hitShape = element;
+        }
     });
-    return result;
+    return hitShape;
 };
-const getHitOutlineGeometry = (board, point, offset = 0) => {
-    let geometry = null;
+const traverseDrawShapes = (board, callback) => {
     depthFirstRecursion(board, node => {
-        if (PlaitDrawElement.isGeometry(node) || PlaitDrawElement.isImage(node)) {
-            let client = RectangleClient.getRectangleByPoints(node.points);
-            client = RectangleClient.getOutlineRectangle(client, offset);
-            const shape = getShape(node);
-            const isHit = getEngine(shape).isInsidePoint(client, rotateAntiPointsByElement(point, node) || point);
-            if (isHit) {
-                geometry = node;
-            }
+        if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
+            callback(node);
         }
     }, getIsRecursionFunc(board), true);
-    return geometry;
+};
+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;
@@ -910,8 +1149,7 @@ function getMiddlePoints(board, element) {
     if (shape === LineShape.elbow) {
         const renderPoints = getElbowPoints(board, element);
         const options = getElbowLineRouteOptions(board, element);
-        const isIntersect = isSourceAndTargetIntersect(options);
-        if (!isIntersect) {
+        if (!isUseDefaultOrthogonalRoute(element, options)) {
             const [nextSourcePoint, nextTargetPoint] = getNextSourceAndTargetPoints(board, element);
             for (let i = 0; i < renderPoints.length - 1; i++) {
                 if ((i == 0 && Point.isEquals(renderPoints[i + 1], nextSourcePoint)) ||
@@ -943,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);
@@ -951,20 +1192,18 @@ const drawLine = (board, element) => {
     arrow && lineG.appendChild(arrow);
     return lineG;
 };
-const getConnectionByNearestPoint = (board, point, hitElement) => {
+const getHitConnection = (board, point, hitElement) => {
     let rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
-    let nearestPoint = getNearestPoint(hitElement, point);
-    const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, rectangle);
-    nearestPoint = hitConnector ? hitConnector : nearestPoint;
-    return [(nearestPoint[0] - rectangle.x) / rectangle.width, (nearestPoint[1] - rectangle.y) / rectangle.height];
-};
-const getHitConnectorPoint = (point, hitElement, rectangle) => {
-    const shape = getShape(hitElement);
-    const connector = getEngine(shape).getConnectorPoints(rectangle);
-    const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, 10, 10));
-    const pointRectangle = RectangleClient.getRectangleByPoints(points);
-    return connector.find(point => {
-        return RectangleClient.isHit(pointRectangle, RectangleClient.getRectangleByPoints([point, point]));
+    const ref = getSnappingRef(board, hitElement, point);
+    const connectionPoint = ref.connectorPoint || ref.edgePoint;
+    return [(connectionPoint[0] - rectangle.x) / rectangle.width, (connectionPoint[1] - rectangle.y) / rectangle.height];
+};
+const getHitConnectorPoint = (point, hitElement) => {
+    const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
+    const shape = getElementShape(hitElement);
+    const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
+    return connectorPoints.find(connectorPoint => {
+        return distanceBetweenPointAndPoint(...connectorPoint, ...point) <= LINE_SNAPPING_CONNECTOR_BUFFER;
     });
 };
 const getLineTextRectangle = (board, element, index) => {
@@ -1001,13 +1240,9 @@ const Q2C = (points) => {
     return result;
 };
 const handleLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG) => {
-    const hitElement = getHitOutlineGeometry(board, movingPoint, REACTION_MARGIN);
-    const targetConnection = hitElement
-        ? getConnectionByNearestPoint(board, rotateAntiPointsByElement(movingPoint, hitElement) || movingPoint, hitElement)
-        : undefined;
-    const sourceConnection = sourceElement
-        ? getConnectionByNearestPoint(board, rotateAntiPointsByElement(sourcePoint, sourceElement) || sourcePoint, sourceElement)
-        : undefined;
+    const hitElement = getSnappingGeometry(board, movingPoint);
+    const targetConnection = hitElement ? getHitConnection(board, movingPoint, hitElement) : undefined;
+    const sourceConnection = sourceElement ? getHitConnection(board, sourcePoint, sourceElement) : undefined;
     const targetBoundId = hitElement ? hitElement.id : undefined;
     const lineGenerator = new LineShapeGenerator(board);
     const memorizedLatest = getLineMemorizedLatest();
@@ -1070,204 +1305,23 @@ const getSelectedImageElements = (board) => {
     return selectedElements;
 };
 
-var LineResizeHandle;
-(function (LineResizeHandle) {
-    LineResizeHandle["source"] = "source";
-    LineResizeHandle["target"] = "target";
-    LineResizeHandle["addHandle"] = "addHandle";
-})(LineResizeHandle || (LineResizeHandle = {}));
-const getHitLineResizeHandleRef = (board, element, point) => {
-    let dataPoints = PlaitLine.getPoints(board, element);
-    const index = getHitPointIndex(dataPoints, point);
-    if (index !== -1) {
-        const handleIndex = index;
-        if (index === 0) {
-            return { handle: LineResizeHandle.source, handleIndex };
-        }
-        if (index === dataPoints.length - 1) {
-            return { handle: LineResizeHandle.target, handleIndex };
-        }
-        // elbow line, data points only verify source connection point and target connection point
-        if (element.shape !== LineShape.elbow) {
-            return { handleIndex };
-        }
+const getCenterPointsOnPolygon$1 = (points) => {
+    const centerPoints = [];
+    for (let i = 0; i < points.length; i++) {
+        let j = i == points.length - 1 ? 0 : i + 1;
+        centerPoints.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
     }
-    const middlePoints = getMiddlePoints(board, element);
-    const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
-    if (indexOfMiddlePoints !== -1) {
-        return {
-            handle: LineResizeHandle.addHandle,
-            handleIndex: indexOfMiddlePoints
-        };
+    return centerPoints;
+};
+const getCrossingPointBetweenPointAndPolygon = (corners, point) => {
+    const result = [];
+    for (let index = 1; index <= corners.length; index++) {
+        let start = corners[index - 1];
+        let end = index === corners.length ? corners[0] : corners[index];
+        const crossingPoint = getCrossingPointsBetweenPointAndSegment(point, start, end);
+        result.push(...crossingPoint);
     }
-    return undefined;
-};
-function getHitPointIndex(points, movingPoint) {
-    const rectangles = points.map(point => {
-        return {
-            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
-            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
-            width: RESIZE_HANDLE_DIAMETER,
-            height: RESIZE_HANDLE_DIAMETER
-        };
-    });
-    const rectangle = rectangles.find(rectangle => {
-        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
-    });
-    return rectangle ? rectangles.indexOf(rectangle) : -1;
-}
-const getHitLineTextIndex = (board, element, point) => {
-    const texts = element.texts;
-    if (!texts.length)
-        return -1;
-    const points = getLinePoints(board, element);
-    return texts.findIndex(text => {
-        const center = getPointOnPolyline(points, text.position);
-        const rectangle = {
-            x: center[0] - text.width / 2,
-            y: center[1] - text.height / 2,
-            width: text.width,
-            height: text.height
-        };
-        return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
-    });
-};
-
-const isTextExceedingBounds = (geometry) => {
-    const client = RectangleClient.getRectangleByPoints(geometry.points);
-    if (geometry.textHeight > client.height) {
-        return true;
-    }
-    return false;
-};
-const isHitLineText = (board, element, point) => {
-    return getHitLineTextIndex(board, element, point) !== -1;
-};
-const isHitPolyLine = (pathPoints, point) => {
-    const distance = distanceBetweenPointAndSegments(pathPoints, point);
-    return distance <= HIT_DISTANCE_BUFFER;
-};
-const isHitLine = (board, element, point) => {
-    const points = getLinePoints(board, element);
-    const isHitText = isHitLineText(board, element, point);
-    return isHitText || isHitPolyLine(points, point);
-};
-const isRectangleHitDrawElement = (board, element, selection) => {
-    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
-    if (PlaitDrawElement.isGeometry(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        const centerPoint = RectangleClient.getCenterPoint(client);
-        let rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(client), centerPoint, element.angle);
-        if (isTextExceedingBounds(element)) {
-            const textClient = getTextRectangle(element);
-            rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(textClient), centerPoint, element.angle);
-        }
-        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        const rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(client), RectangleClient.getCenterPoint(client), element.angle);
-        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        const points = getLinePoints(board, element);
-        return isPolylineHitRectangle(points, rangeRectangle);
-    }
-    return null;
-};
-const isHitDrawElement = (board, element, point) => {
-    const rectangle = board.getRectangle(element);
-    const centerPoint = RectangleClient.getCenterPoint(rectangle);
-    if (element.angle) {
-        point = rotate(point[0], point[1], centerPoint[0], centerPoint[1], -element.angle);
-    }
-    if (PlaitDrawElement.isGeometry(element)) {
-        const fill = getFillByElement(board, element);
-        const engine = getEngine(getShape(element));
-        const nearestPoint = engine.getNearestPoint(rectangle, point);
-        const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
-        const isHitEdge = distance <= HIT_DISTANCE_BUFFER;
-        if (isHitEdge) {
-            return isHitEdge;
-        }
-        // when shape equals text, fill is not allowed
-        if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
-            const isHitInside = engine.isInsidePoint(rectangle, point);
-            if (isHitInside) {
-                return isHitInside;
-            }
-        }
-        else {
-            // if shape equals text, only check text rectangle
-            if (PlaitDrawElement.isText(element)) {
-                const textClient = getTextRectangle(element);
-                let isHitText = RectangleClient.isPointInRectangle(textClient, point);
-                return isHitText;
-            }
-            // check textRectangle of element
-            const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
-            const isHitTextRectangle = RectangleClient.isPointInRectangle(textClient, point);
-            if (isHitTextRectangle) {
-                return isHitTextRectangle;
-            }
-        }
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        const rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(client), RectangleClient.getCenterPoint(client), element.angle);
-        return isPointInPolygon(point, rotatedCornerPoints);
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        return isHitLine(board, element, point);
-    }
-    return null;
-};
-const isHitElementInside = (board, element, point) => {
-    const rectangle = board.getRectangle(element);
-    const centerPoint = RectangleClient.getCenterPoint(rectangle);
-    if (element.angle) {
-        point = rotate(point[0], point[1], centerPoint[0], centerPoint[1], -element.angle);
-    }
-    if (PlaitDrawElement.isGeometry(element)) {
-        const engine = getEngine(getShape(element));
-        const isHitInside = engine.isInsidePoint(rectangle, point);
-        if (isHitInside) {
-            return isHitInside;
-        }
-        if (engine.getTextRectangle) {
-            const textClient = engine.getTextRectangle(element);
-            const isHitTextRectangle = RectangleClient.isPointInRectangle(textClient, point);
-            if (isHitTextRectangle) {
-                return isHitTextRectangle;
-            }
-        }
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        return isHitLine(board, element, point);
-    }
-    return null;
-};
-
-const getCenterPointsOnPolygon$1 = (points) => {
-    const centerPoints = [];
-    for (let i = 0; i < points.length; i++) {
-        let j = i == points.length - 1 ? 0 : i + 1;
-        centerPoints.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
-    }
-    return centerPoints;
-};
-const getCrossingPointBetweenPointAndPolygon = (corners, point) => {
-    const result = [];
-    for (let index = 1; index <= corners.length; index++) {
-        let start = corners[index - 1];
-        let end = index === corners.length ? corners[0] : corners[index];
-        const crossingPoint = getCrossingPointsBetweenPointAndSegment(point, start, end);
-        result.push(...crossingPoint);
-    }
-    return result;
+    return result;
 };
 const getPolygonEdgeByConnectionPoint = (corners, point) => {
     for (let index = 1; index <= corners.length; index++) {
@@ -1429,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,
@@ -2254,54 +2319,229 @@ const StoredDataEngine = {
     }
 };
 
-const ShapeEngineMap = {
-    [BasicShapes.rectangle]: RectangleEngine,
-    [BasicShapes.diamond]: DiamondEngine,
-    [BasicShapes.ellipse]: EllipseEngine,
-    [BasicShapes.parallelogram]: ParallelogramEngine,
-    [BasicShapes.roundRectangle]: RoundRectangleEngine,
-    [BasicShapes.text]: RectangleEngine,
-    [BasicShapes.triangle]: TriangleEngine,
-    [BasicShapes.leftArrow]: LeftArrowEngine,
-    [BasicShapes.trapezoid]: TrapezoidEngine,
-    [BasicShapes.rightArrow]: RightArrowEngine,
-    [BasicShapes.cross]: CrossEngine,
-    [BasicShapes.star]: StarEngine,
-    [BasicShapes.pentagon]: PentagonEngine,
-    [BasicShapes.hexagon]: HexagonEngine,
-    [BasicShapes.octagon]: OctagonEngine,
-    [BasicShapes.pentagonArrow]: PentagonArrowEngine,
-    [BasicShapes.processArrow]: ProcessArrowEngine,
-    [BasicShapes.twoWayArrow]: TwoWayArrowEngine,
-    [BasicShapes.comment]: CommentEngine,
-    [BasicShapes.roundComment]: RoundCommentEngine,
-    [FlowchartSymbols.process]: RectangleEngine,
-    [FlowchartSymbols.decision]: DiamondEngine,
-    [FlowchartSymbols.connector]: EllipseEngine,
-    [FlowchartSymbols.data]: ParallelogramEngine,
-    [FlowchartSymbols.terminal]: TerminalEngine,
-    [FlowchartSymbols.manualInput]: ManualInputEngine,
-    [FlowchartSymbols.preparation]: PreparationEngine,
-    [FlowchartSymbols.manualLoop]: ManualLoopEngine,
-    [FlowchartSymbols.merge]: MergeEngine,
-    [FlowchartSymbols.delay]: DelayEngine,
-    [FlowchartSymbols.storedData]: StoredDataEngine
-};
-const getEngine = (shape) => {
-    return ShapeEngineMap[shape];
+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 createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
-    let textOptions = {};
-    let alignment = Alignment.center;
-    let textHeight = DefaultTextProperty.height;
-    if (shape === BasicShapes.text) {
-        textOptions = { autoSize: true };
-        alignment = undefined;
-    }
-    textProperties = { ...textProperties };
-    textProperties?.align && (alignment = textProperties?.align);
-    textProperties?.textHeight && (textHeight = textProperties?.textHeight);
+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,
+    [BasicShapes.ellipse]: EllipseEngine,
+    [BasicShapes.parallelogram]: ParallelogramEngine,
+    [BasicShapes.roundRectangle]: RoundRectangleEngine,
+    [BasicShapes.text]: RectangleEngine,
+    [BasicShapes.triangle]: TriangleEngine,
+    [BasicShapes.leftArrow]: LeftArrowEngine,
+    [BasicShapes.trapezoid]: TrapezoidEngine,
+    [BasicShapes.rightArrow]: RightArrowEngine,
+    [BasicShapes.cross]: CrossEngine,
+    [BasicShapes.star]: StarEngine,
+    [BasicShapes.pentagon]: PentagonEngine,
+    [BasicShapes.hexagon]: HexagonEngine,
+    [BasicShapes.octagon]: OctagonEngine,
+    [BasicShapes.pentagonArrow]: PentagonArrowEngine,
+    [BasicShapes.processArrow]: ProcessArrowEngine,
+    [BasicShapes.twoWayArrow]: TwoWayArrowEngine,
+    [BasicShapes.comment]: CommentEngine,
+    [BasicShapes.roundComment]: RoundCommentEngine,
+    [BasicShapes.cloud]: CloudEngine,
+    [FlowchartSymbols.process]: RectangleEngine,
+    [FlowchartSymbols.decision]: DiamondEngine,
+    [FlowchartSymbols.connector]: EllipseEngine,
+    [FlowchartSymbols.data]: ParallelogramEngine,
+    [FlowchartSymbols.terminal]: TerminalEngine,
+    [FlowchartSymbols.manualInput]: ManualInputEngine,
+    [FlowchartSymbols.preparation]: PreparationEngine,
+    [FlowchartSymbols.manualLoop]: ManualLoopEngine,
+    [FlowchartSymbols.merge]: MergeEngine,
+    [FlowchartSymbols.delay]: DelayEngine,
+    [FlowchartSymbols.storedData]: StoredDataEngine,
+    [FlowchartSymbols.or]: OrEngine,
+    [FlowchartSymbols.summingJunction]: SummingJunctionEngine,
+    [FlowchartSymbols.predefinedProcess]: PredefinedProcessEngine,
+    [FlowchartSymbols.offPage]: OffPageEngine
+};
+const getEngine = (shape) => {
+    return ShapeEngineMap[shape];
+};
+
+const createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
+    let textOptions = {};
+    let alignment = Alignment.center;
+    let textHeight = DefaultTextProperty.height;
+    if (shape === BasicShapes.text) {
+        textOptions = { autoSize: true };
+        alignment = undefined;
+    }
+    textProperties = { ...textProperties };
+    textProperties?.align && (alignment = textProperties?.align);
+    textProperties?.textHeight && (textHeight = textProperties?.textHeight);
     delete textProperties?.align;
     delete textProperties?.textHeight;
     return {
@@ -2329,36 +2569,45 @@ const getTextRectangle = (element) => {
         y: elementRectangle.y + (elementRectangle.height - height) / 2
     };
 };
-const drawBoundMask = (board, element) => {
-    const G = createG();
+const drawBoundReaction = (board, element, options = { hasMask: true, hasConnector: true }) => {
+    const g = createG();
     const rectangle = RectangleClient.getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    const shape = getShape(element);
-    const maskG = drawGeometry(board, activeRectangle, shape, {
+    const activeRectangle = RectangleClient.inflate(rectangle, SNAPPING_STROKE_WIDTH);
+    const shape = getElementShape(element);
+    const strokeG = drawGeometry(board, activeRectangle, shape, {
         stroke: SELECTION_BORDER_COLOR,
-        strokeWidth: 1,
-        fill: SELECTION_FILL_COLOR,
-        fillStyle: 'solid'
+        strokeWidth: SNAPPING_STROKE_WIDTH
     });
-    G.appendChild(maskG);
-    const connectorPoints = getEngine(shape).getConnectorPoints(activeRectangle);
-    connectorPoints.forEach(point => {
-        const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 6, {
-            stroke: '#999999',
-            strokeWidth: 1,
-            fill: '#FFF',
+    g.appendChild(strokeG);
+    if (options.hasMask) {
+        const maskG = drawGeometry(board, activeRectangle, shape, {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: 0,
+            fill: SELECTION_FILL_COLOR,
             fillStyle: 'solid'
         });
-        G.appendChild(circleG);
-    });
-    return G;
+        g.appendChild(maskG);
+    }
+    if (options.hasConnector) {
+        const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
+        connectorPoints.forEach(point => {
+            const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 8, {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: ACTIVE_STROKE_WIDTH,
+                fill: '#FFF',
+                fillStyle: 'solid'
+            });
+            g.appendChild(circleG);
+        });
+    }
+    return g;
 };
 const drawGeometry = (board, outerRectangle, shape, options) => {
     return getEngine(shape).draw(board, outerRectangle, options);
 };
 const getNearestPoint = (element, point) => {
     const rectangle = RectangleClient.getRectangleByPoints(element.points);
-    const shape = getShape(element);
+    const shape = getElementShape(element);
     return getEngine(shape).getNearestPoint(rectangle, point);
 };
 const getCenterPointsOnPolygon = (points) => {
@@ -2465,6 +2714,9 @@ const getDefaultGeometryProperty = (pointer) => {
         return getDefaultFlowchartProperty(pointer);
     }
     else {
+        if (pointer === BasicShapes.cloud) {
+            return DefaultCloudShapeProperty;
+        }
         return DefaultBasicShapeProperty;
     }
 };
@@ -2516,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;
@@ -2595,7 +2854,7 @@ const getConnectionPoint = (geometry, connection, direction, delta) => {
 };
 const getVectorByConnection = (boundElement, connection) => {
     const rectangle = RectangleClient.getRectangleByPoints(boundElement.points);
-    const shape = getShape(boundElement);
+    const shape = getElementShape(boundElement);
     const engine = getEngine(shape);
     let vector = [0, 0];
     const direction = getDirectionByPointOfRectangle(connection);
@@ -2710,6 +2969,7 @@ var StrokeStyle;
 (function (StrokeStyle) {
     StrokeStyle["solid"] = "solid";
     StrokeStyle["dashed"] = "dashed";
+    StrokeStyle["dotted"] = "dotted";
 })(StrokeStyle || (StrokeStyle = {}));
 var MemorizeKey;
 (function (MemorizeKey) {
@@ -2740,7 +3000,7 @@ const PlaitDrawElement = {
             return false;
         }
     },
-    isShape: (value) => {
+    isShapeElement: (value) => {
         return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
     },
     isBasicShape: (value) => {
@@ -2826,7 +3086,7 @@ const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
             const object = { ...line[handle] };
             const linePoints = getLinePoints(board, line);
             const point = isSourceBound ? linePoints[0] : linePoints[linePoints.length - 1];
-            object.connection = getConnectionByNearestPoint(board, point, geometry);
+            object.connection = getHitConnection(board, point, geometry);
             const path = PlaitBoard.findPath(board, line);
             const index = refs.findIndex(obj => Path.equals(obj.path, path));
             if (index === -1) {
@@ -2846,7 +3106,7 @@ const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
 const connectLineToGeometry = (board, lineElement, handle, geometryElement) => {
     const linePoints = PlaitLine.getPoints(board, lineElement);
     const point = handle === LineHandleKey.source ? linePoints[0] : linePoints[linePoints.length - 1];
-    const connection = getConnectionByNearestPoint(board, point, geometryElement);
+    const connection = getHitConnection(board, point, geometryElement);
     if (connection) {
         let source = lineElement.source;
         let target = lineElement.target;
@@ -3058,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();
     }
@@ -3102,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
@@ -3112,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
@@ -3136,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);
     }
@@ -3187,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: [{
@@ -3198,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() {
@@ -3271,12 +3530,11 @@ class LineActiveGenerator extends Generator {
     }
 }
 
-const debugKey$1 = 'debug:plait:line-turning';
-const debugGenerator$1 = createDebugGenerator(debugKey$1);
+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 = {};
@@ -3288,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,
@@ -3297,7 +3555,7 @@ class LineComponent extends CommonPluginElement {
         super.ngOnInit();
         this.boundedElements = this.getBoundedElements();
         this.drawText();
-        debugGenerator$1.isDebug() && debugGenerator$1.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
+        debugGenerator$2.isDebug() && debugGenerator$2.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
     }
     getBoundedElements() {
         const boundedElements = {};
@@ -3322,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
@@ -3340,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
@@ -3363,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);
             });
         }
     }
@@ -3420,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: [{
@@ -3431,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;
@@ -3466,57 +3724,483 @@ 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);
+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));
+    };
+    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);
                     });
-                    fakeCreateTextRef = {
-                        g: createG(),
-                        textManage
-                    };
-                    PlaitBoard.getHost(board).append(fakeCreateTextRef.g);
-                    fakeCreateTextRef.g.append(textManage.g);
+                    const adjustTargetPoints = points.map(p => [
+                        p[0] + bulkRotationRef.offsetX,
+                        p[1] + bulkRotationRef.offsetY
+                    ]);
+                    points = rotatedDataPoints(adjustTargetPoints, bulkRotationRef.newCenterPoint, bulkRotationRef.angle);
                 }
                 else {
-                    fakeCreateTextRef.textManage.updateRectangle();
-                    fakeCreateTextRef.g.append(fakeCreateTextRef.textManage.g);
+                    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);
+                        });
+                    }
                 }
-            }
-            else {
-                const points = getDefaultGeometryPoints(pointer, movingPoint);
-                temporaryElement = createDefaultGeometry(board, points, pointer);
-                geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-        }
-        pointerMove(event);
+                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);
+            }
+        }
+    };
+    withResize(board, options);
+    board.afterChange = () => {
+        afterChange();
+        if (handleG) {
+            handleG.remove();
+            handleG = null;
+        }
+        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);
+        }
+    };
+    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
+            });
+        }
+        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 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;
+        }
+        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;
+            }
+            else {
+                yZoom = zoom;
+            }
+        }
+    }
+    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$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);
+    });
+    debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(board, resultPoints);
+    const newRectangle = RectangleClient.getRectangleByPoints(resultPoints);
+    return rotatePoints(resultPoints, RectangleClient.getCenterPoint(newRectangle), -(1 / 2) * Math.PI);
+};
+
+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
+    };
+}
+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
+    };
+    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;
+            }
+        }
+    }
+    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;
+            }
+        }
+    }
+    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 (angle) {
+            activePoints = resetPointsAfterResize(RectangleClient.getRectangleByPoints(resizeOriginPoint), RectangleClient.getRectangleByPoints(activePoints), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeOriginPoint)), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(activePoints)), angle);
+        }
+    }
+    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 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;
+        }
+    }
+    return isometricLineDelta;
+}
+function getIsometricLinePoints(rectangle, isHorizontal) {
+    return isHorizontal
+        ? [
+            [rectangle.x, rectangle.y - EQUAL_SPACING],
+            [rectangle.x + rectangle.width, rectangle.y - EQUAL_SPACING]
+        ]
+        : [
+            [rectangle.x - EQUAL_SPACING, rectangle.y],
+            [rectangle.x - EQUAL_SPACING, rectangle.y + rectangle.height]
+        ];
+}
+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);
+}
+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));
+        }
+        if (activeRectangle.height === snapRectangle.height && drawVerticalLine) {
+            heightIsometricPoints.push(getIsometricLinePoints(snapRectangle, false));
+        }
+    }
+    if (widthIsometricPoints.length && drawHorizontalLine) {
+        widthIsometricPoints.push(getIsometricLinePoints(activeRectangle, true));
+    }
+    if (heightIsometricPoints.length && drawVerticalLine) {
+        heightIsometricPoints.push(getIsometricLinePoints(activeRectangle, false));
+    }
+    const isometricLines = [...widthIsometricPoints, ...heightIsometricPoints];
+    return drawSolidLines(board, isometricLines);
+}
+
+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();
@@ -3541,6 +4225,7 @@ const withGeometryCreateByDrawing = (board) => {
     let geometryShapeG = null;
     let temporaryElement = null;
     let isShift = false;
+    let snapG;
     board.keyDown = (event) => {
         isShift = isKeyHotkey('shift', event);
         keyDown(event);
@@ -3572,11 +4257,24 @@ const withGeometryCreateByDrawing = (board) => {
         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);
+        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);
@@ -3599,6 +4297,7 @@ const withGeometryCreateByDrawing = (board) => {
         if (temporaryElement) {
             insertElement(board, temporaryElement);
         }
+        snapG?.remove();
         geometryShapeG?.remove();
         geometryShapeG = null;
         start = null;
@@ -3670,7 +4369,7 @@ const insertClipboardData = (board, elements, startPoint) => {
 
 const withDrawFragment = (baseBoard) => {
     const board = baseBoard;
-    const { getDeletedFragment, setFragment, insertFragment } = board;
+    const { getDeletedFragment, buildFragment, insertFragment } = board;
     board.getDeletedFragment = (data) => {
         const drawElements = getSelectedDrawElements(board);
         if (drawElements.length) {
@@ -3690,7 +4389,7 @@ const withDrawFragment = (baseBoard) => {
         }
         return getDeletedFragment(data);
     };
-    board.setFragment = (data, clipboardContext, rectangle, type) => {
+    board.buildFragment = (clipboardContext, rectangle, type) => {
         const targetDrawElements = getSelectedDrawElements(board);
         let boundLineElements = [];
         if (targetDrawElements.length) {
@@ -3699,655 +4398,111 @@ const withDrawFragment = (baseBoard) => {
                 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);
-    };
-    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;
-                }
-            }
-        }
-        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 = getHitOutlineGeometry(board, point, REACTION_MARGIN);
-            if (hitElement) {
-                sourceElement = hitElement;
-            }
-            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 ALIGN_TOLERANCE = 2;
-const EQUAL_SPACING = 10;
-const ALIGN_SPACING = 24;
-class ResizeAlignReaction {
-    constructor(board, activeElements) {
-        this.board = board;
-        this.activeElements = activeElements;
-        this.alignRectangles = this.getAlignRectangle();
-    }
-    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 => this.board.getRectangle(item));
-    }
-    getAlignLineRef(resizeAlignDelta, resizeAlignOptions) {
-        const { deltaX, deltaY } = resizeAlignDelta;
-        const { resizeState, originPoint, handlePoint, isFromCorner, isAspectRatio, resizeOriginPoints } = resizeAlignOptions;
-        const newResizeState = {
-            ...resizeState,
-            endPoint: [resizeState.endPoint[0] + deltaX, resizeState.endPoint[1] + deltaY]
-        };
-        const { xZoom, yZoom } = getResizeZoom(newResizeState, originPoint, handlePoint, isFromCorner, isAspectRatio);
-        const activePoints = resizeOriginPoints.map(p => {
-            return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
-        });
-        return {
-            deltaX,
-            deltaY,
-            xZoom,
-            yZoom,
-            activePoints
-        };
-    }
-    getEqualLineDelta(resizeAlignOptions) {
-        let equalLineDelta = {
-            deltaX: 0,
-            deltaY: 0
-        };
-        const { isAspectRatio, activeRectangle } = resizeAlignOptions;
-        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 * resizeAlignOptions.directionFactors[0];
-            if (isAspectRatio) {
-                const deltaHeight = deltaWidth / (activeRectangle.width / activeRectangle.height);
-                equalLineDelta.deltaY = deltaHeight * resizeAlignOptions.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 * resizeAlignOptions.directionFactors[1];
-            if (isAspectRatio) {
-                const deltaWidth = deltaHeight * (activeRectangle.width / activeRectangle.height);
-                equalLineDelta.deltaX = deltaWidth * resizeAlignOptions.directionFactors[0];
-                return equalLineDelta;
-            }
-        }
-        return equalLineDelta;
-    }
-    drawEqualLines(activePoints, resizeAlignOptions) {
-        let widthEqualPoints = [];
-        let heightEqualPoints = [];
-        const drawHorizontalLine = resizeAlignOptions.directionFactors[0] !== 0 || resizeAlignOptions.isAspectRatio;
-        const drawVerticalLine = resizeAlignOptions.directionFactors[1] !== 0 || resizeAlignOptions.isAspectRatio;
-        const activeRectangle = 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));
-        }
-        const equalLinePoints = [...widthEqualPoints, ...heightEqualPoints];
-        return drawEqualLines(this.board, equalLinePoints);
-    }
-    getAlignLineDelta(resizeAlignOptions) {
-        let alignLineDelta = {
-            deltaX: 0,
-            deltaY: 0
-        };
-        const { isAspectRatio, activeRectangle, directionFactors } = resizeAlignOptions;
-        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, resizeAlignOptions) {
-        let alignLinePoints = [];
-        const activeRectangle = RectangleClient.getRectangleByPoints(activePoints);
-        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 } = resizeAlignOptions;
-        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];
-            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);
-            }
-        }
-        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);
-    }
-    handleResizeAlign(resizeAlignOptions) {
-        const alignG = createG();
-        let alignLineDelta = this.getEqualLineDelta(resizeAlignOptions);
-        if (alignLineDelta.deltaX === 0 && alignLineDelta.deltaY === 0) {
-            alignLineDelta = this.getAlignLineDelta(resizeAlignOptions);
-        }
-        const equalLineRef = this.getAlignLineRef(alignLineDelta, resizeAlignOptions);
-        const equalLinesG = this.drawEqualLines(equalLineRef.activePoints, resizeAlignOptions);
-        const alignLinesG = this.drawAlignLines(equalLineRef.activePoints, resizeAlignOptions);
-        alignG.append(equalLinesG, alignLinesG);
-        return { ...equalLineRef, alignG };
-    }
-}
-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) {
-    return isHorizontal
-        ? [
-            [rectangle.x, rectangle.y - EQUAL_SPACING],
-            [rectangle.x + rectangle.width, rectangle.y - EQUAL_SPACING]
-        ]
-        : [
-            [rectangle.x - EQUAL_SPACING, rectangle.y],
-            [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;
-}
-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;
-        }
-    });
-    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;
-        }
-    });
-    return nearestRectangle;
-}
-
-function getResizeAlignRef(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;
-    }
-    const points = resizeOriginPoints.map(p => {
-        return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
-    });
-    const activeRectangle = RectangleClient.getRectangleByPoints(points);
-    const resizeAlignReaction = new ResizeAlignReaction(board, activeElements);
-    const resizeHandlePoint = movePointByZoomAndOriginPoint(handlePoint, originPoint, xZoom, yZoom);
-    const [x, y] = getUnitVectorByPointAndPoint(originPoint, resizeHandlePoint);
-    return resizeAlignReaction.handleResizeAlign({
-        resizeState,
-        resizeOriginPoints,
-        activeRectangle,
-        originPoint,
-        handlePoint,
-        directionFactors: [getDirectionFactorByDirectionComponent(x), getDirectionFactorByDirectionComponent(y)],
-        isAspectRatio,
-        isFromCorner
-    });
-}
-
-const debugKey = 'debug:plait:resize-for-rotation';
-const debugGenerator = createDebugGenerator(debugKey);
-function withDrawResize(board) {
-    const { afterChange } = board;
-    let alignG;
-    let handleG;
-    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 = getResizeAlignRef(board, resizeRef, resizeState, {
-                originPoint,
-                handlePoint
-            }, isAspectRatio, isFromCorner);
-            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
+            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
                 });
-                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 adjustTargetPoints = points.map(p => [
-                        p[0] + bulkRotationRef.offsetX,
-                        p[1] + bulkRotationRef.offsetY
-                    ]);
-                    points = rotatedDataPoints(adjustTargetPoints, bulkRotationRef.newCenterPoint, bulkRotationRef.angle);
-                }
-                else {
-                    points = target.points.map(p => {
-                        return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.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, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
-                        const newTargetRectangle = RectangleClient.getRectangleByCenterPoint(newCenterPoint, targetRectangle.width, targetRectangle.height);
-                        Transforms.setNode(board, { points: RectangleClient.getPoints(newTargetRectangle) }, path);
-                    }
-                }
-            });
-        },
-        afterResize: (resizeRef) => {
-            alignG?.remove();
-            alignG = null;
         }
+        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 = 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);
+            }
+        }
+        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;
+                }
             }
-            corners.forEach(corner => {
-                const g = drawHandle(board, corner);
-                handleG && handleG.append(g);
-            });
-            PlaitBoard.getElementActiveHost(board).append(handleG);
         }
+        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];
+        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: () => {
@@ -4375,27 +4530,21 @@ const withGeometryResize = (board) => {
             return null;
         },
         onResize: (resizeRef, resizeState) => {
-            const centerPoint = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeRef.element.points));
-            const angle = resizeRef.element.angle;
-            if (angle) {
-                const [rotatedStartPoint, rotateEndPoint] = rotatePoints([resizeState.startPoint, resizeState.endPoint], centerPoint, -resizeRef.element.angle);
-                resizeState.startPoint = rotatedStartPoint;
-                resizeState.endPoint = rotateEndPoint;
-            }
-            alignG?.remove();
+            resizeState.startPoint = rotateAntiPointsByElement(resizeState.startPoint, resizeRef.element) || resizeState.startPoint;
+            resizeState.endPoint = rotateAntiPointsByElement(resizeState.endPoint, resizeRef.element) || resizeState.endPoint;
+            snapG?.remove();
             const isFromCorner = isCornerHandle(board, resizeRef.handle);
             const isAspectRatio = resizeState.isShift || PlaitDrawElement.isImage(resizeRef.element);
-            const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, resizeRef);
-            const resizeAlignRef = getResizeAlignRef(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;
-            if (angle) {
-                points = resetPointsAfterResize(resizeRef.rectangle, RectangleClient.getRectangleByPoints(points), centerPoint, RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(points)), angle);
-            }
+            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);
@@ -4406,8 +4555,8 @@ const withGeometryResize = (board) => {
             }
         },
         afterResize: (resizeRef) => {
-            alignG?.remove();
-            alignG = null;
+            snapG?.remove();
+            snapG = null;
         }
     };
     withResize(board, options);
@@ -4448,8 +4597,7 @@ const withLineResize = (board) => {
                 resizeRef.handle !== LineResizeHandle.source &&
                 resizeRef.handle !== LineResizeHandle.target) {
                 const params = getElbowLineRouteOptions(board, resizeRef.element);
-                const isIntersect = isSourceAndTargetIntersect(params);
-                if (isIntersect) {
+                if (isUseDefaultOrthogonalRoute(resizeRef.element, params)) {
                     return;
                 }
                 const points = [...resizeRef.element.points];
@@ -4468,12 +4616,12 @@ const withLineResize = (board) => {
             let source = { ...resizeRef.element.source };
             let target = { ...resizeRef.element.target };
             let handleIndex = resizeRef.handleIndex;
-            const hitElement = getHitOutlineGeometry(board, resizeState.endPoint, REACTION_MARGIN);
+            const hitElement = getSnappingGeometry(board, resizeState.endPoint);
             if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
                 const object = resizeRef.handle === LineResizeHandle.source ? source : target;
                 points[handleIndex] = resizeState.endPoint;
                 if (hitElement) {
-                    object.connection = getConnectionByNearestPoint(board, rotateAntiPointsByElement(resizeState.endPoint, hitElement) || resizeState.endPoint, hitElement);
+                    object.connection = getHitConnection(board, resizeState.endPoint, hitElement);
                     object.boundId = hitElement.id;
                 }
                 else {
@@ -4515,7 +4663,8 @@ const withLineResize = (board) => {
                 const newPoints = [...points];
                 newPoints[0] = drawPoints[0];
                 newPoints[newPoints.length - 1] = drawPoints[drawPoints.length - 1];
-                if (resizeRef.element.shape !== LineShape.elbow) {
+                if (resizeRef.element.shape !== LineShape.elbow ||
+                    (resizeRef.element.shape === LineShape.elbow && newPoints.length === 2)) {
                     newPoints.forEach((point, index) => {
                         if (index === handleIndex)
                             return;
@@ -4579,25 +4728,24 @@ const withLineBoundReaction = (board) => {
             return PlaitDrawElement.isLine(element) && isSourceOrTarget;
         });
         if (isLinePointer || isLineResizing) {
-            const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
+            const hitElement = getHitGeometry(board, movingPoint);
             if (hitElement) {
-                const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
-                boundShapeG = drawBoundMask(board, hitElement);
-                let nearestPoint = getNearestPoint(hitElement, rotateAntiPointsByElement(movingPoint, hitElement) || movingPoint);
-                const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-                const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, activeRectangle);
-                nearestPoint = hitConnector ? hitConnector : nearestPoint;
-                const circleG = drawCircle(PlaitBoard.getRoughSVG(board), nearestPoint, 6, {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: ACTIVE_STROKE_WIDTH,
-                    fill: SELECTION_BORDER_COLOR,
-                    fillStyle: 'solid'
-                });
-                boundShapeG.appendChild(circleG);
-                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
+                const ref = getSnappingRef(board, hitElement, movingPoint);
+                const isSnapping = ref.isHitEdge || ref.isHitConnector;
+                boundShapeG = drawBoundReaction(board, hitElement, { hasMask: isSnapping, hasConnector: true });
+                if (isSnapping) {
+                    const circleG = drawCircle(PlaitBoard.getRoughSVG(board), ref.connectorPoint || ref.edgePoint, 6, {
+                        stroke: SELECTION_BORDER_COLOR,
+                        strokeWidth: SNAPPING_STROKE_WIDTH,
+                        fill: SELECTION_BORDER_COLOR,
+                        fillStyle: 'solid'
+                    });
+                    boundShapeG.appendChild(circleG);
+                }
                 if (hasValidAngle(hitElement)) {
-                    setAngleForG(boundShapeG, RectangleClient.getCenterPoint(rectangle), hitElement.angle);
+                    setAngleForG(boundShapeG, RectangleClient.getCenterPointByPoints(hitElement.points), hitElement.angle);
                 }
+                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
             }
         }
         pointerMove(event);
@@ -4664,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();
     }
@@ -4693,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
@@ -4724,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: [{
@@ -4735,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;
@@ -4746,7 +4893,7 @@ const withLineAutoCompleteReaction = (board) => {
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
             const points = getAutoCompletePoints(targetElement);
             const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
             const hitPoint = points[hitIndex];
@@ -4774,7 +4921,7 @@ const withLineAutoCompleteReaction = (board) => {
 const WithLineAutoCompletePluginKey = 'plait-line-auto-complete-plugin-key';
 const withLineAutoComplete = (board) => {
     const { pointerDown, pointerMove, globalPointerUp } = board;
-    let startPoint = null;
+    let autoCompletePoint = null;
     let lineShapeG = null;
     let sourceElement;
     let temporaryElement;
@@ -4782,13 +4929,13 @@ const withLineAutoComplete = (board) => {
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
         const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+        if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
             const points = getAutoCompletePoints(targetElement);
             const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(clickPoint, targetElement) || clickPoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
-                startPoint = hitPoint;
+                autoCompletePoint = hitPoint;
                 sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, LineShape.elbow);
             }
@@ -4799,18 +4946,20 @@ const withLineAutoComplete = (board) => {
         lineShapeG?.remove();
         lineShapeG = createG();
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        if (startPoint && sourceElement) {
-            const distance = distanceBetweenPointAndPoint(...movingPoint, ...(rotatePointsByElement(startPoint, sourceElement) || startPoint));
+        if (autoCompletePoint && sourceElement) {
+            const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
-                const shape = getShape(sourceElement);
+                const shape = getElementShape(sourceElement);
                 const engine = getEngine(shape);
-                let sourcePoint = startPoint;
+                let sourcePoint = autoCompletePoint;
                 if (engine.getNearestCrossingPoint) {
-                    const crossingPoint = engine.getNearestCrossingPoint(rectangle, startPoint);
+                    const crossingPoint = engine.getNearestCrossingPoint(rectangle, autoCompletePoint);
                     sourcePoint = crossingPoint;
                 }
-                temporaryElement = handleLineCreating(board, LineShape.elbow, rotatePointsByElement(sourcePoint, sourceElement) || sourcePoint, movingPoint, sourceElement, lineShapeG);
+                // source point must be click point
+                const rotatedSourcePoint = rotatePointsByElement(sourcePoint, sourceElement) || sourcePoint;
+                temporaryElement = handleLineCreating(board, LineShape.elbow, rotatedSourcePoint, movingPoint, sourceElement, lineShapeG);
             }
         }
         pointerMove(event);
@@ -4824,9 +4973,9 @@ const withLineAutoComplete = (board) => {
                 ?.afterComplete;
             afterComplete && afterComplete(temporaryElement);
         }
-        if (startPoint) {
+        if (autoCompletePoint) {
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-            startPoint = null;
+            autoCompletePoint = null;
         }
         lineShapeG?.remove();
         lineShapeG = null;
@@ -4884,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) => {
@@ -4968,8 +5240,8 @@ const withDraw = (board) => {
         }
         return isAlign(element);
     };
-    board.getRelatedFragment = (elements) => {
-        const selectedElements = getSelectedElements(board);
+    board.getRelatedFragment = (elements, originData) => {
+        const selectedElements = originData || getSelectedElements(board);
         const lineElements = board.children.filter(element => PlaitDrawElement.isLine(element));
         const activeLines = lineElements.filter(line => {
             const source = selectedElements.find(element => element.id === line.source.boundId);
@@ -4977,14 +5249,14 @@ const withDraw = (board) => {
             const isSelected = selectedElements.includes(line);
             return source && target && !isSelected;
         });
-        return getRelatedFragment([...elements, ...activeLines]);
+        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, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, REACTION_MARGIN, ShapeDefaultSpace, StrokeStyle, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createLineElement, createTextElement, drawBoundMask, drawGeometry, drawLine, drawLineArrow, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon, getConnectionByNearestPoint, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, 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, isHitElementInside, isHitLine, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, isUpdatedHandleIndex, 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