@plait/draw 0.29.0 → 0.30.0

package/fesm2022/plait-draw.mjs

@@ -1,11 +1,11 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, drawLinearPath, rotate, getElementById, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, BOARD_TO_HOST, transformPoint, toPoint, isSelectionMoving, PlaitPluginElementComponent, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElements, isPolylineHitRectangle } from '@plait/core';
-import { getRectangleByPoints, getFactorByPoints, getDirectionByVector, getOppositeDirection, getDirectionFactor, getPoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, acceptImageTypes, buildImage, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
-import { Alignment, buildText, AlignEditor, TextManage, DEFAULT_FONT_SIZE, getTextFromClipboard, getTextSize } from '@plait/text';
+import { PlaitElement, ACTIVE_STROKE_WIDTH, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, BOARD_TO_HOST, transformPoint, toPoint, idCreator, createG, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, drawLinearPath, rotate, getElementById, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElementByPoint } from '@plait/core';
+import { getRectangleByPoints, Generator, normalizeShapePoints, isDndMode, isDrawingMode, getFactorByPoints, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+import { AlignEditor, Alignment, DEFAULT_FONT_SIZE, buildText, TextManage, getTextFromClipboard, getTextSize } from '@plait/text';
+import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { isKeyHotkey } from 'is-hotkey';
 import { Node } from 'slate';
 
 var BasicShapes;
@@ -1168,192 +1168,575 @@ const getShape = (value) => {
     return value.shape;
 };
 
-const createGeometryElement = (shape, points, text, options) => {
-    let textOptions = {};
-    let alignment = Alignment.center;
-    if (shape === BasicShapes.text) {
-        textOptions = { autoSize: true };
-        alignment = undefined;
-    }
-    let flowchartOptions = {};
-    if (getFlowchartPointers().includes(shape)) {
-        flowchartOptions = { fill: '#ffffff' };
+class GeometryShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
     }
-    return {
-        id: idCreator(),
-        type: 'geometry',
-        shape,
-        angle: 0,
-        opacity: 1,
-        textHeight: DefaultTextProperty.height,
-        text: buildText(text, alignment),
-        points,
-        ...textOptions,
-        ...options,
-        ...flowchartOptions
-    };
-};
-const getPointsByCenterPoint = (point, width, height) => {
-    const leftTopPoint = [point[0] - width / 2, point[1] - height / 2];
-    const rightBottomPoint = [point[0] + width / 2, point[1] + height / 2];
-    return [leftTopPoint, rightBottomPoint];
-};
-const 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 - height) / 2
-    };
-};
-const drawBoundMask = (board, element) => {
-    const G = createG();
-    const rectangle = getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    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(shape).getConnectorPoints(activeRectangle);
-    connectorPoints.forEach(point => {
-        const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 6, {
-            stroke: '#999999',
-            strokeWidth: 1,
-            fill: '#FFF',
-            fillStyle: 'solid'
+    baseDraw(element, data) {
+        const rectangle = getRectangleByPoints(element.points);
+        const shape = element.shape;
+        if (shape === BasicShapes.text) {
+            return;
+        }
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(element);
+        const fill = getFillByElement(element);
+        const strokeLineDash = getLineDashByElement(element);
+        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
+            stroke: strokeColor,
+            strokeWidth,
+            fill,
+            strokeLineDash
         });
-        G.appendChild(circleG);
+    }
+}
+
+const insertGeometry = (board, points, shape) => {
+    let newElement = createGeometryElement(shape, points, '', {
+        strokeColor: DefaultBasicShapeProperty.strokeColor,
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth
     });
-    return G;
-};
-const drawGeometry = (board, outerRectangle, shape, options) => {
-    return getEngine(shape).draw(board, outerRectangle, options);
-};
-const getNearestPoint = (element, point, inflateDelta = 0) => {
-    const rectangle = getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, inflateDelta);
-    const shape = getShape(element);
-    return getEngine(shape).getNearestPoint(activeRectangle, point);
+    Transforms.insertNode(board, newElement, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
 };
-const getCenterPointsOnPolygon = (points) => {
-    const centerPoint = [];
-    for (let i = 0; i < points.length; i++) {
-        let j = i == points.length - 1 ? 0 : i + 1;
-        centerPoint.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
-    }
-    return centerPoint;
+const insertText = (board, points, text = '文本') => {
+    let newElement = createGeometryElement(BasicShapes.text, points, text);
+    Transforms.insertNode(board, newElement, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
 };
-const 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];
-        }
+const resizeGeometry = (board, points, textHeight, path) => {
+    const normalizePoints = normalizeShapePoints(points);
+    const element = PlaitNode.get(board, path);
+    const newHeight = textHeight / board.viewport.zoom;
+    const newProperties = { points: normalizePoints, textHeight: newHeight };
+    if (PlaitDrawElement.isText(element) && element.autoSize) {
+        newProperties.autoSize = false;
     }
-    return null;
-};
-const getDefaultFlowchartProperty = (symbol) => {
-    return DefaultFlowchartPropertyMap[symbol];
+    Transforms.setNode(board, newProperties, path);
 };
 
-const drawLineArrow = (element, points, options) => {
-    const arrowG = createG();
-    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
-        return null;
-    }
-    if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
-        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 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, arrowOptions, options) => {
-    const { marker, source, target, isSource } = arrowOptions;
-    let targetArrow;
-    switch (marker) {
-        case LineMarkerType.openTriangle: {
-            targetArrow = drawOpenTriangle(element, source, target, options);
-            break;
-        }
-        case LineMarkerType.solidTriangle: {
-            targetArrow = drawSolidTriangle(source, target, options);
-            break;
-        }
-        case LineMarkerType.arrow: {
-            targetArrow = drawArrow(element, source, target, options);
-            break;
-        }
-        case LineMarkerType.sharpArrow: {
-            targetArrow = drawSharpArrow(source, target, options);
-            break;
-        }
-        case LineMarkerType.oneSideUp: {
-            targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
-            break;
-        }
-        case LineMarkerType.oneSideDown: {
-            targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
-            break;
+const normalizePoints = (board, element, width, textHeight) => {
+    let points = element.points;
+    let autoSize = element.autoSize;
+    const defaultSpace = ShapeDefaultSpace.rectangleAndText;
+    if (autoSize) {
+        const editor = PlaitGeometry.getTextEditor(element);
+        if (AlignEditor.isActive(editor, Alignment.right)) {
+            points = [
+                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
+                [points[1][0], points[0][1] + textHeight]
+            ];
         }
-        case LineMarkerType.hollowTriangle: {
-            targetArrow = drawHollowTriangleArrow(source, target, options);
-            break;
+        else if (AlignEditor.isActive(editor, Alignment.center)) {
+            const oldWidth = Math.abs(points[0][0] - points[1][0]);
+            const offset = (width - oldWidth) / 2;
+            points = [
+                [points[0][0] - offset - defaultSpace, points[0][1]],
+                [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
+            ];
         }
-        case LineMarkerType.singleSlash: {
-            targetArrow = drawSingleSlash(source, target, isSource, options);
-            break;
+        else {
+            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
         }
     }
-    return targetArrow;
-};
-const drawSharpArrow = (source, target, options) => {
-    const startPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 20);
-    const g = createG();
-    const path = createPath();
-    let polylinePath = `M${pointRight[0]},${pointRight[1]}A8,8,20,0,1,${pointLeft[0]},${pointLeft[1]}L${startPoint[0]},${startPoint[1]}Z`;
-    path.setAttribute('d', polylinePath);
-    path.setAttribute('stroke', `${options?.stroke}`);
-    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
-    path.setAttribute('fill', `${options?.stroke}`);
-    g.appendChild(path);
-    return g;
+    return { points };
 };
-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 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);
-    const path = arrowG.querySelector('path');
-    path.setAttribute('stroke-linejoin', 'round');
-    return arrowG;
+const setText = (board, element, text, width, textHeight) => {
+    const newElement = {
+        text,
+        textHeight,
+        ...normalizePoints(board, element, width, textHeight)
+    };
+    const path = board.children.findIndex(child => child === element);
+    Transforms.setNode(board, newElement, [path]);
 };
-const drawSolidTriangle = (source, target, options) => {
-    const endPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 30);
-    return drawLinearPath([pointLeft, endPoint, pointRight], { ...options, fill: options.stroke }, true);
+const setTextSize = (board, element, textWidth, textHeight) => {
+    if (element.autoSize) {
+        const newElement = {
+            textHeight,
+            ...normalizePoints(board, element, textWidth, textHeight)
+        };
+        const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
+        const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
+        if (!isPointsEqual || !isTextHeightEqual) {
+            const path = board.children.findIndex(child => child === element);
+            Transforms.setNode(board, newElement, [path]);
+        }
+    }
 };
-const drawOpenTriangle = (element, source, target, options) => {
-    const directionFactor = getFactorByPoints(source, target);
-    const strokeWidth = getStrokeWidthByElement(element);
+
+const insertImage = (board, imageItem, startPoint) => {
+    const { width, height, url } = imageItem;
+    const host = BOARD_TO_HOST.get(board);
+    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
+    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
+    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
+    const points = startPoint
+        ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
+        : [
+            [point[0] - width / 2, point[1] - height / 2],
+            [point[0] + width / 2, point[1] + height / 2]
+        ];
+    const imageElement = {
+        id: idCreator(),
+        type: 'image',
+        points,
+        url
+    };
+    Transforms.insertNode(board, imageElement, [board.children.length]);
+    Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
+};
+
+const resizeLine = (board, options, path) => {
+    Transforms.setNode(board, options, path);
+};
+const setLineTexts = (board, element, texts) => {
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, { texts }, path);
+};
+const removeLineText = (board, element, index) => {
+    const path = PlaitBoard.findPath(board, element);
+    const texts = element.texts?.length ? [...element.texts] : [];
+    const newTexts = [...texts];
+    newTexts.splice(index, 1);
+    Transforms.setNode(board, { texts: newTexts }, path);
+};
+const setLineMark = (board, element, handleKey, marker) => {
+    const path = PlaitBoard.findPath(board, element);
+    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
+    handle = { ...handle, marker };
+    Transforms.setNode(board, { [handleKey]: handle }, path);
+};
+
+const DrawTransforms = {
+    setText,
+    insertGeometry,
+    resizeGeometry,
+    insertText,
+    setTextSize,
+    resizeLine,
+    setLineTexts,
+    removeLineText,
+    setLineMark,
+    insertImage
+};
+
+const withGeometryCreateByDrag = (board) => {
+    const { pointerMove, pointerUp } = board;
+    let geometryShapeG = null;
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const pointer = PlaitBoard.getPointer(board);
+        if (dragMode) {
+            const points = getDefaultGeometryPoints(pointer, movingPoint);
+            if (pointer === BasicShapes.text) {
+                const textG = getTemporaryTextG(movingPoint);
+                geometryShapeG.appendChild(textG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+            else {
+                const temporaryElement = createGeometryElement(pointer, points, '', {
+                    strokeColor: DefaultBasicShapeProperty.strokeColor,
+                    strokeWidth: DefaultBasicShapeProperty.strokeWidth
+                });
+                geometryGenerator.draw(temporaryElement, geometryShapeG);
+                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            }
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const pointer = PlaitBoard.getPointer(board);
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        const dragMode = isGeometryPointer && isDndMode(board);
+        if (dragMode) {
+            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const points = getDefaultGeometryPoints(pointer, targetPoint);
+            if (pointer === BasicShapes.text) {
+                DrawTransforms.insertText(board, points);
+            }
+            else {
+                DrawTransforms.insertGeometry(board, points, pointer);
+            }
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
+};
+const withGeometryCreateByDrawing = (board) => {
+    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
+    let start = null;
+    let geometryShapeG = null;
+    let temporaryElement = null;
+    let isShift = false;
+    board.keydown = (event) => {
+        isShift = isKeyHotkey('shift', event);
+        keydown(event);
+    };
+    board.keyup = (event) => {
+        isShift = false;
+        keyup(event);
+    };
+    board.pointerDown = (event) => {
+        const geometryPointers = getGeometryPointers();
+        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
+        if (isGeometryPointer && isDrawingMode(board)) {
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            start = point;
+            const pointer = PlaitBoard.getPointer(board);
+            preventTouchMove(board, event, true);
+            if (pointer === BasicShapes.text) {
+                const points = getDefaultGeometryPoints(pointer, point);
+                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text);
+                Transforms.insertNode(board, textElement, [board.children.length]);
+                clearSelectedElement(board);
+                addSelectedElement(board, textElement);
+                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+                start = null;
+            }
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        geometryShapeG?.remove();
+        geometryShapeG = createG();
+        const geometryGenerator = new GeometryShapeGenerator(board);
+        const drawMode = !!start;
+        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const pointer = PlaitBoard.getPointer(board);
+        if (drawMode && pointer !== BasicShapes.text) {
+            const points = normalizeShapePoints([start, movingPoint], isShift);
+            temporaryElement = createGeometryElement(pointer, points, '', {
+                strokeColor: DefaultBasicShapeProperty.strokeColor,
+                strokeWidth: DefaultBasicShapeProperty.strokeWidth
+            });
+            geometryGenerator.draw(temporaryElement, geometryShapeG);
+            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        const isDrawMode = !!start;
+        if (isDrawMode) {
+            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
+            if (Math.hypot(width, height) === 0) {
+                const pointer = PlaitBoard.getPointer(board);
+                const points = getDefaultGeometryPoints(pointer, targetPoint);
+                if (pointer !== BasicShapes.text) {
+                    temporaryElement = createGeometryElement(pointer, points, '', {
+                        strokeColor: DefaultBasicShapeProperty.strokeColor,
+                        strokeWidth: DefaultBasicShapeProperty.strokeWidth
+                    });
+                }
+            }
+        }
+        if (temporaryElement) {
+            Transforms.insertNode(board, temporaryElement, [board.children.length]);
+            clearSelectedElement(board);
+            addSelectedElement(board, temporaryElement);
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+        }
+        geometryShapeG?.remove();
+        geometryShapeG = null;
+        start = null;
+        temporaryElement = null;
+        preventTouchMove(board, event, false);
+        pointerUp(event);
+    };
+    return board;
+};
+const getDefaultGeometryPoints = (pointer, targetPoint) => {
+    const defaultProperty = getGeometryDefaultProperty(pointer);
+    return getPointsByCenterPoint(targetPoint, defaultProperty.width, defaultProperty.height);
+};
+const getGeometryDefaultProperty = (pointer) => {
+    const isText = pointer === BasicShapes.text;
+    const isFlowChart = getFlowchartPointers().includes(pointer);
+    if (isText) {
+        return DefaultTextProperty;
+    }
+    else if (isFlowChart) {
+        return getDefaultFlowchartProperty(pointer);
+    }
+    else {
+        return DefaultBasicShapeProperty;
+    }
+};
+const getTemporaryTextG = (movingPoint) => {
+    const textG = createG();
+    const width = DefaultTextProperty.width - ShapeDefaultSpace.rectangleAndText * 2;
+    const foreignObject = createForeignObject(movingPoint[0] - width / 2, movingPoint[1] - DefaultTextProperty.height / 2, width, DefaultTextProperty.height);
+    const richtext = document.createElement('div');
+    richtext.textContent = DefaultTextProperty.text;
+    richtext.style.fontSize = `${DEFAULT_FONT_SIZE}px`;
+    richtext.style.cursor = 'default';
+    foreignObject.appendChild(richtext);
+    textG.appendChild(foreignObject);
+    return textG;
+};
+
+const DefaultLineStyle = {
+    strokeWidth: 2,
+    strokeColor: '#000'
+};
+
+const createGeometryElement = (shape, points, text, options) => {
+    let textOptions = {};
+    let alignment = Alignment.center;
+    if (shape === BasicShapes.text) {
+        textOptions = { autoSize: true };
+        alignment = undefined;
+    }
+    let flowchartOptions = {};
+    if (getFlowchartPointers().includes(shape)) {
+        flowchartOptions = { fill: '#ffffff' };
+    }
+    return {
+        id: idCreator(),
+        type: 'geometry',
+        shape,
+        angle: 0,
+        opacity: 1,
+        textHeight: DefaultTextProperty.height,
+        text: buildText(text, alignment),
+        points,
+        ...textOptions,
+        ...options,
+        ...flowchartOptions
+    };
+};
+const getPointsByCenterPoint = (point, width, height) => {
+    const leftTopPoint = [point[0] - width / 2, point[1] - height / 2];
+    const rightBottomPoint = [point[0] + width / 2, point[1] + height / 2];
+    return [leftTopPoint, rightBottomPoint];
+};
+const 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 - height) / 2
+    };
+};
+const drawBoundMask = (board, element) => {
+    const G = createG();
+    const rectangle = getRectangleByPoints(element.points);
+    const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
+    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(shape).getConnectorPoints(activeRectangle);
+    connectorPoints.forEach(point => {
+        const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 6, {
+            stroke: '#999999',
+            strokeWidth: 1,
+            fill: '#FFF',
+            fillStyle: 'solid'
+        });
+        G.appendChild(circleG);
+    });
+    return G;
+};
+const drawGeometry = (board, outerRectangle, shape, options) => {
+    return getEngine(shape).draw(board, outerRectangle, options);
+};
+const getNearestPoint = (element, point, inflateDelta = 0) => {
+    const rectangle = getRectangleByPoints(element.points);
+    const activeRectangle = RectangleClient.inflate(rectangle, inflateDelta);
+    const shape = getShape(element);
+    return getEngine(shape).getNearestPoint(activeRectangle, point);
+};
+const getCenterPointsOnPolygon = (points) => {
+    const centerPoint = [];
+    for (let i = 0; i < points.length; i++) {
+        let j = i == points.length - 1 ? 0 : i + 1;
+        centerPoint.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
+    }
+    return centerPoint;
+};
+const getEdgeOnPolygonByPoint = (corners, point) => {
+    for (let index = 1; index <= corners.length; index++) {
+        let start = corners[index - 1];
+        let end = index === corners.length ? corners[0] : corners[index];
+        const distance = distanceBetweenPointAndSegment(point[0], point[1], start[0], start[1], end[0], end[1]);
+        if (distance < 1) {
+            return [start, end];
+        }
+    }
+    return null;
+};
+const getDefaultFlowchartProperty = (symbol) => {
+    return DefaultFlowchartPropertyMap[symbol];
+};
+const createDefaultFlowchart = (point) => {
+    const decisionProperty = getDefaultFlowchartProperty(FlowchartSymbols.decision);
+    const processProperty = getDefaultFlowchartProperty(FlowchartSymbols.process);
+    const terminalProperty = getDefaultFlowchartProperty(FlowchartSymbols.terminal);
+    const options = {
+        strokeColor: DefaultBasicShapeProperty.strokeColor,
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth
+    };
+    const lineOptions = {
+        strokeColor: DefaultLineStyle.strokeColor,
+        strokeWidth: DefaultLineStyle.strokeWidth
+    };
+    const startElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, point), '开始', options);
+    const processPoint1 = [point[0], point[1] + terminalProperty.height / 2 + 55 + processProperty.height / 2];
+    const processElement1 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint1), '过程', options);
+    const decisionPoint = [processPoint1[0], processPoint1[1] + processProperty.height / 2 + 55 + decisionProperty.height / 2];
+    const decisionElement = createGeometryElement(FlowchartSymbols.decision, getDefaultGeometryPoints(FlowchartSymbols.decision, decisionPoint), '过程', options);
+    const processPoint2 = [decisionPoint[0] + decisionProperty.width / 2 + 75 + processProperty.width / 2, decisionPoint[1]];
+    const processElement2 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint2), '过程', options);
+    const endPoint = [decisionPoint[0], decisionPoint[1] + decisionProperty.height / 2 + 95 + terminalProperty.height / 2];
+    const endElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, endPoint), '结束', options);
+    const line1 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
+    const line2 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
+    const line3 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
+        {
+            text: buildText('是'),
+            position: 0.5,
+            width: 14,
+            height: 20
+        }
+    ], lineOptions);
+    const line4 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
+        {
+            text: buildText('否'),
+            position: 0.5,
+            width: 14,
+            height: 20
+        }
+    ], lineOptions);
+    const line5 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: LineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
+    return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
+};
+
+const drawLineArrow = (element, points, options) => {
+    const arrowG = createG();
+    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
+        return null;
+    }
+    if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
+        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 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, arrowOptions, options) => {
+    const { marker, source, target, isSource } = arrowOptions;
+    let targetArrow;
+    switch (marker) {
+        case LineMarkerType.openTriangle: {
+            targetArrow = drawOpenTriangle(element, source, target, options);
+            break;
+        }
+        case LineMarkerType.solidTriangle: {
+            targetArrow = drawSolidTriangle(source, target, options);
+            break;
+        }
+        case LineMarkerType.arrow: {
+            targetArrow = drawArrow(element, source, target, options);
+            break;
+        }
+        case LineMarkerType.sharpArrow: {
+            targetArrow = drawSharpArrow(source, target, options);
+            break;
+        }
+        case LineMarkerType.oneSideUp: {
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
+            break;
+        }
+        case LineMarkerType.oneSideDown: {
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
+            break;
+        }
+        case LineMarkerType.hollowTriangle: {
+            targetArrow = drawHollowTriangleArrow(source, target, options);
+            break;
+        }
+        case LineMarkerType.singleSlash: {
+            targetArrow = drawSingleSlash(source, target, isSource, options);
+            break;
+        }
+    }
+    return targetArrow;
+};
+const drawSharpArrow = (source, target, options) => {
+    const startPoint = target;
+    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 20);
+    const g = createG();
+    const path = createPath();
+    let polylinePath = `M${pointRight[0]},${pointRight[1]}A8,8,20,0,1,${pointLeft[0]},${pointLeft[1]}L${startPoint[0]},${startPoint[1]}Z`;
+    path.setAttribute('d', polylinePath);
+    path.setAttribute('stroke', `${options?.stroke}`);
+    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
+    path.setAttribute('fill', `${options?.stroke}`);
+    g.appendChild(path);
+    return g;
+};
+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 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);
+    const path = arrowG.querySelector('path');
+    path.setAttribute('stroke-linejoin', 'round');
+    return arrowG;
+};
+const drawSolidTriangle = (source, target, options) => {
+    const endPoint = target;
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 30);
+    return drawLinearPath([pointLeft, endPoint, pointRight], { ...options, fill: options.stroke }, true);
+};
+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 { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 40);
     return drawLinearPath([pointLeft, endPoint, pointRight], options);
@@ -1375,13 +1758,13 @@ const drawHollowTriangleArrow = (source, target, options) => {
     return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
 };
 
-const createLineElement = (shape, points, source, target, options) => {
+const createLineElement = (shape, points, source, target, texts, options) => {
     return {
         id: idCreator(),
         type: 'line',
         shape,
         source,
-        texts: [],
+        texts: texts ? texts : [],
         target,
         opacity: 1,
         points,
@@ -1452,8 +1835,41 @@ const getLineHandleRefPair = (board, element) => {
 const getElbowPoints = (board, element) => {
     if (element.points.length === 2) {
         const handleRefPair = getLineHandleRefPair(board, element);
-        const offset = element.source.boundId || element.target.boundId ? 30 : 0;
-        let points = getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, offset);
+        const offset = element.source.boundId || element.target.boundId ? DEFAULT_ROUTE_MARGIN : 0;
+        const sourceElement = element.source.boundId && getElementById(board, element.source.boundId);
+        const targetElement = element.target.boundId && getElementById(board, element.target.boundId);
+        const isBound = sourceElement && targetElement;
+        let points = [];
+        if (isBound) {
+            const targetRectangle = RectangleClient.inflate(getRectangleByPoints(targetElement.points), getStrokeWidthByElement(targetElement) * 2);
+            const sourceRectangle = RectangleClient.inflate(getRectangleByPoints(sourceElement.points), getStrokeWidthByElement(sourceElement) * 2);
+            const sourcePoint = handleRefPair.source.point;
+            const targetPoint = handleRefPair.target.point;
+            const { sourceOffset, targetOffset } = reduceRouteMargin(sourceRectangle, targetRectangle);
+            const sourceOuterRectangle = RectangleClient.expand(sourceRectangle, sourceOffset[3], sourceOffset[0], sourceOffset[1], sourceOffset[2]);
+            const targetOuterRectangle = RectangleClient.expand(targetRectangle, targetOffset[3], targetOffset[0], targetOffset[1], targetOffset[2]);
+            const nextSourcePoint = getNextPoint(sourcePoint, sourceOuterRectangle, handleRefPair.source.direction);
+            const nextTargetPoint = getNextPoint(targetPoint, targetOuterRectangle, handleRefPair.target.direction);
+            const isIntersect = RectangleClient.isPointInRectangle(targetRectangle, sourcePoint) ||
+                RectangleClient.isPointInRectangle(targetOuterRectangle, nextSourcePoint) ||
+                RectangleClient.isPointInRectangle(sourceOuterRectangle, nextTargetPoint) ||
+                RectangleClient.isPointInRectangle(sourceRectangle, targetPoint);
+            if (!isIntersect) {
+                points = generateElbowLineRoute({
+                    sourcePoint,
+                    nextSourcePoint,
+                    sourceRectangle,
+                    sourceOuterRectangle,
+                    targetPoint,
+                    nextTargetPoint,
+                    targetRectangle,
+                    targetOuterRectangle
+                });
+            }
+        }
+        if (!points.length) {
+            points = getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, offset);
+        }
         points = removeDuplicatePoints(points);
         return points;
     }
@@ -1626,17 +2042,6 @@ const getBoardLines = (board) => {
         recursion: (element) => PlaitDrawElement.isDrawElement(element)
     });
 };
-const removeDuplicatePoints = (points) => {
-    const newArray = [];
-    points.forEach(point => {
-        const index = newArray.findIndex(otherPoint => {
-            return point[0] === otherPoint[0] && point[1] === otherPoint[1];
-        });
-        if (index === -1)
-            newArray.push(point);
-    });
-    return newArray;
-};
 const getExtendPoint = (source, target, extendDistance) => {
     const distance = distanceBetweenPointAndPoint(...source, ...target);
     const sin = (target[1] - source[1]) / distance;
@@ -1702,6 +2107,55 @@ const getSelectedImageElements = (board) => {
     return selectedElements;
 };
 
+const isRectangleHitDrawElement = (board, element, selection) => {
+    if (PlaitDrawElement.isGeometry(element)) {
+        const client = getRectangleByPoints(element.points);
+        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
+        if (element.textHeight > client.height) {
+            const textClient = getTextRectangle(element);
+            return RectangleClient.isHit(rangeRectangle, client) || RectangleClient.isHit(rangeRectangle, textClient);
+        }
+        return RectangleClient.isHit(rangeRectangle, client);
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = getRectangleByPoints(element.points);
+        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
+        return RectangleClient.isHit(rangeRectangle, client);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        const points = getLinePoints(board, element);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const isHitText = isHitLineText(board, element, selection.focus);
+        const isHit = isHitPolyLine(points, selection.focus, strokeWidth, 3) || isHitText;
+        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
+        const isContainPolyLinePoint = points.some(point => {
+            return RectangleClient.isHit(rangeRectangle, RectangleClient.toRectangleClient([point, point]));
+        });
+        const isIntersect = Point.isEquals(selection.anchor, selection.focus) ? isHit : isPolylineHitRectangle(points, rangeRectangle);
+        return isContainPolyLinePoint || isIntersect;
+    }
+    return null;
+};
+const isHitDrawElement = (board, element, point) => {
+    if (PlaitDrawElement.isGeometry(element)) {
+        const fill = getFillByElement(element);
+        if (fill !== DefaultGeometryStyle.fill) {
+            return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
+        }
+        else {
+            const strokeWidth = getStrokeWidthByElement(element);
+            const engine = getEngine(getShape(element));
+            const corners = engine.getCornerPoints(getRectangleByPoints(element.points));
+            const isHit = isHitPolyLine(corners, point, strokeWidth, 3);
+            return isHit;
+        }
+    }
+    if (PlaitDrawElement.isImage(element) || PlaitDrawElement.isLine(element)) {
+        return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
+    }
+    return null;
+};
+
 var LineMarkerType;
 (function (LineMarkerType) {
     LineMarkerType["arrow"] = "arrow";
@@ -1762,206 +2216,51 @@ const PlaitLine = {
     getPoints(board, line) {
         let sourcePoint = line.source.boundId
             ? getConnectionPoint(getElementById(board, line.source.boundId), line.source.connection)
-            : line.points[0];
-        let targetPoint = line.target.boundId
-            ? getConnectionPoint(getElementById(board, line.target.boundId), line.target.connection)
-            : line.points[line.points.length - 1];
-        const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
-        return [sourcePoint, ...restPoints, targetPoint];
-    }
-};
-
-var StrokeStyle;
-(function (StrokeStyle) {
-    StrokeStyle["solid"] = "solid";
-    StrokeStyle["dashed"] = "dashed";
-})(StrokeStyle || (StrokeStyle = {}));
-
-const PlaitDrawElement = {
-    isGeometry: (value) => {
-        return value.type === 'geometry';
-    },
-    isLine: (value) => {
-        return value.type === 'line';
-    },
-    isText: (value) => {
-        return value.type === 'geometry' && value.shape === BasicShapes.text;
-    },
-    isImage: (value) => {
-        return value.type === 'image';
-    },
-    isDrawElement: (value) => {
-        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value) || PlaitDrawElement.isImage(value)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    isShape: (value) => {
-        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
-    },
-    isBaseShape: (value) => {
-        return Object.keys(BasicShapes).includes(value.type);
-    },
-    isFlowchart: (value) => {
-        return Object.keys(FlowchartSymbols).includes(value.type);
-    }
-};
-
-class GeometryShapeGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    baseDraw(element, data) {
-        const rectangle = getRectangleByPoints(element.points);
-        const shape = element.shape;
-        if (shape === BasicShapes.text) {
-            return;
-        }
-        const strokeWidth = getStrokeWidthByElement(element);
-        const strokeColor = getStrokeColorByElement(element);
-        const fill = getFillByElement(element);
-        const strokeLineDash = getLineDashByElement(element);
-        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
-            stroke: strokeColor,
-            strokeWidth,
-            fill,
-            strokeLineDash
-        });
-    }
-}
-
-const insertGeometry = (board, points, shape) => {
-    let newElement = createGeometryElement(shape, points, '', {
-        strokeColor: DefaultBasicShapeProperty.strokeColor,
-        strokeWidth: DefaultBasicShapeProperty.strokeWidth
-    });
-    Transforms.insertNode(board, newElement, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-};
-const insertText = (board, points, text = '文本') => {
-    let newElement = createGeometryElement(BasicShapes.text, points, text);
-    Transforms.insertNode(board, newElement, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-};
-const resizeGeometry = (board, points, textHeight, path) => {
-    const normalizePoints = normalizeShapePoints(points);
-    const element = PlaitNode.get(board, path);
-    const newHeight = textHeight / board.viewport.zoom;
-    const newProperties = { points: normalizePoints, textHeight: newHeight };
-    if (PlaitDrawElement.isText(element) && element.autoSize) {
-        newProperties.autoSize = false;
-    }
-    Transforms.setNode(board, newProperties, path);
-};
-
-const normalizePoints = (board, element, width, textHeight) => {
-    let points = element.points;
-    let autoSize = element.autoSize;
-    const defaultSpace = ShapeDefaultSpace.rectangleAndText;
-    if (autoSize) {
-        const editor = PlaitGeometry.getTextEditor(element);
-        if (AlignEditor.isActive(editor, Alignment.right)) {
-            points = [
-                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
-                [points[1][0], points[0][1] + textHeight]
-            ];
-        }
-        else if (AlignEditor.isActive(editor, Alignment.center)) {
-            const oldWidth = Math.abs(points[0][0] - points[1][0]);
-            const offset = (width - oldWidth) / 2;
-            points = [
-                [points[0][0] - offset - defaultSpace, points[0][1]],
-                [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
-            ];
-        }
-        else {
-            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
-        }
-    }
-    return { points };
-};
-const setText = (board, element, text, width, textHeight) => {
-    const newElement = {
-        text,
-        textHeight,
-        ...normalizePoints(board, element, width, textHeight)
-    };
-    const path = board.children.findIndex(child => child === element);
-    Transforms.setNode(board, newElement, [path]);
-};
-const setTextSize = (board, element, textWidth, textHeight) => {
-    if (element.autoSize) {
-        const newElement = {
-            textHeight,
-            ...normalizePoints(board, element, textWidth, textHeight)
-        };
-        const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
-        const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
-        if (!isPointsEqual || !isTextHeightEqual) {
-            const path = board.children.findIndex(child => child === element);
-            Transforms.setNode(board, newElement, [path]);
-        }
-    }
-};
-
-const insertImage = (board, imageItem, startPoint) => {
-    const { width, height, url } = imageItem;
-    const host = BOARD_TO_HOST.get(board);
-    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
-    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
-    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
-    const points = startPoint
-        ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
-        : [
-            [point[0] - width / 2, point[1] - height / 2],
-            [point[0] + width / 2, point[1] + height / 2]
-        ];
-    const imageElement = {
-        id: idCreator(),
-        type: 'image',
-        points,
-        url
-    };
-    Transforms.insertNode(board, imageElement, [board.children.length]);
-    Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
+            : line.points[0];
+        let targetPoint = line.target.boundId
+            ? getConnectionPoint(getElementById(board, line.target.boundId), line.target.connection)
+            : line.points[line.points.length - 1];
+        const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
+        return [sourcePoint, ...restPoints, targetPoint];
+    }
 };
 
-const resizeLine = (board, options, path) => {
-    Transforms.setNode(board, options, path);
-};
-const setLineTexts = (board, element, texts) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { texts }, path);
-};
-const removeLineText = (board, element, index) => {
-    const path = PlaitBoard.findPath(board, element);
-    const texts = element.texts?.length ? [...element.texts] : [];
-    const newTexts = [...texts];
-    newTexts.splice(index, 1);
-    Transforms.setNode(board, { texts: newTexts }, path);
-};
-const setLineMark = (board, element, handleKey, marker) => {
-    const path = PlaitBoard.findPath(board, element);
-    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
-    handle = { ...handle, marker };
-    Transforms.setNode(board, { [handleKey]: handle }, path);
-};
+var StrokeStyle;
+(function (StrokeStyle) {
+    StrokeStyle["solid"] = "solid";
+    StrokeStyle["dashed"] = "dashed";
+})(StrokeStyle || (StrokeStyle = {}));
 
-const DrawTransforms = {
-    setText,
-    insertGeometry,
-    resizeGeometry,
-    insertText,
-    setTextSize,
-    resizeLine,
-    setLineTexts,
-    removeLineText,
-    setLineMark,
-    insertImage
+const PlaitDrawElement = {
+    isGeometry: (value) => {
+        return value.type === 'geometry';
+    },
+    isLine: (value) => {
+        return value.type === 'line';
+    },
+    isText: (value) => {
+        return value.type === 'geometry' && value.shape === BasicShapes.text;
+    },
+    isImage: (value) => {
+        return value.type === 'image';
+    },
+    isDrawElement: (value) => {
+        if (PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isLine(value) || PlaitDrawElement.isImage(value)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    isShape: (value) => {
+        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
+    },
+    isBaseShape: (value) => {
+        return Object.keys(BasicShapes).includes(value.type);
+    },
+    isFlowchart: (value) => {
+        return Object.keys(FlowchartSymbols).includes(value.type);
+    }
 };
 
 class GeometryComponent extends CommonPluginElement {
@@ -2362,172 +2661,6 @@ const withDrawHotkey = (board) => {
     return board;
 };
 
-const withGeometryCreateByDrag = (board) => {
-    const { pointerMove, pointerUp } = board;
-    let geometryShapeG = null;
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (dragMode) {
-            const points = getDefaultGeometryPoints(pointer, movingPoint);
-            if (pointer === BasicShapes.text) {
-                const textG = getTemporaryTextG(movingPoint);
-                geometryShapeG.appendChild(textG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-            else {
-                const temporaryElement = createGeometryElement(pointer, points, '', {
-                    strokeColor: DefaultBasicShapeProperty.strokeColor,
-                    strokeWidth: DefaultBasicShapeProperty.strokeWidth
-                });
-                geometryGenerator.draw(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-            }
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const pointer = PlaitBoard.getPointer(board);
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        const dragMode = isGeometryPointer && isDndMode(board);
-        if (dragMode) {
-            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const points = getDefaultGeometryPoints(pointer, targetPoint);
-            if (pointer === BasicShapes.text) {
-                DrawTransforms.insertText(board, points);
-            }
-            else {
-                DrawTransforms.insertGeometry(board, points, pointer);
-            }
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
-    };
-    return board;
-};
-const withGeometryCreateByDrawing = (board) => {
-    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
-    let start = null;
-    let geometryShapeG = null;
-    let temporaryElement = null;
-    let isShift = false;
-    board.keydown = (event) => {
-        isShift = isKeyHotkey('shift', event);
-        keydown(event);
-    };
-    board.keyup = (event) => {
-        isShift = false;
-        keyup(event);
-    };
-    board.pointerDown = (event) => {
-        const geometryPointers = getGeometryPointers();
-        const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        if (isGeometryPointer && isDrawingMode(board)) {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            start = point;
-            const pointer = PlaitBoard.getPointer(board);
-            preventTouchMove(board, event, true);
-            if (pointer === BasicShapes.text) {
-                const points = getDefaultGeometryPoints(pointer, point);
-                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text);
-                Transforms.insertNode(board, textElement, [board.children.length]);
-                clearSelectedElement(board);
-                addSelectedElement(board, textElement);
-                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-                start = null;
-            }
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        geometryShapeG?.remove();
-        geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
-        const drawMode = !!start;
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const pointer = PlaitBoard.getPointer(board);
-        if (drawMode && pointer !== BasicShapes.text) {
-            const points = normalizeShapePoints([start, movingPoint], isShift);
-            temporaryElement = createGeometryElement(pointer, points, '', {
-                strokeColor: DefaultBasicShapeProperty.strokeColor,
-                strokeWidth: DefaultBasicShapeProperty.strokeWidth
-            });
-            geometryGenerator.draw(temporaryElement, geometryShapeG);
-            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
-        }
-        pointerMove(event);
-    };
-    board.pointerUp = (event) => {
-        const isDrawMode = !!start;
-        if (isDrawMode) {
-            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
-            if (Math.hypot(width, height) === 0) {
-                const pointer = PlaitBoard.getPointer(board);
-                const points = getDefaultGeometryPoints(pointer, targetPoint);
-                if (pointer !== BasicShapes.text) {
-                    temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeColor: DefaultBasicShapeProperty.strokeColor,
-                        strokeWidth: DefaultBasicShapeProperty.strokeWidth
-                    });
-                }
-            }
-        }
-        if (temporaryElement) {
-            Transforms.insertNode(board, temporaryElement, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, temporaryElement);
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-        }
-        geometryShapeG?.remove();
-        geometryShapeG = null;
-        start = null;
-        temporaryElement = null;
-        preventTouchMove(board, event, false);
-        pointerUp(event);
-    };
-    return board;
-};
-const getDefaultGeometryPoints = (pointer, targetPoint) => {
-    const defaultProperty = getGeometryDefaultProperty(pointer);
-    return getPointsByCenterPoint(targetPoint, defaultProperty.width, defaultProperty.height);
-};
-const getGeometryDefaultProperty = (pointer) => {
-    const isText = pointer === BasicShapes.text;
-    const isFlowChart = getFlowchartPointers().includes(pointer);
-    if (isText) {
-        return DefaultTextProperty;
-    }
-    else if (isFlowChart) {
-        return getDefaultFlowchartProperty(pointer);
-    }
-    else {
-        return DefaultBasicShapeProperty;
-    }
-};
-const getTemporaryTextG = (movingPoint) => {
-    const textG = createG();
-    const width = DefaultTextProperty.width - ShapeDefaultSpace.rectangleAndText * 2;
-    const foreignObject = createForeignObject(movingPoint[0] - width / 2, movingPoint[1] - DefaultTextProperty.height / 2, width, DefaultTextProperty.height);
-    const richtext = document.createElement('div');
-    richtext.textContent = DefaultTextProperty.text;
-    richtext.style.fontSize = `${DEFAULT_FONT_SIZE}px`;
-    richtext.style.cursor = 'default';
-    foreignObject.appendChild(richtext);
-    textG.appendChild(foreignObject);
-    return textG;
-};
-
 const buildClipboardData = (board, elements, startPoint) => {
     return elements.map(element => {
         if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element)) {
@@ -2618,13 +2751,13 @@ const withDrawFragment = (baseBoard) => {
     };
     board.insertFragment = (data, targetPoint) => {
         const elements = getDataFromClipboard(data);
+        const selectedElements = getSelectedElements(board);
         const drawElements = elements.filter(value => PlaitDrawElement.isDrawElement(value));
         if (elements.length > 0 && drawElements.length > 0) {
             insertClipboardData(board, drawElements, targetPoint);
         }
         else if (elements.length === 0) {
             const text = getTextFromClipboard(data);
-            const selectedElements = getSelectedElements(board);
             // (*￣︶￣)
             const insertAsChildren = selectedElements.length === 1 && selectedElements[0].children;
             const insertAsFreeText = !insertAsChildren;
@@ -2636,7 +2769,8 @@ const withDrawFragment = (baseBoard) => {
         }
         if (data?.files.length) {
             const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
-            if (acceptImageArray.includes(data?.files[0].type)) {
+            const canInsertionImage = !getElementOfFocusedImage(board) && !(selectedElements.length === 1 && board.isImageBindingAllowed(selectedElements[0]));
+            if (acceptImageArray.includes(data?.files[0].type) && canInsertionImage) {
                 const imageFile = data.files[0];
                 buildImage(board, imageFile, DEFAULT_IMAGE_WIDTH, imageItem => {
                     DrawTransforms.insertImage(board, imageItem, targetPoint);
@@ -2653,11 +2787,6 @@ const getBoundedLineElements = (board, plaitShapes) => {
     return lines.filter(line => plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape)));
 };
 
-const DefaultLineStyle = {
-    strokeWidth: 2,
-    strokeColor: '#000'
-};
-
 const getHitGeometryResizeHandleRef = (board, element, point) => {
     const rectangle = getRectangleByPoints(element.points);
     const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
@@ -2714,7 +2843,7 @@ const withLineCreateByDraw = (board) => {
             targetRef.boundId = hitElement ? hitElement.id : undefined;
             const lineGenerator = new LineShapeGenerator(board);
             const lineShape = PlaitBoard.getPointer(board);
-            temporaryElement = createLineElement(lineShape, [start, movingPoint], { marker: LineMarkerType.none, connection: sourceRef.connection, boundId: sourceRef?.boundId }, { marker: LineMarkerType.arrow, connection: targetRef.connection, boundId: targetRef?.boundId }, {
+            temporaryElement = createLineElement(lineShape, [start, movingPoint], { marker: LineMarkerType.none, connection: sourceRef.connection, boundId: sourceRef?.boundId }, { marker: LineMarkerType.arrow, connection: targetRef.connection, boundId: targetRef?.boundId }, [], {
                 strokeColor: DefaultLineStyle.strokeColor,
                 strokeWidth: DefaultLineStyle.strokeWidth
             });
@@ -2953,9 +3082,9 @@ const withLineText = (board) => {
     const { dblclick } = board;
     board.dblclick = (event) => {
         const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const hitTarget = getHitElements(board, { ranges: [{ anchor: clickPoint, focus: clickPoint }] }, (element) => {
+        const hitTarget = getHitElementByPoint(board, clickPoint, (element) => {
             return PlaitDrawElement.isLine(element);
-        })[0];
+        });
         if (hitTarget) {
             const points = getLinePoints(board, hitTarget);
             const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
@@ -3064,7 +3193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const withDraw = (board) => {
-    const { drawElement, getRectangle, isHitSelection, isMovable, isAlign } = board;
+    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, isAlign } = board;
     board.drawElement = (context) => {
         if (PlaitDrawElement.isGeometry(context.element)) {
             return GeometryComponent;
@@ -3090,34 +3219,19 @@ const withDraw = (board) => {
         }
         return getRectangle(element);
     };
-    board.isHitSelection = (element, range) => {
-        if (PlaitDrawElement.isGeometry(element)) {
-            const client = getRectangleByPoints(element.points);
-            const rangeRectangle = RectangleClient.toRectangleClient([range.anchor, range.focus]);
-            if (element.textHeight > client.height) {
-                const textClient = getTextRectangle(element);
-                return RectangleClient.isHit(rangeRectangle, client) || RectangleClient.isHit(rangeRectangle, textClient);
-            }
-            return RectangleClient.isHit(rangeRectangle, client);
-        }
-        if (PlaitDrawElement.isImage(element)) {
-            const client = getRectangleByPoints(element.points);
-            const rangeRectangle = RectangleClient.toRectangleClient([range.anchor, range.focus]);
-            return RectangleClient.isHit(rangeRectangle, client);
+    board.isRectangleHit = (element, selection) => {
+        const result = isRectangleHitDrawElement(board, element, selection);
+        if (result !== null) {
+            return result;
         }
-        if (PlaitDrawElement.isLine(element)) {
-            const points = getLinePoints(board, element);
-            const strokeWidth = getStrokeWidthByElement(element);
-            const isHitText = isHitLineText(board, element, range.focus);
-            const isHit = isHitPolyLine(points, range.focus, strokeWidth, 3) || isHitText;
-            const rangeRectangle = RectangleClient.toRectangleClient([range.anchor, range.focus]);
-            const isContainPolyLinePoint = points.some(point => {
-                return RectangleClient.isHit(rangeRectangle, RectangleClient.toRectangleClient([point, point]));
-            });
-            const isIntersect = range.anchor === range.focus ? isHit : isPolylineHitRectangle(points, rangeRectangle);
-            return isContainPolyLinePoint || isIntersect;
+        return isRectangleHit(element, selection);
+    };
+    board.isHit = (element, point) => {
+        const result = isHitDrawElement(board, element, point);
+        if (result !== null) {
+            return result;
         }
-        return isHitSelection(element, range);
+        return isHit(element, point);
     };
     board.isMovable = (element) => {
         if (PlaitDrawElement.isGeometry(element)) {
@@ -3152,5 +3266,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getEdgeOnPolygonByPoint, getElbowPoints, getExtendPoint, getFillByElement, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, isHitLineText, isHitPolyLine, removeDuplicatePoints, transformOpsToPoints, transformPointToConnection, withDraw };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getEdgeOnPolygonByPoint, getElbowPoints, getExtendPoint, getFillByElement, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map