@plait/draw 0.28.0 → 0.29.0

package/fesm2022/plait-draw.mjs

@@ -8,29 +8,43 @@ 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,59 +527,103 @@ const getPentagonArrowPoints = (rectangle) => {
         [rectangle.x, rectangle.y + rectangle.height]
     ];
 };
+const PentagonArrowEngine = createPolygonEngine({
+    getPolygonPoints: getPentagonArrowPoints,
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        rectangle.width = (rectangle.width * 3) / 5;
+        return rectangle;
+    }
+});
 
-const ProcessArrowEngine = {
+const getProcessArrowPoints = (rectangle) => {
+    const wider = rectangle.width > rectangle.height / 2;
+    return [
+        [rectangle.x, rectangle.y],
+        [rectangle.x + (wider ? rectangle.width - rectangle.height / 2 : 0), rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + (wider ? rectangle.width - rectangle.height / 2 : 0), rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height],
+        [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) {
-        const points = getProcessArrowPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
+        return drawRectangle(board, rectangle, { ...options, fillStyle: 'solid' });
     },
     isHit(rectangle, point) {
-        const parallelogramPoints = getProcessArrowPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
+        const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
     },
     getCornerPoints(rectangle) {
-        return getProcessArrowPoints(rectangle);
+        return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getProcessArrowPoints(rectangle));
+        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getProcessArrowPoints(rectangle);
+        const corners = RectangleEngine.getCornerPoints(rectangle);
         const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
         return getEdgeOnPolygonByPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
-        return getProcessArrowPoints(rectangle);
+        return RectangleClient.getEdgeCenterPoints(rectangle);
     }
 };
-const getProcessArrowPoints = (rectangle) => {
-    const wider = rectangle.width > rectangle.height / 2;
+
+const getRightArrowPoints = (rectangle) => {
     return [
-        [rectangle.x, rectangle.y],
-        [rectangle.x + (wider ? rectangle.width - rectangle.height / 2 : 0), rectangle.y],
+        [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 + (wider ? rectangle.width - rectangle.height / 2 : 0), rectangle.y + rectangle.height],
-        [rectangle.x, rectangle.y + rectangle.height],
-        [rectangle.x + (wider ? rectangle.height / 2 : 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]
+        ];
+    },
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        rectangle.width = rectangle.width * 0.68;
+        return rectangle;
+    }
+});
 
-const RectangleEngine = {
+const RoundRectangleEngine = {
     draw(board, rectangle, options) {
-        return drawRectangle(board, rectangle, { ...options, fillStyle: 'solid' });
+        return drawRoundRectangle(PlaitBoard.getRoughSVG(board), rectangle.x, rectangle.y, rectangle.x + rectangle.width, rectangle.y + rectangle.height, { ...options, fillStyle: 'solid' }, false, getRoundRectangleRadius(rectangle));
     },
     isHit(rectangle, point) {
-        const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
-        return RectangleClient.isHit(rectangle, rangeRectangle);
+        return isPointInRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
     },
     getCornerPoints(rectangle) {
         return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        return getNearestPointBetweenPointAndRoundRectangle$1(point, rectangle, getRoundRectangleRadius(rectangle));
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
@@ -612,62 +634,237 @@ const RectangleEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     }
 };
+const getRoundRectangleRadius = (rectangle) => {
+    return Math.min(rectangle.width * 0.1, rectangle.height * 0.1);
+};
+function getNearestPointBetweenPointAndRoundRectangle$1(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 RightArrowEngine = {
+const heightRatio = 3 / 4;
+const RoundCommentEngine = {
     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;
-    },
-    getCornerPoints(rectangle) {
-        return getRightArrowPoints(rectangle);
+        const x1 = rectangle.x;
+        const y1 = rectangle.y;
+        const x2 = rectangle.x + rectangle.width;
+        const y2 = rectangle.y + rectangle.height * heightRatio;
+        const radius = getRoundRectangleRadius(rectangle);
+        const point1 = [x1 + radius, y1];
+        const point2 = [x2 - radius, y1];
+        const point3 = [x2, y1 + radius];
+        const point4 = [x2, y2 - radius];
+        const point5 = [x2 - radius, y2];
+        const point6 = [x1 + radius, y2];
+        const point7 = [x1, y2 - radius];
+        const point8 = [x1, y1 + radius];
+        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, fillStyle: 'solid' });
     },
     isHit(rectangle, point) {
-        const points = getRightArrowPoints(rectangle);
-        return isPointInPolygon(point, points);
+        const points = [
+            [rectangle.x + rectangle.width / 4, rectangle.y + (rectangle.height * 3) / 4],
+            [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height],
+            [rectangle.x + rectangle.width / 2, rectangle.y + (rectangle.height * 3) / 4]
+        ];
+        rectangle.height = (rectangle.height * 3) / 4;
+        return isPointInPolygon(point, points) || isPointInRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
+    },
+    getCornerPoints(rectangle) {
+        return getRoundCommentPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        const cornerPoints = getRightArrowPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+        return getNearestPointBetweenPointAndSegments(point, getRoundCommentPoints(rectangle));
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getRightArrowPoints(rectangle);
+        const corners = getRoundCommentPoints(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]
+            [rectangle.x + rectangle.width / 2, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height * heightRatio],
+            [rectangle.x, rectangle.y + rectangle.height / 2]
         ];
+    },
+    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 * heightRatio - height) / 2
+        };
     }
 };
-const getRightArrowPoints = (rectangle) => {
+const getRoundCommentPoints = (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.y],
+        [rectangle.x + rectangle.width, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height * heightRatio],
+        [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height * heightRatio],
+        [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height * heightRatio],
+        [rectangle.x, rectangle.y + rectangle.height * heightRatio]
+    ];
+};
+
+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 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 * 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]
+        [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],
+        [rectangle.x + (rectangle.width * 18.61) / 96, rectangle.y + rectangle.height],
+        [rectangle.x + (rectangle.width * 24.2235871) / 96, rectangle.y + (rectangle.height * 57.7254249) / 91],
+        [rectangle.x, rectangle.y + (rectangle.height * 34.5491503) / 91],
+        [rectangle.x + (rectangle.width * 33.3053687) / 96, rectangle.y + (rectangle.height * 29.7745751) / 91],
+        [rectangle.x + rectangle.width / 2, rectangle.y],
+        [rectangle.x + (rectangle.width * 62.6946313) / 96, rectangle.y + (rectangle.height * 29.7745751) / 91],
+        [rectangle.x + rectangle.width, rectangle.y + (rectangle.height * 34.5491503) / 91],
+        [rectangle.x + (rectangle.width * 71.7764129) / 96, rectangle.y + (rectangle.height * 57.7254249) / 91],
+        [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 RoundRectangleEngine = {
+const TerminalEngine = {
     draw(board, rectangle, options) {
-        return drawRoundRectangle(PlaitBoard.getRoughSVG(board), rectangle.x, rectangle.y, rectangle.x + rectangle.width, rectangle.y + rectangle.height, { ...options, fillStyle: 'solid' }, false, getRoundRectangleRadius(rectangle));
+        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) {
-        return isPointInRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
+        return isPointInRoundRectangle(point, rectangle, getStartEndRadius(rectangle));
     },
     getCornerPoints(rectangle) {
         return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
+        return getNearestPointBetweenPointAndRoundRectangle(point, rectangle, getStartEndRadius(rectangle));
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
@@ -678,8 +875,8 @@ const RoundRectangleEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     }
 };
-const getRoundRectangleRadius = (rectangle) => {
-    return Math.min(rectangle.width * 0.1, rectangle.height * 0.1);
+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;
@@ -711,57 +908,21 @@ function getNearestPointBetweenPointAndRoundRectangle(point, rectangle, radius)
     return result;
 }
 
-const heightRatio = 3 / 4;
-const RoundCommentEngine = {
-    draw(board, rectangle, options) {
-        const rs = PlaitBoard.getRoughSVG(board);
-        const x1 = rectangle.x;
-        const y1 = rectangle.y;
-        const x2 = rectangle.x + rectangle.width;
-        const y2 = rectangle.y + rectangle.height * heightRatio;
-        const radius = getRoundRectangleRadius(rectangle);
-        const point1 = [x1 + radius, y1];
-        const point2 = [x2 - radius, y1];
-        const point3 = [x2, y1 + radius];
-        const point4 = [x2, y2 - radius];
-        const point5 = [x2 - radius, y2];
-        const point6 = [x1 + radius, y2];
-        const point7 = [x1, y2 - radius];
-        const point8 = [x1, y1 + radius];
-        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);
-    },
-    isHit(rectangle, point) {
-        const points = [
-            [rectangle.x + rectangle.width / 4, rectangle.y + (rectangle.height * 3) / 4],
-            [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height],
-            [rectangle.x + rectangle.width / 2, rectangle.y + (rectangle.height * 3) / 4]
-        ];
-        rectangle.height = (rectangle.height * 3) / 4;
-        return isPointInPolygon(point, points) || isPointInRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
-    },
-    getCornerPoints(rectangle) {
-        return getRoundCommentPoints(rectangle);
-    },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, getRoundCommentPoints(rectangle));
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getRoundCommentPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
-    },
-    getConnectorPoints(rectangle) {
-        return [
-            [rectangle.x + rectangle.width / 2, rectangle.y],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
-            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height * heightRatio],
-            [rectangle.x, rectangle.y + rectangle.height / 2]
-        ];
+const getManualInputPoints = (rectangle) => {
+    return [
+        [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) {
+    getTextRectangle: (element) => {
         const elementRectangle = getRectangleByPoints(element.points);
         const strokeWidth = getStrokeWidthByElement(element);
         const height = element.textHeight;
@@ -770,208 +931,231 @@ const RoundCommentEngine = {
             height,
             width: width > 0 ? width : 0,
             x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
-            y: elementRectangle.y + (elementRectangle.height * heightRatio - height) / 2
+            y: elementRectangle.y + elementRectangle.height / 4 + ((elementRectangle.height * 3) / 4 - height) / 2
         };
     }
-};
-const getRoundCommentPoints = (rectangle) => {
+});
+
+const getPreparationPoints = (rectangle) => {
     return [
-        [rectangle.x, rectangle.y],
-        [rectangle.x + rectangle.width, rectangle.y],
-        [rectangle.x + rectangle.width, rectangle.y + rectangle.height * heightRatio],
-        [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height * heightRatio],
-        [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height],
-        [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height * heightRatio],
-        [rectangle.x, rectangle.y + rectangle.height * heightRatio]
+        [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 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 PreparationEngine = createPolygonEngine({
+    getPolygonPoints: getPreparationPoints,
+    getConnectorPoints: (rectangle) => {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
     },
-    getConnectorPoints(rectangle) {
-        const points = getStarPoints(rectangle);
-        return [points[1], points[3], points[5], points[7], points[9]];
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = (rectangle.width * 2) / 3;
+        rectangle.x += width / 6;
+        return rectangle;
     }
-};
-const getStarPoints = (rectangle) => {
+});
+
+const getManualLoopPoints = (rectangle) => {
     return [
-        [rectangle.x + rectangle.width / 2, rectangle.y + (rectangle.height * 75) / 91],
-        [rectangle.x + (rectangle.width * 18.61) / 96, rectangle.y + rectangle.height],
-        [rectangle.x + (rectangle.width * 24.2235871) / 96, rectangle.y + (rectangle.height * 57.7254249) / 91],
-        [rectangle.x, rectangle.y + (rectangle.height * 34.5491503) / 91],
-        [rectangle.x + (rectangle.width * 33.3053687) / 96, rectangle.y + (rectangle.height * 29.7745751) / 91],
-        [rectangle.x + rectangle.width / 2, rectangle.y],
-        [rectangle.x + (rectangle.width * 62.6946313) / 96, rectangle.y + (rectangle.height * 29.7745751) / 91],
-        [rectangle.x + rectangle.width, rectangle.y + (rectangle.height * 34.5491503) / 91],
-        [rectangle.x + (rectangle.width * 71.7764129) / 96, rectangle.y + (rectangle.height * 57.7254249) / 91],
-        [rectangle.x + (rectangle.width * 77.3892626) / 96, rectangle.y + rectangle.height]
+        [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 TrapezoidEngine = {
-    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;
-    },
-    isHit(rectangle, point) {
-        const points = getTrapezoidPoints(rectangle);
-        return isPointInPolygon(point, points);
-    },
-    getNearestPoint(rectangle, point) {
-        const cornerPoints = getTrapezoidPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
-    },
-    getConnectorPoints(rectangle) {
-        const points = getTrapezoidPoints(rectangle);
-        return getCenterPointsOnPolygon(points);
-    },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getTrapezoidPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+const ManualLoopEngine = createPolygonEngine({
+    getPolygonPoints: getManualLoopPoints,
+    getConnectorPoints: (rectangle) => {
+        const cornerPoints = getManualLoopPoints(rectangle);
+        return getCenterPointsOnPolygon(cornerPoints);
     },
-    getCornerPoints(rectangle) {
-        return getTrapezoidPoints(rectangle);
+    getTextRectangle(element) {
+        const rectangle = getTextRectangle(element);
+        const width = rectangle.width;
+        rectangle.width = (rectangle.width * 3) / 4;
+        rectangle.x += width / 8;
+        return rectangle;
     }
-};
-const getTrapezoidPoints = (rectangle) => {
+});
+
+const getMergePoints = (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]
+        [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;
     },
-    getNearestPoint(rectangle, point) {
-        const cornerPoints = getTrianglePoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
     },
-    getConnectorPoints(rectangle) {
-        const cornerPoints = getTrianglePoints(rectangle);
-        const lineCenterPoints = getCenterPointsOnPolygon(cornerPoints);
-        return [...lineCenterPoints, ...cornerPoints];
+    getNearestPoint(rectangle, point) {
+        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;
     },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getTrianglePoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+    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);
     },
-    getCornerPoints(rectangle) {
-        return getTrianglePoints(rectangle);
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(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 TwoWayArrowEngine = {
+const StoredDataEngine = {
     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);
+        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;
     },
     isHit(rectangle, point) {
-        const points = getTwoWayArrowPoints(rectangle);
-        return isPointInPolygon(point, points);
+        //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 RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        const cornerPoints = getTwoWayArrowPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+        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;
     },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = getTwoWayArrowPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+    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.y + rectangle.height / 2],
-            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+            [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 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
+    [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];
@@ -979,7 +1163,7 @@ const getEngine = (shape) => {
 
 const getShape = (value) => {
     if (PlaitDrawElement.isImage(value)) {
-        return GeometryShape.rectangle;
+        return BasicShapes.rectangle;
     }
     return value.shape;
 };
@@ -987,10 +1171,14 @@ const getShape = (value) => {
 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 +1189,8 @@ const createGeometryElement = (shape, points, text, options) => {
         text: buildText(text, alignment),
         points,
         ...textOptions,
-        ...options
+        ...options,
+        ...flowchartOptions
     };
 };
 const getPointsByCenterPoint = (point, width, height) => {
@@ -1073,6 +1262,9 @@ const getEdgeOnPolygonByPoint = (corners, point) => {
     }
     return null;
 };
+const getDefaultFlowchartProperty = (symbol) => {
+    return DefaultFlowchartPropertyMap[symbol];
+};
 
 const drawLineArrow = (element, points, options) => {
     const arrowG = createG();
@@ -1112,11 +1304,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: {
@@ -1593,7 +1785,7 @@ const PlaitDrawElement = {
         return value.type === 'line';
     },
     isText: (value) => {
-        return value.type === 'geometry' && value.shape === GeometryShape.text;
+        return value.type === 'geometry' && value.shape === BasicShapes.text;
     },
     isImage: (value) => {
         return value.type === 'image';
@@ -1608,6 +1800,12 @@ const PlaitDrawElement = {
     },
     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);
     }
 };
 
@@ -1618,7 +1816,7 @@ class GeometryShapeGenerator extends Generator {
     baseDraw(element, data) {
         const rectangle = getRectangleByPoints(element.points);
         const shape = element.shape;
-        if (shape === GeometryShape.text) {
+        if (shape === BasicShapes.text) {
             return;
         }
         const strokeWidth = getStrokeWidthByElement(element);
@@ -1636,15 +1834,15 @@ class GeometryShapeGenerator extends Generator {
 
 const insertGeometry = (board, points, shape) => {
     let newElement = createGeometryElement(shape, points, '', {
-        strokeColor: DefaultGeometryProperty.strokeColor,
-        strokeWidth: DefaultGeometryProperty.strokeWidth
+        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(GeometryShape.text, points, text);
+    let newElement = createGeometryElement(BasicShapes.text, points, text);
     Transforms.insertNode(board, newElement, [board.children.length]);
     clearSelectedElement(board);
     addSelectedElement(board, newElement);
@@ -1864,7 +2062,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 +2079,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 +2320,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',
@@ -2174,15 +2376,15 @@ const withGeometryCreateByDrag = (board) => {
         const pointer = PlaitBoard.getPointer(board);
         if (dragMode) {
             const points = getDefaultGeometryPoints(pointer, movingPoint);
-            if (pointer === GeometryShape.text) {
+            if (pointer === BasicShapes.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
+                    strokeColor: DefaultBasicShapeProperty.strokeColor,
+                    strokeWidth: DefaultBasicShapeProperty.strokeWidth
                 });
                 geometryGenerator.draw(temporaryElement, geometryShapeG);
                 PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
@@ -2198,7 +2400,7 @@ const withGeometryCreateByDrag = (board) => {
         if (dragMode) {
             const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             const points = getDefaultGeometryPoints(pointer, targetPoint);
-            if (pointer === GeometryShape.text) {
+            if (pointer === BasicShapes.text) {
                 DrawTransforms.insertText(board, points);
             }
             else {
@@ -2235,9 +2437,9 @@ const withGeometryCreateByDrawing = (board) => {
             start = point;
             const pointer = PlaitBoard.getPointer(board);
             preventTouchMove(board, event, true);
-            if (pointer === GeometryShape.text) {
+            if (pointer === BasicShapes.text) {
                 const points = getDefaultGeometryPoints(pointer, point);
-                const textElement = createGeometryElement(GeometryShape.text, points, DefaultTextProperty.text);
+                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text);
                 Transforms.insertNode(board, textElement, [board.children.length]);
                 clearSelectedElement(board);
                 addSelectedElement(board, textElement);
@@ -2254,11 +2456,11 @@ const withGeometryCreateByDrawing = (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) {
+        if (drawMode && pointer !== BasicShapes.text) {
             const points = normalizeShapePoints([start, movingPoint], isShift);
             temporaryElement = createGeometryElement(pointer, points, '', {
-                strokeColor: DefaultGeometryProperty.strokeColor,
-                strokeWidth: DefaultGeometryProperty.strokeWidth
+                strokeColor: DefaultBasicShapeProperty.strokeColor,
+                strokeWidth: DefaultBasicShapeProperty.strokeWidth
             });
             geometryGenerator.draw(temporaryElement, geometryShapeG);
             PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
@@ -2273,10 +2475,10 @@ const withGeometryCreateByDrawing = (board) => {
             if (Math.hypot(width, height) === 0) {
                 const pointer = PlaitBoard.getPointer(board);
                 const points = getDefaultGeometryPoints(pointer, targetPoint);
-                if (pointer !== GeometryShape.text) {
+                if (pointer !== BasicShapes.text) {
                     temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeColor: DefaultGeometryProperty.strokeColor,
-                        strokeWidth: DefaultGeometryProperty.strokeWidth
+                        strokeColor: DefaultBasicShapeProperty.strokeColor,
+                        strokeWidth: DefaultBasicShapeProperty.strokeWidth
                     });
                 }
             }
@@ -2297,9 +2499,21 @@ const withGeometryCreateByDrawing = (board) => {
     return board;
 };
 const getDefaultGeometryPoints = (pointer, targetPoint) => {
-    return pointer === GeometryShape.text
-        ? getPointsByCenterPoint(targetPoint, DefaultTextProperty.width, DefaultTextProperty.height)
-        : getPointsByCenterPoint(targetPoint, DefaultGeometryProperty.width, DefaultGeometryProperty.height);
+    const defaultProperty = getGeometryDefaultProperty(pointer);
+    return getPointsByCenterPoint(targetPoint, defaultProperty.width, defaultProperty.height);
+};
+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 getTemporaryTextG = (movingPoint) => {
     const textG = createG();
@@ -2836,10 +3050,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',
@@ -2938,5 +3152,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, 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, isHitLineText, isHitPolyLine, removeDuplicatePoints, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map