@plait/draw 0.28.0 → 0.30.0

package/fesm2022/plait-draw.mjs

@@ -1,36 +1,50 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, drawLinearPath, rotate, getElementById, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, BOARD_TO_HOST, transformPoint, toPoint, isSelectionMoving, PlaitPluginElementComponent, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElements, isPolylineHitRectangle } from '@plait/core';
-import { getRectangleByPoints, getFactorByPoints, getDirectionByVector, getOppositeDirection, getDirectionFactor, getPoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, acceptImageTypes, buildImage, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
-import { Alignment, buildText, AlignEditor, TextManage, DEFAULT_FONT_SIZE, getTextFromClipboard, getTextSize } from '@plait/text';
+import { PlaitElement, ACTIVE_STROKE_WIDTH, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, BOARD_TO_HOST, transformPoint, toPoint, idCreator, createG, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, drawLinearPath, rotate, getElementById, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElementByPoint } from '@plait/core';
+import { getRectangleByPoints, Generator, normalizeShapePoints, isDndMode, isDrawingMode, getFactorByPoints, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+import { AlignEditor, Alignment, DEFAULT_FONT_SIZE, buildText, TextManage, getTextFromClipboard, getTextSize } from '@plait/text';
+import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { isKeyHotkey } from 'is-hotkey';
 import { Node } from 'slate';
 
-var GeometryShape;
-(function (GeometryShape) {
-    GeometryShape["rectangle"] = "rectangle";
-    GeometryShape["ellipse"] = "ellipse";
-    GeometryShape["diamond"] = "diamond";
-    GeometryShape["roundRectangle"] = "roundRectangle";
-    GeometryShape["parallelogram"] = "parallelogram";
-    GeometryShape["text"] = "text";
-    GeometryShape["triangle"] = "triangle";
-    GeometryShape["leftArrow"] = "leftArrow";
-    GeometryShape["trapezoid"] = "trapezoid";
-    GeometryShape["rightArrow"] = "rightArrow";
-    GeometryShape["cross"] = "cross";
-    GeometryShape["star"] = "star";
-    GeometryShape["pentagon"] = "pentagon";
-    GeometryShape["hexagon"] = "hexagon";
-    GeometryShape["octagon"] = "octagon";
-    GeometryShape["pentagonArrow"] = "pentagonArrow";
-    GeometryShape["processArrow"] = "processArrow";
-    GeometryShape["twoWayArrow"] = "twoWayArrow";
-    GeometryShape["comment"] = "comment";
-    GeometryShape["roundComment"] = "roundComment";
-})(GeometryShape || (GeometryShape = {}));
+var BasicShapes;
+(function (BasicShapes) {
+    BasicShapes["rectangle"] = "rectangle";
+    BasicShapes["ellipse"] = "ellipse";
+    BasicShapes["diamond"] = "diamond";
+    BasicShapes["roundRectangle"] = "roundRectangle";
+    BasicShapes["parallelogram"] = "parallelogram";
+    BasicShapes["text"] = "text";
+    BasicShapes["triangle"] = "triangle";
+    BasicShapes["leftArrow"] = "leftArrow";
+    BasicShapes["trapezoid"] = "trapezoid";
+    BasicShapes["rightArrow"] = "rightArrow";
+    BasicShapes["cross"] = "cross";
+    BasicShapes["star"] = "star";
+    BasicShapes["pentagon"] = "pentagon";
+    BasicShapes["hexagon"] = "hexagon";
+    BasicShapes["octagon"] = "octagon";
+    BasicShapes["pentagonArrow"] = "pentagonArrow";
+    BasicShapes["processArrow"] = "processArrow";
+    BasicShapes["twoWayArrow"] = "twoWayArrow";
+    BasicShapes["comment"] = "comment";
+    BasicShapes["roundComment"] = "roundComment";
+})(BasicShapes || (BasicShapes = {}));
+var FlowchartSymbols;
+(function (FlowchartSymbols) {
+    FlowchartSymbols["process"] = "process";
+    FlowchartSymbols["decision"] = "decision";
+    FlowchartSymbols["data"] = "data";
+    FlowchartSymbols["connector"] = "connector";
+    FlowchartSymbols["terminal"] = "terminal";
+    FlowchartSymbols["manualInput"] = "manualInput";
+    FlowchartSymbols["preparation"] = "preparation";
+    FlowchartSymbols["manualLoop"] = "manualLoop";
+    FlowchartSymbols["merge"] = "merge";
+    FlowchartSymbols["delay"] = "delay";
+    FlowchartSymbols["storedData"] = "storedData";
+})(FlowchartSymbols || (FlowchartSymbols = {}));
 const PlaitGeometry = {
     getTextEditor(element) {
         return PlaitGeometry.getTextManage(element).componentRef.instance.editor;
@@ -57,7 +71,7 @@ const DefaultGeometryActiveStyle = {
     strokeWidth: ACTIVE_STROKE_WIDTH,
     selectionStrokeWidth: ACTIVE_STROKE_WIDTH
 };
-const DefaultGeometryProperty = {
+const DefaultBasicShapeProperty = {
     width: 100,
     height: 100,
     strokeColor: '#333',
@@ -71,9 +85,52 @@ const DefaultTextProperty = {
 const GeometryThreshold = {
     defaultTextMaxWidth: 34 * 14
 };
+const DefaultConnectorProperty = {
+    width: 44,
+    height: 44
+};
+const DefaultFlowchartProperty = {
+    width: 120,
+    height: 60
+};
+const DefaultDecisionProperty = {
+    width: 140,
+    height: 70
+};
+const DefaultDataProperty = {
+    width: 124,
+    height: 60
+};
+const DefaultManualInputProperty = {
+    width: 117,
+    height: 59
+};
+const DefaultMergeProperty = {
+    width: 47,
+    height: 33
+};
+const DefaultFlowchartPropertyMap = {
+    [FlowchartSymbols.connector]: DefaultConnectorProperty,
+    [FlowchartSymbols.process]: DefaultFlowchartProperty,
+    [FlowchartSymbols.decision]: DefaultDecisionProperty,
+    [FlowchartSymbols.data]: DefaultDataProperty,
+    [FlowchartSymbols.terminal]: DefaultFlowchartProperty,
+    [FlowchartSymbols.manualInput]: DefaultManualInputProperty,
+    [FlowchartSymbols.preparation]: DefaultFlowchartProperty,
+    [FlowchartSymbols.manualLoop]: DefaultFlowchartProperty,
+    [FlowchartSymbols.merge]: DefaultMergeProperty,
+    [FlowchartSymbols.delay]: DefaultFlowchartProperty,
+    [FlowchartSymbols.storedData]: DefaultFlowchartProperty
+};
 
 const getGeometryPointers = () => {
-    return Object.keys(GeometryShape);
+    return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols)];
+};
+const getBasicPointers = () => {
+    return Object.keys(BasicShapes);
+};
+const getFlowchartPointers = () => {
+    return Object.keys(FlowchartSymbols);
 };
 const getLinePointers = () => {
     return Object.keys(LineShape);
@@ -155,33 +212,44 @@ const getCommentPoints = (rectangle) => {
     ];
 };
 
-const CrossEngine = {
-    draw(board, rectangle, options) {
-        const points = getCrossPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getCrossPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
-    },
-    getCornerPoints(rectangle) {
-        return getCrossPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getCrossPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getCrossPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
-    getConnectorPoints(rectangle) {
-        return RectangleClient.getEdgeCenterPoints(rectangle);
+function createPolygonEngine(options) {
+    const getPoints = options.getPolygonPoints;
+    const engine = {
+        draw(board, rectangle, options) {
+            const points = getPoints(rectangle);
+            const rs = PlaitBoard.getRoughSVG(board);
+            const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+            setStrokeLinecap(polygon, 'round');
+            return polygon;
+        },
+        isHit(rectangle, point) {
+            const points = getPoints(rectangle);
+            return isPointInPolygon(point, points);
+        },
+        getCornerPoints(rectangle) {
+            return getPoints(rectangle);
+        },
+        getNearestPoint(rectangle, point) {
+            return getNearestPointBetweenPointAndSegments(point, getPoints(rectangle));
+        },
+        getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+            const corners = getPoints(rectangle);
+            const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+            return getEdgeOnPolygonByPoint(corners, point);
+        },
+        getConnectorPoints(rectangle) {
+            if (options.getConnectorPoints) {
+                return options.getConnectorPoints(rectangle);
+            }
+            return getPoints(rectangle);
+        }
+    };
+    if (options.getTextRectangle) {
+        engine.getTextRectangle = options.getTextRectangle;
     }
-};
+    return engine;
+}
+
 const getCrossPoints = (rectangle) => {
     return [
         [rectangle.x + rectangle.width / 4, rectangle.y],
@@ -198,34 +266,32 @@ const getCrossPoints = (rectangle) => {
         [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height / 4]
     ];
 };
-
-const DiamondEngine = {
-    draw(board, rectangle, options) {
-        const points = RectangleClient.getEdgeCenterPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const controlPoints = RectangleClient.getEdgeCenterPoints(rectangle);
-        return isPointInPolygon(point, controlPoints);
-    },
-    getCornerPoints(rectangle) {
+const CrossEngine = createPolygonEngine({
+    getPolygonPoints: getCrossPoints,
+    getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, DiamondEngine.getCornerPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = DiamondEngine.getCornerPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = rectangle.width / 2;
+        rectangle.x += width / 4;
+        return rectangle;
+    }
+});
+
+const DiamondEngine = createPolygonEngine({
+    getPolygonPoints: RectangleClient.getEdgeCenterPoints,
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        rectangle.width = rectangle.width / 2;
+        rectangle.x += rectangle.width / 2;
+        return rectangle;
     }
-};
+});
 
 const EllipseEngine = {
     draw(board, rectangle, options) {
@@ -255,6 +321,13 @@ const EllipseEngine = {
     },
     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 getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation = 0) {
@@ -318,33 +391,6 @@ function getVectorBySlope(x, y, slope) {
     return vector;
 }
 
-const HexagonEngine = {
-    draw(board, rectangle, options) {
-        const points = getHexagonPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getHexagonPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
-    },
-    getCornerPoints(rectangle) {
-        return getHexagonPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getHexagonPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getHexagonPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
-    getConnectorPoints(rectangle) {
-        return RectangleClient.getEdgeCenterPoints(rectangle);
-    }
-};
 const getHexagonPoints = (rectangle) => {
     return [
         [rectangle.x + rectangle.width / 4, rectangle.y],
@@ -355,38 +401,20 @@ const getHexagonPoints = (rectangle) => {
         [rectangle.x, rectangle.y + rectangle.height / 2]
     ];
 };
-
-const LeftArrowEngine = {
-    draw(board, rectangle, options) {
-        const points = getLeftArrowPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    getCornerPoints(rectangle) {
-        return getLeftArrowPoints(rectangle);
-    },
-    isHit(rectangle, point) {
-        const points = getLeftArrowPoints(rectangle);
-        return isPointInPolygon(point, points);
-    },
-    getNearestPoint(rectangle, point) {
-        const cornerPoints = getLeftArrowPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getLeftArrowPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
+const HexagonEngine = createPolygonEngine({
+    getPolygonPoints: getHexagonPoints,
     getConnectorPoints(rectangle) {
-        return [
-            [rectangle.x, rectangle.y + rectangle.height / 2],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
-        ];
+        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;
     }
-};
+});
+
 const getLeftArrowPoints = (rectangle) => {
     return [
         [rectangle.x, rectangle.y + rectangle.height / 2],
@@ -398,34 +426,23 @@ const getLeftArrowPoints = (rectangle) => {
         [rectangle.x + rectangle.width * 0.32, rectangle.y + rectangle.height]
     ];
 };
-
-const OctagonEngine = {
-    draw(board, rectangle, options) {
-        const points = getOctagonPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getOctagonPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
-    },
-    getCornerPoints(rectangle) {
-        return getOctagonPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getOctagonPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getOctagonPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+const LeftArrowEngine = createPolygonEngine({
+    getPolygonPoints: getLeftArrowPoints,
+    getConnectorPoints: (rectangle) => {
+        return [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ];
     },
-    getConnectorPoints(rectangle) {
-        return RectangleClient.getEdgeCenterPoints(rectangle);
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = rectangle.width * (1 - 0.32);
+        rectangle.x += width * 0.32;
+        return rectangle;
     }
-};
+});
+
 const getOctagonPoints = (rectangle) => {
     return [
         [rectangle.x + (rectangle.width * 3) / 10, rectangle.y],
@@ -438,36 +455,21 @@ const getOctagonPoints = (rectangle) => {
         [rectangle.x, rectangle.y + (rectangle.height * 3) / 10]
     ];
 };
-
-const ParallelogramEngine = {
-    draw(board, rectangle, options) {
-        const points = getParallelogramCornerPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getParallelogramCornerPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
-    },
-    getCornerPoints(rectangle) {
-        return getParallelogramCornerPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, ParallelogramEngine.getCornerPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getParallelogramCornerPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
+const OctagonEngine = createPolygonEngine({
+    getPolygonPoints: getOctagonPoints,
     getConnectorPoints(rectangle) {
-        const cornerPoints = getParallelogramCornerPoints(rectangle);
-        return getCenterPointsOnPolygon(cornerPoints);
+        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;
     }
-};
-const getParallelogramCornerPoints = (rectangle) => {
+});
+
+const getParallelogramPoints = (rectangle) => {
     return [
         [rectangle.x + rectangle.width / 4, rectangle.y],
         [rectangle.x + rectangle.width, rectangle.y],
@@ -475,34 +477,21 @@ const getParallelogramCornerPoints = (rectangle) => {
         [rectangle.x, rectangle.y + rectangle.height]
     ];
 };
-
-const PentagonEngine = {
-    draw(board, rectangle, options) {
-        const points = getPentagonPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getPentagonPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
-    },
-    getCornerPoints(rectangle) {
-        return getPentagonPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getPentagonPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getPentagonPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+const ParallelogramEngine = createPolygonEngine({
+    getPolygonPoints: getParallelogramPoints,
+    getConnectorPoints: (rectangle) => {
+        const cornerPoints = getParallelogramPoints(rectangle);
+        return getCenterPointsOnPolygon(cornerPoints);
     },
-    getConnectorPoints(rectangle) {
-        return getPentagonPoints(rectangle);
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = rectangle.width / 2;
+        rectangle.x += width / 4;
+        return rectangle;
     }
-};
+});
+
 const getPentagonPoints = (rectangle) => {
     return [
         [rectangle.x + rectangle.width / 2, rectangle.y],
@@ -512,34 +501,23 @@ const getPentagonPoints = (rectangle) => {
         [rectangle.x, rectangle.y + (rectangle.height * 2) / 5]
     ];
 };
-
-const PentagonArrowEngine = {
-    draw(board, rectangle, options) {
-        const points = getPentagonArrowPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getPentagonArrowPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
-    },
-    getCornerPoints(rectangle) {
-        return getPentagonArrowPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getPentagonArrowPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getPentagonArrowPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
-    getConnectorPoints(rectangle) {
-        return RectangleClient.getEdgeCenterPoints(rectangle);
+const PentagonEngine = createPolygonEngine({
+    getPolygonPoints: getPentagonPoints,
+    getTextRectangle(element) {
+        const elementRectangle = getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        const width = (originWidth * 3) / 5;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 5,
+            y: elementRectangle.y + elementRectangle.height / 5 + ((elementRectangle.height * 4) / 5 - height) / 2
+        };
     }
-};
+});
+
 const getPentagonArrowPoints = (rectangle) => {
     return [
         [rectangle.x, rectangle.y],
@@ -549,34 +527,18 @@ const getPentagonArrowPoints = (rectangle) => {
         [rectangle.x, rectangle.y + rectangle.height]
     ];
 };
-
-const ProcessArrowEngine = {
-    draw(board, rectangle, options) {
-        const points = getProcessArrowPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getProcessArrowPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
-    },
-    getCornerPoints(rectangle) {
-        return getProcessArrowPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getProcessArrowPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getProcessArrowPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
+const PentagonArrowEngine = createPolygonEngine({
+    getPolygonPoints: getPentagonArrowPoints,
     getConnectorPoints(rectangle) {
-        return getProcessArrowPoints(rectangle);
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        rectangle.width = (rectangle.width * 3) / 5;
+        return rectangle;
     }
-};
+});
+
 const getProcessArrowPoints = (rectangle) => {
     const wider = rectangle.width > rectangle.height / 2;
     return [
@@ -588,6 +550,17 @@ const getProcessArrowPoints = (rectangle) => {
         [rectangle.x + (wider ? rectangle.height / 2 : rectangle.width), rectangle.y + rectangle.height / 2]
     ];
 };
+const ProcessArrowEngine = createPolygonEngine({
+    getPolygonPoints: getProcessArrowPoints,
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const elementRectangle = getRectangleByPoints(element.points);
+        const width = rectangle.width;
+        rectangle.width = elementRectangle.height / 2;
+        rectangle.x += elementRectangle.height / 2;
+        return rectangle;
+    }
+});
 
 const RectangleEngine = {
     draw(board, rectangle, options) {
@@ -613,48 +586,31 @@ const RectangleEngine = {
     }
 };
 
-const RightArrowEngine = {
-    draw(board, rectangle, options) {
-        const points = getRightArrowPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
+const getRightArrowPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height * 0.8],
+        [rectangle.x, rectangle.y + rectangle.height * 0.8]
+    ];
+};
+const RightArrowEngine = createPolygonEngine({
+    getPolygonPoints: getRightArrowPoints,
+    getConnectorPoints: (rectangle) => {
+        return [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ];
     },
-    getCornerPoints(rectangle) {
-        return getRightArrowPoints(rectangle);
-    },
-    isHit(rectangle, point) {
-        const points = getRightArrowPoints(rectangle);
-        return isPointInPolygon(point, points);
-    },
-    getNearestPoint(rectangle, point) {
-        const cornerPoints = getRightArrowPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getRightArrowPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
-    getConnectorPoints(rectangle) {
-        return [
-            [rectangle.x, rectangle.y + rectangle.height / 2],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
-        ];
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        rectangle.width = rectangle.width * 0.68;
+        return rectangle;
     }
-};
-const getRightArrowPoints = (rectangle) => {
-    return [
-        [rectangle.x, rectangle.y + rectangle.height * 0.2],
-        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height * 0.2],
-        [rectangle.x + rectangle.width * 0.68, rectangle.y],
-        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
-        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height],
-        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height * 0.8],
-        [rectangle.x, rectangle.y + rectangle.height * 0.8]
-    ];
-};
+});
 
 const RoundRectangleEngine = {
     draw(board, rectangle, options) {
@@ -667,7 +623,7 @@ const RoundRectangleEngine = {
         return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
+        return getNearestPointBetweenPointAndRoundRectangle$1(point, rectangle, getRoundRectangleRadius(rectangle));
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
@@ -681,7 +637,7 @@ const RoundRectangleEngine = {
 const getRoundRectangleRadius = (rectangle) => {
     return Math.min(rectangle.width * 0.1, rectangle.height * 0.1);
 };
-function getNearestPointBetweenPointAndRoundRectangle(point, rectangle, radius) {
+function getNearestPointBetweenPointAndRoundRectangle$1(point, rectangle, radius) {
     const { x: rectX, y: rectY, width, height } = rectangle;
     const cornerPoints = RectangleClient.getCornerPoints(rectangle);
     let result = getNearestPointBetweenPointAndSegments(point, cornerPoints);
@@ -731,7 +687,7 @@ const RoundCommentEngine = {
         const point9 = [x1 + rectangle.width / 4, y2];
         const point10 = [x1 + rectangle.width / 4, rectangle.y + rectangle.height];
         const point11 = [x1 + rectangle.width / 2, y2];
-        return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, options);
+        return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, { ...options, fillStyle: 'solid' });
     },
     isHit(rectangle, point) {
         const points = [
@@ -786,34 +742,82 @@ const getRoundCommentPoints = (rectangle) => {
     ];
 };
 
-const StarEngine = {
-    draw(board, rectangle, options) {
-        const points = getStarPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getStarPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
-    },
-    getCornerPoints(rectangle) {
-        return getStarPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getStarPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getStarPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+const getTrapezoidPoints = (rectangle) => {
+    return [
+        [rectangle.x + rectangle.width * 0.15, rectangle.y],
+        [rectangle.x + rectangle.width * 0.85, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height]
+    ];
+};
+const TrapezoidEngine = createPolygonEngine({
+    getPolygonPoints: getTrapezoidPoints,
+    getConnectorPoints(rectangle) {
+        const points = getTrapezoidPoints(rectangle);
+        return getCenterPointsOnPolygon(points);
     },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = (rectangle.width * 3) / 4;
+        rectangle.x += width / 8;
+        return rectangle;
+    }
+});
+
+const getTrianglePoints = (rectangle) => {
+    return [
+        [rectangle.x + rectangle.width / 2, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height]
+    ];
+};
+const TriangleEngine = createPolygonEngine({
+    getPolygonPoints: getTrianglePoints,
     getConnectorPoints(rectangle) {
-        const points = getStarPoints(rectangle);
-        return [points[1], points[3], points[5], points[7], points[9]];
+        const cornerPoints = getTrianglePoints(rectangle);
+        const lineCenterPoints = getCenterPointsOnPolygon(cornerPoints);
+        return [...lineCenterPoints, ...cornerPoints];
+    },
+    getTextRectangle(element) {
+        const elementRectangle = getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        const width = (originWidth * 2) / 3;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
+            y: elementRectangle.y + (elementRectangle.height * 3) / 5 + ((elementRectangle.height * 2) / 5 - height) / 2
+        };
     }
+});
+
+const getTwoWayArrowPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y + rectangle.height / 2],
+        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y],
+        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + rectangle.height / 5],
+        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + rectangle.height / 5],
+        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + rectangle.height],
+        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + (rectangle.height * 4) / 5],
+        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + (rectangle.height * 4) / 5],
+        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + rectangle.height]
+    ];
 };
+const TwoWayArrowEngine = createPolygonEngine({
+    getPolygonPoints: getTwoWayArrowPoints,
+    getConnectorPoints: (rectangle) => {
+        return [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ];
+    }
+});
+
 const getStarPoints = (rectangle) => {
     return [
         [rectangle.x + rectangle.width / 2, rectangle.y + (rectangle.height * 75) / 91],
@@ -828,169 +832,679 @@ const getStarPoints = (rectangle) => {
         [rectangle.x + (rectangle.width * 77.3892626) / 96, rectangle.y + rectangle.height]
     ];
 };
+const StarEngine = createPolygonEngine({
+    getPolygonPoints: getStarPoints,
+    getConnectorPoints: (rectangle) => {
+        const points = getStarPoints(rectangle);
+        return [points[1], points[3], points[5], points[7], points[9]];
+    },
+    getTextRectangle(element) {
+        const elementRectangle = getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        const width = originWidth / 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 4,
+            y: elementRectangle.y + (elementRectangle.height * 1) / 5 + ((elementRectangle.height * 4) / 5 - height) / 2
+        };
+    }
+});
 
-const TrapezoidEngine = {
+const TerminalEngine = {
     draw(board, rectangle, options) {
-        const points = getTrapezoidPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
+        return drawRoundRectangle(PlaitBoard.getRoughSVG(board), rectangle.x, rectangle.y, rectangle.x + rectangle.width, rectangle.y + rectangle.height, { ...options, fillStyle: 'solid' }, false, getStartEndRadius(rectangle));
     },
     isHit(rectangle, point) {
-        const points = getTrapezoidPoints(rectangle);
-        return isPointInPolygon(point, points);
+        return isPointInRoundRectangle(point, rectangle, getStartEndRadius(rectangle));
     },
-    getNearestPoint(rectangle, point) {
-        const cornerPoints = getTrapezoidPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
     },
-    getConnectorPoints(rectangle) {
-        const points = getTrapezoidPoints(rectangle);
-        return getCenterPointsOnPolygon(points);
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndRoundRectangle(point, rectangle, getStartEndRadius(rectangle));
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getTrapezoidPoints(rectangle);
+        const corners = RectangleEngine.getCornerPoints(rectangle);
         const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
         return getEdgeOnPolygonByPoint(corners, point);
     },
-    getCornerPoints(rectangle) {
-        return getTrapezoidPoints(rectangle);
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
     }
 };
-const getTrapezoidPoints = (rectangle) => {
+const getStartEndRadius = (rectangle) => {
+    return Math.min(rectangle.width / 2, rectangle.height / 2);
+};
+function getNearestPointBetweenPointAndRoundRectangle(point, rectangle, radius) {
+    const { x: rectX, y: rectY, width, height } = rectangle;
+    const cornerPoints = RectangleClient.getCornerPoints(rectangle);
+    let result = getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    let circleCenter = null;
+    const inLeftTop = point[0] >= rectX && point[0] <= rectX + radius && point[1] >= rectY && point[1] <= rectY + radius;
+    if (inLeftTop) {
+        circleCenter = [rectX + radius, rectY + radius];
+    }
+    const inLeftBottom = point[0] >= rectX && point[0] <= rectX + radius && point[1] >= rectY + height && point[1] <= rectY + height - radius;
+    if (inLeftBottom) {
+        circleCenter = [rectX + radius, rectY + height - radius];
+    }
+    const inRightTop = point[0] >= rectX + width - radius && point[0] <= rectX + width && point[1] >= rectY && point[1] <= rectY + radius;
+    if (inRightTop) {
+        circleCenter = [rectX + width - radius, rectY + radius];
+    }
+    const inRightBottom = point[0] >= rectX + width - radius &&
+        point[0] <= rectX + width &&
+        point[1] >= rectY + height - radius &&
+        point[1] <= rectY + height;
+    if (inRightBottom) {
+        circleCenter = [rectX + width - radius, rectY + height - radius];
+    }
+    if (circleCenter) {
+        result = getNearestPointBetweenPointAndEllipse(point, circleCenter, radius, radius);
+    }
+    return result;
+}
+
+const getManualInputPoints = (rectangle) => {
     return [
-        [rectangle.x + rectangle.width * 0.15, rectangle.y],
-        [rectangle.x + rectangle.width * 0.85, rectangle.y],
+        [rectangle.x, rectangle.y + rectangle.height / 4],
+        [rectangle.x + rectangle.width, rectangle.y],
         [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
         [rectangle.x, rectangle.y + rectangle.height]
     ];
 };
+const ManualInputEngine = createPolygonEngine({
+    getPolygonPoints: getManualInputPoints,
+    getConnectorPoints: (rectangle) => {
+        const cornerPoints = getManualInputPoints(rectangle);
+        return getCenterPointsOnPolygon(cornerPoints);
+    },
+    getTextRectangle: (element) => {
+        const elementRectangle = 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 / 4 + ((elementRectangle.height * 3) / 4 - height) / 2
+        };
+    }
+});
+
+const getPreparationPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y + rectangle.height / 2],
+        [rectangle.x + rectangle.width / 6, rectangle.y],
+        [rectangle.x + (rectangle.width * 5) / 6, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + (rectangle.width * 5) / 6, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width / 6, rectangle.y + rectangle.height]
+    ];
+};
+const PreparationEngine = createPolygonEngine({
+    getPolygonPoints: getPreparationPoints,
+    getConnectorPoints: (rectangle) => {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = (rectangle.width * 2) / 3;
+        rectangle.x += width / 6;
+        return rectangle;
+    }
+});
+
+const getManualLoopPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y],
+        [rectangle.x + (rectangle.width * 7) / 8, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width / 8, rectangle.y + rectangle.height]
+    ];
+};
+const ManualLoopEngine = createPolygonEngine({
+    getPolygonPoints: getManualLoopPoints,
+    getConnectorPoints: (rectangle) => {
+        const cornerPoints = getManualLoopPoints(rectangle);
+        return getCenterPointsOnPolygon(cornerPoints);
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = (rectangle.width * 3) / 4;
+        rectangle.x += width / 8;
+        return rectangle;
+    }
+});
+
+const getMergePoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y],
+        [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height]
+    ];
+};
+const MergeEngine = createPolygonEngine({
+    getPolygonPoints: getMergePoints,
+    getConnectorPoints: (rectangle) => {
+        const cornerPoints = getMergePoints(rectangle);
+        const lineCenterPoints = getCenterPointsOnPolygon(cornerPoints);
+        return [...lineCenterPoints, ...cornerPoints];
+    },
+    getTextRectangle(element) {
+        const elementRectangle = getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        const width = (originWidth * 2) / 3;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 6,
+            y: elementRectangle.y + ((elementRectangle.height * 2) / 3 - height) / 2
+        };
+    }
+});
 
-const TriangleEngine = {
+const DelayEngine = {
     draw(board, rectangle, options) {
-        const points = getTrianglePoints(rectangle);
         const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} L${rectangle.x + (rectangle.width * 3) / 4} ${rectangle.y} A  ${rectangle.width /
+            4} ${rectangle.height / 2}, 0, 0, 1,${rectangle.x + (rectangle.width * 3) / 4} ${rectangle.y + rectangle.height} L${rectangle.x} ${rectangle.y + rectangle.height} Z`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
     },
     isHit(rectangle, point) {
-        const points = getTrianglePoints(rectangle);
-        return isPointInPolygon(point, points);
+        //split shape to rectangle and a half ellipse
+        const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
+        const isInRectangle = RectangleClient.isHit({
+            ...rectangle,
+            width: (rectangle.width * 3) / 4
+        }, rangeRectangle);
+        const isInEllipse = isPointInEllipse(point, [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height / 2], rectangle.width / 4, rectangle.height / 2);
+        return isInRectangle || isInEllipse;
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        const cornerPoints = getTrianglePoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        if (nearestPoint[0] > rectangle.x + (rectangle.width * 3) / 4) {
+            return getNearestPointBetweenPointAndEllipse(point, [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height / 2], rectangle.width / 4, rectangle.height / 2);
+        }
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        const centerPoint = [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height / 2];
+        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+        const a = rectangle.width / 4;
+        const b = rectangle.height / 2;
+        const slope = getTangentSlope(point[0], point[1], a, b);
+        return getVectorBySlope(point[0], point[1], slope);
     },
     getConnectorPoints(rectangle) {
-        const cornerPoints = getTrianglePoints(rectangle);
-        const lineCenterPoints = getCenterPointsOnPolygon(cornerPoints);
-        return [...lineCenterPoints, ...cornerPoints];
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+
+const StoredDataEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x + rectangle.width / 10} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y} A  ${rectangle.width /
+            10} ${rectangle.height / 2}, 1, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} L${rectangle.x +
+            rectangle.width / 10} ${rectangle.y + rectangle.height}A  ${rectangle.width / 10} ${rectangle.height /
+            2}, 0, 0, 1,${rectangle.x + rectangle.width / 10} ${rectangle.y}`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
     },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getTrianglePoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+    isHit(rectangle, point) {
+        //split shape to rectangle and a half ellipse
+        const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
+        const isInRectangle = RectangleClient.isHit({
+            ...rectangle,
+            x: rectangle.x + rectangle.width / 10,
+            width: (rectangle.width * 9) / 10
+        }, rangeRectangle);
+        const isInFrontEllipse = isPointInEllipse(point, [rectangle.x + rectangle.width / 10, rectangle.y + rectangle.height / 2], rectangle.width / 10, rectangle.height / 2);
+        const notInBackEllipse = !isPointInEllipse(point, [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2], rectangle.width / 10, rectangle.height / 2);
+        return (isInRectangle && notInBackEllipse) || isInFrontEllipse;
     },
     getCornerPoints(rectangle) {
-        return getTrianglePoints(rectangle);
-    }
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        if (nearestPoint[0] < rectangle.x + rectangle.width / 10) {
+            const nearestPoint = getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width / 10, rectangle.y + rectangle.height / 2], rectangle.width / 10, rectangle.height / 2);
+            if (nearestPoint[0] > rectangle.x + rectangle.width / 10) {
+                nearestPoint[0] = (rectangle.x + rectangle.width / 10) * 2 - nearestPoint[0];
+            }
+            return nearestPoint;
+        }
+        if (nearestPoint[0] > rectangle.x + (rectangle.width * 9) / 10) {
+            return getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2], rectangle.width / 10, rectangle.height / 2);
+        }
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        let centerPoint = [rectangle.x + rectangle.width / 10, rectangle.y + rectangle.height / 2];
+        let a = rectangle.width / 10;
+        let b = rectangle.height / 2;
+        const isBackEllipse = connectionPoint[0] > rectangle.x + (rectangle.width * 9) / 10 && connectionPoint[1] > rectangle.y;
+        if (isBackEllipse) {
+            centerPoint = [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2];
+        }
+        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+        const slope = getTangentSlope(point[0], point[1], a, b);
+        const vector = getVectorBySlope(point[0], point[1], slope);
+        return isBackEllipse ? vector.map(num => -num) : vector;
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [rectangle.x + rectangle.width / 2, rectangle.y],
+            [rectangle.x + (rectangle.width * 9) / 10, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
+            [rectangle.x, rectangle.y + rectangle.height / 2]
+        ];
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = (rectangle.width * 3) / 4;
+        rectangle.x += width / 8;
+        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,
+    [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 getShape = (value) => {
+    if (PlaitDrawElement.isImage(value)) {
+        return BasicShapes.rectangle;
+    }
+    return value.shape;
+};
+
+class GeometryShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    baseDraw(element, data) {
+        const rectangle = getRectangleByPoints(element.points);
+        const shape = element.shape;
+        if (shape === BasicShapes.text) {
+            return;
+        }
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(element);
+        const fill = getFillByElement(element);
+        const strokeLineDash = getLineDashByElement(element);
+        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
+            stroke: strokeColor,
+            strokeWidth,
+            fill,
+            strokeLineDash
+        });
+    }
+}
+
+const insertGeometry = (board, points, shape) => {
+    let newElement = createGeometryElement(shape, points, '', {
+        strokeColor: DefaultBasicShapeProperty.strokeColor,
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth
+    });
+    Transforms.insertNode(board, newElement, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+};
+const insertText = (board, points, text = '文本') => {
+    let newElement = createGeometryElement(BasicShapes.text, points, text);
+    Transforms.insertNode(board, newElement, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+};
+const resizeGeometry = (board, points, textHeight, path) => {
+    const normalizePoints = normalizeShapePoints(points);
+    const element = PlaitNode.get(board, path);
+    const newHeight = textHeight / board.viewport.zoom;
+    const newProperties = { points: normalizePoints, textHeight: newHeight };
+    if (PlaitDrawElement.isText(element) && element.autoSize) {
+        newProperties.autoSize = false;
+    }
+    Transforms.setNode(board, newProperties, path);
+};
+
+const normalizePoints = (board, element, width, textHeight) => {
+    let points = element.points;
+    let autoSize = element.autoSize;
+    const defaultSpace = ShapeDefaultSpace.rectangleAndText;
+    if (autoSize) {
+        const editor = PlaitGeometry.getTextEditor(element);
+        if (AlignEditor.isActive(editor, Alignment.right)) {
+            points = [
+                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
+                [points[1][0], points[0][1] + textHeight]
+            ];
+        }
+        else if (AlignEditor.isActive(editor, Alignment.center)) {
+            const oldWidth = Math.abs(points[0][0] - points[1][0]);
+            const offset = (width - oldWidth) / 2;
+            points = [
+                [points[0][0] - offset - defaultSpace, points[0][1]],
+                [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
+            ];
+        }
+        else {
+            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
+        }
+    }
+    return { points };
+};
+const setText = (board, element, text, width, textHeight) => {
+    const newElement = {
+        text,
+        textHeight,
+        ...normalizePoints(board, element, width, textHeight)
+    };
+    const path = board.children.findIndex(child => child === element);
+    Transforms.setNode(board, newElement, [path]);
+};
+const setTextSize = (board, element, textWidth, textHeight) => {
+    if (element.autoSize) {
+        const newElement = {
+            textHeight,
+            ...normalizePoints(board, element, textWidth, textHeight)
+        };
+        const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
+        const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
+        if (!isPointsEqual || !isTextHeightEqual) {
+            const path = board.children.findIndex(child => child === element);
+            Transforms.setNode(board, newElement, [path]);
+        }
+    }
+};
+
+const insertImage = (board, imageItem, startPoint) => {
+    const { width, height, url } = imageItem;
+    const host = BOARD_TO_HOST.get(board);
+    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
+    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
+    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
+    const points = startPoint
+        ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
+        : [
+            [point[0] - width / 2, point[1] - height / 2],
+            [point[0] + width / 2, point[1] + height / 2]
+        ];
+    const imageElement = {
+        id: idCreator(),
+        type: 'image',
+        points,
+        url
+    };
+    Transforms.insertNode(board, imageElement, [board.children.length]);
+    Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
+};
+
+const resizeLine = (board, options, path) => {
+    Transforms.setNode(board, options, path);
+};
+const setLineTexts = (board, element, texts) => {
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, { texts }, path);
+};
+const removeLineText = (board, element, index) => {
+    const path = PlaitBoard.findPath(board, element);
+    const texts = element.texts?.length ? [...element.texts] : [];
+    const newTexts = [...texts];
+    newTexts.splice(index, 1);
+    Transforms.setNode(board, { texts: newTexts }, path);
+};
+const setLineMark = (board, element, handleKey, marker) => {
+    const path = PlaitBoard.findPath(board, element);
+    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
+    handle = { ...handle, marker };
+    Transforms.setNode(board, { [handleKey]: handle }, path);
+};
+
+const DrawTransforms = {
+    setText,
+    insertGeometry,
+    resizeGeometry,
+    insertText,
+    setTextSize,
+    resizeLine,
+    setLineTexts,
+    removeLineText,
+    setLineMark,
+    insertImage
+};
+
+const withGeometryCreateByDrag = (board) => {
+    const { pointerMove, pointerUp } = board;
+    let geometryShapeG = 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 = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const pointer = PlaitBoard.getPointer(board);
+        if (dragMode) {
+            const points = getDefaultGeometryPoints(pointer, movingPoint);
+            if (pointer === BasicShapes.text) {
+                const textG = getTemporaryTextG(movingPoint);
+                geometryShapeG.appendChild(textG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+            else {
+                const temporaryElement = createGeometryElement(pointer, points, '', {
+                    strokeColor: DefaultBasicShapeProperty.strokeColor,
+                    strokeWidth: DefaultBasicShapeProperty.strokeWidth
+                });
+                geometryGenerator.draw(temporaryElement, geometryShapeG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const pointer = PlaitBoard.getPointer(board);
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        if (dragMode) {
+            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const points = getDefaultGeometryPoints(pointer, targetPoint);
+            if (pointer === BasicShapes.text) {
+                DrawTransforms.insertText(board, points);
+            }
+            else {
+                DrawTransforms.insertGeometry(board, points, pointer);
+            }
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
+};
+const withGeometryCreateByDrawing = (board) => {
+    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
+    let start = null;
+    let geometryShapeG = null;
+    let temporaryElement = null;
+    let isShift = false;
+    board.keydown = (event) => {
+        isShift = isKeyHotkey('shift', event);
+        keydown(event);
+    };
+    board.keyup = (event) => {
+        isShift = false;
+        keyup(event);
+    };
+    board.pointerDown = (event) => {
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        if (isGeometryPointer && isDrawingMode(board)) {
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            start = point;
+            const pointer = PlaitBoard.getPointer(board);
+            preventTouchMove(board, event, true);
+            if (pointer === BasicShapes.text) {
+                const points = getDefaultGeometryPoints(pointer, point);
+                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text);
+                Transforms.insertNode(board, textElement, [board.children.length]);
+                clearSelectedElement(board);
+                addSelectedElement(board, textElement);
+                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+                start = null;
+            }
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const drawMode = !!start;
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const pointer = PlaitBoard.getPointer(board);
+        if (drawMode && pointer !== BasicShapes.text) {
+            const points = normalizeShapePoints([start, movingPoint], isShift);
+            temporaryElement = createGeometryElement(pointer, points, '', {
+                strokeColor: DefaultBasicShapeProperty.strokeColor,
+                strokeWidth: DefaultBasicShapeProperty.strokeWidth
+            });
+            geometryGenerator.draw(temporaryElement, geometryShapeG);
+            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const isDrawMode = !!start;
+        if (isDrawMode) {
+            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
+            if (Math.hypot(width, height) === 0) {
+                const pointer = PlaitBoard.getPointer(board);
+                const points = getDefaultGeometryPoints(pointer, targetPoint);
+                if (pointer !== BasicShapes.text) {
+                    temporaryElement = createGeometryElement(pointer, points, '', {
+                        strokeColor: DefaultBasicShapeProperty.strokeColor,
+                        strokeWidth: DefaultBasicShapeProperty.strokeWidth
+                    });
+                }
+            }
+        }
+        if (temporaryElement) {
+            Transforms.insertNode(board, temporaryElement, [board.children.length]);
+            clearSelectedElement(board);
+            addSelectedElement(board, temporaryElement);
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        start = null;
+        temporaryElement = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
 };
-const getTrianglePoints = (rectangle) => {
-    return [
-        [rectangle.x + rectangle.width / 2, rectangle.y],
-        [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
-        [rectangle.x, rectangle.y + rectangle.height]
-    ];
+const getDefaultGeometryPoints = (pointer, targetPoint) => {
+    const defaultProperty = getGeometryDefaultProperty(pointer);
+    return getPointsByCenterPoint(targetPoint, defaultProperty.width, defaultProperty.height);
 };
-
-const TwoWayArrowEngine = {
-    draw(board, rectangle, options) {
-        const points = getTwoWayArrowPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    getCornerPoints(rectangle) {
-        return getTwoWayArrowPoints(rectangle);
-    },
-    isHit(rectangle, point) {
-        const points = getTwoWayArrowPoints(rectangle);
-        return isPointInPolygon(point, points);
-    },
-    getNearestPoint(rectangle, point) {
-        const cornerPoints = getTwoWayArrowPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getTwoWayArrowPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
-    getConnectorPoints(rectangle) {
-        return [
-            [rectangle.x, rectangle.y + rectangle.height / 2],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
-        ];
+const getGeometryDefaultProperty = (pointer) => {
+    const isText = pointer === BasicShapes.text;
+    const isFlowChart = getFlowchartPointers().includes(pointer);
+    if (isText) {
+        return DefaultTextProperty;
+    }
+    else if (isFlowChart) {
+        return getDefaultFlowchartProperty(pointer);
+    }
+    else {
+        return DefaultBasicShapeProperty;
     }
 };
-const getTwoWayArrowPoints = (rectangle) => {
-    return [
-        [rectangle.x, rectangle.y + rectangle.height / 2],
-        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y],
-        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + rectangle.height / 5],
-        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + rectangle.height / 5],
-        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y],
-        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
-        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + rectangle.height],
-        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + (rectangle.height * 4) / 5],
-        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + (rectangle.height * 4) / 5],
-        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + rectangle.height]
-    ];
-};
-
-const ShapeEngineMap = {
-    [GeometryShape.rectangle]: RectangleEngine,
-    [GeometryShape.diamond]: DiamondEngine,
-    [GeometryShape.ellipse]: EllipseEngine,
-    [GeometryShape.parallelogram]: ParallelogramEngine,
-    [GeometryShape.roundRectangle]: RoundRectangleEngine,
-    [GeometryShape.text]: RectangleEngine,
-    [GeometryShape.triangle]: TriangleEngine,
-    [GeometryShape.leftArrow]: LeftArrowEngine,
-    [GeometryShape.trapezoid]: TrapezoidEngine,
-    [GeometryShape.rightArrow]: RightArrowEngine,
-    [GeometryShape.cross]: CrossEngine,
-    [GeometryShape.star]: StarEngine,
-    [GeometryShape.pentagon]: PentagonEngine,
-    [GeometryShape.hexagon]: HexagonEngine,
-    [GeometryShape.octagon]: OctagonEngine,
-    [GeometryShape.pentagonArrow]: PentagonArrowEngine,
-    [GeometryShape.processArrow]: ProcessArrowEngine,
-    [GeometryShape.twoWayArrow]: TwoWayArrowEngine,
-    [GeometryShape.comment]: CommentEngine,
-    [GeometryShape.roundComment]: RoundCommentEngine
-};
-const getEngine = (shape) => {
-    return ShapeEngineMap[shape];
+const getTemporaryTextG = (movingPoint) => {
+    const textG = createG();
+    const width = DefaultTextProperty.width - ShapeDefaultSpace.rectangleAndText * 2;
+    const foreignObject = createForeignObject(movingPoint[0] - width / 2, movingPoint[1] - DefaultTextProperty.height / 2, width, DefaultTextProperty.height);
+    const richtext = document.createElement('div');
+    richtext.textContent = DefaultTextProperty.text;
+    richtext.style.fontSize = `${DEFAULT_FONT_SIZE}px`;
+    richtext.style.cursor = 'default';
+    foreignObject.appendChild(richtext);
+    textG.appendChild(foreignObject);
+    return textG;
 };
 
-const getShape = (value) => {
-    if (PlaitDrawElement.isImage(value)) {
-        return GeometryShape.rectangle;
-    }
-    return value.shape;
+const DefaultLineStyle = {
+    strokeWidth: 2,
+    strokeColor: '#000'
 };
 
 const createGeometryElement = (shape, points, text, options) => {
     let textOptions = {};
     let alignment = Alignment.center;
-    if (shape === GeometryShape.text) {
+    if (shape === BasicShapes.text) {
         textOptions = { autoSize: true };
         alignment = undefined;
     }
+    let flowchartOptions = {};
+    if (getFlowchartPointers().includes(shape)) {
+        flowchartOptions = { fill: '#ffffff' };
+    }
     return {
         id: idCreator(),
         type: 'geometry',
@@ -1001,7 +1515,8 @@ const createGeometryElement = (shape, points, text, options) => {
         text: buildText(text, alignment),
         points,
         ...textOptions,
-        ...options
+        ...options,
+        ...flowchartOptions
     };
 };
 const getPointsByCenterPoint = (point, width, height) => {
@@ -1073,6 +1588,66 @@ const getEdgeOnPolygonByPoint = (corners, point) => {
     }
     return null;
 };
+const getDefaultFlowchartProperty = (symbol) => {
+    return DefaultFlowchartPropertyMap[symbol];
+};
+const createDefaultFlowchart = (point) => {
+    const decisionProperty = getDefaultFlowchartProperty(FlowchartSymbols.decision);
+    const processProperty = getDefaultFlowchartProperty(FlowchartSymbols.process);
+    const terminalProperty = getDefaultFlowchartProperty(FlowchartSymbols.terminal);
+    const options = {
+        strokeColor: DefaultBasicShapeProperty.strokeColor,
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth
+    };
+    const lineOptions = {
+        strokeColor: DefaultLineStyle.strokeColor,
+        strokeWidth: DefaultLineStyle.strokeWidth
+    };
+    const startElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, point), '开始', options);
+    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 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];
+    const endElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, endPoint), '结束', options);
+    const line1 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
+    const line2 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
+    const line3 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
+        {
+            text: buildText('是'),
+            position: 0.5,
+            width: 14,
+            height: 20
+        }
+    ], lineOptions);
+    const line4 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
+        {
+            text: buildText('否'),
+            position: 0.5,
+            width: 14,
+            height: 20
+        }
+    ], lineOptions);
+    const line5 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: LineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
+    return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
+};
 
 const drawLineArrow = (element, points, options) => {
     const arrowG = createG();
@@ -1112,11 +1687,11 @@ const getArrow = (element, arrowOptions, options) => {
             break;
         }
         case LineMarkerType.oneSideUp: {
-            targetArrow = drawOneSideArrow(source, target, 'up', options);
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
             break;
         }
         case LineMarkerType.oneSideDown: {
-            targetArrow = drawOneSideArrow(source, target, 'down', options);
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
             break;
         }
         case LineMarkerType.hollowTriangle: {
@@ -1183,13 +1758,13 @@ const drawHollowTriangleArrow = (source, target, options) => {
     return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
 };
 
-const createLineElement = (shape, points, source, target, options) => {
+const createLineElement = (shape, points, source, target, texts, options) => {
     return {
         id: idCreator(),
         type: 'line',
         shape,
         source,
-        texts: [],
+        texts: texts ? texts : [],
         target,
         opacity: 1,
         points,
@@ -1260,8 +1835,41 @@ const getLineHandleRefPair = (board, element) => {
 const getElbowPoints = (board, element) => {
     if (element.points.length === 2) {
         const handleRefPair = getLineHandleRefPair(board, element);
-        const offset = element.source.boundId || element.target.boundId ? 30 : 0;
-        let points = getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, offset);
+        const offset = element.source.boundId || element.target.boundId ? DEFAULT_ROUTE_MARGIN : 0;
+        const sourceElement = element.source.boundId && getElementById(board, element.source.boundId);
+        const targetElement = element.target.boundId && getElementById(board, element.target.boundId);
+        const isBound = sourceElement && targetElement;
+        let points = [];
+        if (isBound) {
+            const targetRectangle = RectangleClient.inflate(getRectangleByPoints(targetElement.points), getStrokeWidthByElement(targetElement) * 2);
+            const sourceRectangle = RectangleClient.inflate(getRectangleByPoints(sourceElement.points), getStrokeWidthByElement(sourceElement) * 2);
+            const sourcePoint = handleRefPair.source.point;
+            const targetPoint = handleRefPair.target.point;
+            const { sourceOffset, targetOffset } = reduceRouteMargin(sourceRectangle, targetRectangle);
+            const sourceOuterRectangle = RectangleClient.expand(sourceRectangle, sourceOffset[3], sourceOffset[0], sourceOffset[1], sourceOffset[2]);
+            const targetOuterRectangle = RectangleClient.expand(targetRectangle, targetOffset[3], targetOffset[0], targetOffset[1], targetOffset[2]);
+            const nextSourcePoint = getNextPoint(sourcePoint, sourceOuterRectangle, handleRefPair.source.direction);
+            const nextTargetPoint = getNextPoint(targetPoint, targetOuterRectangle, handleRefPair.target.direction);
+            const isIntersect = RectangleClient.isPointInRectangle(targetRectangle, sourcePoint) ||
+                RectangleClient.isPointInRectangle(targetOuterRectangle, nextSourcePoint) ||
+                RectangleClient.isPointInRectangle(sourceOuterRectangle, nextTargetPoint) ||
+                RectangleClient.isPointInRectangle(sourceRectangle, targetPoint);
+            if (!isIntersect) {
+                points = generateElbowLineRoute({
+                    sourcePoint,
+                    nextSourcePoint,
+                    sourceRectangle,
+                    sourceOuterRectangle,
+                    targetPoint,
+                    nextTargetPoint,
+                    targetRectangle,
+                    targetOuterRectangle
+                });
+            }
+        }
+        if (!points.length) {
+            points = getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, offset);
+        }
         points = removeDuplicatePoints(points);
         return points;
     }
@@ -1434,17 +2042,6 @@ const getBoardLines = (board) => {
         recursion: (element) => PlaitDrawElement.isDrawElement(element)
     });
 };
-const removeDuplicatePoints = (points) => {
-    const newArray = [];
-    points.forEach(point => {
-        const index = newArray.findIndex(otherPoint => {
-            return point[0] === otherPoint[0] && point[1] === otherPoint[1];
-        });
-        if (index === -1)
-            newArray.push(point);
-    });
-    return newArray;
-};
 const getExtendPoint = (source, target, extendDistance) => {
     const distance = distanceBetweenPointAndPoint(...source, ...target);
     const sin = (target[1] - source[1]) / distance;
@@ -1510,6 +2107,55 @@ const getSelectedImageElements = (board) => {
     return selectedElements;
 };
 
+const isRectangleHitDrawElement = (board, element, selection) => {
+    if (PlaitDrawElement.isGeometry(element)) {
+        const client = getRectangleByPoints(element.points);
+        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
+        if (element.textHeight > client.height) {
+            const textClient = getTextRectangle(element);
+            return RectangleClient.isHit(rangeRectangle, client) || RectangleClient.isHit(rangeRectangle, textClient);
+        }
+        return RectangleClient.isHit(rangeRectangle, client);
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = getRectangleByPoints(element.points);
+        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
+        return RectangleClient.isHit(rangeRectangle, client);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        const points = getLinePoints(board, element);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const isHitText = isHitLineText(board, element, selection.focus);
+        const isHit = isHitPolyLine(points, selection.focus, strokeWidth, 3) || isHitText;
+        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
+        const isContainPolyLinePoint = points.some(point => {
+            return RectangleClient.isHit(rangeRectangle, RectangleClient.toRectangleClient([point, point]));
+        });
+        const isIntersect = Point.isEquals(selection.anchor, selection.focus) ? isHit : isPolylineHitRectangle(points, rangeRectangle);
+        return isContainPolyLinePoint || isIntersect;
+    }
+    return null;
+};
+const isHitDrawElement = (board, element, point) => {
+    if (PlaitDrawElement.isGeometry(element)) {
+        const fill = getFillByElement(element);
+        if (fill !== DefaultGeometryStyle.fill) {
+            return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
+        }
+        else {
+            const strokeWidth = getStrokeWidthByElement(element);
+            const engine = getEngine(getShape(element));
+            const corners = engine.getCornerPoints(getRectangleByPoints(element.points));
+            const isHit = isHitPolyLine(corners, point, strokeWidth, 3);
+            return isHit;
+        }
+    }
+    if (PlaitDrawElement.isImage(element) || PlaitDrawElement.isLine(element)) {
+        return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
+    }
+    return null;
+};
+
 var LineMarkerType;
 (function (LineMarkerType) {
     LineMarkerType["arrow"] = "arrow";
@@ -1562,208 +2208,59 @@ const PlaitLine = {
         return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.target);
     },
     isBoundElementOfSource(line, element) {
-        return line.source.boundId === element.id;
-    },
-    isBoundElementOfTarget(line, element) {
-        return line.target.boundId === element.id;
-    },
-    getPoints(board, line) {
-        let sourcePoint = line.source.boundId
-            ? getConnectionPoint(getElementById(board, line.source.boundId), line.source.connection)
-            : line.points[0];
-        let targetPoint = line.target.boundId
-            ? getConnectionPoint(getElementById(board, line.target.boundId), line.target.connection)
-            : line.points[line.points.length - 1];
-        const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
-        return [sourcePoint, ...restPoints, targetPoint];
-    }
-};
-
-var StrokeStyle;
-(function (StrokeStyle) {
-    StrokeStyle["solid"] = "solid";
-    StrokeStyle["dashed"] = "dashed";
-})(StrokeStyle || (StrokeStyle = {}));
-
-const PlaitDrawElement = {
-    isGeometry: (value) => {
-        return value.type === 'geometry';
-    },
-    isLine: (value) => {
-        return value.type === 'line';
-    },
-    isText: (value) => {
-        return value.type === 'geometry' && value.shape === GeometryShape.text;
-    },
-    isImage: (value) => {
-        return value.type === 'image';
-    },
-    isDrawElement: (value) => {
-        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value) || PlaitDrawElement.isImage(value)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    isShape: (value) => {
-        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
-    }
-};
-
-class GeometryShapeGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    baseDraw(element, data) {
-        const rectangle = getRectangleByPoints(element.points);
-        const shape = element.shape;
-        if (shape === GeometryShape.text) {
-            return;
-        }
-        const strokeWidth = getStrokeWidthByElement(element);
-        const strokeColor = getStrokeColorByElement(element);
-        const fill = getFillByElement(element);
-        const strokeLineDash = getLineDashByElement(element);
-        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
-            stroke: strokeColor,
-            strokeWidth,
-            fill,
-            strokeLineDash
-        });
-    }
-}
-
-const insertGeometry = (board, points, shape) => {
-    let newElement = createGeometryElement(shape, points, '', {
-        strokeColor: DefaultGeometryProperty.strokeColor,
-        strokeWidth: DefaultGeometryProperty.strokeWidth
-    });
-    Transforms.insertNode(board, newElement, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-};
-const insertText = (board, points, text = '文本') => {
-    let newElement = createGeometryElement(GeometryShape.text, points, text);
-    Transforms.insertNode(board, newElement, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-};
-const resizeGeometry = (board, points, textHeight, path) => {
-    const normalizePoints = normalizeShapePoints(points);
-    const element = PlaitNode.get(board, path);
-    const newHeight = textHeight / board.viewport.zoom;
-    const newProperties = { points: normalizePoints, textHeight: newHeight };
-    if (PlaitDrawElement.isText(element) && element.autoSize) {
-        newProperties.autoSize = false;
-    }
-    Transforms.setNode(board, newProperties, path);
-};
-
-const normalizePoints = (board, element, width, textHeight) => {
-    let points = element.points;
-    let autoSize = element.autoSize;
-    const defaultSpace = ShapeDefaultSpace.rectangleAndText;
-    if (autoSize) {
-        const editor = PlaitGeometry.getTextEditor(element);
-        if (AlignEditor.isActive(editor, Alignment.right)) {
-            points = [
-                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
-                [points[1][0], points[0][1] + textHeight]
-            ];
-        }
-        else if (AlignEditor.isActive(editor, Alignment.center)) {
-            const oldWidth = Math.abs(points[0][0] - points[1][0]);
-            const offset = (width - oldWidth) / 2;
-            points = [
-                [points[0][0] - offset - defaultSpace, points[0][1]],
-                [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
-            ];
-        }
-        else {
-            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
-        }
-    }
-    return { points };
-};
-const setText = (board, element, text, width, textHeight) => {
-    const newElement = {
-        text,
-        textHeight,
-        ...normalizePoints(board, element, width, textHeight)
-    };
-    const path = board.children.findIndex(child => child === element);
-    Transforms.setNode(board, newElement, [path]);
-};
-const setTextSize = (board, element, textWidth, textHeight) => {
-    if (element.autoSize) {
-        const newElement = {
-            textHeight,
-            ...normalizePoints(board, element, textWidth, textHeight)
-        };
-        const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
-        const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
-        if (!isPointsEqual || !isTextHeightEqual) {
-            const path = board.children.findIndex(child => child === element);
-            Transforms.setNode(board, newElement, [path]);
-        }
+        return line.source.boundId === element.id;
+    },
+    isBoundElementOfTarget(line, element) {
+        return line.target.boundId === element.id;
+    },
+    getPoints(board, line) {
+        let sourcePoint = line.source.boundId
+            ? getConnectionPoint(getElementById(board, line.source.boundId), line.source.connection)
+            : line.points[0];
+        let targetPoint = line.target.boundId
+            ? getConnectionPoint(getElementById(board, line.target.boundId), line.target.connection)
+            : line.points[line.points.length - 1];
+        const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
+        return [sourcePoint, ...restPoints, targetPoint];
     }
 };
 
-const insertImage = (board, imageItem, startPoint) => {
-    const { width, height, url } = imageItem;
-    const host = BOARD_TO_HOST.get(board);
-    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
-    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
-    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
-    const points = startPoint
-        ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
-        : [
-            [point[0] - width / 2, point[1] - height / 2],
-            [point[0] + width / 2, point[1] + height / 2]
-        ];
-    const imageElement = {
-        id: idCreator(),
-        type: 'image',
-        points,
-        url
-    };
-    Transforms.insertNode(board, imageElement, [board.children.length]);
-    Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
-};
-
-const resizeLine = (board, options, path) => {
-    Transforms.setNode(board, options, path);
-};
-const setLineTexts = (board, element, texts) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { texts }, path);
-};
-const removeLineText = (board, element, index) => {
-    const path = PlaitBoard.findPath(board, element);
-    const texts = element.texts?.length ? [...element.texts] : [];
-    const newTexts = [...texts];
-    newTexts.splice(index, 1);
-    Transforms.setNode(board, { texts: newTexts }, path);
-};
-const setLineMark = (board, element, handleKey, marker) => {
-    const path = PlaitBoard.findPath(board, element);
-    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
-    handle = { ...handle, marker };
-    Transforms.setNode(board, { [handleKey]: handle }, path);
-};
+var StrokeStyle;
+(function (StrokeStyle) {
+    StrokeStyle["solid"] = "solid";
+    StrokeStyle["dashed"] = "dashed";
+})(StrokeStyle || (StrokeStyle = {}));
 
-const DrawTransforms = {
-    setText,
-    insertGeometry,
-    resizeGeometry,
-    insertText,
-    setTextSize,
-    resizeLine,
-    setLineTexts,
-    removeLineText,
-    setLineMark,
-    insertImage
+const PlaitDrawElement = {
+    isGeometry: (value) => {
+        return value.type === 'geometry';
+    },
+    isLine: (value) => {
+        return value.type === 'line';
+    },
+    isText: (value) => {
+        return value.type === 'geometry' && value.shape === BasicShapes.text;
+    },
+    isImage: (value) => {
+        return value.type === 'image';
+    },
+    isDrawElement: (value) => {
+        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value) || PlaitDrawElement.isImage(value)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    isShape: (value) => {
+        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
+    },
+    isBaseShape: (value) => {
+        return Object.keys(BasicShapes).includes(value.type);
+    },
+    isFlowchart: (value) => {
+        return Object.keys(FlowchartSymbols).includes(value.type);
+    }
 };
 
 class GeometryComponent extends CommonPluginElement {
@@ -1864,7 +2361,11 @@ class GeometryComponent extends CommonPluginElement {
                 }
             },
             getMaxWidth: () => {
-                const width = getTextRectangle(this.element).width;
+                let width = getTextRectangle(this.element).width;
+                const getRectangle = getEngine(this.element.shape).getTextRectangle;
+                if (getRectangle) {
+                    width = getRectangle(this.element).width;
+                }
                 return this.element?.autoSize ? GeometryThreshold.defaultTextMaxWidth : width;
             },
             textPlugins: plugins
@@ -1877,10 +2378,10 @@ class GeometryComponent extends CommonPluginElement {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: GeometryComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.3", ngImport: i0, type: GeometryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeometryComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-draw-geometry',
@@ -2118,10 +2619,10 @@ class LineComponent extends PlaitPluginElementComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: LineComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: LineComponent, isStandalone: true, selector: "plait-draw-line", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.3", ngImport: i0, type: LineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-draw-line',
@@ -2160,160 +2661,6 @@ const withDrawHotkey = (board) => {
     return board;
 };
 
-const withGeometryCreateByDrag = (board) => {
-    const { pointerMove, pointerUp } = board;
-    let geometryShapeG = 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 = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (dragMode) {
-            const points = getDefaultGeometryPoints(pointer, movingPoint);
-            if (pointer === GeometryShape.text) {
-                const textG = getTemporaryTextG(movingPoint);
-                geometryShapeG.appendChild(textG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-            else {
-                const temporaryElement = createGeometryElement(pointer, points, '', {
-                    strokeColor: DefaultGeometryProperty.strokeColor,
-                    strokeWidth: DefaultGeometryProperty.strokeWidth
-                });
-                geometryGenerator.draw(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const pointer = PlaitBoard.getPointer(board);
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        if (dragMode) {
-            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const points = getDefaultGeometryPoints(pointer, targetPoint);
-            if (pointer === GeometryShape.text) {
-                DrawTransforms.insertText(board, points);
-            }
-            else {
-                DrawTransforms.insertGeometry(board, points, pointer);
-            }
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
-    };
-    return board;
-};
-const withGeometryCreateByDrawing = (board) => {
-    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
-    let start = null;
-    let geometryShapeG = null;
-    let temporaryElement = null;
-    let isShift = false;
-    board.keydown = (event) => {
-        isShift = isKeyHotkey('shift', event);
-        keydown(event);
-    };
-    board.keyup = (event) => {
-        isShift = false;
-        keyup(event);
-    };
-    board.pointerDown = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        if (isGeometryPointer && isDrawingMode(board)) {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            start = point;
-            const pointer = PlaitBoard.getPointer(board);
-            preventTouchMove(board, event, true);
-            if (pointer === GeometryShape.text) {
-                const points = getDefaultGeometryPoints(pointer, point);
-                const textElement = createGeometryElement(GeometryShape.text, points, DefaultTextProperty.text);
-                Transforms.insertNode(board, textElement, [board.children.length]);
-                clearSelectedElement(board);
-                addSelectedElement(board, textElement);
-                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-                start = null;
-            }
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const drawMode = !!start;
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (drawMode && pointer !== GeometryShape.text) {
-            const points = normalizeShapePoints([start, movingPoint], isShift);
-            temporaryElement = createGeometryElement(pointer, points, '', {
-                strokeColor: DefaultGeometryProperty.strokeColor,
-                strokeWidth: DefaultGeometryProperty.strokeWidth
-            });
-            geometryGenerator.draw(temporaryElement, geometryShapeG);
-            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const isDrawMode = !!start;
-        if (isDrawMode) {
-            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
-            if (Math.hypot(width, height) === 0) {
-                const pointer = PlaitBoard.getPointer(board);
-                const points = getDefaultGeometryPoints(pointer, targetPoint);
-                if (pointer !== GeometryShape.text) {
-                    temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeColor: DefaultGeometryProperty.strokeColor,
-                        strokeWidth: DefaultGeometryProperty.strokeWidth
-                    });
-                }
-            }
-        }
-        if (temporaryElement) {
-            Transforms.insertNode(board, temporaryElement, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, temporaryElement);
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        start = null;
-        temporaryElement = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
-    };
-    return board;
-};
-const getDefaultGeometryPoints = (pointer, targetPoint) => {
-    return pointer === GeometryShape.text
-        ? getPointsByCenterPoint(targetPoint, DefaultTextProperty.width, DefaultTextProperty.height)
-        : getPointsByCenterPoint(targetPoint, DefaultGeometryProperty.width, DefaultGeometryProperty.height);
-};
-const getTemporaryTextG = (movingPoint) => {
-    const textG = createG();
-    const width = DefaultTextProperty.width - ShapeDefaultSpace.rectangleAndText * 2;
-    const foreignObject = createForeignObject(movingPoint[0] - width / 2, movingPoint[1] - DefaultTextProperty.height / 2, width, DefaultTextProperty.height);
-    const richtext = document.createElement('div');
-    richtext.textContent = DefaultTextProperty.text;
-    richtext.style.fontSize = `${DEFAULT_FONT_SIZE}px`;
-    richtext.style.cursor = 'default';
-    foreignObject.appendChild(richtext);
-    textG.appendChild(foreignObject);
-    return textG;
-};
-
 const buildClipboardData = (board, elements, startPoint) => {
     return elements.map(element => {
         if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element)) {
@@ -2404,13 +2751,13 @@ const withDrawFragment = (baseBoard) => {
     };
     board.insertFragment = (data, targetPoint) => {
         const elements = getDataFromClipboard(data);
+        const selectedElements = getSelectedElements(board);
         const drawElements = elements.filter(value => PlaitDrawElement.isDrawElement(value));
         if (elements.length > 0 && drawElements.length > 0) {
             insertClipboardData(board, drawElements, targetPoint);
         }
         else if (elements.length === 0) {
             const text = getTextFromClipboard(data);
-            const selectedElements = getSelectedElements(board);
             // (*￣︶￣)
             const insertAsChildren = selectedElements.length === 1 && selectedElements[0].children;
             const insertAsFreeText = !insertAsChildren;
@@ -2422,7 +2769,8 @@ const withDrawFragment = (baseBoard) => {
         }
         if (data?.files.length) {
             const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
-            if (acceptImageArray.includes(data?.files[0].type)) {
+            const canInsertionImage = !getElementOfFocusedImage(board) && !(selectedElements.length === 1 && board.isImageBindingAllowed(selectedElements[0]));
+            if (acceptImageArray.includes(data?.files[0].type) && canInsertionImage) {
                 const imageFile = data.files[0];
                 buildImage(board, imageFile, DEFAULT_IMAGE_WIDTH, imageItem => {
                     DrawTransforms.insertImage(board, imageItem, targetPoint);
@@ -2439,11 +2787,6 @@ const getBoundedLineElements = (board, plaitShapes) => {
     return lines.filter(line => plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape)));
 };
 
-const DefaultLineStyle = {
-    strokeWidth: 2,
-    strokeColor: '#000'
-};
-
 const getHitGeometryResizeHandleRef = (board, element, point) => {
     const rectangle = getRectangleByPoints(element.points);
     const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
@@ -2500,7 +2843,7 @@ const withLineCreateByDraw = (board) => {
             targetRef.boundId = hitElement ? hitElement.id : undefined;
             const lineGenerator = new LineShapeGenerator(board);
             const lineShape = PlaitBoard.getPointer(board);
-            temporaryElement = createLineElement(lineShape, [start, movingPoint], { marker: LineMarkerType.none, connection: sourceRef.connection, boundId: sourceRef?.boundId }, { marker: LineMarkerType.arrow, connection: targetRef.connection, boundId: targetRef?.boundId }, {
+            temporaryElement = createLineElement(lineShape, [start, movingPoint], { marker: LineMarkerType.none, connection: sourceRef.connection, boundId: sourceRef?.boundId }, { marker: LineMarkerType.arrow, connection: targetRef.connection, boundId: targetRef?.boundId }, [], {
                 strokeColor: DefaultLineStyle.strokeColor,
                 strokeWidth: DefaultLineStyle.strokeWidth
             });
@@ -2739,9 +3082,9 @@ const withLineText = (board) => {
     const { dblclick } = board;
     board.dblclick = (event) => {
         const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const hitTarget = getHitElements(board, { ranges: [{ anchor: clickPoint, focus: clickPoint }] }, (element) => {
+        const hitTarget = getHitElementByPoint(board, clickPoint, (element) => {
             return PlaitDrawElement.isLine(element);
-        })[0];
+        });
         if (hitTarget) {
             const points = getLinePoints(board, hitTarget);
             const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
@@ -2836,10 +3179,10 @@ class ImageComponent extends CommonPluginElement {
         this.destroy$.complete();
         this.imageGenerator.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: ImageComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.3", ngImport: i0, type: ImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-draw-geometry',
@@ -2850,7 +3193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const withDraw = (board) => {
-    const { drawElement, getRectangle, isHitSelection, isMovable, isAlign } = board;
+    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, isAlign } = board;
     board.drawElement = (context) => {
         if (PlaitDrawElement.isGeometry(context.element)) {
             return GeometryComponent;
@@ -2876,34 +3219,19 @@ const withDraw = (board) => {
         }
         return getRectangle(element);
     };
-    board.isHitSelection = (element, range) => {
-        if (PlaitDrawElement.isGeometry(element)) {
-            const client = getRectangleByPoints(element.points);
-            const rangeRectangle = RectangleClient.toRectangleClient([range.anchor, range.focus]);
-            if (element.textHeight > client.height) {
-                const textClient = getTextRectangle(element);
-                return RectangleClient.isHit(rangeRectangle, client) || RectangleClient.isHit(rangeRectangle, textClient);
-            }
-            return RectangleClient.isHit(rangeRectangle, client);
-        }
-        if (PlaitDrawElement.isImage(element)) {
-            const client = getRectangleByPoints(element.points);
-            const rangeRectangle = RectangleClient.toRectangleClient([range.anchor, range.focus]);
-            return RectangleClient.isHit(rangeRectangle, client);
+    board.isRectangleHit = (element, selection) => {
+        const result = isRectangleHitDrawElement(board, element, selection);
+        if (result !== null) {
+            return result;
         }
-        if (PlaitDrawElement.isLine(element)) {
-            const points = getLinePoints(board, element);
-            const strokeWidth = getStrokeWidthByElement(element);
-            const isHitText = isHitLineText(board, element, range.focus);
-            const isHit = isHitPolyLine(points, range.focus, strokeWidth, 3) || isHitText;
-            const rangeRectangle = RectangleClient.toRectangleClient([range.anchor, range.focus]);
-            const isContainPolyLinePoint = points.some(point => {
-                return RectangleClient.isHit(rangeRectangle, RectangleClient.toRectangleClient([point, point]));
-            });
-            const isIntersect = range.anchor === range.focus ? isHit : isPolylineHitRectangle(points, rangeRectangle);
-            return isContainPolyLinePoint || isIntersect;
+        return isRectangleHit(element, selection);
+    };
+    board.isHit = (element, point) => {
+        const result = isHitDrawElement(board, element, point);
+        if (result !== null) {
+            return result;
         }
-        return isHitSelection(element, range);
+        return isHit(element, point);
     };
     board.isMovable = (element) => {
         if (PlaitDrawElement.isGeometry(element)) {
@@ -2938,5 +3266,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_IMAGE_WIDTH, DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawTransforms, GeometryComponent, GeometryShape, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getEdgeOnPolygonByPoint, getElbowPoints, getExtendPoint, getFillByElement, getGeometryPointers, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, isHitLineText, isHitPolyLine, removeDuplicatePoints, transformOpsToPoints, transformPointToConnection, withDraw };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getEdgeOnPolygonByPoint, getElbowPoints, getExtendPoint, getFillByElement, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map