@plait/draw 0.1.0-next.8 → 0.28.0

package/fesm2022/plait-draw.mjs

@@ -1,9 +1,10 @@
-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';
 
@@ -15,6 +16,20 @@ var GeometryShape;
     GeometryShape["roundRectangle"] = "roundRectangle";
     GeometryShape["parallelogram"] = "parallelogram";
     GeometryShape["text"] = "text";
+    GeometryShape["triangle"] = "triangle";
+    GeometryShape["leftArrow"] = "leftArrow";
+    GeometryShape["trapezoid"] = "trapezoid";
+    GeometryShape["rightArrow"] = "rightArrow";
+    GeometryShape["cross"] = "cross";
+    GeometryShape["star"] = "star";
+    GeometryShape["pentagon"] = "pentagon";
+    GeometryShape["hexagon"] = "hexagon";
+    GeometryShape["octagon"] = "octagon";
+    GeometryShape["pentagonArrow"] = "pentagonArrow";
+    GeometryShape["processArrow"] = "processArrow";
+    GeometryShape["twoWayArrow"] = "twoWayArrow";
+    GeometryShape["comment"] = "comment";
+    GeometryShape["roundComment"] = "roundComment";
 })(GeometryShape || (GeometryShape = {}));
 const PlaitGeometry = {
     getTextEditor(element) {
@@ -29,79 +44,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
 };
@@ -127,29 +69,22 @@ const DefaultTextProperty = {
     text: '文本'
 };
 const GeometryThreshold = {
-    defaultTextMaxWidth: 34 * 14,
+    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
-];
+const getGeometryPointers = () => {
+    return Object.keys(GeometryShape);
+};
+const getLinePointers = () => {
+    return Object.keys(LineShape);
+};
+
+const DEFAULT_IMAGE_WIDTH = 1000;
 
 const getStrokeWidthByElement = (element) => {
+    if (PlaitDrawElement.isText(element)) {
+        return 0;
+    }
     const strokeWidth = element.strokeWidth || DefaultGeometryStyle.strokeWidth;
     return strokeWidth;
 };
@@ -168,6 +103,102 @@ const getStrokeStyleByElement = (element) => {
     return element.strokeStyle || StrokeStyle.solid;
 };
 
+const heightRatio$1 = 3 / 4;
+const CommentEngine = {
+    draw(board, rectangle, options) {
+        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 parallelogramPoints = getCommentPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getCommentPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        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]
+    ];
+};
+
+const CrossEngine = {
+    draw(board, rectangle, options) {
+        const points = getCrossPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const parallelogramPoints = getCrossPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getCrossPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, getCrossPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getCrossPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+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 DiamondEngine = {
     draw(board, rectangle, options) {
         const points = RectangleClient.getEdgeCenterPoints(rectangle);
@@ -180,9 +211,16 @@ const DiamondEngine = {
         const controlPoints = RectangleClient.getEdgeCenterPoints(rectangle);
         return isPointInPolygon(point, controlPoints);
     },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
-        const connectorPoints = RectangleClient.getEdgeCenterPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, connectorPoints);
+        return getNearestPointBetweenPointAndSegments(point, DiamondEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = DiamondEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -199,10 +237,22 @@ 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);
     }
@@ -242,29 +292,182 @@ 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 = {
+const HexagonEngine = {
     draw(board, rectangle, options) {
-        const points = getParallelogramPoints(rectangle);
+        const points = getHexagonPoints(rectangle);
         const rs = PlaitBoard.getRoughSVG(board);
         const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
         setStrokeLinecap(polygon, 'round');
         return polygon;
     },
     isHit(rectangle, point) {
-        const parallelogramPoints = getParallelogramPoints(rectangle);
+        const parallelogramPoints = getHexagonPoints(rectangle);
         return isPointInPolygon(point, parallelogramPoints);
     },
+    getCornerPoints(rectangle) {
+        return getHexagonPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
-        const cornerPoints = getParallelogramPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, getHexagonPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getHexagonPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+const getHexagonPoints = (rectangle) => {
+    return [
+        [rectangle.x + rectangle.width / 4, rectangle.y],
+        [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 LeftArrowEngine = {
+    draw(board, rectangle, options) {
+        const points = getLeftArrowPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    getCornerPoints(rectangle) {
+        return getLeftArrowPoints(rectangle);
+    },
+    isHit(rectangle, point) {
+        const points = getLeftArrowPoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getLeftArrowPoints(rectangle);
         return getNearestPointBetweenPointAndSegments(point, cornerPoints);
     },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getLeftArrowPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
     getConnectorPoints(rectangle) {
-        const cornerPoints = getParallelogramPoints(rectangle);
+        return [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ];
+    }
+};
+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 OctagonEngine = {
+    draw(board, rectangle, options) {
+        const points = getOctagonPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const parallelogramPoints = getOctagonPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getOctagonPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, getOctagonPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getOctagonPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(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 ParallelogramEngine = {
+    draw(board, rectangle, options) {
+        const points = getParallelogramCornerPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const parallelogramPoints = getParallelogramCornerPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getParallelogramCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, ParallelogramEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getParallelogramCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        const cornerPoints = getParallelogramCornerPoints(rectangle);
         return getCenterPointsOnPolygon(cornerPoints);
     }
 };
-const getParallelogramPoints = (rectangle) => {
+const getParallelogramCornerPoints = (rectangle) => {
     return [
         [rectangle.x + rectangle.width / 4, rectangle.y],
         [rectangle.x + rectangle.width, rectangle.y],
@@ -273,6 +476,119 @@ const getParallelogramPoints = (rectangle) => {
     ];
 };
 
+const PentagonEngine = {
+    draw(board, rectangle, options) {
+        const points = getPentagonPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const parallelogramPoints = getPentagonPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getPentagonPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, getPentagonPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getPentagonPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return getPentagonPoints(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 PentagonArrowEngine = {
+    draw(board, rectangle, options) {
+        const points = getPentagonArrowPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const parallelogramPoints = getPentagonArrowPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getPentagonArrowPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, getPentagonArrowPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getPentagonArrowPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+const 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 ProcessArrowEngine = {
+    draw(board, rectangle, options) {
+        const points = getProcessArrowPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const parallelogramPoints = getProcessArrowPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getProcessArrowPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, getProcessArrowPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getProcessArrowPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return getProcessArrowPoints(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 RectangleEngine = {
     draw(board, rectangle, options) {
         return drawRectangle(board, rectangle, { ...options, fillStyle: 'solid' });
@@ -281,15 +597,65 @@ 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 RightArrowEngine = {
+    draw(board, rectangle, options) {
+        const points = getRightArrowPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    getCornerPoints(rectangle) {
+        return getRightArrowPoints(rectangle);
+    },
+    isHit(rectangle, point) {
+        const points = getRightArrowPoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getRightArrowPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getRightArrowPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ];
+    }
+};
+const getRightArrowPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height * 0.8],
+        [rectangle.x, rectangle.y + rectangle.height * 0.8]
+    ];
+};
+
 const RoundRectangleEngine = {
     draw(board, rectangle, options) {
         return drawRoundRectangle(PlaitBoard.getRoughSVG(board), rectangle.x, rectangle.y, rectangle.x + rectangle.width, rectangle.y + rectangle.height, { ...options, fillStyle: 'solid' }, false, getRoundRectangleRadius(rectangle));
@@ -297,9 +663,17 @@ 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));
     },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     }
@@ -337,18 +711,279 @@ function getNearestPointBetweenPointAndRoundRectangle(point, rectangle, radius)
     return result;
 }
 
+const heightRatio = 3 / 4;
+const RoundCommentEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const x1 = rectangle.x;
+        const y1 = rectangle.y;
+        const x2 = rectangle.x + rectangle.width;
+        const y2 = rectangle.y + rectangle.height * heightRatio;
+        const radius = getRoundRectangleRadius(rectangle);
+        const point1 = [x1 + radius, y1];
+        const point2 = [x2 - radius, y1];
+        const point3 = [x2, y1 + radius];
+        const point4 = [x2, y2 - radius];
+        const point5 = [x2 - radius, y2];
+        const point6 = [x1 + radius, y2];
+        const point7 = [x1, y2 - radius];
+        const point8 = [x1, y1 + radius];
+        const point9 = [x1 + rectangle.width / 4, y2];
+        const point10 = [x1 + rectangle.width / 4, rectangle.y + rectangle.height];
+        const point11 = [x1 + rectangle.width / 2, y2];
+        return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, options);
+    },
+    isHit(rectangle, point) {
+        const points = [
+            [rectangle.x + rectangle.width / 4, rectangle.y + (rectangle.height * 3) / 4],
+            [rectangle.x + rectangle.width / 4, rectangle.y + rectangle.height],
+            [rectangle.x + rectangle.width / 2, rectangle.y + (rectangle.height * 3) / 4]
+        ];
+        rectangle.height = (rectangle.height * 3) / 4;
+        return isPointInPolygon(point, points) || isPointInRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
+    },
+    getCornerPoints(rectangle) {
+        return getRoundCommentPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, getRoundCommentPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getRoundCommentPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [rectangle.x + rectangle.width / 2, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height * heightRatio],
+            [rectangle.x, rectangle.y + rectangle.height / 2]
+        ];
+    },
+    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 StarEngine = {
+    draw(board, rectangle, options) {
+        const points = getStarPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const parallelogramPoints = getStarPoints(rectangle);
+        return isPointInPolygon(point, parallelogramPoints);
+    },
+    getCornerPoints(rectangle) {
+        return getStarPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, getStarPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getStarPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        const points = getStarPoints(rectangle);
+        return [points[1], points[3], points[5], points[7], points[9]];
+    }
+};
+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 TrapezoidEngine = {
+    draw(board, rectangle, options) {
+        const points = getTrapezoidPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const points = getTrapezoidPoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getTrapezoidPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getConnectorPoints(rectangle) {
+        const points = getTrapezoidPoints(rectangle);
+        return getCenterPointsOnPolygon(points);
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getTrapezoidPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getCornerPoints(rectangle) {
+        return getTrapezoidPoints(rectangle);
+    }
+};
+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 TriangleEngine = {
+    draw(board, rectangle, options) {
+        const points = getTrianglePoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const points = getTrianglePoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getTrianglePoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getConnectorPoints(rectangle) {
+        const cornerPoints = getTrianglePoints(rectangle);
+        const lineCenterPoints = getCenterPointsOnPolygon(cornerPoints);
+        return [...lineCenterPoints, ...cornerPoints];
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getTrianglePoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getCornerPoints(rectangle) {
+        return getTrianglePoints(rectangle);
+    }
+};
+const getTrianglePoints = (rectangle) => {
+    return [
+        [rectangle.x + rectangle.width / 2, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height]
+    ];
+};
+
+const TwoWayArrowEngine = {
+    draw(board, rectangle, options) {
+        const points = getTwoWayArrowPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    getCornerPoints(rectangle) {
+        return getTwoWayArrowPoints(rectangle);
+    },
+    isHit(rectangle, point) {
+        const points = getTwoWayArrowPoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getTwoWayArrowPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getTwoWayArrowPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ];
+    }
+};
+const getTwoWayArrowPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y + rectangle.height / 2],
+        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y],
+        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + rectangle.height / 5],
+        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + rectangle.height / 5],
+        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + rectangle.height],
+        [rectangle.x + (rectangle.width * 17) / 25, rectangle.y + (rectangle.height * 4) / 5],
+        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + (rectangle.height * 4) / 5],
+        [rectangle.x + (rectangle.width * 8) / 25, rectangle.y + rectangle.height]
+    ];
+};
+
 const ShapeEngineMap = {
     [GeometryShape.rectangle]: RectangleEngine,
     [GeometryShape.diamond]: DiamondEngine,
     [GeometryShape.ellipse]: EllipseEngine,
     [GeometryShape.parallelogram]: ParallelogramEngine,
     [GeometryShape.roundRectangle]: RoundRectangleEngine,
-    [GeometryShape.text]: RectangleEngine
+    [GeometryShape.text]: RectangleEngine,
+    [GeometryShape.triangle]: TriangleEngine,
+    [GeometryShape.leftArrow]: LeftArrowEngine,
+    [GeometryShape.trapezoid]: TrapezoidEngine,
+    [GeometryShape.rightArrow]: RightArrowEngine,
+    [GeometryShape.cross]: CrossEngine,
+    [GeometryShape.star]: StarEngine,
+    [GeometryShape.pentagon]: PentagonEngine,
+    [GeometryShape.hexagon]: HexagonEngine,
+    [GeometryShape.octagon]: OctagonEngine,
+    [GeometryShape.pentagonArrow]: PentagonArrowEngine,
+    [GeometryShape.processArrow]: ProcessArrowEngine,
+    [GeometryShape.twoWayArrow]: TwoWayArrowEngine,
+    [GeometryShape.comment]: CommentEngine,
+    [GeometryShape.roundComment]: RoundCommentEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
 };
 
+const getShape = (value) => {
+    if (PlaitDrawElement.isImage(value)) {
+        return GeometryShape.rectangle;
+    }
+    return value.shape;
+};
+
 const createGeometryElement = (shape, points, text, options) => {
     let textOptions = {};
     let alignment = Alignment.center;
@@ -390,14 +1025,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',
@@ -415,7 +1051,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 = [];
@@ -425,6 +1062,17 @@ 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 drawLineArrow = (element, points, options) => {
     const arrowG = createG();
@@ -432,16 +1080,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: {
@@ -460,16 +1111,27 @@ const getArrow = (element, marker, source, target, options) => {
             targetArrow = drawSharpArrow(source, target, options);
             break;
         }
+        case LineMarkerType.oneSideUp: {
+            targetArrow = drawOneSideArrow(source, target, 'up', options);
+            break;
+        }
+        case LineMarkerType.oneSideDown: {
+            targetArrow = drawOneSideArrow(source, target, '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();
@@ -484,10 +1146,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);
@@ -503,13 +1162,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 {
@@ -525,28 +1197,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;
@@ -576,20 +1347,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, options);
+    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);
@@ -610,33 +1389,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);
@@ -647,7 +1409,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 => {
@@ -671,6 +1434,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));
@@ -684,6 +1505,111 @@ 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 === GeometryShape.text;
+    },
+    isImage: (value) => {
+        return value.type === 'image';
+    },
+    isDrawElement: (value) => {
+        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value) || PlaitDrawElement.isImage(value)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    isShape: (value) => {
+        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
+    }
+};
 
 class GeometryShapeGenerator extends Generator {
     canDraw(element, data) {
@@ -699,7 +1625,12 @@ class GeometryShapeGenerator extends Generator {
         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
+        });
     }
 }
 
@@ -779,6 +1710,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);
 };
@@ -809,7 +1762,8 @@ const DrawTransforms = {
     resizeLine,
     setLineTexts,
     removeLineText,
-    setLineMark
+    setLineMark,
+    insertImage
 };
 
 class GeometryComponent extends CommonPluginElement {
@@ -827,10 +1781,19 @@ 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 ACTIVE_STROKE_WIDTH;
+                }
+            },
+            getStrokeOpacity: () => {
+                const selectedElements = getSelectedElements(this.board);
+                if (selectedElements.length === 1 && !isSelectionMoving(this.board)) {
+                    return 1;
                 }
                 else {
-                    return DefaultGeometryActiveStyle.selectionStrokeWidth;
+                    return 0.5;
                 }
             },
             getRectangle: (element) => {
@@ -884,6 +1847,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) => {
@@ -911,14 +1878,15 @@ class GeometryComponent extends CommonPluginElement {
         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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: GeometryComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", 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 }]; } });
 
@@ -927,21 +1895,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;
@@ -952,27 +1916,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) {
@@ -1028,11 +2035,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) => {
@@ -1105,14 +2119,15 @@ class LineComponent extends PlaitPluginElementComponent {
         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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: LineComponent, isStandalone: true, selector: "plait-draw-line", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", 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 }]; } });
 
@@ -1152,13 +2167,14 @@ 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 === GeometryShape.text) {
                 const textG = getTemporaryTextG(movingPoint);
                 geometryShapeG.appendChild(textG);
                 PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
@@ -1176,12 +2192,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 === GeometryShape.text) {
                 DrawTransforms.insertText(board, points);
             }
             else {
@@ -1196,7 +2213,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;
@@ -1211,13 +2228,14 @@ 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 === GeometryShape.text) {
                 const points = getDefaultGeometryPoints(pointer, point);
                 const textElement = createGeometryElement(GeometryShape.text, points, DefaultTextProperty.text);
                 Transforms.insertNode(board, textElement, [board.children.length]);
@@ -1236,7 +2254,7 @@ 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 !== GeometryShape.text) {
             const points = normalizeShapePoints([start, movingPoint], isShift);
             temporaryElement = createGeometryElement(pointer, points, '', {
                 strokeColor: DefaultGeometryProperty.strokeColor,
@@ -1255,7 +2273,7 @@ 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 !== GeometryShape.text) {
                     temporaryElement = createGeometryElement(pointer, points, '', {
                         strokeColor: DefaultGeometryProperty.strokeColor,
                         strokeWidth: DefaultGeometryProperty.strokeWidth
@@ -1279,7 +2297,7 @@ const withGeometryCreateByDraw = (board) => {
     return board;
 };
 const getDefaultGeometryPoints = (pointer, targetPoint) => {
-    return pointer === DrawPointerType.text
+    return pointer === GeometryShape.text
         ? getPointsByCenterPoint(targetPoint, DefaultTextProperty.width, DefaultTextProperty.height)
         : getPointsByCenterPoint(targetPoint, DefaultGeometryProperty.width, DefaultGeometryProperty.height);
 };
@@ -1298,7 +2316,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 };
         }
@@ -1321,7 +2339,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 = [];
@@ -1345,6 +2363,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) => {
@@ -1353,21 +2372,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);
@@ -1387,10 +2420,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,
@@ -1408,10 +2455,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;
@@ -1429,7 +2476,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;
@@ -1451,7 +2499,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
             });
@@ -1496,12 +2545,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) {
@@ -1516,27 +2565,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);
@@ -1547,34 +2603,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: () => {
@@ -1591,6 +2657,7 @@ const withLineResize = (board) => {
                             element: value,
                             handle: handleRef.handle
                         };
+                        pointIndex = handleRef.index;
                     }
                 });
                 return result;
@@ -1602,17 +2669,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);
         }
     };
@@ -1625,9 +2698,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) {
@@ -1705,8 +2783,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.3", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: ImageComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", 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;
@@ -1714,6 +2858,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) => {
@@ -1721,9 +2868,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);
     };
@@ -1737,6 +2886,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);
@@ -1755,17 +2909,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.source.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 { DEFAULT_IMAGE_WIDTH, DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawTransforms, GeometryComponent, GeometryShape, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getEdgeOnPolygonByPoint, getElbowPoints, getExtendPoint, getFillByElement, getGeometryPointers, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, isHitLineText, isHitPolyLine, removeDuplicatePoints, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map