@plait/draw 0.55.1 → 0.56.1

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, createDebugGenerator, Point, RectangleClient, getElementById, rotatePointsByElement, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, rotateAntiPointsByElement, rotatePoints, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, idCreator, catmullRomFitting, 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 { 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, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, Direction, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, hasValidAngle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, getHitElementByPoint, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, PlaitElement, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, 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, getDirectionByPointOfRectangle, getDirectionFactor, getFirstTextManage, getDirectionByVector, getOppositeDirection, rotateVector, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, canResize, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isCornerHandle, getIndexByResizeHandle, resetPointsAfterResize, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, 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';
@@ -49,6 +49,14 @@ var FlowchartSymbols;
     FlowchartSymbols["summingJunction"] = "summingJunction";
     FlowchartSymbols["predefinedProcess"] = "predefinedProcess";
     FlowchartSymbols["offPage"] = "offPage";
+    FlowchartSymbols["document"] = "document";
+    FlowchartSymbols["multiDocument"] = "multiDocument";
+    FlowchartSymbols["database"] = "database";
+    FlowchartSymbols["hardDisk"] = "hardDisk";
+    FlowchartSymbols["internalStorage"] = "internalStorage";
+    FlowchartSymbols["noteCurlyRight"] = "noteCurlyRight";
+    FlowchartSymbols["noteCurlyLeft"] = "noteCurlyLeft";
+    FlowchartSymbols["noteSquare"] = "noteSquare";
 })(FlowchartSymbols || (FlowchartSymbols = {}));
 const PlaitGeometry = {};
 
@@ -71,11 +79,21 @@ const DefaultBasicShapeProperty = {
     strokeColor: '#333',
     strokeWidth: 2
 };
-const DefaultCloudShapeProperty = {
+const DefaultPentagonArrowProperty = {
     width: 120,
-    height: 100,
-    strokeColor: '#333',
-    strokeWidth: 2
+    height: 50
+};
+const DefaultTwoWayArrowProperty = {
+    width: 138,
+    height: 80
+};
+const DefaultArrowProperty = {
+    width: 100,
+    height: 80
+};
+const DefaultCloudProperty = {
+    width: 120,
+    height: 100
 };
 const DefaultTextProperty = {
     width: 36,
@@ -93,6 +111,14 @@ const DefaultFlowchartProperty = {
     width: 120,
     height: 60
 };
+const DefaultDataBaseProperty = {
+    width: 70,
+    height: 80
+};
+const DefaultInternalStorageProperty = {
+    width: 80,
+    height: 80
+};
 const DefaultDecisionProperty = {
     width: 140,
     height: 70
@@ -101,6 +127,18 @@ const DefaultDataProperty = {
     width: 124,
     height: 60
 };
+const DefaultDocumentProperty = {
+    width: 120,
+    height: 70
+};
+const DefaultNoteProperty = {
+    width: 160,
+    height: 100
+};
+const DefaultMultiDocumentProperty = {
+    width: 120,
+    height: 80
+};
 const DefaultManualInputProperty = {
     width: 117,
     height: 59
@@ -109,6 +147,14 @@ const DefaultMergeProperty = {
     width: 47,
     height: 33
 };
+const DefaultBasicShapePropertyMap = {
+    [BasicShapes.pentagonArrow]: DefaultPentagonArrowProperty,
+    [BasicShapes.processArrow]: DefaultPentagonArrowProperty,
+    [BasicShapes.cloud]: DefaultCloudProperty,
+    [BasicShapes.twoWayArrow]: DefaultTwoWayArrowProperty,
+    [BasicShapes.leftArrow]: DefaultArrowProperty,
+    [BasicShapes.rightArrow]: DefaultArrowProperty
+};
 const DefaultFlowchartPropertyMap = {
     [FlowchartSymbols.connector]: DefaultConnectorProperty,
     [FlowchartSymbols.process]: DefaultFlowchartProperty,
@@ -124,7 +170,15 @@ const DefaultFlowchartPropertyMap = {
     [FlowchartSymbols.or]: DefaultConnectorProperty,
     [FlowchartSymbols.summingJunction]: DefaultConnectorProperty,
     [FlowchartSymbols.predefinedProcess]: DefaultFlowchartProperty,
-    [FlowchartSymbols.offPage]: DefaultFlowchartProperty
+    [FlowchartSymbols.offPage]: DefaultFlowchartProperty,
+    [FlowchartSymbols.document]: DefaultDocumentProperty,
+    [FlowchartSymbols.multiDocument]: DefaultMultiDocumentProperty,
+    [FlowchartSymbols.database]: DefaultDataBaseProperty,
+    [FlowchartSymbols.hardDisk]: DefaultFlowchartProperty,
+    [FlowchartSymbols.internalStorage]: DefaultInternalStorageProperty,
+    [FlowchartSymbols.noteCurlyLeft]: DefaultNoteProperty,
+    [FlowchartSymbols.noteCurlyRight]: DefaultNoteProperty,
+    [FlowchartSymbols.noteSquare]: DefaultNoteProperty
 };
 const LINE_HIT_GEOMETRY_BUFFER = 10;
 const LINE_SNAPPING_BUFFER = 6;
@@ -1021,8 +1075,21 @@ const memorizeLatestText = (element, operations) => {
     let textMemory = getMemorizedLatest(memorizeKey)?.text || {};
     const setNodeOperation = operations.find(operation => operation.type === 'set_node');
     if (setNodeOperation) {
-        const newProperties = setNodeOperation.newProperties;
-        textMemory = { ...textMemory, ...newProperties };
+        const { properties, newProperties } = setNodeOperation;
+        for (const key in newProperties) {
+            const value = newProperties[key];
+            if (value == null) {
+                delete textMemory[key];
+            }
+            else {
+                textMemory[key] = value;
+            }
+        }
+        for (const key in properties) {
+            if (!newProperties.hasOwnProperty(key)) {
+                delete textMemory[key];
+            }
+        }
         memorizeLatest(memorizeKey, 'text', textMemory);
     }
 };
@@ -1288,9 +1355,9 @@ function drawMask(board, element, id) {
     return { mask, maskTargetFillRect };
 }
 
-const getSelectedDrawElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isDrawElement(value));
-    return selectedElements;
+const getSelectedDrawElements = (board, elements) => {
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
+    return selectedElements.filter(value => PlaitDrawElement.isDrawElement(value));
 };
 const getSelectedGeometryElements = (board) => {
     const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isGeometry(value));
@@ -1530,43 +1597,7 @@ function createEllipseEngine(createOptions) {
     }
     return engine;
 }
-
 const EllipseEngine = createEllipseEngine();
-function getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation = 0) {
-    const rectangleClient = {
-        x: center[0] - rx,
-        y: center[1] - ry,
-        height: ry * 2,
-        width: rx * 2
-    };
-    // https://stackoverflow.com/a/46007540/232122
-    const px = Math.abs(point[0] - rectangleClient.x - rectangleClient.width / 2);
-    const py = Math.abs(point[1] - rectangleClient.y - rectangleClient.height / 2);
-    let tx = 0.707;
-    let ty = 0.707;
-    const a = Math.abs(rectangleClient.width) / 2;
-    const b = Math.abs(rectangleClient.height) / 2;
-    [0, 1, 2, 3].forEach(x => {
-        const xx = a * tx;
-        const yy = b * ty;
-        const ex = ((a * a - b * b) * tx ** 3) / a;
-        const ey = ((b * b - a * a) * ty ** 3) / b;
-        const rx = xx - ex;
-        const ry = yy - ey;
-        const qx = px - ex;
-        const qy = py - ey;
-        const r = Math.hypot(ry, rx);
-        const q = Math.hypot(qy, qx);
-        tx = Math.min(1, Math.max(0, ((qx * r) / q + ex) / a));
-        ty = Math.min(1, Math.max(0, ((qy * r) / q + ey) / b));
-        const t = Math.hypot(ty, tx);
-        tx /= t;
-        ty /= t;
-    });
-    const signX = point[0] > center[0] ? 1 : -1;
-    const signY = point[1] > center[1] ? 1 : -1;
-    return [center[0] + a * tx * signX, center[1] + b * ty * signY];
-}
 
 const getHexagonPoints = (rectangle) => {
     return [
@@ -1696,11 +1727,12 @@ const PentagonEngine = createPolygonEngine({
 });
 
 const getPentagonArrowPoints = (rectangle) => {
+    const wider = rectangle.width > rectangle.height / 2;
     return [
         [rectangle.x, rectangle.y],
-        [rectangle.x + (rectangle.width * 3) / 5, rectangle.y],
+        [rectangle.x + (wider ? rectangle.width - rectangle.height / 2 : 0), rectangle.y],
         [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
-        [rectangle.x + (rectangle.width * 3) / 5, rectangle.y + rectangle.height],
+        [rectangle.x + (wider ? rectangle.width - rectangle.height / 2 : 0), rectangle.y + rectangle.height],
         [rectangle.x, rectangle.y + rectangle.height]
     ];
 };
@@ -1710,8 +1742,10 @@ const PentagonArrowEngine = createPolygonEngine({
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle(element) {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const rectangle = getTextRectangle(element);
-        rectangle.width = (rectangle.width * 3) / 5;
+        const wider = elementRectangle.width > elementRectangle.height / 2 + 20;
+        rectangle.width = wider ? elementRectangle.width - elementRectangle.height / 2 : rectangle.width;
         return rectangle;
     }
 });
@@ -1730,11 +1764,11 @@ const getProcessArrowPoints = (rectangle) => {
 const ProcessArrowEngine = createPolygonEngine({
     getPolygonPoints: getProcessArrowPoints,
     getTextRectangle(element) {
-        const rectangle = getTextRectangle(element);
         const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
-        const width = rectangle.width;
-        rectangle.width = elementRectangle.height / 2;
-        rectangle.x += elementRectangle.height / 2;
+        const rectangle = getTextRectangle(element);
+        const wider = elementRectangle.width > elementRectangle.height + 20;
+        rectangle.width = wider ? elementRectangle.width - elementRectangle.height : rectangle.width;
+        rectangle.x = wider ? elementRectangle.x + elementRectangle.height / 2 : rectangle.x;
         return rectangle;
     }
 });
@@ -2489,6 +2523,551 @@ const SummingJunctionEngine = createEllipseEngine({
     }
 });
 
+const DocumentEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} V${rectangle.y} H${rectangle.x +
+            rectangle.width} V${rectangle.y + rectangle.height - rectangle.height / 9}
+            Q${rectangle.x + rectangle.width - rectangle.width / 4} ${rectangle.y +
+            rectangle.height -
+            (rectangle.height / 9) * 3}, ${rectangle.x + rectangle.width / 2} ${rectangle.y +
+            rectangle.height -
+            rectangle.height / 9} T${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9}           
+            `, { ...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) {
+        let nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        let curvePoints = catmullRomFitting([
+            [rectangle.x, rectangle.y + rectangle.height - rectangle.height / 9],
+            [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height],
+            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height - rectangle.height / 9],
+            [rectangle.x + (rectangle.width / 4) * 3, rectangle.y + rectangle.height - (rectangle.height / 9) * 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height - rectangle.height / 9]
+        ]);
+        curvePoints = pointsOnBezierCurves(curvePoints);
+        if (nearestPoint[1] > rectangle.y + rectangle.height - rectangle.height / 9) {
+            if (nearestPoint[0] === rectangle.x + rectangle.width / 2) {
+                nearestPoint[1] = rectangle.y + rectangle.height - rectangle.height / 9;
+                return nearestPoint;
+            }
+            nearestPoint = getNearestPointBetweenPointAndSegments(point, curvePoints, false);
+        }
+        return nearestPoint;
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [rectangle.x + rectangle.width / 2, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height - rectangle.height / 9],
+            [rectangle.x, rectangle.y + rectangle.height / 2]
+        ];
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        if (connectionPoint[0] > rectangle.x && connectionPoint[0] < rectangle.x + rectangle.width / 4) {
+            return getUnitVectorByPointAndPoint([rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height], connectionPoint);
+        }
+        if (connectionPoint[0] > rectangle.x + rectangle.width / 4 && connectionPoint[0] < rectangle.x + (rectangle.width / 4) * 3) {
+            return getUnitVectorByPointAndPoint([rectangle.x + (rectangle.width / 4) * 3, rectangle.y + rectangle.height - rectangle.height / 9], [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height]);
+        }
+        if (connectionPoint[0] > rectangle.x + (rectangle.width / 4) * 3) {
+            return getUnitVectorByPointAndPoint([rectangle.x + rectangle.width, rectangle.y + rectangle.height - rectangle.height / 9], connectionPoint);
+        }
+        return getUnitVectorByPointAndPoint(connectionPoint, [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height]);
+    },
+    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 getMultiDocumentPoints = (rectangle) => {
+    const linePoints = [
+        [rectangle.x, rectangle.y + 10],
+        [rectangle.x + 5, rectangle.y + 10],
+        [rectangle.x + 5, rectangle.y + 5],
+        [rectangle.x + 10, rectangle.y + 5],
+        [rectangle.x + 10, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height - rectangle.height / 9 - 10 - 3],
+        [rectangle.x + rectangle.width - 5, rectangle.y + rectangle.height - rectangle.height / 9 - 10 - 3 - 4],
+        [rectangle.x + rectangle.width - 5, rectangle.y + rectangle.height - rectangle.height / 9 - 5 - 3],
+        [rectangle.x + rectangle.width - 10, rectangle.y + rectangle.height - rectangle.height / 9 - 5 - 3 - 4],
+        [rectangle.x + rectangle.width - 10, rectangle.y + rectangle.height - rectangle.height / 9]
+    ];
+    let curvePoints = catmullRomFitting([
+        [rectangle.x + rectangle.width - 10, rectangle.y + rectangle.height - rectangle.height / 9],
+        [rectangle.x + rectangle.width - 10 - (rectangle.width - 10) / 4, rectangle.y + rectangle.height - (rectangle.height / 9) * 2],
+        [rectangle.x + (rectangle.width - 10) / 2, rectangle.y + rectangle.height - rectangle.height / 9],
+        [rectangle.x + (rectangle.width - 10) / 4, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height - rectangle.height / 9]
+    ]);
+    curvePoints = pointsOnBezierCurves(curvePoints);
+    return [...linePoints, ...curvePoints];
+};
+const MultiDocumentEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9} V${rectangle.y + 10} H${rectangle.x +
+            5} V${rectangle.y + 5} H${rectangle.x + 10} V${rectangle.y} H${rectangle.x + rectangle.width} V${rectangle.y +
+            rectangle.height -
+            rectangle.height / 9 -
+            10 -
+            3} L${rectangle.x + rectangle.width - 5} ${rectangle.y +
+            rectangle.height -
+            rectangle.height / 9 -
+            10 -
+            3 -
+            4} V${rectangle.y + rectangle.height - rectangle.height / 9 - 5 - 3}
+                 L${rectangle.x + rectangle.width - 10} ${rectangle.y +
+            rectangle.height -
+            rectangle.height / 9 -
+            5 -
+            3 -
+            4} V${rectangle.y + rectangle.height - rectangle.height / 9}
+                
+             Q${rectangle.x + rectangle.width - 10 - (rectangle.width - 10) / 4} ${rectangle.y +
+            rectangle.height -
+            (rectangle.height / 9) * 3}, ${rectangle.x + (rectangle.width - 10) / 2} ${rectangle.y +
+            rectangle.height -
+            rectangle.height / 9} T${rectangle.x} ${rectangle.y + rectangle.height - rectangle.height / 9}
+              
+                M${rectangle.x + 5} ${rectangle.y + 10} H${rectangle.x + rectangle.width - 10} V${rectangle.y +
+            rectangle.height -
+            rectangle.height / 9} 
+                    
+                M${rectangle.x + 10} ${rectangle.y + 5} H${rectangle.x + rectangle.width - 5} V${rectangle.y +
+            rectangle.height -
+            rectangle.height / 9 -
+            10 -
+            3}
+            `, { ...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, getMultiDocumentPoints(rectangle), false);
+    },
+    getConnectorPoints(rectangle) {
+        let curvePoints = catmullRomFitting([
+            [rectangle.x, rectangle.y + rectangle.height - rectangle.height / 9],
+            [rectangle.x + (rectangle.width - 10) / 4, rectangle.y + rectangle.height],
+            [rectangle.x + (rectangle.width - 10) / 2, rectangle.y + rectangle.height - rectangle.height / 9],
+            [rectangle.x + ((rectangle.width - 10) / 4) * 3, rectangle.y + rectangle.height - (rectangle.height / 9) * 2],
+            [rectangle.x + rectangle.width - 10, rectangle.y + rectangle.height - rectangle.height / 9]
+        ]);
+        curvePoints = pointsOnBezierCurves(curvePoints);
+        const crossingPoint = getNearestPointBetweenPointAndSegments([rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height], curvePoints);
+        return [
+            [rectangle.x + rectangle.width / 2, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+            [crossingPoint[0], crossingPoint[1]],
+            [rectangle.x, rectangle.y + rectangle.height / 2]
+        ];
+    },
+    getNearestCrossingPoint(rectangle, point) {
+        const crossingPoints = getCrossingPointBetweenPointAndPolygon(getMultiDocumentPoints(rectangle), point);
+        let nearestPoint = crossingPoints[0];
+        let nearestDistance = distanceBetweenPointAndPoint(point[0], point[1], nearestPoint[0], nearestPoint[1]);
+        crossingPoints
+            .filter((v, index) => index > 0)
+            .forEach(crossingPoint => {
+            let distance = distanceBetweenPointAndPoint(point[0], point[1], crossingPoint[0], crossingPoint[1]);
+            if (distance < nearestDistance) {
+                nearestDistance = distance;
+                nearestPoint = crossingPoint;
+            }
+        });
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        if (connectionPoint[0] > rectangle.x && connectionPoint[0] < rectangle.x + (rectangle.width - 10) / 4) {
+            return getUnitVectorByPointAndPoint([rectangle.x + (rectangle.width - 10) / 4, rectangle.y + rectangle.height], connectionPoint);
+        }
+        if (connectionPoint[0] > rectangle.x + (rectangle.width - 10) / 4 &&
+            connectionPoint[0] < rectangle.x + ((rectangle.width - 10) / 4) * 3) {
+            return getUnitVectorByPointAndPoint([rectangle.x + ((rectangle.width - 10) / 4) * 3, rectangle.y + rectangle.height - rectangle.height / 9], [rectangle.x + (rectangle.width - 10) / 4, rectangle.y + rectangle.height]);
+        }
+        if (connectionPoint[0] > rectangle.x + ((rectangle.width - 10) / 4) * 3 &&
+            connectionPoint[0] < rectangle.x + rectangle.width - 10) {
+            return getUnitVectorByPointAndPoint([rectangle.x + (rectangle.width - 10), rectangle.y + rectangle.height - rectangle.height / 9], connectionPoint);
+        }
+        const direction = getDirectionByPointOfRectangle(pointOfRectangle) || Direction.bottom;
+        const factor = getDirectionFactor(direction);
+        return [factor.x, factor.y];
+    },
+    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 - 10 : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.06,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const DatabaseEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y + rectangle.height * 0.15}  
+            A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y +
+            rectangle.height * 0.15} 
+            A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0,${rectangle.x} ${rectangle.y + rectangle.height * 0.15} 
+            V${rectangle.y + rectangle.height - rectangle.height * 0.15}
+            A${rectangle.width / 2} ${rectangle.height * 0.15}, 0, 0, 0, ${rectangle.x + rectangle.width} ${rectangle.y +
+            rectangle.height -
+            rectangle.height * 0.15}
+            V${rectangle.y + rectangle.height * 0.15}`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        const isInRectangle = RectangleClient.isHit({
+            ...rectangle,
+            y: rectangle.y + rectangle.height * 0.15,
+            height: rectangle.height - rectangle.height * 0.3
+        }, rangeRectangle);
+        const isInTopEllipse = isPointInEllipse(point, [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height * 0.15], rectangle.width / 2, rectangle.height * 0.15);
+        const isInBottomEllipse = isPointInEllipse(point, [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height - rectangle.height * 0.15], rectangle.width / 2, rectangle.height * 0.15);
+        return isInRectangle || isInTopEllipse || isInBottomEllipse;
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        if (nearestPoint[1] < rectangle.y + rectangle.height * 0.15) {
+            const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height * 0.15];
+            const nearestPoint = getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 2, rectangle.height * 0.15);
+            if (nearestPoint[1] > centerPoint[1]) {
+                nearestPoint[1] = centerPoint[1] * 2 - nearestPoint[1];
+            }
+            return nearestPoint;
+        }
+        if (nearestPoint[1] > rectangle.y + rectangle.height - rectangle.height * 0.15) {
+            const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height - rectangle.height * 0.15];
+            const nearestPoint = getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 2, rectangle.height * 0.15);
+            if (nearestPoint[1] < centerPoint[1]) {
+                nearestPoint[1] = centerPoint[0] * 2 - nearestPoint[1];
+            }
+            return nearestPoint;
+        }
+        return nearestPoint;
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        let centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height - rectangle.height * 0.15];
+        let a = rectangle.width / 2;
+        let b = rectangle.height * 0.15;
+        const isInTopEllipse = connectionPoint[1] < rectangle.y + rectangle.height * 0.15 && connectionPoint[0] > rectangle.x;
+        if (isInTopEllipse) {
+            centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height * 0.15];
+        }
+        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+        const slope = getEllipseTangentSlope(point[0], point[1], a, b);
+        const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
+        return vector;
+    },
+    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 {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + elementRectangle.height * 0.3 + (elementRectangle.height - elementRectangle.height * 0.45 - height) / 2
+        };
+    }
+};
+
+const HardDiskEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x + rectangle.width - rectangle.width * 0.15} ${rectangle.y}  
+            A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x +
+            rectangle.width -
+            rectangle.width * 0.15} ${rectangle.y + rectangle.height} 
+            A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width - rectangle.width * 0.15} ${rectangle.y} 
+            H${rectangle.x + rectangle.width * 0.15}
+            A${rectangle.width * 0.15} ${rectangle.height / 2}, 0, 0, 0, ${rectangle.x + rectangle.width * 0.15} ${rectangle.y +
+            rectangle.height}
+            H${rectangle.x + rectangle.width - rectangle.width * 0.15}`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        const isInRectangle = RectangleClient.isHit({
+            ...rectangle,
+            x: rectangle.x + rectangle.width * 0.15,
+            width: rectangle.width - rectangle.width * 0.3
+        }, rangeRectangle);
+        const isInLeftEllipse = isPointInEllipse(point, [rectangle.x + rectangle.width * 0.15, rectangle.y + rectangle.height / 2], rectangle.width * 0.15, rectangle.height / 2);
+        const isInRightEllipse = isPointInEllipse(point, [rectangle.x + rectangle.width - rectangle.width * 0.15, rectangle.y + rectangle.height / 2], rectangle.width * 0.15, rectangle.height / 2);
+        return isInRectangle || isInLeftEllipse || isInRightEllipse;
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        if (nearestPoint[0] < rectangle.x + rectangle.width * 0.15) {
+            const centerPoint = [rectangle.x + rectangle.width * 0.15, rectangle.y + rectangle.height / 2];
+            const nearestPoint = getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width * 0.15, rectangle.height / 2);
+            if (nearestPoint[0] > centerPoint[0]) {
+                nearestPoint[0] = centerPoint[0] * 2 - nearestPoint[0];
+            }
+            return nearestPoint;
+        }
+        if (nearestPoint[0] > rectangle.x + rectangle.width - rectangle.width * 0.15) {
+            const centerPoint = [rectangle.x + rectangle.width - rectangle.width * 0.15, rectangle.y + rectangle.height / 2];
+            const nearestPoint = getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width * 0.15, rectangle.height / 2);
+            if (nearestPoint[0] < centerPoint[0]) {
+                nearestPoint[0] = centerPoint[0] * 2 - nearestPoint[0];
+            }
+            return nearestPoint;
+        }
+        return nearestPoint;
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        let centerPoint = [rectangle.x + rectangle.width * 0.15, rectangle.y + rectangle.height / 2];
+        let a = rectangle.width * 0.15;
+        let b = rectangle.height / 2;
+        const isInRightEllipse = connectionPoint[0] > rectangle.x + rectangle.width - rectangle.width * 0.15 && connectionPoint[1] > rectangle.y;
+        if (isInRightEllipse) {
+            centerPoint = [rectangle.x + rectangle.width - rectangle.width * 0.15, rectangle.y + rectangle.height / 2];
+        }
+        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+        const slope = getEllipseTangentSlope(point[0], point[1], a, b);
+        const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
+        return vector;
+    },
+    getTextRectangle: (element) => {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const width = elementRectangle.width - elementRectangle.width * 0.45 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + elementRectangle.width * 0.15 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const InternalStorageEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} h${rectangle.width} v${rectangle.height} h${-rectangle.width} v${-rectangle.height}
+            M${rectangle.x} ${rectangle.y + rectangle.height / 10} h${rectangle.width}
+            M${rectangle.x + rectangle.width / 10} ${rectangle.y} v${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 - elementRectangle.width * 0.1 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + elementRectangle.width * 0.1 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + elementRectangle.height * 0.1 + (elementRectangle.height - elementRectangle.height * 0.1 - height) / 2
+        };
+    }
+};
+
+const NoteCurlyLeftEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x + rectangle.width} ${rectangle.y} 
+            C${rectangle.x + rectangle.width - rectangle.width * 0.09} ${rectangle.y}, 
+            ${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}, 
+            ${rectangle.x + rectangle.width - rectangle.width * 0.09} ${rectangle.y + rectangle.height / 2}
+            C${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}, 
+            ${rectangle.x + rectangle.width - rectangle.width * 0.09} ${rectangle.y + rectangle.height}, 
+            ${rectangle.x + rectangle.width} ${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 - elementRectangle.width * 0.09 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const NoteCurlyRightEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} 
+            C${rectangle.x + rectangle.width * 0.09} ${rectangle.y}, 
+            ${rectangle.x} ${rectangle.y + rectangle.height / 2}, 
+            ${rectangle.x + rectangle.width * 0.09} ${rectangle.y + rectangle.height / 2}
+            C${rectangle.x} ${rectangle.y + rectangle.height / 2}, 
+            ${rectangle.x + rectangle.width * 0.09} ${rectangle.y + rectangle.height}, 
+            ${rectangle.x} ${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 - elementRectangle.width * 0.09 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + elementRectangle.width * 0.09 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const NoteSquareEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x + rectangle.width * 0.075} ${rectangle.y + rectangle.height} H${rectangle.x} V${rectangle.y} H${rectangle.x +
+            rectangle.width * 0.075}
+           `, { ...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;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
 const ShapeEngineMap = {
     [BasicShapes.rectangle]: RectangleEngine,
     [BasicShapes.diamond]: DiamondEngine,
@@ -2516,6 +3095,9 @@ const ShapeEngineMap = {
     [FlowchartSymbols.connector]: EllipseEngine,
     [FlowchartSymbols.data]: ParallelogramEngine,
     [FlowchartSymbols.terminal]: TerminalEngine,
+    [FlowchartSymbols.database]: DatabaseEngine,
+    [FlowchartSymbols.hardDisk]: HardDiskEngine,
+    [FlowchartSymbols.internalStorage]: InternalStorageEngine,
     [FlowchartSymbols.manualInput]: ManualInputEngine,
     [FlowchartSymbols.preparation]: PreparationEngine,
     [FlowchartSymbols.manualLoop]: ManualLoopEngine,
@@ -2525,7 +3107,12 @@ const ShapeEngineMap = {
     [FlowchartSymbols.or]: OrEngine,
     [FlowchartSymbols.summingJunction]: SummingJunctionEngine,
     [FlowchartSymbols.predefinedProcess]: PredefinedProcessEngine,
-    [FlowchartSymbols.offPage]: OffPageEngine
+    [FlowchartSymbols.offPage]: OffPageEngine,
+    [FlowchartSymbols.document]: DocumentEngine,
+    [FlowchartSymbols.multiDocument]: MultiDocumentEngine,
+    [FlowchartSymbols.noteCurlyLeft]: NoteCurlyLeftEngine,
+    [FlowchartSymbols.noteCurlyRight]: NoteCurlyRightEngine,
+    [FlowchartSymbols.noteSquare]: NoteSquareEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
@@ -2621,6 +3208,9 @@ const getCenterPointsOnPolygon = (points) => {
 const getDefaultFlowchartProperty = (symbol) => {
     return DefaultFlowchartPropertyMap[symbol];
 };
+const getDefaultBasicShapeProperty = (shape) => {
+    return DefaultBasicShapePropertyMap[shape] || DefaultBasicShapeProperty;
+};
 const createDefaultFlowchart = (point) => {
     const decisionProperty = getDefaultFlowchartProperty(FlowchartSymbols.decision);
     const processProperty = getDefaultFlowchartProperty(FlowchartSymbols.process);
@@ -2635,7 +3225,7 @@ const createDefaultFlowchart = (point) => {
     const processPoint1 = [point[0], point[1] + terminalProperty.height / 2 + 55 + processProperty.height / 2];
     const processElement1 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint1), '过程', options);
     const decisionPoint = [processPoint1[0], processPoint1[1] + processProperty.height / 2 + 55 + decisionProperty.height / 2];
-    const decisionElement = createGeometryElement(FlowchartSymbols.decision, getDefaultGeometryPoints(FlowchartSymbols.decision, decisionPoint), '过程', options);
+    const decisionElement = createGeometryElement(FlowchartSymbols.decision, getDefaultGeometryPoints(FlowchartSymbols.decision, decisionPoint), '判断', options);
     const processPoint2 = [decisionPoint[0] + decisionProperty.width / 2 + 75 + processProperty.width / 2, decisionPoint[1]];
     const processElement2 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint2), '过程', options);
     const endPoint = [decisionPoint[0], decisionPoint[1] + decisionProperty.height / 2 + 95 + terminalProperty.height / 2];
@@ -2714,10 +3304,7 @@ const getDefaultGeometryProperty = (pointer) => {
         return getDefaultFlowchartProperty(pointer);
     }
     else {
-        if (pointer === BasicShapes.cloud) {
-            return DefaultCloudShapeProperty;
-        }
-        return DefaultBasicShapeProperty;
+        return getDefaultBasicShapeProperty(pointer);
     }
 };
 const getDefaultTextPoints = (board, centerPoint, fontSize) => {
@@ -2747,6 +3334,10 @@ const createDefaultGeometry = (board, points, shape) => {
         ...memorizedLatest.geometryProperties
     }, { ...memorizedLatest.textProperties, textHeight });
 };
+const editText = (element) => {
+    const textManage = getFirstTextManage(element);
+    textManage.edit();
+};
 
 const getStrokeWidthByElement = (element) => {
     if (PlaitDrawElement.isText(element)) {
@@ -3135,7 +3726,9 @@ const insertGeometry = (board, points, shape) => {
     return newElement;
 };
 const insertGeometryByVector = (board, point, shape, vector) => {
-    const shapeProperty = DefaultFlowchartPropertyMap[shape] || DefaultBasicShapeProperty;
+    const shapeProperty = DefaultFlowchartPropertyMap[shape] ||
+        DefaultBasicShapePropertyMap[shape] ||
+        DefaultBasicShapeProperty;
     const direction = getDirectionByVector(vector);
     if (direction) {
         let offset = 0;
@@ -3274,6 +3867,7 @@ const DrawTransforms = {
 };
 
 class LineAutoCompleteGenerator extends Generator {
+    static { this.key = 'line-auto-complete-generator'; }
     constructor(board) {
         super(board);
         this.board = board;
@@ -3315,14 +3909,13 @@ class LineAutoCompleteGenerator extends Generator {
 }
 
 class GeometryComponent extends CommonPluginElement {
+    constructor() {
+        super(...arguments);
+        this.destroy$ = new Subject();
+    }
     get textManage() {
         return this.getTextManages()[0];
     }
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
-        this.destroy$ = new Subject();
-    }
     initializeGenerator() {
         this.activeGenerator = new ActiveGenerator(this.board, {
             getStrokeWidth: () => {
@@ -3347,16 +3940,13 @@ class GeometryComponent extends CommonPluginElement {
                 return RectangleClient.getRectangleByPoints(element.points);
             },
             hasResizeHandle: () => {
-                const selectedElements = getSelectedElements(this.board);
-                if (PlaitBoard.hasBeenTextEditing(this.board) && PlaitDrawElement.isText(this.element)) {
-                    return false;
-                }
-                return selectedElements.length === 1 && !isSelectionMoving(this.board);
+                return canResize(this.board, this.element);
             }
         });
         this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
         this.shapeGenerator = new GeometryShapeGenerator(this.board);
         this.initializeTextManage();
+        this.getRef().addGenerator(LineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
     }
     ngOnInit() {
         super.ngOnInit();
@@ -3369,6 +3959,7 @@ class GeometryComponent extends CommonPluginElement {
         this.drawText();
     }
     onContextChanged(value, previous) {
+        this.initializeWeakMap();
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
         if (value.element !== previous.element || isChangeTheme) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
@@ -3389,10 +3980,6 @@ class GeometryComponent extends CommonPluginElement {
             }
         }
     }
-    editText() {
-        this.textManage.edit();
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
-    }
     drawText() {
         this.textManage.draw(this.element.text);
         this.getElementG().append(this.textManage.g);
@@ -3440,13 +4027,13 @@ class GeometryComponent extends CommonPluginElement {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this.textManage.destroy();
         this.destroy$.next();
         this.destroy$.complete();
         this.activeGenerator.destroy();
         this.lineAutoCompleteGenerator.destroy();
+        this.destroyTextManages();
     }
-    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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryComponent, deps: null, 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: [{
@@ -3457,7 +4044,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+        }] });
 
 class LineActiveGenerator extends Generator {
     constructor() {
@@ -3491,19 +4078,21 @@ class LineActiveGenerator extends Generator {
                 activeG.appendChild(updateHandle);
             });
             const middlePoints = getMiddlePoints(this.board, element);
-            for (let i = 0; i < middlePoints.length; i++) {
-                const point = middlePoints[i];
-                if (element.shape === LineShape.elbow && elbowNextRenderPoints.length) {
-                    const handleIndex = getHitPointIndex(middlePoints, point);
-                    const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
-                    if (isUpdateHandleIndex) {
-                        const updateHandle = drawPrimaryHandle(this.board, point);
-                        activeG.appendChild(updateHandle);
-                        continue;
+            if (!PlaitBoard.hasBeenTextEditing(this.board)) {
+                for (let i = 0; i < middlePoints.length; i++) {
+                    const point = middlePoints[i];
+                    if (element.shape === LineShape.elbow && elbowNextRenderPoints.length) {
+                        const handleIndex = getHitPointIndex(middlePoints, point);
+                        const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
+                        if (isUpdateHandleIndex) {
+                            const updateHandle = drawPrimaryHandle(this.board, point);
+                            activeG.appendChild(updateHandle);
+                            continue;
+                        }
                     }
+                    const circle = drawFillPrimaryHandle(this.board, point);
+                    activeG.appendChild(circle);
                 }
-                const circle = drawFillPrimaryHandle(this.board, point);
-                activeG.appendChild(circle);
             }
         }
         else {
@@ -3533,9 +4122,8 @@ class LineActiveGenerator extends Generator {
 const debugKey$2 = 'debug:plait:line-turning';
 const debugGenerator$2 = createDebugGenerator(debugKey$2);
 class LineComponent extends CommonPluginElement {
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
+    constructor() {
+        super(...arguments);
         this.destroy$ = new Subject();
         this.boundedElements = {};
     }
@@ -3574,6 +4162,7 @@ class LineComponent extends CommonPluginElement {
         return boundedElements;
     }
     onContextChanged(value, previous) {
+        this.initializeWeakMap();
         const boundedElements = this.getBoundedElements();
         const isBoundedElementsChanged = boundedElements.source !== this.boundedElements.source || boundedElements.target !== this.boundedElements.target;
         this.boundedElements = boundedElements;
@@ -3678,7 +4267,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.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LineComponent, deps: null, 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: [{
@@ -3689,7 +4278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+        }] });
 
 const withDrawHotkey = (board) => {
     const { keyDown, dblClick } = board;
@@ -3704,7 +4293,7 @@ const withDrawHotkey = (board) => {
             isSingleSelection &&
             PlaitDrawElement.isGeometry(targetElement)) {
             event.preventDefault();
-            PlaitElement.getComponent(targetElement).editText();
+            editText(targetElement);
             return;
         }
         keyDown(event);
@@ -3715,8 +4304,7 @@ const withDrawHotkey = (board) => {
             const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const hitElement = getHitElementByPoint(board, point);
             if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
-                const component = PlaitElement.getComponent(hitElement);
-                component.editText();
+                editText(hitElement);
             }
         }
         dblClick(event);
@@ -4150,8 +4738,20 @@ function drawIsometricSnapLines(board, activePoints, snapRectangles, resizeSnapO
     return drawSolidLines(board, isometricLines);
 }
 
+const isGeometryDndMode = (board) => {
+    const geometryPointers = getGeometryPointers();
+    const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+    const dndMode = isGeometryPointer && isDndMode(board);
+    return dndMode;
+};
+const isGeometryDrawingMode = (board) => {
+    const geometryPointers = getGeometryPointers();
+    const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+    const drawingMode = isGeometryPointer && isDrawingMode(board);
+    return drawingMode;
+};
 const withGeometryCreateByDrag = (board) => {
-    const { pointerMove, globalPointerUp } = board;
+    const { pointerMove, globalPointerUp, pointerUp } = board;
     let geometryShapeG = null;
     let temporaryElement = null;
     let fakeCreateTextRef = null;
@@ -4202,11 +4802,14 @@ const withGeometryCreateByDrag = (board) => {
         }
         pointerMove(event);
     };
+    board.pointerUp = (event) => {
+        if (isGeometryDndMode(board) && temporaryElement) {
+            return;
+        }
+        pointerUp(event);
+    };
     board.globalPointerUp = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        if (dragMode && temporaryElement) {
+        if (isGeometryDndMode(board) && temporaryElement) {
             insertElement(board, temporaryElement);
             fakeCreateTextRef?.textManage.destroy();
             fakeCreateTextRef?.g.remove();
@@ -4235,9 +4838,7 @@ const withGeometryCreateByDrawing = (board) => {
         keyUp(event);
     };
     board.pointerDown = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        if (!PlaitBoard.isReadonly(board) && isGeometryPointer && isDrawingMode(board)) {
+        if (!PlaitBoard.isReadonly(board) && isGeometryDrawingMode(board)) {
             const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             start = point;
             const pointer = PlaitBoard.getPointer(board);
@@ -4260,7 +4861,7 @@ const withGeometryCreateByDrawing = (board) => {
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
         snapG?.remove();
-        if (start && pointer !== BasicShapes.text) {
+        if (start && isGeometryDrawingMode(board)) {
             let points = normalizeShapePoints([start, movingPoint], isShift);
             const activeRectangle = RectangleClient.getRectangleByPoints(points);
             const [x, y] = getUnitVectorByPointAndPoint(start, movingPoint);
@@ -4282,27 +4883,27 @@ const withGeometryCreateByDrawing = (board) => {
         pointerMove(event);
     };
     board.pointerUp = (event) => {
-        const isDrawMode = !!start;
-        if (isDrawMode) {
+        if (isGeometryDrawingMode(board) && start) {
             const targetPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const { width, height } = RectangleClient.getRectangleByPoints([start, targetPoint]);
-            if (Math.hypot(width, height) === 0) {
+            if (Math.hypot(width, height) < 8) {
                 const pointer = PlaitBoard.getPointer(board);
                 if (pointer !== BasicShapes.text) {
                     const points = getDefaultGeometryPoints(pointer, targetPoint);
                     temporaryElement = createDefaultGeometry(board, points, pointer);
                 }
             }
+            if (temporaryElement) {
+                insertElement(board, temporaryElement);
+            }
+            snapG?.remove();
+            geometryShapeG?.remove();
+            geometryShapeG = null;
+            start = null;
+            temporaryElement = null;
+            preventTouchMove(board, event, false);
+            return;
         }
-        if (temporaryElement) {
-            insertElement(board, temporaryElement);
-        }
-        snapG?.remove();
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        start = null;
-        temporaryElement = null;
-        preventTouchMove(board, event, false);
         pointerUp(event);
     };
     return board;
@@ -4389,11 +4990,11 @@ const withDrawFragment = (baseBoard) => {
         }
         return getDeletedFragment(data);
     };
-    board.buildFragment = (clipboardContext, rectangle, type) => {
-        const targetDrawElements = getSelectedDrawElements(board);
+    board.buildFragment = (clipboardContext, rectangle, operationType, originData) => {
+        const targetDrawElements = getSelectedDrawElements(board, originData);
         let boundLineElements = [];
         if (targetDrawElements.length) {
-            if (type === 'cut') {
+            if (operationType === WritableClipboardOperationType.cut) {
                 const geometryElements = targetDrawElements.filter(value => PlaitDrawElement.isGeometry(value));
                 const lineElements = targetDrawElements.filter(value => PlaitDrawElement.isLine(value));
                 boundLineElements = getBoundedLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
@@ -4412,9 +5013,9 @@ const withDrawFragment = (baseBoard) => {
                 });
             }
         }
-        return buildFragment(clipboardContext, rectangle, type);
+        return buildFragment(clipboardContext, rectangle, operationType, originData);
     };
-    board.insertFragment = (clipboardData, targetPoint) => {
+    board.insertFragment = (clipboardData, targetPoint, operationType) => {
         const selectedElements = getSelectedElements(board);
         if (clipboardData?.files?.length) {
             const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
@@ -4444,7 +5045,7 @@ const withDrawFragment = (baseBoard) => {
                 }
             }
         }
-        insertFragment(clipboardData, targetPoint);
+        insertFragment(clipboardData, targetPoint, operationType);
     };
     return board;
 };
@@ -4514,8 +5115,7 @@ const withGeometryResize = (board) => {
                 return null;
             }
             const target = selectedElements[0];
-            const targetComponent = PlaitElement.getComponent(selectedElements[0]);
-            if (targetComponent.activeGenerator.hasResizeHandle) {
+            if (canResize(board, target)) {
                 const rectangle = board.getRectangle(target);
                 const handleRef = getHitRectangleResizeHandleRef(board, rectangle, point, target.angle);
                 if (handleRef) {
@@ -4766,6 +5366,7 @@ const withLineText = (board) => {
             const hitTarget = getHitElementByPoint(board, clickPoint, (element) => {
                 return PlaitDrawElement.isLine(element);
             });
+            const hitTargetPath = hitTarget && PlaitBoard.findPath(board, hitTarget);
             if (hitTarget) {
                 const points = getLinePoints(board, hitTarget);
                 const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
@@ -4785,8 +5386,11 @@ const withLineText = (board) => {
                     });
                     DrawTransforms.setLineTexts(board, hitTarget, texts);
                     setTimeout(() => {
-                        const hitComponent = PlaitElement.getComponent(hitTarget);
-                        editHandle(board, hitTarget, hitComponent.getTextManages().length - 1, true);
+                        if (hitTargetPath) {
+                            const newHitTarget = PlaitNode.get(board, hitTargetPath);
+                            const textManages = getTextManages(newHitTarget);
+                            editHandle(board, newHitTarget, textManages.length - 1, true);
+                        }
                     });
                 }
             }
@@ -4796,8 +5400,8 @@ const withLineText = (board) => {
     return board;
 };
 function editHandle(board, element, manageIndex, isFirstEdit = false) {
-    const hitComponent = PlaitElement.getComponent(element);
-    const textManage = hitComponent.getTextManages()[manageIndex];
+    const textManages = getTextManages(element);
+    const textManage = textManages[manageIndex];
     const originText = textManage.componentRef.instance.children;
     textManage.edit((origin, descendant) => {
         const text = Node.string(descendant[0]);
@@ -4809,14 +5413,13 @@ function editHandle(board, element, manageIndex, isFirstEdit = false) {
 }
 
 class ImageComponent extends CommonPluginElement {
+    constructor() {
+        super(...arguments);
+        this.destroy$ = new Subject();
+    }
     get activeGenerator() {
         return this.imageGenerator.componentRef.instance.activeGenerator;
     }
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
-        this.destroy$ = new Subject();
-    }
     initializeGenerator() {
         this.imageGenerator = new ImageGenerator(this.board, {
             getRectangle: (element) => {
@@ -4836,6 +5439,7 @@ class ImageComponent extends CommonPluginElement {
             }
         });
         this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
+        this.getRef().addGenerator(LineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
     }
     ngOnInit() {
         super.ngOnInit();
@@ -4871,7 +5475,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.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageComponent, deps: null, 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: [{
@@ -4882,7 +5486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+        }] });
 
 const withLineAutoCompleteReaction = (board) => {
     const { pointerMove } = board;
@@ -4897,10 +5501,11 @@ const withLineAutoCompleteReaction = (board) => {
             const points = getAutoCompletePoints(targetElement);
             const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
             const hitPoint = points[hitIndex];
-            const component = PlaitElement.getComponent(targetElement);
-            component.lineAutoCompleteGenerator.recoverAutoCompleteG();
+            const ref = PlaitElement.getElementRef(targetElement);
+            const lineAutoCompleteGenerator = ref.getGenerator(LineAutoCompleteGenerator.key);
+            lineAutoCompleteGenerator.recoverAutoCompleteG();
             if (hitPoint) {
-                component.lineAutoCompleteGenerator.removeAutoCompleteG(hitIndex);
+                lineAutoCompleteGenerator.removeAutoCompleteG(hitIndex);
                 reactionG = drawCircle(PlaitBoard.getRoughSVG(board), hitPoint, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, {
                     stroke: 'none',
                     fill: RgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_HOVERED_OPACITY),
@@ -5001,8 +5606,8 @@ const withLineTextMove = (board) => {
             });
             if (line) {
                 const index = getHitLineTextIndex(board, line, point);
-                const hitComponent = PlaitElement.getComponent(line);
-                const textManage = hitComponent.getTextManages()[index];
+                const textManages = getTextManages(line);
+                const textManage = textManages[index];
                 if (index !== -1 && !textManage.isEditing) {
                     textIndex = index;
                     return { element: line, handle: ResizeHandle.e };
@@ -5075,12 +5680,13 @@ const withDrawRotate = (board) => {
             throttleRAF(board, 'with-common-rotate', () => {
                 if (rotateRef && rotateRef.startPoint) {
                     let angle = getAngleBetweenPoints(rotateRef.startPoint, endPoint, selectionCenterPoint);
+                    const selectionAngle = getSelectionAngle(rotateRef.elements);
+                    angle = normalizeAngle(selectionAngle + angle);
                     if (isShift) {
                         angle += Math.PI / 12 / 2;
                         angle -= angle % (Math.PI / 12);
                     }
-                    const selectionAngle = getSelectionAngle(rotateRef.elements);
-                    let remainder = (selectionAngle + angle) % (Math.PI / 2);
+                    let remainder = angle % (Math.PI / 2);
                     if (Math.PI / 2 - remainder <= degreesToRadians(5)) {
                         const snapAngle = Math.PI / 2 - remainder;
                         angle += snapAngle;
@@ -5089,10 +5695,8 @@ const withDrawRotate = (board) => {
                         const snapAngle = -remainder;
                         angle += snapAngle;
                     }
-                    rotateRef.angle = normalizeAngle(angle);
-                    if (rotateRef.angle) {
-                        rotateElements(board, rotateRef.elements, rotateRef.angle);
-                    }
+                    rotateRef.angle = normalizeAngle(angle - selectionAngle) || 0;
+                    rotateElements(board, rotateRef.elements, rotateRef.angle);
                     PlaitBoard.getBoardContainer(board).classList.add('element-rotating');
                 }
             });
@@ -5241,7 +5845,7 @@ const withDraw = (board) => {
         return isAlign(element);
     };
     board.getRelatedFragment = (elements, originData) => {
-        const selectedElements = originData || getSelectedElements(board);
+        const selectedElements = originData?.length ? 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);
@@ -5251,12 +5855,12 @@ const withDraw = (board) => {
         });
         return getRelatedFragment([...elements, ...activeLines], originData);
     };
-    return withDrawResize(withLineTextMove(withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withDrawRotate(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board))))))))))))));
+    return withDrawResize(withLineResize(withLineTextMove(withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withGeometryResize(withDrawRotate(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board))))))))))))));
 };
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultCloudProperty, DefaultConnectorProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDocumentProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultPentagonArrowProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, 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, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, 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