@plait/draw 0.1.0-next.9 → 0.29.0

package/fesm2022/plait-draw.mjs

@@ -1,21 +1,50 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, RectangleClient, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, arrowPoints, createPath, drawLinearPath, distanceBetweenPointAndSegments, createMask, createRect, getElementById, findElements, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, isSelectionMoving, PlaitPluginElementComponent, transformPoint, toPoint, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElements, isPolylineHitRectangle } from '@plait/core';
+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 { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { getRectangleByPoints, getFactorByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, getDirectionFactor, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
-import { Alignment, buildText, AlignEditor, TextManage, DEFAULT_FONT_SIZE, getTextFromClipboard, getTextSize } from '@plait/text';
 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 || (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;
@@ -29,79 +58,6 @@ const PlaitGeometry = {
     }
 };
 
-var LineMarkerType;
-(function (LineMarkerType) {
-    LineMarkerType["arrow"] = "arrow";
-    LineMarkerType["none"] = "none";
-    LineMarkerType["openTriangle"] = "open-triangle";
-    LineMarkerType["solidTriangle"] = "solid-triangle";
-    LineMarkerType["sharpArrow"] = "sharp-arrow";
-})(LineMarkerType || (LineMarkerType = {}));
-var LineShape;
-(function (LineShape) {
-    LineShape["straight"] = "straight";
-    LineShape["curve"] = "curve";
-    LineShape["elbow"] = "elbow";
-})(LineShape || (LineShape = {}));
-var LineHandleKey;
-(function (LineHandleKey) {
-    LineHandleKey["source"] = "source";
-    LineHandleKey["target"] = "target";
-})(LineHandleKey || (LineHandleKey = {}));
-const PlaitLine = {
-    getTextEditors(element) {
-        const component = PlaitElement.getComponent(element);
-        if (component) {
-            const manage = component.textManages.find(manage => manage.isEditing);
-            if (manage) {
-                return [manage.componentRef.instance.editor];
-            }
-            else {
-                return component.textManages.map(manage => manage.componentRef.instance.editor);
-            }
-        }
-        throw new Error('can not get correctly component in get text editor');
-    },
-    isSourceMark(line, markType) {
-        return line.source.marker === markType;
-    },
-    isTargetMark(line, markType) {
-        return line.target.marker === markType;
-    },
-    isBoundElementOfSource(line, element) {
-        return line.source.boundId === element.id;
-    },
-    isBoundElementOfTarget(line, element) {
-        return line.target.boundId === element.id;
-    }
-};
-
-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;
-    },
-    isDrawElement: (value) => {
-        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-};
-
 const ShapeDefaultSpace = {
     rectangleAndText: 4
 };
@@ -115,7 +71,7 @@ const DefaultGeometryActiveStyle = {
     strokeWidth: ACTIVE_STROKE_WIDTH,
     selectionStrokeWidth: ACTIVE_STROKE_WIDTH
 };
-const DefaultGeometryProperty = {
+const DefaultBasicShapeProperty = {
     width: 100,
     height: 100,
     strokeColor: '#333',
@@ -127,27 +83,60 @@ const DefaultTextProperty = {
     text: '文本'
 };
 const GeometryThreshold = {
-    defaultTextMaxWidth: 34 * 14,
-};
-
-var DrawPointerType;
-(function (DrawPointerType) {
-    DrawPointerType["text"] = "text";
-    DrawPointerType["rectangle"] = "rectangle";
-    DrawPointerType["line"] = "line";
-    DrawPointerType["diamond"] = "diamond";
-    DrawPointerType["roundRectangle"] = "roundRectangle";
-    DrawPointerType["parallelogram"] = "parallelogram";
-    DrawPointerType["ellipse"] = "ellipse";
-})(DrawPointerType || (DrawPointerType = {}));
-const GeometryPointer = [
-    DrawPointerType.rectangle,
-    DrawPointerType.text,
-    DrawPointerType.diamond,
-    DrawPointerType.ellipse,
-    DrawPointerType.parallelogram,
-    DrawPointerType.roundRectangle
-];
+    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(BasicShapes), ...Object.keys(FlowchartSymbols)];
+};
+const getBasicPointers = () => {
+    return Object.keys(BasicShapes);
+};
+const getFlowchartPointers = () => {
+    return Object.keys(FlowchartSymbols);
+};
+const getLinePointers = () => {
+    return Object.keys(LineShape);
+};
+
+const DEFAULT_IMAGE_WIDTH = 1000;
 
 const getStrokeWidthByElement = (element) => {
     if (PlaitDrawElement.isText(element)) {
@@ -171,26 +160,138 @@ const getStrokeStyleByElement = (element) => {
     return element.strokeStyle || StrokeStyle.solid;
 };
 
-const DiamondEngine = {
+const heightRatio$1 = 3 / 4;
+const CommentEngine = {
     draw(board, rectangle, options) {
-        const points = RectangleClient.getEdgeCenterPoints(rectangle);
+        const points = getCommentPoints(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);
+        const parallelogramPoints = getCommentPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getCommentPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        const connectorPoints = RectangleClient.getEdgeCenterPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, connectorPoints);
+        return getNearestPointBetweenPointAndSegments(point, getCommentPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getCommentPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    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$1 - height) / 2
+        };
+    }
+};
+const getCommentPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height * heightRatio$1],
+        [rectangle.x + (rectangle.width * 3) / 5, rectangle.y + rectangle.height * heightRatio$1],
+        [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
+        [rectangle.x + (rectangle.width * 2) / 5, rectangle.y + rectangle.height * heightRatio$1],
+        [rectangle.x, rectangle.y + rectangle.height * heightRatio$1]
+    ];
+};
+
+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],
+        [rectangle.x + (rectangle.width * 3) / 4, rectangle.y],
+        [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height / 4],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 4],
+        [rectangle.x + rectangle.width, rectangle.y + (rectangle.height * 3) / 4],
+        [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + (rectangle.height * 3) / 4],
+        [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width / 4, rectangle.y + (rectangle.height * 3) / 4],
+        [rectangle.x, rectangle.y + (rectangle.height * 3) / 4],
+        [rectangle.x, rectangle.y + rectangle.height / 4],
+        [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height / 4]
+    ];
 };
+const CrossEngine = createPolygonEngine({
+    getPolygonPoints: getCrossPoints,
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    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) {
@@ -202,12 +303,31 @@ const EllipseEngine = {
         const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
         return isPointInEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
     },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
         const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
         return getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
     },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+        const a = rectangle.width / 2;
+        const b = rectangle.height / 2;
+        const slope = getTangentSlope(point[0], point[1], a, b);
+        return getVectorBySlope(point[0], point[1], slope);
+    },
     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) {
@@ -245,28 +365,110 @@ function getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation =
     const signY = point[1] > center[1] ? 1 : -1;
     return [center[0] + a * tx * signX, center[1] + b * ty * signY];
 }
+/**
+ * the result of slope is based on Cartesian coordinate system
+ * x, y are based on the position in the Cartesian coordinate system
+ */
+function getTangentSlope(x, y, a, b) {
+    const k = (-b * b * x) / (a * a * y);
+    return k;
+}
+/**
+ * x, y are based on the position in the Cartesian coordinate system
+ */
+function getVectorBySlope(x, y, slope) {
+    const deltaX = 30;
+    const deltaY = -slope * deltaX;
+    let start = [0 - deltaX, 0 - deltaY];
+    let end = [0 + deltaX, 0 + deltaY];
+    // y < 0 acts on the lower half of the x-axis, with the starting point at the top and the end point at the bottom.
+    if (y < 0) {
+        const temp = start;
+        start = end;
+        end = temp;
+    }
+    const vector = [end[0] - start[0], end[1] - start[1]];
+    return vector;
+}
 
-const ParallelogramEngine = {
-    draw(board, rectangle, options) {
-        const points = getParallelogramPoints(rectangle);
-        const rs = PlaitBoard.getRoughSVG(board);
-        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
-        setStrokeLinecap(polygon, 'round');
-        return polygon;
-    },
-    isHit(rectangle, point) {
-        const parallelogramPoints = getParallelogramPoints(rectangle);
-        return isPointInPolygon(point, parallelogramPoints);
+const getHexagonPoints = (rectangle) => {
+    return [
+        [rectangle.x + rectangle.width / 4, rectangle.y],
+        [rectangle.x + (rectangle.width * 3) / 4, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height / 2]
+    ];
+};
+const HexagonEngine = createPolygonEngine({
+    getPolygonPoints: getHexagonPoints,
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
     },
-    getNearestPoint(rectangle, point) {
-        const cornerPoints = getParallelogramPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    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],
+        [rectangle.x + rectangle.width * 0.32, rectangle.y],
+        [rectangle.x + rectangle.width * 0.32, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height * 0.8],
+        [rectangle.x + rectangle.width * 0.32, rectangle.y + rectangle.height * 0.8],
+        [rectangle.x + rectangle.width * 0.32, rectangle.y + rectangle.height]
+    ];
+};
+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) {
-        const cornerPoints = getParallelogramPoints(rectangle);
-        return getCenterPointsOnPolygon(cornerPoints);
+    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],
+        [rectangle.x + (rectangle.width * 7) / 10, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + (rectangle.height * 3) / 10],
+        [rectangle.x + rectangle.width, rectangle.y + (rectangle.height * 7) / 10],
+        [rectangle.x + (rectangle.width * 7) / 10, rectangle.y + rectangle.height],
+        [rectangle.x + (rectangle.width * 3) / 10, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + (rectangle.height * 7) / 10],
+        [rectangle.x, rectangle.y + (rectangle.height * 3) / 10]
+    ];
 };
+const OctagonEngine = createPolygonEngine({
+    getPolygonPoints: getOctagonPoints,
+    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;
+    }
+});
+
 const getParallelogramPoints = (rectangle) => {
     return [
         [rectangle.x + rectangle.width / 4, rectangle.y],
@@ -275,6 +477,90 @@ const getParallelogramPoints = (rectangle) => {
         [rectangle.x, rectangle.y + rectangle.height]
     ];
 };
+const ParallelogramEngine = createPolygonEngine({
+    getPolygonPoints: getParallelogramPoints,
+    getConnectorPoints: (rectangle) => {
+        const cornerPoints = getParallelogramPoints(rectangle);
+        return getCenterPointsOnPolygon(cornerPoints);
+    },
+    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],
+        [rectangle.x + rectangle.width, rectangle.y + (rectangle.height * 2) / 5],
+        [rectangle.x + (rectangle.width * 4) / 5, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width / 5, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + (rectangle.height * 2) / 5]
+    ];
+};
+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],
+        [rectangle.x + (rectangle.width * 3) / 5, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + (rectangle.width * 3) / 5, rectangle.y + rectangle.height],
+        [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 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) {
@@ -284,15 +570,48 @@ const RectangleEngine = {
         const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
         return RectangleClient.isHit(rectangle, rangeRectangle);
     },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
-        const cornerPoints = RectangleClient.getCornerPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(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 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 RoundRectangleEngine = {
     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));
@@ -300,8 +619,16 @@ const RoundRectangleEngine = {
     isHit(rectangle, point) {
         return isPointInRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
     },
+    getCornerPoints(rectangle) {
+        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);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -310,6 +637,247 @@ const RoundRectangleEngine = {
 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 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, fillStyle: 'solid' });
+    },
+    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]
+        ];
+    },
+    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 getRoundCommentPoints = (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]
+    ];
+};
+
+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 * 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 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, getStartEndRadius(rectangle));
+    },
+    isHit(rectangle, point) {
+        return isPointInRoundRectangle(point, rectangle, getStartEndRadius(rectangle));
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndRoundRectangle(point, rectangle, getStartEndRadius(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(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);
@@ -340,25 +908,277 @@ function getNearestPointBetweenPointAndRoundRectangle(point, rectangle, radius)
     return result;
 }
 
+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) => {
+        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 DelayEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        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) {
+        //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 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) {
+        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;
+    },
+    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 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 = {
-    [GeometryShape.rectangle]: RectangleEngine,
-    [GeometryShape.diamond]: DiamondEngine,
-    [GeometryShape.ellipse]: EllipseEngine,
-    [GeometryShape.parallelogram]: ParallelogramEngine,
-    [GeometryShape.roundRectangle]: RoundRectangleEngine,
-    [GeometryShape.text]: RectangleEngine
+    [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;
+};
+
 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',
@@ -369,7 +1189,8 @@ const createGeometryElement = (shape, points, text, options) => {
         text: buildText(text, alignment),
         points,
         ...textOptions,
-        ...options
+        ...options,
+        ...flowchartOptions
     };
 };
 const getPointsByCenterPoint = (point, width, height) => {
@@ -393,14 +1214,15 @@ const drawBoundMask = (board, element) => {
     const G = createG();
     const rectangle = getRectangleByPoints(element.points);
     const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    const maskG = drawGeometry(board, activeRectangle, element.shape, {
+    const shape = getShape(element);
+    const maskG = drawGeometry(board, activeRectangle, shape, {
         stroke: SELECTION_BORDER_COLOR,
         strokeWidth: 1,
         fill: SELECTION_FILL_COLOR,
         fillStyle: 'solid'
     });
     G.appendChild(maskG);
-    const connectorPoints = getEngine(element.shape).getConnectorPoints(activeRectangle);
+    const connectorPoints = getEngine(shape).getConnectorPoints(activeRectangle);
     connectorPoints.forEach(point => {
         const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 6, {
             stroke: '#999999',
@@ -418,7 +1240,8 @@ const drawGeometry = (board, outerRectangle, shape, options) => {
 const getNearestPoint = (element, point, inflateDelta = 0) => {
     const rectangle = getRectangleByPoints(element.points);
     const activeRectangle = RectangleClient.inflate(rectangle, inflateDelta);
-    return getEngine(element.shape).getNearestPoint(activeRectangle, point);
+    const shape = getShape(element);
+    return getEngine(shape).getNearestPoint(activeRectangle, point);
 };
 const getCenterPointsOnPolygon = (points) => {
     const centerPoint = [];
@@ -428,6 +1251,20 @@ const getCenterPointsOnPolygon = (points) => {
     }
     return centerPoint;
 };
+const getEdgeOnPolygonByPoint = (corners, point) => {
+    for (let index = 1; index <= corners.length; index++) {
+        let start = corners[index - 1];
+        let end = index === corners.length ? corners[0] : corners[index];
+        const distance = distanceBetweenPointAndSegment(point[0], point[1], start[0], start[1], end[0], end[1]);
+        if (distance < 1) {
+            return [start, end];
+        }
+    }
+    return null;
+};
+const getDefaultFlowchartProperty = (symbol) => {
+    return DefaultFlowchartPropertyMap[symbol];
+};
 
 const drawLineArrow = (element, points, options) => {
     const arrowG = createG();
@@ -435,16 +1272,19 @@ const drawLineArrow = (element, points, options) => {
         return null;
     }
     if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
-        const sourceArrow = getArrow(element, element.source.marker, points[1], points[0], options);
+        const source = getExtendPoint(points[0], points[1], 24);
+        const sourceArrow = getArrow(element, { marker: element.source.marker, source, target: points[0], isSource: true }, options);
         sourceArrow && arrowG.appendChild(sourceArrow);
     }
     if (!PlaitLine.isTargetMark(element, LineMarkerType.none)) {
-        const arrow = getArrow(element, element.target.marker, points[points.length - 2], points[points.length - 1], options);
+        const source = getExtendPoint(points[points.length - 1], points[points.length - 2], 24);
+        const arrow = getArrow(element, { marker: element.target.marker, source, target: points[points.length - 1], isSource: false }, options);
         arrow && arrowG.appendChild(arrow);
     }
     return arrowG;
 };
-const getArrow = (element, marker, source, target, options) => {
+const getArrow = (element, arrowOptions, options) => {
+    const { marker, source, target, isSource } = arrowOptions;
     let targetArrow;
     switch (marker) {
         case LineMarkerType.openTriangle: {
@@ -463,16 +1303,27 @@ const getArrow = (element, marker, source, target, options) => {
             targetArrow = drawSharpArrow(source, target, options);
             break;
         }
+        case LineMarkerType.oneSideUp: {
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
+            break;
+        }
+        case LineMarkerType.oneSideDown: {
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
+            break;
+        }
+        case LineMarkerType.hollowTriangle: {
+            targetArrow = drawHollowTriangleArrow(source, target, options);
+            break;
+        }
+        case LineMarkerType.singleSlash: {
+            targetArrow = drawSingleSlash(source, target, isSource, options);
+            break;
+        }
     }
     return targetArrow;
 };
 const drawSharpArrow = (source, target, options) => {
-    const directionFactor = getFactorByPoints(source, target);
     const startPoint = target;
-    // const startPoint: Point = [
-    //     target[0],
-    //     target[1]
-    // ];
     const { pointLeft, pointRight } = arrowPoints(source, target, 12, 20);
     const g = createG();
     const path = createPath();
@@ -487,10 +1338,7 @@ const drawSharpArrow = (source, target, options) => {
 const drawArrow = (element, source, target, options) => {
     const directionFactor = getFactorByPoints(source, target);
     const strokeWidth = getStrokeWidthByElement(element);
-    const endPoint = [
-        target[0] + strokeWidth * directionFactor.x / 2,
-        target[1] + strokeWidth * directionFactor.y / 2
-    ];
+    const endPoint = [target[0] + (strokeWidth * directionFactor.x) / 2, target[1] + (strokeWidth * directionFactor.y) / 2];
     const middlePoint = [endPoint[0] - 8 * directionFactor.x, endPoint[1] - 8 * directionFactor.y];
     const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 30);
     const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], { ...options, fill: options.stroke }, true);
@@ -506,13 +1354,26 @@ const drawSolidTriangle = (source, target, options) => {
 const drawOpenTriangle = (element, source, target, options) => {
     const directionFactor = getFactorByPoints(source, target);
     const strokeWidth = getStrokeWidthByElement(element);
-    const endPoint = [
-        target[0] + strokeWidth * directionFactor.x / 2,
-        target[1] + strokeWidth * directionFactor.y / 2
-    ];
+    const endPoint = [target[0] + (strokeWidth * directionFactor.x) / 2, target[1] + (strokeWidth * directionFactor.y) / 2];
     const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 40);
     return drawLinearPath([pointLeft, endPoint, pointRight], options);
 };
+const drawOneSideArrow = (source, target, side, options) => {
+    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 40);
+    return drawLinearPath([side === 'up' ? pointRight : pointLeft, target], options);
+};
+const drawSingleSlash = (source, target, isSource, options) => {
+    source = getExtendPoint(target, source, 12);
+    const middlePoint = getExtendPoint(target, source, 6);
+    const angle = isSource ? 120 : 60;
+    const start = rotate(...source, ...middlePoint, (angle * Math.PI) / 180);
+    const end = rotate(...target, ...middlePoint, (angle * Math.PI) / 180);
+    return drawLinearPath([start, end], options);
+};
+const drawHollowTriangleArrow = (source, target, options) => {
+    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 30);
+    return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
+};
 
 const createLineElement = (shape, points, source, target, options) => {
     return {
@@ -528,28 +1389,127 @@ const createLineElement = (shape, points, source, target, options) => {
     };
 };
 const getLinePoints = (board, element) => {
-    return element.shape === LineShape.elbow ? getElbowPoints(board, element) : getStraightPoints(board, element);
+    switch (element.shape) {
+        case LineShape.elbow: {
+            return getElbowPoints(board, element);
+        }
+        case LineShape.curve: {
+            return getCurvePoints(board, element);
+        }
+        default: {
+            return PlaitLine.getPoints(board, element);
+        }
+    }
 };
-const getStraightPoints = (board, element) => {
-    return [getSourcePoint(board, element), getTargetPoint(board, element)];
+const getLineHandleRefPair = (board, element) => {
+    const strokeWidth = getStrokeWidthByElement(element);
+    const sourceBoundElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
+    const targetBoundElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
+    let sourcePoint = sourceBoundElement ? getConnectionPoint(sourceBoundElement, element.source.connection) : element.points[0];
+    let targetPoint = targetBoundElement
+        ? getConnectionPoint(targetBoundElement, element.target.connection)
+        : element.points[element.points.length - 1];
+    let sourceDirection = getDirectionByVector([targetPoint[0] - sourcePoint[0], targetPoint[1] - sourcePoint[1]]);
+    let targetDirection = getOppositeDirection(sourceDirection);
+    const sourceFactor = getDirectionFactor(sourceDirection);
+    const targetFactor = getDirectionFactor(targetDirection);
+    const sourceHandleRef = {
+        key: LineHandleKey.source,
+        point: sourcePoint,
+        direction: sourceDirection,
+        vector: [sourceFactor.x, sourceFactor.y]
+    };
+    const targetHandleRef = {
+        key: LineHandleKey.target,
+        point: targetPoint,
+        direction: targetDirection,
+        vector: [targetFactor.x, targetFactor.y]
+    };
+    if (sourceBoundElement) {
+        const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.source) ? 0 : strokeWidth;
+        const sourceVector = getVectorByConnection(sourceBoundElement, element.source.connection);
+        const direction = getDirectionByVector(sourceVector);
+        sourceDirection = direction ? direction : sourceDirection;
+        sourcePoint = getConnectionPoint(sourceBoundElement, element.source.connection, sourceDirection, connectionOffset);
+        sourceHandleRef.boundElement = sourceBoundElement;
+        sourceHandleRef.direction = sourceDirection;
+        sourceHandleRef.point = sourcePoint;
+        sourceHandleRef.vector = sourceVector;
+    }
+    if (targetBoundElement) {
+        const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.target) ? 0 : strokeWidth;
+        const targetVector = getVectorByConnection(targetBoundElement, element.target.connection);
+        const direction = getDirectionByVector(targetVector);
+        targetDirection = direction ? direction : targetDirection;
+        targetPoint = getConnectionPoint(targetBoundElement, element.target.connection, targetDirection, connectionOffset);
+        targetHandleRef.boundElement = targetBoundElement;
+        targetHandleRef.direction = targetDirection;
+        targetHandleRef.point = targetPoint;
+        targetHandleRef.vector = targetVector;
+    }
+    return { source: sourceHandleRef, target: targetHandleRef };
 };
 const getElbowPoints = (board, element) => {
     if (element.points.length === 2) {
-        const source = getSourcePoint(board, element);
-        const target = getTargetPoint(board, element);
-        let sourceDirection = source[0] < target[0] ? Direction.right : Direction.left;
-        let targetDirection = source[0] < target[0] ? Direction.left : Direction.right;
-        if (element.source.connection) {
-            sourceDirection = getDirectionByPoint(element.source.connection, sourceDirection);
-        }
-        if (element.target.connection) {
-            targetDirection = getDirectionByPoint(element.target.connection, targetDirection);
-        }
-        const points = getPoints(source, sourceDirection, target, targetDirection, 30);
+        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);
+        points = removeDuplicatePoints(points);
         return points;
     }
     return element.points;
 };
+const getCurvePoints = (board, element) => {
+    if (element.points.length === 2) {
+        const handleRefPair = getLineHandleRefPair(board, element);
+        const { source, target } = handleRefPair;
+        const sourceBoundElement = handleRefPair.source.boundElement;
+        const targetBoundElement = handleRefPair.target.boundElement;
+        let curvePoints = [source.point];
+        const sumDistance = distanceBetweenPointAndPoint(...source.point, ...target.point);
+        const offset = 12 + sumDistance / 3;
+        if (sourceBoundElement) {
+            curvePoints.push(getPointByVector(source.point, source.vector, offset));
+        }
+        if (targetBoundElement) {
+            curvePoints.push(getPointByVector(target.point, target.vector, offset));
+        }
+        const isSingleBound = (sourceBoundElement && !targetBoundElement) || (!sourceBoundElement && targetBoundElement);
+        if (isSingleBound) {
+            curvePoints.push(target.point);
+            const points = Q2C(curvePoints);
+            return pointsOnBezierCurves(points);
+        }
+        if (!sourceBoundElement && !targetBoundElement) {
+            curvePoints.push(getPointByVector(source.point, source.vector, offset));
+            curvePoints.push(getPointByVector(target.point, target.vector, offset));
+        }
+        curvePoints.push(target.point);
+        return pointsOnBezierCurves(curvePoints);
+    }
+    else {
+        //TODO 直接获取贝塞尔曲线上高密度点
+        const points = PlaitLine.getPoints(board, element);
+        const draw = PlaitBoard.getRoughSVG(board).generator.curve(points);
+        let bezierPoints = transformOpsToPoints(draw.sets[0].ops);
+        bezierPoints = removeDuplicatePoints(bezierPoints);
+        return pointsOnBezierCurves(bezierPoints);
+    }
+};
+const transformOpsToPoints = (ops) => {
+    const result = [];
+    for (let item of ops) {
+        if (item.op === 'move') {
+            result.push([item.data[0], item.data[1]]);
+        }
+        else {
+            result.push([item.data[0], item.data[1]]);
+            result.push([item.data[2], item.data[3]]);
+            result.push([item.data[4], item.data[5]]);
+        }
+    }
+    return result;
+};
 const isHitPolyLine = (pathPoints, point, strokeWidth, expand = 0) => {
     const distance = distanceBetweenPointAndSegments(pathPoints, point);
     return distance <= strokeWidth + expand;
@@ -579,20 +1539,28 @@ const drawLine = (board, element) => {
     const strokeLineDash = getLineDashByElement(element);
     const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
     const lineG = createG();
-    const points = getLinePoints(board, element);
-    const line = drawLinearPath(points, options);
-    line.setAttribute('mask', `url(#${element.id})`);
+    let points = getLinePoints(board, element);
+    let line;
+    if (element.shape === LineShape.curve) {
+        //TODO element.points 应为曲线拐点
+        line = PlaitBoard.getRoughSVG(board).curve(points, options);
+    }
+    else {
+        line = drawLinearPath(points, options);
+    }
+    const id = idCreator();
+    line.setAttribute('mask', `url(#${id})`);
     lineG.appendChild(line);
-    const { mask, maskTargetFillRect } = drawMask(board, element);
+    const { mask, maskTargetFillRect } = drawMask(board, element, id);
     lineG.appendChild(mask);
     line.appendChild(maskTargetFillRect);
     const arrow = drawLineArrow(element, points, { stroke: strokeColor, strokeWidth });
     arrow && lineG.appendChild(arrow);
     return lineG;
 };
-function drawMask(board, element) {
+function drawMask(board, element, id) {
     const mask = createMask();
-    mask.setAttribute('id', element.id);
+    mask.setAttribute('id', id);
     const points = getLinePoints(board, element);
     let rectangle = getRectangleByPoints(points);
     rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
@@ -613,33 +1581,16 @@ function drawMask(board, element) {
     maskTargetFillRect.setAttribute('opacity', '0');
     return { mask, maskTargetFillRect };
 }
-const getSourcePoint = (board, element) => {
-    if (element.source.boundId) {
-        const strokeWidth = getStrokeWidthByElement(element);
-        const connectionOffset = PlaitLine.isSourceMark(element, LineMarkerType.none) ? 0 : strokeWidth;
-        const boundElement = getElementById(board, element.source.boundId);
-        return boundElement ? getConnectionPoint(boundElement, element.source.connection, connectionOffset) : element.points[0];
+const getConnectionPoint = (geometry, connection, direction, delta) => {
+    const rectangle = getRectangleByPoints(geometry.points);
+    if (direction && delta) {
+        const directionFactor = getDirectionFactor(direction);
+        const point = RectangleClient.getConnectionPoint(rectangle, connection);
+        return [point[0] + directionFactor.x * delta, point[1] + directionFactor.y * delta];
     }
-    return element.points[0];
-};
-const getTargetPoint = (board, element) => {
-    if (element.target.boundId) {
-        const strokeWidth = getStrokeWidthByElement(element);
-        const connectionOffset = PlaitLine.isTargetMark(element, LineMarkerType.none) ? 0 : strokeWidth;
-        const boundElement = getElementById(board, element.target.boundId);
-        return boundElement
-            ? getConnectionPoint(boundElement, element.target.connection, connectionOffset)
-            : element.points[element.points.length - 1];
+    else {
+        return RectangleClient.getConnectionPoint(rectangle, connection);
     }
-    return element.points[element.points.length - 1];
-};
-const getConnectionPoint = (geometry, connection, offset) => {
-    const rectangle = getRectangleByPoints(geometry.points);
-    const directionFactor = getDirectionFactor(getDirectionByPoint(connection, Direction.bottom));
-    return [
-        rectangle.x + rectangle.width * connection[0] + directionFactor.x * offset,
-        rectangle.y + rectangle.height * connection[1] + directionFactor.y * offset
-    ];
 };
 const transformPointToConnection = (board, point, hitElement) => {
     let rectangle = getRectangleByPoints(hitElement.points);
@@ -650,7 +1601,8 @@ const transformPointToConnection = (board, point, hitElement) => {
     return [(nearestPoint[0] - rectangle.x) / rectangle.width, (nearestPoint[1] - rectangle.y) / rectangle.height];
 };
 const getHitConnectorPoint = (movingPoint, hitElement, rectangle) => {
-    const connector = getEngine(hitElement.shape).getConnectorPoints(rectangle);
+    const shape = getShape(hitElement);
+    const connector = getEngine(shape).getConnectorPoints(rectangle);
     const points = getPointsByCenterPoint(movingPoint, 5, 5);
     const pointRectangle = getRectangleByPoints(points);
     return connector.find(point => {
@@ -674,6 +1626,64 @@ 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;
+    const cos = (target[0] - source[0]) / distance;
+    return [source[0] + extendDistance * cos, source[1] + extendDistance * sin];
+};
+// quadratic Bezier to cubic Bezier
+const Q2C = (points) => {
+    const result = [];
+    const numSegments = points.length / 3;
+    for (let i = 0; i < numSegments; i++) {
+        const start = points[i];
+        const qControl = points[i + 1];
+        const end = points[i + 2];
+        const startDistance = distanceBetweenPointAndPoint(...start, ...qControl);
+        const endDistance = distanceBetweenPointAndPoint(...end, ...qControl);
+        const cControl1 = getExtendPoint(start, qControl, (startDistance * 2) / 3);
+        const cControl2 = getExtendPoint(end, qControl, (endDistance * 2) / 3);
+        result.push(start, cControl1, cControl2, end);
+    }
+    return result;
+};
+const getVectorByConnection = (boundElement, connection) => {
+    const rectangle = getRectangleByPoints(boundElement.points);
+    const shape = getShape(boundElement);
+    const engine = getEngine(shape);
+    let vector = [0, 0];
+    const direction = getDirectionByPointOfRectangle(connection);
+    if (direction) {
+        const factor = getDirectionFactor(direction);
+        return [factor.x, factor.y];
+    }
+    if (engine.getEdgeByConnectionPoint) {
+        const edge = engine.getEdgeByConnectionPoint(rectangle, connection);
+        if (edge) {
+            const lineVector = [edge[1][0] - edge[0][0], edge[1][1] - edge[0][1]];
+            return rotateVectorAnti90(lineVector);
+        }
+    }
+    if (engine.getTangentVectorByConnectionPoint) {
+        const lineVector = engine.getTangentVectorByConnectionPoint(rectangle, connection);
+        if (lineVector) {
+            return rotateVectorAnti90(lineVector);
+        }
+    }
+    return vector;
+};
 
 const getSelectedDrawElements = (board) => {
     const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isDrawElement(value));
@@ -687,6 +1697,117 @@ const getSelectedLineElements = (board) => {
     const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isLine(value));
     return selectedElements;
 };
+const getSelectedImageElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isImage(value));
+    return selectedElements;
+};
+
+var LineMarkerType;
+(function (LineMarkerType) {
+    LineMarkerType["arrow"] = "arrow";
+    LineMarkerType["none"] = "none";
+    LineMarkerType["openTriangle"] = "open-triangle";
+    LineMarkerType["solidTriangle"] = "solid-triangle";
+    LineMarkerType["sharpArrow"] = "sharp-arrow";
+    LineMarkerType["oneSideUp"] = "one-side-up";
+    LineMarkerType["oneSideDown"] = "one-side-down";
+    LineMarkerType["hollowTriangle"] = "hollow-triangle";
+    LineMarkerType["singleSlash"] = "single-slash";
+})(LineMarkerType || (LineMarkerType = {}));
+var LineShape;
+(function (LineShape) {
+    LineShape["straight"] = "straight";
+    LineShape["curve"] = "curve";
+    LineShape["elbow"] = "elbow";
+})(LineShape || (LineShape = {}));
+var LineHandleKey;
+(function (LineHandleKey) {
+    LineHandleKey["source"] = "source";
+    LineHandleKey["target"] = "target";
+})(LineHandleKey || (LineHandleKey = {}));
+const PlaitLine = {
+    getTextEditors(element) {
+        const component = PlaitElement.getComponent(element);
+        if (component) {
+            const manage = component.textManages.find(manage => manage.isEditing);
+            if (manage) {
+                return [manage.componentRef.instance.editor];
+            }
+            else {
+                return component.textManages.map(manage => manage.componentRef.instance.editor);
+            }
+        }
+        throw new Error('can not get correctly component in get text editor');
+    },
+    isSourceMarkOrTargetMark(line, markType, handleKey) {
+        if (handleKey === LineHandleKey.source) {
+            return line.source.marker === markType;
+        }
+        else {
+            return line.target.marker === markType;
+        }
+    },
+    isSourceMark(line, markType) {
+        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.source);
+    },
+    isTargetMark(line, markType) {
+        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 === 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 GeometryShapeGenerator extends Generator {
     canDraw(element, data) {
@@ -695,28 +1816,33 @@ 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);
         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 });
+        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
+        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);
@@ -782,6 +1908,28 @@ const setTextSize = (board, element, textWidth, textHeight) => {
     }
 };
 
+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);
 };
@@ -812,7 +1960,8 @@ const DrawTransforms = {
     resizeLine,
     setLineTexts,
     removeLineText,
-    setLineMark
+    setLineMark,
+    insertImage
 };
 
 class GeometryComponent extends CommonPluginElement {
@@ -830,10 +1979,10 @@ class GeometryComponent extends CommonPluginElement {
             getStrokeWidth: () => {
                 const selectedElements = getSelectedElements(this.board);
                 if (selectedElements.length === 1 && !isSelectionMoving(this.board)) {
-                    return DefaultGeometryActiveStyle.strokeWidth;
+                    return ACTIVE_STROKE_WIDTH;
                 }
                 else {
-                    return DefaultGeometryActiveStyle.selectionStrokeWidth;
+                    return ACTIVE_STROKE_WIDTH;
                 }
             },
             getStrokeOpacity: () => {
@@ -896,6 +2045,10 @@ class GeometryComponent extends CommonPluginElement {
         const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
         const manage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
+                const getRectangle = getEngine(this.element.shape).getTextRectangle;
+                if (getRectangle) {
+                    return getRectangle(this.element);
+                }
                 return getTextRectangle(this.element);
             },
             onValueChangeHandle: (textManageRef) => {
@@ -909,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
@@ -922,15 +2079,16 @@ 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, 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',
                     template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
@@ -939,21 +2097,17 @@ class LineShapeGenerator extends Generator {
         return true;
     }
     baseDraw(element, data) {
-        const shape = element.shape;
         let lineG;
-        switch (shape) {
-            case LineShape.elbow:
-            case LineShape.straight:
-                lineG = drawLine(this.board, element);
-                break;
-            default:
-                break;
-        }
+        lineG = drawLine(this.board, element);
         return lineG;
     }
 }
 
 class LineActiveGenerator extends Generator {
+    constructor() {
+        super(...arguments);
+        this.hasResizeHandle = false;
+    }
     canDraw(element, data) {
         if (data.selected) {
             return true;
@@ -964,27 +2118,70 @@ class LineActiveGenerator extends Generator {
     }
     baseDraw(element, data) {
         const activeG = createG();
-        activeG.classList.add('active');
-        activeG.classList.add('line-handle');
-        const sourcePoint = getSourcePoint(this.board, element);
-        const targetPoint = getTargetPoint(this.board, element);
-        const sourceCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), sourcePoint, RESIZE_HANDLE_DIAMETER, {
-            stroke: '#999999',
-            strokeWidth: 1,
-            fill: '#FFF',
-            fillStyle: 'solid'
-        });
-        const targetCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), targetPoint, RESIZE_HANDLE_DIAMETER, {
-            stroke: '#999999',
-            strokeWidth: 1,
-            fill: '#FFF',
-            fillStyle: 'solid'
-        });
-        activeG.appendChild(targetCircle);
-        activeG.appendChild(sourceCircle);
+        if (this.hasResizeHandle) {
+            activeG.classList.add('active');
+            activeG.classList.add('line-handle');
+            const points = PlaitLine.getPoints(this.board, element);
+            points.forEach(point => {
+                const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, RESIZE_HANDLE_DIAMETER, {
+                    stroke: '#999999',
+                    strokeWidth: 1,
+                    fill: '#FFF',
+                    fillStyle: 'solid'
+                });
+                activeG.appendChild(circle);
+            });
+            getMiddlePoints(this.board, element).forEach(point => {
+                const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, RESIZE_HANDLE_DIAMETER, {
+                    stroke: '#FFFFFF80',
+                    strokeWidth: 1,
+                    fill: `${PRIMARY_COLOR}80`,
+                    fillStyle: 'solid'
+                });
+                activeG.appendChild(circle);
+            });
+        }
+        else {
+            const points = getLinePoints(this.board, element);
+            const activeRectangle = getRectangleByPoints(points);
+            const strokeG = drawRectangle(this.board, activeRectangle, {
+                stroke: PRIMARY_COLOR,
+                strokeWidth: DefaultGeometryActiveStyle.selectionStrokeWidth
+            });
+            activeG.appendChild(strokeG);
+        }
         return activeG;
     }
 }
+function getMiddlePoints(board, element) {
+    const result = [];
+    const shape = element.shape;
+    if (shape === LineShape.straight) {
+        const points = PlaitLine.getPoints(board, element);
+        for (let i = 0; i < points.length - 1; i++) {
+            result.push([(points[i][0] + points[i + 1][0]) / 2, (points[i][1] + points[i + 1][1]) / 2]);
+        }
+    }
+    if (shape === LineShape.curve) {
+        const points = PlaitLine.getPoints(board, element);
+        const pointsOnBezier = getCurvePoints(board, element);
+        if (points.length === 2) {
+            const start = 0;
+            const endIndex = pointsOnBezier.length - 1;
+            const middleIndex = Math.round((start + endIndex) / 2);
+            result.push(pointsOnBezier[middleIndex]);
+        }
+        else {
+            for (let i = 0; i < points.length - 1; i++) {
+                const startIndex = pointsOnBezier.findIndex(point => point[0] === points[i][0] && point[1] === points[i][1]);
+                const endIndex = pointsOnBezier.findIndex(point => point[0] === points[i + 1][0] && point[1] === points[i + 1][1]);
+                const middleIndex = Math.round((startIndex + endIndex) / 2);
+                result.push(pointsOnBezier[middleIndex]);
+            }
+        }
+    }
+    return result;
+}
 
 class LineComponent extends PlaitPluginElementComponent {
     constructor(viewContainerRef, cdr) {
@@ -1040,11 +2237,18 @@ class LineComponent extends PlaitPluginElementComponent {
             this.updateTextRectangle();
             return;
         }
-        const hasSameSelected = value.selected === previous.selected;
-        if (!hasSameSelected) {
+        if (!isSelectionMoving(this.board)) {
+            this.activeGenerator.hasResizeHandle = this.hasResizeHandle();
             this.activeGenerator.draw(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
         }
     }
+    hasResizeHandle() {
+        const selectedElements = getSelectedElements(this.board);
+        if (PlaitBoard.hasBeenTextEditing(this.board) && PlaitDrawElement.isText(this.element)) {
+            return false;
+        }
+        return selectedElements.length === 1 && !isSelectionMoving(this.board);
+    }
     initializeTextManages() {
         if (this.element.texts?.length) {
             this.element.texts.forEach((text, index) => {
@@ -1116,15 +2320,16 @@ 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, 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',
                     template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
@@ -1164,21 +2369,22 @@ const withGeometryCreateByDrag = (board) => {
         geometryShapeG?.remove();
         geometryShapeG = createG();
         const geometryGenerator = new GeometryShapeGenerator(board);
-        const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
+        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 === DrawPointerType.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);
@@ -1188,12 +2394,13 @@ const withGeometryCreateByDrag = (board) => {
     };
     board.pointerUp = (event) => {
         const pointer = PlaitBoard.getPointer(board);
-        const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
+        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 === DrawPointerType.text) {
+            if (pointer === BasicShapes.text) {
                 DrawTransforms.insertText(board, points);
             }
             else {
@@ -1208,7 +2415,7 @@ const withGeometryCreateByDrag = (board) => {
     };
     return board;
 };
-const withGeometryCreateByDraw = (board) => {
+const withGeometryCreateByDrawing = (board) => {
     const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
     let start = null;
     let geometryShapeG = null;
@@ -1223,15 +2430,16 @@ const withGeometryCreateByDraw = (board) => {
         keyup(event);
     };
     board.pointerDown = (event) => {
-        const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
+        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 === DrawPointerType.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);
@@ -1248,11 +2456,11 @@ const withGeometryCreateByDraw = (board) => {
         const drawMode = !!start;
         const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         const pointer = PlaitBoard.getPointer(board);
-        if (drawMode && pointer !== DrawPointerType.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);
@@ -1267,10 +2475,10 @@ const withGeometryCreateByDraw = (board) => {
             if (Math.hypot(width, height) === 0) {
                 const pointer = PlaitBoard.getPointer(board);
                 const points = getDefaultGeometryPoints(pointer, targetPoint);
-                if (pointer !== DrawPointerType.text) {
+                if (pointer !== BasicShapes.text) {
                     temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeColor: DefaultGeometryProperty.strokeColor,
-                        strokeWidth: DefaultGeometryProperty.strokeWidth
+                        strokeColor: DefaultBasicShapeProperty.strokeColor,
+                        strokeWidth: DefaultBasicShapeProperty.strokeWidth
                     });
                 }
             }
@@ -1291,9 +2499,21 @@ const withGeometryCreateByDraw = (board) => {
     return board;
 };
 const getDefaultGeometryPoints = (pointer, targetPoint) => {
-    return pointer === DrawPointerType.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();
@@ -1310,7 +2530,7 @@ const getTemporaryTextG = (movingPoint) => {
 
 const buildClipboardData = (board, elements, startPoint) => {
     return elements.map(element => {
-        if (PlaitDrawElement.isGeometry(element)) {
+        if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element)) {
             const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
             return { ...element, points };
         }
@@ -1333,7 +2553,7 @@ const buildClipboardData = (board, elements, startPoint) => {
 };
 const insertClipboardData = (board, elements, startPoint) => {
     const lines = elements.filter(value => PlaitDrawElement.isLine(value));
-    const geometries = elements.filter(value => PlaitDrawElement.isGeometry(value));
+    const geometries = elements.filter(value => PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isImage(value));
     geometries.forEach(element => {
         const sourceLines = [];
         const targetLines = [];
@@ -1357,6 +2577,7 @@ const insertClipboardData = (board, elements, startPoint) => {
         element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
         Transforms.insertNode(board, element, [board.children.length]);
     });
+    Transforms.addSelectionWithTemporaryElements(board, elements);
 };
 
 const withDrawFragment = (baseBoard) => {
@@ -1365,21 +2586,35 @@ const withDrawFragment = (baseBoard) => {
     board.getDeletedFragment = (data) => {
         const drawElements = getSelectedDrawElements(board);
         if (drawElements.length) {
-            const lines = getBoardLines(board);
             const geometryElements = drawElements.filter(value => PlaitDrawElement.isGeometry(value));
             const lineElements = drawElements.filter(value => PlaitDrawElement.isLine(value));
-            const boundLineElements = lines.filter(line => geometryElements.find(geometry => PlaitLine.isBoundElementOfSource(line, geometry) || PlaitLine.isBoundElementOfTarget(line, geometry)));
-            data.push(...[...geometryElements, ...lineElements, ...boundLineElements.filter(line => !lineElements.includes(line))]);
+            const imageElements = drawElements.filter(value => PlaitDrawElement.isImage(value));
+            const boundLineElements = [
+                ...getBoundedLineElements(board, geometryElements),
+                ...getBoundedLineElements(board, imageElements)
+            ].filter(line => !lineElements.includes(line));
+            data.push(...[
+                ...geometryElements,
+                ...lineElements,
+                ...imageElements,
+                ...boundLineElements.filter(line => !lineElements.includes(line))
+            ]);
         }
         return getDeletedFragment(data);
     };
-    board.setFragment = (data, rectangle) => {
+    board.setFragment = (data, rectangle, type) => {
         const targetDrawElements = getSelectedDrawElements(board);
+        let boundLineElements = [];
         if (targetDrawElements.length) {
-            const elements = buildClipboardData(board, targetDrawElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
+            if (type === 'cut') {
+                const geometryElements = targetDrawElements.filter(value => PlaitDrawElement.isGeometry(value));
+                const lineElements = targetDrawElements.filter(value => PlaitDrawElement.isLine(value));
+                boundLineElements = getBoundedLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
+            }
+            const elements = buildClipboardData(board, [...targetDrawElements, ...boundLineElements], rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
             setClipboardData(data, elements);
         }
-        setFragment(data, rectangle);
+        setFragment(data, rectangle, type);
     };
     board.insertFragment = (data, targetPoint) => {
         const elements = getDataFromClipboard(data);
@@ -1399,10 +2634,24 @@ const withDrawFragment = (baseBoard) => {
                 return;
             }
         }
+        if (data?.files.length) {
+            const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
+            if (acceptImageArray.includes(data?.files[0].type)) {
+                const imageFile = data.files[0];
+                buildImage(board, imageFile, DEFAULT_IMAGE_WIDTH, imageItem => {
+                    DrawTransforms.insertImage(board, imageItem, targetPoint);
+                });
+                return;
+            }
+        }
         insertFragment(data, targetPoint);
     };
     return board;
 };
+const getBoundedLineElements = (board, plaitShapes) => {
+    const lines = getBoardLines(board);
+    return lines.filter(line => plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape)));
+};
 
 const DefaultLineStyle = {
     strokeWidth: 2,
@@ -1420,10 +2669,10 @@ const getHitGeometryResizeHandleRef = (board, element, point) => {
 const getHitOutlineGeometry = (board, point, offset = 0) => {
     let geometry = null;
     depthFirstRecursion(board, node => {
-        if (PlaitDrawElement.isGeometry(node)) {
-            const shape = node.shape;
+        if (PlaitDrawElement.isGeometry(node) || PlaitDrawElement.isImage(node)) {
             let client = getRectangleByPoints(node.points);
             client = RectangleClient.getOutlineRectangle(client, offset);
+            const shape = getShape(node);
             const isHit = getEngine(shape).isHit(client, point);
             if (isHit) {
                 geometry = node;
@@ -1441,7 +2690,8 @@ const withLineCreateByDraw = (board) => {
     let lineShapeG = null;
     let temporaryElement = null;
     board.pointerDown = (event) => {
-        const isLinePointer = PlaitBoard.isPointer(board, DrawPointerType.line);
+        const linePointers = getLinePointers();
+        const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         if (isLinePointer && isDrawingMode(board)) {
             const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             start = point;
@@ -1463,7 +2713,8 @@ const withLineCreateByDraw = (board) => {
             targetRef.connection = hitElement ? transformPointToConnection(board, movingPoint, hitElement) : undefined;
             targetRef.boundId = hitElement ? hitElement.id : undefined;
             const lineGenerator = new LineShapeGenerator(board);
-            temporaryElement = createLineElement(LineShape.elbow, [start, movingPoint], { marker: LineMarkerType.none, connection: sourceRef.connection, boundId: sourceRef?.boundId }, { marker: LineMarkerType.arrow, connection: targetRef.connection, boundId: targetRef?.boundId }, {
+            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 }, {
                 strokeColor: DefaultLineStyle.strokeColor,
                 strokeWidth: DefaultLineStyle.strokeWidth
             });
@@ -1508,12 +2759,12 @@ const withGeometryResize = (board) => {
             return true;
         },
         detect: (point) => {
-            const selectedGeometryElements = getSelectedGeometryElements(board);
-            if (selectedGeometryElements.length !== 1 || getSelectedElements(board).length !== 1) {
+            const selectedElements = [...getSelectedGeometryElements(board), ...getSelectedImageElements(board)];
+            if (selectedElements.length !== 1 || getSelectedElements(board).length !== 1) {
                 return null;
             }
-            const target = selectedGeometryElements[0];
-            const targetComponent = PlaitElement.getComponent(selectedGeometryElements[0]);
+            const target = selectedElements[0];
+            const targetComponent = PlaitElement.getComponent(selectedElements[0]);
             if (targetComponent.activeGenerator.hasResizeHandle) {
                 const handleRef = getHitGeometryResizeHandleRef(board, target, point);
                 if (handleRef) {
@@ -1528,27 +2779,34 @@ const withGeometryResize = (board) => {
         },
         onResize: (resizeRef, resizeState) => {
             let points = [...resizeRef.element.points];
+            const rectangle = getRectangleByPoints(resizeRef.element.points);
+            const ratio = rectangle.height / rectangle.width;
             if (resizeRef.handle === ResizeHandle.nw) {
                 points = [resizeState.endTransformPoint, resizeRef.element.points[1]];
             }
             if (resizeRef.handle === ResizeHandle.ne) {
-                points = [
-                    [resizeRef.element.points[0][0], resizeState.endTransformPoint[1]],
-                    [resizeState.endTransformPoint[0], resizeRef.element.points[1][1]]
-                ];
+                points = [resizeState.endTransformPoint, [resizeRef.element.points[0][0], resizeRef.element.points[1][1]]];
             }
             if (resizeRef.handle === ResizeHandle.se) {
-                points = [resizeRef.element.points[0], resizeState.endTransformPoint];
+                points = [resizeState.endTransformPoint, resizeRef.element.points[0]];
             }
             if (resizeRef.handle === ResizeHandle.sw) {
-                points = [
-                    [resizeState.endTransformPoint[0], resizeRef.element.points[0][1]],
-                    [resizeRef.element.points[1][0], resizeState.endTransformPoint[1]]
-                ];
+                points = [resizeState.endTransformPoint, [resizeRef.element.points[1][0], resizeRef.element.points[0][1]]];
+            }
+            if (isShift || PlaitDrawElement.isImage(resizeRef.element)) {
+                const rectangle = getRectangleByPoints(points);
+                const factor = points[0][1] > points[1][1] ? 1 : -1;
+                const height = rectangle.width * ratio * factor;
+                points = [[resizeState.endTransformPoint[0], points[1][1] + height], points[1]];
+            }
+            if (PlaitDrawElement.isGeometry(resizeRef.element)) {
+                const { height: textHeight } = PlaitGeometry.getTextManage(resizeRef.element).getSize();
+                DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
+            }
+            else {
+                points = normalizeShapePoints(points);
+                Transforms.setNode(board, { points }, resizeRef.path);
             }
-            points = normalizeShapePoints(points, isShift);
-            const { height: textHeight } = PlaitGeometry.getTextManage(resizeRef.element).getSize();
-            DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
         }
     };
     withResize(board, options);
@@ -1559,34 +2817,44 @@ var LineResizeHandle;
 (function (LineResizeHandle) {
     LineResizeHandle["source"] = "source";
     LineResizeHandle["target"] = "target";
+    LineResizeHandle["addHandle"] = "addHandle";
 })(LineResizeHandle || (LineResizeHandle = {}));
 const getHitLineResizeHandleRef = (board, element, point) => {
-    const sourcePoint = getSourcePoint(board, element);
-    const targetPoint = getTargetPoint(board, element);
-    const sourceRectangle = {
-        x: sourcePoint[0] - RESIZE_HANDLE_DIAMETER / 2,
-        y: sourcePoint[1] - RESIZE_HANDLE_DIAMETER / 2,
-        width: RESIZE_HANDLE_DIAMETER,
-        height: RESIZE_HANDLE_DIAMETER
-    };
-    const targetRectangle = {
-        x: targetPoint[0] - RESIZE_HANDLE_DIAMETER / 2,
-        y: targetPoint[1] - RESIZE_HANDLE_DIAMETER / 2,
-        width: RESIZE_HANDLE_DIAMETER,
-        height: RESIZE_HANDLE_DIAMETER
-    };
-    const isHitSourceRectangle = RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), sourceRectangle);
-    const isHitTargetRectangle = RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), targetRectangle);
-    if (isHitSourceRectangle) {
-        return { rectangle: sourceRectangle, handle: LineResizeHandle.source };
+    const points = PlaitLine.getPoints(board, element);
+    const index = getHitPointIndex(points, point);
+    if (index !== -1) {
+        if (index === 0) {
+            return { handle: LineResizeHandle.source, index };
+        }
+        if (index === points.length - 1) {
+            return { handle: LineResizeHandle.target, index };
+        }
+        return { index };
     }
-    if (isHitTargetRectangle) {
-        return { rectangle: targetRectangle, handle: LineResizeHandle.target };
+    const middlePoints = getMiddlePoints(board, element);
+    const middleIndex = getHitPointIndex(middlePoints, point);
+    if (middleIndex !== -1) {
+        return { handle: LineResizeHandle.addHandle, index: middleIndex };
     }
     return undefined;
 };
+function getHitPointIndex(points, movingPoint) {
+    const rectangles = points.map(point => {
+        return {
+            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
+            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
+            width: RESIZE_HANDLE_DIAMETER,
+            height: RESIZE_HANDLE_DIAMETER
+        };
+    });
+    const rectangle = rectangles.find(rectangle => {
+        return RectangleClient.isHit(RectangleClient.toRectangleClient([movingPoint, movingPoint]), rectangle);
+    });
+    return rectangle ? rectangles.indexOf(rectangle) : -1;
+}
 
 const withLineResize = (board) => {
+    let pointIndex = 0;
     const options = {
         key: 'draw-line',
         canResize: () => {
@@ -1603,6 +2871,7 @@ const withLineResize = (board) => {
                             element: value,
                             handle: handleRef.handle
                         };
+                        pointIndex = handleRef.index;
                     }
                 });
                 return result;
@@ -1614,17 +2883,23 @@ const withLineResize = (board) => {
             let source = { ...resizeRef.element.source };
             let target = { ...resizeRef.element.target };
             if (resizeRef.handle === LineResizeHandle.source) {
-                points[0] = resizeState.endTransformPoint;
+                points[pointIndex] = resizeState.endTransformPoint;
                 const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, -4);
                 source.connection = hitElement ? transformPointToConnection(board, resizeState.endTransformPoint, hitElement) : undefined;
                 source.boundId = hitElement ? hitElement.id : undefined;
             }
-            if (resizeRef.handle === LineResizeHandle.target) {
-                points[1] = resizeState.endTransformPoint;
+            else if (resizeRef.handle === LineResizeHandle.target) {
+                points[pointIndex] = resizeState.endTransformPoint;
                 const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, -4);
                 target.connection = hitElement ? transformPointToConnection(board, resizeState.endTransformPoint, hitElement) : undefined;
                 target.boundId = hitElement ? hitElement.id : undefined;
             }
+            else if (resizeRef.handle === LineResizeHandle.addHandle) {
+                points.splice(pointIndex + 1, 0, resizeState.endTransformPoint);
+            }
+            else {
+                points[pointIndex] = resizeState.endTransformPoint;
+            }
             DrawTransforms.resizeLine(board, { points, source, target }, resizeRef.path);
         }
     };
@@ -1637,9 +2912,14 @@ const withLineBoundReaction = (board) => {
     let boundShapeG = null;
     board.pointerMove = (event) => {
         boundShapeG?.remove();
-        const isLinePointer = PlaitBoard.isPointer(board, DrawPointerType.line);
+        const linePointers = Object.keys(LineShape);
+        const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const isLineResizing = isResizingByCondition(board, element => PlaitDrawElement.isLine(element));
+        const isLineResizing = isResizingByCondition(board, resizeRef => {
+            const { element, handle } = resizeRef;
+            const isSourceOrTarget = handle === LineResizeHandle.target || handle === LineResizeHandle.source;
+            return PlaitDrawElement.isLine(element) && isSourceOrTarget;
+        });
         if (isLinePointer || isLineResizing) {
             const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
             if (hitElement) {
@@ -1717,8 +2997,74 @@ function editHandle(board, element, manageIndex, isFirstEdit = false) {
     });
 }
 
+class ImageComponent extends CommonPluginElement {
+    get activeGenerator() {
+        return this.imageGenerator.componentRef.instance.activeGenerator;
+    }
+    constructor(viewContainerRef, cdr) {
+        super(cdr);
+        this.viewContainerRef = viewContainerRef;
+        this.cdr = cdr;
+        this.destroy$ = new Subject();
+    }
+    initializeGenerator() {
+        this.imageGenerator = new ImageGenerator(this.board, {
+            getRectangle: (element) => {
+                return {
+                    x: element.points[0][0],
+                    y: element.points[0][1],
+                    width: element.points[1][0] - element.points[0][0],
+                    height: element.points[1][1] - element.points[0][1]
+                };
+            },
+            getImageItem: element => {
+                return {
+                    url: element.url,
+                    width: element.points[1][0] - element.points[0][0],
+                    height: element.points[1][1] - element.points[0][1]
+                };
+            }
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.initializeGenerator();
+        this.imageGenerator.draw(this.element, this.g, this.viewContainerRef);
+    }
+    onContextChanged(value, previous) {
+        if (value.element !== previous.element) {
+            this.imageGenerator.updateImage(this.g, previous.element, value.element);
+            this.imageGenerator.componentRef.instance.isFocus = this.selected;
+        }
+        else {
+            const hasSameSelected = value.selected === previous.selected;
+            const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
+            if (!hasSameSelected || !hasSameHandleState) {
+                this.imageGenerator.componentRef.instance.isFocus = this.selected;
+            }
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.imageGenerator.destroy();
+    }
+    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.12", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-draw-geometry',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
+
 const withDraw = (board) => {
-    const { drawElement, getRectangle, isHitSelection, isMovable, dblclick } = board;
+    const { drawElement, getRectangle, isHitSelection, isMovable, isAlign } = board;
     board.drawElement = (context) => {
         if (PlaitDrawElement.isGeometry(context.element)) {
             return GeometryComponent;
@@ -1726,6 +3072,9 @@ const withDraw = (board) => {
         else if (PlaitDrawElement.isLine(context.element)) {
             return LineComponent;
         }
+        else if (PlaitDrawElement.isImage(context.element)) {
+            return ImageComponent;
+        }
         return drawElement(context);
     };
     board.getRectangle = (element) => {
@@ -1733,9 +3082,11 @@ const withDraw = (board) => {
             return getRectangleByPoints(element.points);
         }
         if (PlaitDrawElement.isLine(element)) {
-            const source = getSourcePoint(board, element);
-            const target = getTargetPoint(board, element);
-            return getRectangleByPoints([source, target]);
+            const points = getLinePoints(board, element);
+            return getRectangleByPoints(points);
+        }
+        if (PlaitDrawElement.isImage(element)) {
+            return getRectangleByPoints(element.points);
         }
         return getRectangle(element);
     };
@@ -1749,6 +3100,11 @@ const withDraw = (board) => {
             }
             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);
+        }
         if (PlaitDrawElement.isLine(element)) {
             const points = getLinePoints(board, element);
             const strokeWidth = getStrokeWidthByElement(element);
@@ -1767,17 +3123,34 @@ const withDraw = (board) => {
         if (PlaitDrawElement.isGeometry(element)) {
             return true;
         }
+        if (PlaitDrawElement.isImage(element)) {
+            return true;
+        }
         if (PlaitDrawElement.isLine(element)) {
-            return !element.source.boundId && !element.target.boundId;
+            const selectedElements = getSelectedElements(board);
+            const isSelected = (boundId) => {
+                return !!selectedElements.find(value => value.id === boundId);
+            };
+            if ((element.source.boundId && !isSelected(element.source.boundId)) ||
+                (element.target.boundId && !isSelected(element.target.boundId))) {
+                return false;
+            }
+            return true;
         }
         return isMovable(element);
     };
-    return withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withGeometryCreateByDrag(withGeometryCreateByDraw(withDrawFragment(withDrawHotkey(board)))))))));
+    board.isAlign = (element) => {
+        if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element)) {
+            return true;
+        }
+        return isAlign(element);
+    };
+    return withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))));
 };
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawPointerType, DrawTransforms, GeometryComponent, GeometryPointer, GeometryShape, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getElbowPoints, getFillByElement, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getSourcePoint, getStraightPoints, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTargetPoint, getTextRectangle, isHitLineText, isHitPolyLine, 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