@plait/draw 0.35.0 → 0.37.0

package/fesm2022/plait-draw.mjs

@@ -1,10 +1,10 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, ThemeColorMode, 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, distanceBetweenPointAndPoint, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, getHitElementByPoint, temporaryDisableSelection } from '@plait/core';
-import { getRectangleByPoints, Generator, PropertyTransforms, normalizeShapePoints, memorizeLatest, isDndMode, isDrawingMode, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, getRectangleResizeHandleRefs, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, CommonPluginElement, ActiveGenerator, WithTextPluginKey, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
-import { AlignEditor, Alignment, DEFAULT_FONT_SIZE, buildText, TextManage, getTextFromClipboard, getTextSize } from '@plait/text';
+import { PlaitElement, ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, createG, transformPoint, toPoint, preventTouchMove, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, idCreator, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, PlaitNode, BOARD_TO_HOST, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { getRectangleByPoints, Generator, isDndMode, isDrawingMode, normalizeShapePoints, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, getRectangleResizeHandleRefs, getMemorizedLatest, memorizeLatest, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+import { TextManage, Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, getTextFromClipboard } 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 { NgZone, Component, ChangeDetectionStrategy } from '@angular/core';
+import { pointsOnBezierCurves } from 'points-on-curve';
 import { Subject } from 'rxjs';
 import { Node } from 'slate';
 
@@ -1223,181 +1223,11 @@ class GeometryShapeGenerator extends Generator {
     }
 }
 
-const setStrokeColor = (board, strokeColor) => {
-    PropertyTransforms.setProperty(board, { strokeColor }, { getMemorizeKey });
-};
-const setStrokeWidth = (board, strokeWidth) => {
-    PropertyTransforms.setProperty(board, { strokeWidth }, { getMemorizeKey });
-};
-const setFillColor = (board, fill) => {
-    PropertyTransforms.setProperty(board, { fill }, { getMemorizeKey });
-};
-const setStrokeStyle = (board, strokeStyle) => {
-    PropertyTransforms.setProperty(board, { strokeStyle }, { getMemorizeKey });
-};
-const getMemorizeKey = (element) => {
-    let key = '';
-    switch (true) {
-        case PlaitDrawElement.isBaseShape(element): {
-            key = MemorizeKey.basicShape;
-            break;
-        }
-        case PlaitDrawElement.isFlowchart(element): {
-            key = MemorizeKey.flowchart;
-            break;
-        }
-        case PlaitDrawElement.isLine(element): {
-            key = MemorizeKey.line;
-            break;
-        }
-    }
-    return key;
-};
-
-const insertGeometry = (board, points, shape) => {
-    let newElement = createGeometryElement(shape, points, '', {
-        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 transformShape = (board, element, shape) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { shape }, path);
-};
-
-const normalizePoints = (board, element, width, textHeight) => {
-    let points = element.points;
-    let autoSize = element.autoSize;
-    const defaultSpace = ShapeDefaultSpace.rectangleAndText;
-    if (autoSize) {
-        const editor = PlaitGeometry.getTextEditor(element);
-        if (AlignEditor.isActive(editor, Alignment.right)) {
-            points = [
-                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
-                [points[1][0], points[0][1] + textHeight]
-            ];
-        }
-        else if (AlignEditor.isActive(editor, Alignment.center)) {
-            const oldWidth = Math.abs(points[0][0] - points[1][0]);
-            const offset = (width - oldWidth) / 2;
-            points = [
-                [points[0][0] - offset - defaultSpace, points[0][1]],
-                [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
-            ];
-        }
-        else {
-            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
-        }
-    }
-    return { points };
-};
-const setText = (board, element, text, width, textHeight) => {
-    const newElement = {
-        text,
-        textHeight,
-        ...normalizePoints(board, element, width, textHeight)
-    };
-    const path = board.children.findIndex(child => child === element);
-    Transforms.setNode(board, newElement, [path]);
-};
-const setTextSize = (board, element, textWidth, textHeight) => {
-    if (element.autoSize) {
-        const newElement = {
-            textHeight,
-            ...normalizePoints(board, element, textWidth, textHeight)
-        };
-        const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
-        const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
-        if (!isPointsEqual || !isTextHeightEqual) {
-            const path = board.children.findIndex(child => child === element);
-            Transforms.setNode(board, newElement, [path]);
-        }
-    }
-};
-
-const insertImage = (board, imageItem, startPoint) => {
-    const { width, height, url } = imageItem;
-    const host = BOARD_TO_HOST.get(board);
-    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
-    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
-    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
-    const points = startPoint
-        ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
-        : [
-            [point[0] - width / 2, point[1] - height / 2],
-            [point[0] + width / 2, point[1] + height / 2]
-        ];
-    const imageElement = {
-        id: idCreator(),
-        type: 'image',
-        points,
-        url
-    };
-    Transforms.insertNode(board, imageElement, [board.children.length]);
-    Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
-};
-
-const resizeLine = (board, options, path) => {
-    Transforms.setNode(board, options, path);
-};
-const setLineTexts = (board, element, texts) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { texts }, path);
-};
-const removeLineText = (board, element, index) => {
-    const path = PlaitBoard.findPath(board, element);
-    const texts = element.texts?.length ? [...element.texts] : [];
-    const newTexts = [...texts];
-    newTexts.splice(index, 1);
-    Transforms.setNode(board, { texts: newTexts }, path);
-};
-const setLineMark = (board, element, handleKey, marker) => {
-    const path = PlaitBoard.findPath(board, element);
-    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
-    handle = { ...handle, marker };
-    memorizeLatest(MemorizeKey.line, handleKey, marker);
-    Transforms.setNode(board, { [handleKey]: handle }, path);
-};
-
-const DrawTransforms = {
-    setText,
-    insertGeometry,
-    resizeGeometry,
-    insertText,
-    setTextSize,
-    resizeLine,
-    setLineTexts,
-    removeLineText,
-    setLineMark,
-    insertImage,
-    transformShape,
-    setStrokeColor,
-    setStrokeWidth,
-    setFillColor,
-    setStrokeStyle
-};
-
 const withGeometryCreateByDrag = (board) => {
     const { pointerMove, pointerUp } = board;
     let geometryShapeG = null;
+    let temporaryElement = null;
+    let fakeCreateTextRef = null;
     board.pointerMove = (event) => {
         geometryShapeG?.remove();
         geometryShapeG = createG();
@@ -1408,16 +1238,39 @@ const withGeometryCreateByDrag = (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);
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
             if (pointer === BasicShapes.text) {
-                const textG = getTemporaryTextG(movingPoint);
-                geometryShapeG.appendChild(textG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+                const points = getDefaultGeometryPoints(board, pointer, movingPoint, memorizedLatest.textProperties['font-size']);
+                temporaryElement = createGeometryElement(board, BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, memorizedLatest.textProperties);
+                if (!fakeCreateTextRef) {
+                    const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
+                        getRectangle: () => {
+                            return getTextRectangle(temporaryElement);
+                        }
+                    });
+                    PlaitBoard.getComponent(board)
+                        .viewContainerRef.injector.get(NgZone)
+                        .run(() => {
+                        textManage.draw(temporaryElement.text);
+                    });
+                    fakeCreateTextRef = {
+                        g: createG(),
+                        textManage
+                    };
+                    PlaitBoard.getHost(board).append(fakeCreateTextRef.g);
+                    fakeCreateTextRef.g.append(textManage.g);
+                }
+                else {
+                    fakeCreateTextRef.textManage.updateRectangle();
+                    fakeCreateTextRef.g.append(fakeCreateTextRef.textManage.g);
+                }
             }
             else {
-                const temporaryElement = createGeometryElement(pointer, points, '', {
-                    strokeWidth: DefaultBasicShapeProperty.strokeWidth
-                });
+                const points = getDefaultGeometryPoints(board, pointer, movingPoint);
+                temporaryElement = createGeometryElement(board, pointer, points, '', {
+                    strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                    ...memorizedLatest.geometryProperties
+                }, memorizedLatest.textProperties);
                 geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
                 PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
             }
@@ -1425,20 +1278,14 @@ const withGeometryCreateByDrag = (board) => {
         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);
+        if (dragMode && temporaryElement) {
+            insertElement(board, temporaryElement);
+            fakeCreateTextRef?.textManage.destroy();
+            fakeCreateTextRef?.g.remove();
+            fakeCreateTextRef = null;
         }
         geometryShapeG?.remove();
         geometryShapeG = null;
@@ -1464,14 +1311,15 @@ const withGeometryCreateByDrawing = (board) => {
     board.pointerDown = (event) => {
         const geometryPointers = getGeometryPointers();
         const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
-        if (isGeometryPointer && isDrawingMode(board)) {
+        if (!PlaitBoard.isReadonly(board) && 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);
+                const memorizedLatest = getMemorizedLatestByPointer(pointer);
+                const points = getDefaultGeometryPoints(board, pointer, point, memorizedLatest.textProperties['font-size']);
+                const textElement = createGeometryElement(board, BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, memorizedLatest.textProperties);
                 Transforms.insertNode(board, textElement, [board.children.length]);
                 clearSelectedElement(board);
                 addSelectedElement(board, textElement);
@@ -1490,9 +1338,11 @@ const withGeometryCreateByDrawing = (board) => {
         const pointer = PlaitBoard.getPointer(board);
         if (drawMode && pointer !== BasicShapes.text) {
             const points = normalizeShapePoints([start, movingPoint], isShift);
-            temporaryElement = createGeometryElement(pointer, points, '', {
-                strokeWidth: DefaultBasicShapeProperty.strokeWidth
-            });
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
+            temporaryElement = createGeometryElement(board, pointer, points, '', {
+                strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                ...memorizedLatest.geometryProperties
+            }, memorizedLatest.textProperties);
             geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
             PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
         }
@@ -1505,19 +1355,18 @@ const withGeometryCreateByDrawing = (board) => {
             const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
             if (Math.hypot(width, height) === 0) {
                 const pointer = PlaitBoard.getPointer(board);
-                const points = getDefaultGeometryPoints(pointer, targetPoint);
+                const points = getDefaultGeometryPoints(board, pointer, targetPoint);
                 if (pointer !== BasicShapes.text) {
-                    temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeWidth: DefaultBasicShapeProperty.strokeWidth
-                    });
+                    const memorizedLatest = getMemorizedLatestByPointer(pointer);
+                    temporaryElement = createGeometryElement(board, pointer, points, '', {
+                        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                        ...memorizedLatest.geometryProperties
+                    }, memorizedLatest.textProperties);
                 }
             }
         }
         if (temporaryElement) {
-            Transforms.insertNode(board, temporaryElement, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, temporaryElement);
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+            insertElement(board, temporaryElement);
         }
         geometryShapeG?.remove();
         geometryShapeG = null;
@@ -1528,15 +1377,15 @@ const withGeometryCreateByDrawing = (board) => {
     };
     return board;
 };
-const getDefaultGeometryPoints = (pointer, targetPoint) => {
-    const defaultProperty = getGeometryDefaultProperty(pointer);
+const getDefaultGeometryPoints = (board, pointer, targetPoint, fontSize) => {
+    const defaultProperty = getGeometryDefaultProperty(board, pointer, fontSize);
     return getPointsByCenterPoint(targetPoint, defaultProperty.width, defaultProperty.height);
 };
-const getGeometryDefaultProperty = (pointer) => {
+const getGeometryDefaultProperty = (board, pointer, fontSize) => {
     const isText = pointer === BasicShapes.text;
     const isFlowChart = getFlowchartPointers().includes(pointer);
     if (isText) {
-        return DefaultTextProperty;
+        return getDefaultTextShapeProperty(board, fontSize);
     }
     else if (isFlowChart) {
         return getDefaultFlowchartProperty(pointer);
@@ -1545,17 +1394,12 @@ const getGeometryDefaultProperty = (pointer) => {
         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 insertElement = (board, element) => {
+    memorizeLatestShape(board, element.shape);
+    Transforms.insertNode(board, element, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, element);
+    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
 };
 
 const DefaultLineStyle = {
@@ -1563,22 +1407,30 @@ const DefaultLineStyle = {
     strokeColor: '#000'
 };
 const LINE_TEXT_SPACE = 4;
+const LINE_AUTO_COMPLETE_DIAMETER = 6;
+const LINE_AUTO_COMPLETE_OPACITY = 0.6;
+const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
+const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 
-const createGeometryElement = (shape, points, text, options) => {
+const createGeometryElement = (board, shape, points, text, options = {}, textProperties = {}) => {
     let textOptions = {};
     let alignment = Alignment.center;
     if (shape === BasicShapes.text) {
         textOptions = { autoSize: true };
         alignment = undefined;
     }
+    textProperties = { ...textProperties };
+    textProperties?.align && (alignment = textProperties?.align);
+    delete textProperties?.align;
+    const textHeight = getDefaultTextShapeProperty(board, textProperties['font-size']).height;
     return {
         id: idCreator(),
         type: 'geometry',
         shape,
         angle: 0,
         opacity: 1,
-        textHeight: DefaultTextProperty.height,
-        text: buildText(text, alignment),
+        textHeight,
+        text: buildText(text, alignment, textProperties),
         points,
         ...textOptions,
         ...options
@@ -1656,7 +1508,7 @@ const getEdgeOnPolygonByPoint = (corners, point) => {
 const getDefaultFlowchartProperty = (symbol) => {
     return DefaultFlowchartPropertyMap[symbol];
 };
-const createDefaultFlowchart = (point) => {
+const createDefaultFlowchart = (board, point) => {
     const decisionProperty = getDefaultFlowchartProperty(FlowchartSymbols.decision);
     const processProperty = getDefaultFlowchartProperty(FlowchartSymbols.process);
     const terminalProperty = getDefaultFlowchartProperty(FlowchartSymbols.terminal);
@@ -1666,15 +1518,15 @@ const createDefaultFlowchart = (point) => {
     const lineOptions = {
         strokeWidth: DefaultLineStyle.strokeWidth
     };
-    const startElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, point), '开始', options);
+    const startElement = createGeometryElement(board, FlowchartSymbols.terminal, getDefaultGeometryPoints(board, 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 processElement1 = createGeometryElement(board, FlowchartSymbols.process, getDefaultGeometryPoints(board, 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 decisionElement = createGeometryElement(board, FlowchartSymbols.decision, getDefaultGeometryPoints(board, 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 processElement2 = createGeometryElement(board, FlowchartSymbols.process, getDefaultGeometryPoints(board, 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 endElement = createGeometryElement(board, FlowchartSymbols.terminal, getDefaultGeometryPoints(board, FlowchartSymbols.terminal, endPoint), '结束', options);
     const line1 = createLineElement(LineShape.elbow, [
         [0, 0],
         [0, 0]
@@ -1731,8 +1583,17 @@ const getDrawDefaultStrokeColor = (theme) => {
 const getFlowchartDefaultFill = (theme) => {
     return DrawThemeColors[theme].fill;
 };
+const getDefaultTextShapeProperty = (board, fontSize) => {
+    fontSize = fontSize ? Number(fontSize) : DEFAULT_FONT_SIZE;
+    const textSize = getTextSize(board, '文本', 10, { fontSize });
+    return {
+        width: textSize.width + ShapeDefaultSpace.rectangleAndText * 2,
+        height: textSize.height,
+        text: '文本'
+    };
+};
 
-const MAX_LENGTH = 100;
+const ARROW_LENGTH = 20;
 const drawLineArrow = (element, points, options) => {
     const arrowG = createG();
     if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
@@ -1740,13 +1601,16 @@ const drawLineArrow = (element, points, options) => {
     }
     const strokeWidth = getStrokeWidthByElement(element);
     const offset = (strokeWidth * strokeWidth) / 3;
+    if (points.length === 1) {
+        points = [points[0], [points[0][0] + 0.1, points[0][1]]];
+    }
     if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
-        const source = getExtendPoint(points[0], points[1], 24 + offset);
+        const source = getExtendPoint(points[0], points[1], ARROW_LENGTH + offset);
         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 + offset);
+        const source = getExtendPoint(points[points.length - 1], points[points.length - 2], ARROW_LENGTH + offset);
         const arrow = getArrow(element, { marker: element.target.marker, source, target: points[points.length - 1], isSource: false }, options);
         arrow && arrowG.appendChild(arrow);
     }
@@ -1808,9 +1672,10 @@ 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 distance = distanceBetweenPointAndPoint(...source, ...endPoint);
     const middlePoint = [
-        endPoint[0] - (8 + strokeWidth / 2) * directionFactor.x,
-        endPoint[1] - (8 + strokeWidth / 2) * directionFactor.y
+        endPoint[0] - (((distance * 3) / 5 + strokeWidth) / 2) * directionFactor.x,
+        endPoint[1] - (((distance * 3) / 5 + strokeWidth) / 2) * directionFactor.y
     ];
     const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
     const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], { ...options, fill: options.stroke }, true);
@@ -1882,6 +1747,79 @@ const getHitOutlineGeometry = (board, point, offset = 0) => {
     return geometry;
 };
 
+const SHAPE_MAX_LENGTH = 6;
+const memorizedShape = new WeakMap();
+const getMemorizeKey = (element) => {
+    let key = '';
+    switch (true) {
+        case PlaitDrawElement.isText(element): {
+            key = MemorizeKey.text;
+            break;
+        }
+        case PlaitDrawElement.isBasicShape(element): {
+            key = MemorizeKey.basicShape;
+            break;
+        }
+        case PlaitDrawElement.isFlowchart(element): {
+            key = MemorizeKey.flowchart;
+            break;
+        }
+        case PlaitDrawElement.isLine(element): {
+            key = MemorizeKey.line;
+            break;
+        }
+    }
+    return key;
+};
+const getLineMemorizedLatest = () => {
+    const properties = getMemorizedLatest(MemorizeKey.line);
+    delete properties?.text;
+    return { ...properties } || {};
+};
+const getMemorizedLatestByPointer = (pointer) => {
+    let memorizeKey = '';
+    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
+        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
+    }
+    else {
+        memorizeKey = MemorizeKey.flowchart;
+    }
+    const properties = { ...getMemorizedLatest(memorizeKey) } || {};
+    const textProperties = properties.text || {};
+    delete properties.text;
+    return { textProperties, geometryProperties: properties };
+};
+const memorizeLatestText = (element, operations) => {
+    const memorizeKey = getMemorizeKey(element);
+    let textMemory = getMemorizedLatest(memorizeKey)?.text || {};
+    const setNodeOperation = operations.find(operation => operation.type === 'set_node');
+    if (setNodeOperation) {
+        const newProperties = setNodeOperation.newProperties;
+        textMemory = { ...textMemory, ...newProperties };
+        memorizeLatest(memorizeKey, 'text', textMemory);
+    }
+};
+const memorizeLatestShape = (board, shape) => {
+    const shapes = memorizedShape.has(board) ? memorizedShape.get(board) : [];
+    const shapeIndex = shapes.indexOf(shape);
+    if (shape === BasicShapes.text || shapeIndex === 0) {
+        return;
+    }
+    if (shapeIndex !== -1) {
+        shapes.splice(shapeIndex, 1);
+    }
+    else {
+        if (shapes.length === SHAPE_MAX_LENGTH) {
+            shapes.pop();
+        }
+    }
+    shapes.unshift(shape);
+    memorizedShape.set(board, shapes);
+};
+const getMemorizedLatestShape = (board) => {
+    return memorizedShape.get(board);
+};
+
 const createLineElement = (shape, points, source, target, texts, options) => {
     return {
         id: idCreator(),
@@ -2079,7 +2017,6 @@ const drawLine = (board, element) => {
     let points = getLinePoints(board, element);
     let line;
     if (element.shape === LineShape.curve) {
-        //TODO element.points 应为曲线拐点
         line = PlaitBoard.getRoughSVG(board).curve(points, options);
     }
     else {
@@ -2142,7 +2079,7 @@ const transformPointToConnection = (board, point, hitElement) => {
 const getHitConnectorPoint = (movingPoint, hitElement, rectangle) => {
     const shape = getShape(hitElement);
     const connector = getEngine(shape).getConnectorPoints(rectangle);
-    const points = getPointsByCenterPoint(movingPoint, 5, 5);
+    const points = getPointsByCenterPoint(movingPoint, 10, 10);
     const pointRectangle = getRectangleByPoints(points);
     return connector.find(point => {
         return RectangleClient.isHit(pointRectangle, RectangleClient.toRectangleClient([point, point]));
@@ -2223,8 +2160,15 @@ const handleLineCreating = (board, lineShape, startPoint, movingPoint, sourceEle
     const connection = sourceElement ? transformPointToConnection(board, startPoint, sourceElement) : undefined;
     const targetBoundId = hitElement ? hitElement.id : undefined;
     const lineGenerator = new LineShapeGenerator(board);
-    const temporaryLineElement = createLineElement(lineShape, [startPoint, movingPoint], { marker: LineMarkerType.none, connection: connection, boundId: sourceElement?.id }, { marker: LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
-        strokeWidth: DefaultLineStyle.strokeWidth
+    const memorizedLatest = getLineMemorizedLatest();
+    let sourceMarker, targetMarker;
+    sourceMarker = memorizedLatest.source;
+    targetMarker = memorizedLatest.target;
+    sourceMarker && delete memorizedLatest.source;
+    targetMarker && delete memorizedLatest.target;
+    const temporaryLineElement = createLineElement(lineShape, [startPoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: connection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
+        strokeWidth: DefaultLineStyle.strokeWidth,
+        ...memorizedLatest
     });
     const linePoints = getLinePoints(board, temporaryLineElement);
     const otherPoint = linePoints[0];
@@ -2392,6 +2336,7 @@ var MemorizeKey;
 (function (MemorizeKey) {
     MemorizeKey["basicShape"] = "basicShape";
     MemorizeKey["flowchart"] = "flowchart";
+    MemorizeKey["text"] = "text";
     MemorizeKey["line"] = "line";
 })(MemorizeKey || (MemorizeKey = {}));
 
@@ -2419,7 +2364,7 @@ const PlaitDrawElement = {
     isShape: (value) => {
         return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
     },
-    isBaseShape: (value) => {
+    isBasicShape: (value) => {
         return Object.keys(BasicShapes).includes(value.shape);
     },
     isFlowchart: (value) => {
@@ -2427,7 +2372,144 @@ const PlaitDrawElement = {
     }
 };
 
-class AutoCompleteGenerator extends Generator {
+const insertGeometry = (board, points, shape) => {
+    let newElement = createGeometryElement(board, shape, points, '', {
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth
+    });
+    Transforms.insertNode(board, newElement, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+};
+const insertText = (board, points, text = '文本') => {
+    let newElement = createGeometryElement(board, 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 transformShape = (board, element, shape) => {
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, { shape }, path);
+};
+
+const normalizePoints = (board, element, width, textHeight) => {
+    let points = element.points;
+    let autoSize = element.autoSize;
+    const defaultSpace = ShapeDefaultSpace.rectangleAndText;
+    if (autoSize) {
+        const editor = PlaitGeometry.getTextEditor(element);
+        if (AlignEditor.isActive(editor, Alignment.right)) {
+            points = [
+                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
+                [points[1][0], points[0][1] + textHeight]
+            ];
+        }
+        else if (AlignEditor.isActive(editor, Alignment.center)) {
+            const oldWidth = Math.abs(points[0][0] - points[1][0]);
+            const offset = (width - oldWidth) / 2;
+            points = [
+                [points[0][0] - offset - defaultSpace, points[0][1]],
+                [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
+            ];
+        }
+        else {
+            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
+        }
+    }
+    return { points };
+};
+const setText = (board, element, text, width, textHeight) => {
+    const newElement = {
+        text,
+        textHeight,
+        ...normalizePoints(board, element, width, textHeight)
+    };
+    const path = board.children.findIndex(child => child === element);
+    Transforms.setNode(board, newElement, [path]);
+};
+const setTextSize = (board, element, textWidth, textHeight) => {
+    if (element.autoSize) {
+        const newElement = {
+            textHeight,
+            ...normalizePoints(board, element, textWidth, textHeight)
+        };
+        const isPointsEqual = Point.isEquals(element.points[0], newElement.points[0]) && Point.isEquals(element.points[1], newElement.points[1]);
+        const isTextHeightEqual = Math.round(textHeight) === Math.round(element.textHeight);
+        if (!isPointsEqual || !isTextHeightEqual) {
+            const path = board.children.findIndex(child => child === element);
+            Transforms.setNode(board, newElement, [path]);
+        }
+    }
+};
+
+const insertImage = (board, imageItem, startPoint) => {
+    const { width, height, url } = imageItem;
+    const host = BOARD_TO_HOST.get(board);
+    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
+    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
+    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
+    const points = startPoint
+        ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
+        : [
+            [point[0] - width / 2, point[1] - height / 2],
+            [point[0] + width / 2, point[1] + height / 2]
+        ];
+    const imageElement = {
+        id: idCreator(),
+        type: 'image',
+        points,
+        url
+    };
+    Transforms.insertNode(board, imageElement, [board.children.length]);
+    Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
+};
+
+const resizeLine = (board, options, path) => {
+    Transforms.setNode(board, options, path);
+};
+const setLineTexts = (board, element, texts) => {
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, { texts }, path);
+};
+const removeLineText = (board, element, index) => {
+    const path = PlaitBoard.findPath(board, element);
+    const texts = element.texts?.length ? [...element.texts] : [];
+    const newTexts = [...texts];
+    newTexts.splice(index, 1);
+    Transforms.setNode(board, { texts: newTexts }, path);
+};
+const setLineMark = (board, element, handleKey, marker) => {
+    const path = PlaitBoard.findPath(board, element);
+    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
+    handle = { ...handle, marker };
+    memorizeLatest(MemorizeKey.line, handleKey, marker);
+    Transforms.setNode(board, { [handleKey]: handle }, path);
+};
+
+const DrawTransforms = {
+    setText,
+    insertGeometry,
+    resizeGeometry,
+    insertText,
+    setTextSize,
+    resizeLine,
+    setLineTexts,
+    removeLineText,
+    setLineMark,
+    insertImage,
+    transformShape
+};
+
+class LineAutoCompleteGenerator extends Generator {
     constructor(board) {
         super(board);
         this.board = board;
@@ -2446,18 +2528,18 @@ class AutoCompleteGenerator extends Generator {
         this.autoCompleteG = createG();
         const middlePoints = getAutoCompletePoints(element);
         middlePoints.forEach((point, index) => {
-            const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, RESIZE_HANDLE_DIAMETER, {
+            const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, LINE_AUTO_COMPLETE_DIAMETER, {
                 stroke: 'none',
-                fill: '#6698FF4d',
+                fill: RgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_OPACITY),
                 fillStyle: 'solid'
             });
-            circle.classList.add(`geometry-auto-complete-${index}`);
+            circle.classList.add(`line-auto-complete-${index}`);
             this.autoCompleteG.appendChild(circle);
         });
         return this.autoCompleteG;
     }
     removeAutoCompleteG(index) {
-        this.hoverElement = this.autoCompleteG.querySelector(`.geometry-auto-complete-${index}`);
+        this.hoverElement = this.autoCompleteG.querySelector(`.line-auto-complete-${index}`);
         this.hoverElement.style.visibility = 'hidden';
     }
     recoverAutoCompleteG() {
@@ -2509,7 +2591,7 @@ class GeometryComponent extends CommonPluginElement {
                 return selectedElements.length === 1 && !isSelectionMoving(this.board);
             }
         });
-        this.autoCompleteGenerator = new AutoCompleteGenerator(this.board);
+        this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
         this.shapeGenerator = new GeometryShapeGenerator(this.board);
         this.initializeTextManage();
     }
@@ -2517,30 +2599,36 @@ class GeometryComponent extends CommonPluginElement {
         super.ngOnInit();
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.g);
-        this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected });
-        this.autoCompleteGenerator.processDrawing(this.element, this.g, { selected: this.selected });
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            selected: this.selected
+        });
         this.drawText();
     }
     onContextChanged(value, previous) {
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
         if (value.element !== previous.element || isChangeTheme) {
             this.shapeGenerator.processDrawing(this.element, this.g);
-            this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected });
-            this.autoCompleteGenerator.processDrawing(this.element, this.g, { selected: this.selected });
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                selected: this.selected
+            });
             this.updateText();
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
             if (!hasSameSelected || !hasSameHandleState) {
-                this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected });
-                this.autoCompleteGenerator.processDrawing(this.element, this.g, { selected: this.selected });
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                    selected: this.selected
+                });
             }
         }
     }
     editText() {
         this.textManage.edit();
-        this.activeGenerator.processDrawing(this.element, this.g, { selected: this.selected });
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
     }
     drawText() {
         this.textManage.draw(this.element.text);
@@ -2551,7 +2639,7 @@ class GeometryComponent extends CommonPluginElement {
         this.textManage.updateRectangle();
     }
     initializeTextManage() {
-        const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
+        const plugins = (this.board.getPluginOptions(WithTextPluginKey) || {}).textPlugins;
         const manage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
                 const getRectangle = getEngine(this.element.shape).getTextRectangle;
@@ -2569,6 +2657,7 @@ class GeometryComponent extends CommonPluginElement {
                 else {
                     DrawTransforms.setTextSize(this.board, this.element, width, height);
                 }
+                textManageRef.operations && memorizeLatestText(this.element, textManageRef.operations);
             },
             getMaxWidth: () => {
                 let width = getTextRectangle(this.element).width;
@@ -2587,6 +2676,8 @@ class GeometryComponent extends CommonPluginElement {
         this.textManage.destroy();
         this.destroy$.next();
         this.destroy$.complete();
+        this.activeGenerator.destroy();
+        this.lineAutoCompleteGenerator.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeometryComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeometryComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2602,10 +2693,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
 class LineActiveGenerator extends Generator {
-    constructor() {
-        super(...arguments);
-        this.hasResizeHandle = false;
-    }
     canDraw(element, data) {
         if (data.selected) {
             return true;
@@ -2616,7 +2703,9 @@ class LineActiveGenerator extends Generator {
     }
     draw(element, data) {
         const activeG = createG();
-        if (this.hasResizeHandle) {
+        const selectedElements = getSelectedElements(this.board);
+        const isSingleSelection = selectedElements.length === 1;
+        if (isSingleSelection) {
             activeG.classList.add('active');
             activeG.classList.add('line-handle');
             const points = PlaitLine.getPoints(this.board, element);
@@ -2642,10 +2731,15 @@ class LineActiveGenerator extends Generator {
         else {
             const points = getLinePoints(this.board, element);
             const activeRectangle = getRectangleByPoints(points);
+            let opacity = '0.5';
+            if (activeRectangle.height === 0 || activeRectangle.width === 0) {
+                opacity = '0.8';
+            }
             const strokeG = drawRectangle(this.board, activeRectangle, {
                 stroke: PRIMARY_COLOR,
                 strokeWidth: DefaultGeometryActiveStyle.selectionStrokeWidth
             });
+            strokeG.style.opacity = opacity;
             activeG.appendChild(strokeG);
         }
         return activeG;
@@ -2730,23 +2824,18 @@ class LineComponent extends PlaitPluginElementComponent {
             this.updateText(previous.element.texts, value.element.texts);
             this.updateTextRectangle();
         }
+        else {
+            const hasSameSelected = value.selected === previous.selected;
+            if (!hasSameSelected || (value.selected && isSelectionMoving(this.board))) {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            }
+        }
         if (isBoundedElementsChanged) {
             this.shapeGenerator.processDrawing(this.element, this.g);
             this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
             this.updateTextRectangle();
             return;
         }
-        if (!isSelectionMoving(this.board)) {
-            this.activeGenerator.hasResizeHandle = this.hasResizeHandle();
-            this.activeGenerator.processDrawing(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) {
@@ -2785,6 +2874,7 @@ class LineComponent extends PlaitPluginElementComponent {
                     height
                 });
                 DrawTransforms.setLineTexts(this.board, this.element, texts);
+                textManageRef.operations && memorizeLatestText(this.element, textManageRef.operations);
             },
             getMaxWidth: () => GeometryThreshold.defaultTextMaxWidth
         });
@@ -2838,7 +2928,8 @@ const withDrawHotkey = (board) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
         const targetElement = selectedElements[0];
-        if (!isVirtualKey(event) &&
+        if (!PlaitBoard.isReadonly(board) &&
+            !isVirtualKey(event) &&
             !isDelete(event) &&
             !isSpaceHotkey(event) &&
             isSingleSelection &&
@@ -2852,7 +2943,7 @@ const withDrawHotkey = (board) => {
     board.dblclick = (event) => {
         event.preventDefault();
         const geometries = getSelectedGeometryElements(board);
-        if (geometries.length === 1) {
+        if (!PlaitBoard.isReadonly(board) && geometries.length === 1) {
             const component = PlaitElement.getComponent(geometries[0]);
             component.editText();
         }
@@ -2996,7 +3087,7 @@ const withLineCreateByDraw = (board) => {
     board.pointerDown = (event) => {
         const linePointers = getLinePointers();
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
-        if (isLinePointer && isDrawingMode(board)) {
+        if (!PlaitBoard.isReadonly(board) && isLinePointer && isDrawingMode(board)) {
             const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             start = point;
             const hitElement = getHitOutlineGeometry(board, point, REACTION_MARGIN);
@@ -3224,7 +3315,7 @@ const withLineResize = (board) => {
                     if (points.length === 2) {
                         let movingPoint = points[pointIndex];
                         const drawPoints = getLinePoints(board, resizeRef.element);
-                        const index = pointIndex === 0 ? drawPoints.length - 1 : pointIndex;
+                        const index = pointIndex === 0 ? drawPoints.length - 1 : 0;
                         const otherPoint = drawPoints[index];
                         points[pointIndex] = alignPoints(otherPoint, movingPoint);
                     }
@@ -3248,6 +3339,10 @@ const withLineBoundReaction = (board) => {
     let boundShapeG = null;
     board.pointerMove = (event) => {
         boundShapeG?.remove();
+        if (PlaitBoard.isReadonly(board)) {
+            pointerMove(event);
+            return;
+        }
         const linePointers = Object.keys(LineShape);
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
@@ -3288,32 +3383,34 @@ const withLineBoundReaction = (board) => {
 const withLineText = (board) => {
     const { dblclick } = board;
     board.dblclick = (event) => {
-        const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const hitTarget = getHitElementByPoint(board, clickPoint, (element) => {
-            return PlaitDrawElement.isLine(element);
-        });
-        if (hitTarget) {
-            const points = getLinePoints(board, hitTarget);
-            const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
-            const texts = hitTarget.texts?.length ? [...hitTarget.texts] : [];
-            const textIndex = getHitLineTextIndex(board, hitTarget, clickPoint);
-            const isHitText = isHitLineText(board, hitTarget, clickPoint);
-            if (isHitText) {
-                editHandle(board, hitTarget, textIndex);
-            }
-            else {
-                const ratio = getRatioByPoint(points, point);
-                texts.push({
-                    text: buildText('文本'),
-                    position: ratio,
-                    width: 28,
-                    height: 20
-                });
-                DrawTransforms.setLineTexts(board, hitTarget, texts);
-                setTimeout(() => {
-                    const hitComponent = PlaitElement.getComponent(hitTarget);
-                    editHandle(board, hitTarget, hitComponent.textManages.length - 1, true);
-                });
+        if (!PlaitBoard.isReadonly(board)) {
+            const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const hitTarget = getHitElementByPoint(board, clickPoint, (element) => {
+                return PlaitDrawElement.isLine(element);
+            });
+            if (hitTarget) {
+                const points = getLinePoints(board, hitTarget);
+                const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
+                const texts = hitTarget.texts?.length ? [...hitTarget.texts] : [];
+                const textIndex = getHitLineTextIndex(board, hitTarget, clickPoint);
+                const isHitText = isHitLineText(board, hitTarget, clickPoint);
+                if (isHitText) {
+                    editHandle(board, hitTarget, textIndex);
+                }
+                else {
+                    const ratio = getRatioByPoint(points, point);
+                    texts.push({
+                        text: buildText('文本'),
+                        position: ratio,
+                        width: 28,
+                        height: 20
+                    });
+                    DrawTransforms.setLineTexts(board, hitTarget, texts);
+                    setTimeout(() => {
+                        const hitComponent = PlaitElement.getComponent(hitTarget);
+                        editHandle(board, hitTarget, hitComponent.textManages.length - 1, true);
+                    });
+                }
             }
         }
         dblclick(event);
@@ -3361,22 +3458,32 @@ class ImageComponent extends CommonPluginElement {
                 };
             }
         });
+        this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
     }
     ngOnInit() {
         super.ngOnInit();
         this.initializeGenerator();
         this.imageGenerator.processDrawing(this.element, this.g, this.viewContainerRef);
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            selected: this.selected
+        });
     }
     onContextChanged(value, previous) {
         if (value.element !== previous.element) {
             this.imageGenerator.updateImage(this.g, previous.element, value.element);
             this.imageGenerator.componentRef.instance.isFocus = this.selected;
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                selected: 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;
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                    selected: this.selected
+                });
             }
         }
     }
@@ -3385,6 +3492,7 @@ class ImageComponent extends CommonPluginElement {
         this.destroy$.next();
         this.destroy$.complete();
         this.imageGenerator.destroy();
+        this.lineAutoCompleteGenerator.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -3399,31 +3507,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const withAutoCompleteReaction = (board) => {
+const withLineAutoCompleteReaction = (board) => {
     const { pointerMove } = board;
     let reactionG = null;
     board.pointerMove = (event) => {
         reactionG?.remove();
-        if (isSelectionMoving(board)) {
-            pointerMove(event);
-            return;
-        }
+        PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
         const selectedElements = getSelectedDrawElements(board);
+        const targetElement = selectedElements.length === 1 && selectedElements[0];
         const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        if (selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
-            const points = getAutoCompletePoints(selectedElements[0]);
+        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+            const points = getAutoCompletePoints(targetElement);
             const hitIndex = getHitIndexOfAutoCompletePoint(movingPoint, points);
             const hitPoint = points[hitIndex];
-            const component = PlaitElement.getComponent(selectedElements[0]);
-            component.autoCompleteGenerator.recoverAutoCompleteG();
+            const component = PlaitElement.getComponent(targetElement);
+            component.lineAutoCompleteGenerator.recoverAutoCompleteG();
             if (hitPoint) {
-                component.autoCompleteGenerator.removeAutoCompleteG(hitIndex);
-                reactionG = drawCircle(PlaitBoard.getRoughSVG(board), hitPoint, 10, {
+                component.lineAutoCompleteGenerator.removeAutoCompleteG(hitIndex);
+                reactionG = drawCircle(PlaitBoard.getRoughSVG(board), hitPoint, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, {
                     stroke: 'none',
-                    fill: '#6698FF80',
+                    fill: RgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_HOVERED_OPACITY),
                     fillStyle: 'solid'
                 });
                 PlaitBoard.getElementActiveHost(board).append(reactionG);
+                PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
             }
         }
         pointerMove(event);
@@ -3431,25 +3538,25 @@ const withAutoCompleteReaction = (board) => {
     return board;
 };
 
-const withAutoCompletePluginKey = 'plait-auto-complete-plugin-key';
-const withAutoComplete = (board) => {
+const withLineAutoCompletePluginKey = 'plait-line-auto-complete-plugin-key';
+const withLineAutoComplete = (board) => {
     const { pointerDown, pointerMove, pointerUp } = board;
-    const tolerance = 3;
     let startPoint = null;
     let lineShapeG = null;
     let sourceElement;
     let temporaryElement;
     board.pointerDown = (event) => {
         const selectedElements = getSelectedDrawElements(board);
+        const targetElement = selectedElements.length === 1 && selectedElements[0];
         const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        if (selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
-            const points = getAutoCompletePoints(selectedElements[0]);
+        if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+            const points = getAutoCompletePoints(targetElement);
             const index = getHitIndexOfAutoCompletePoint(clickPoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
                 startPoint = clickPoint;
-                sourceElement = selectedElements[0];
+                sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, LineShape.elbow);
             }
         }
@@ -3461,7 +3568,7 @@ const withAutoComplete = (board) => {
         let movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         if (startPoint && sourceElement) {
             const distance = distanceBetweenPointAndPoint(...movingPoint, ...startPoint);
-            if (distance > tolerance) {
+            if (distance > PRESS_AND_MOVE_BUFFER) {
                 temporaryElement = handleLineCreating(board, LineShape.elbow, startPoint, movingPoint, sourceElement, lineShapeG);
             }
         }
@@ -3472,7 +3579,7 @@ const withAutoComplete = (board) => {
             Transforms.insertNode(board, temporaryElement, [board.children.length]);
             clearSelectedElement(board);
             addSelectedElement(board, temporaryElement);
-            const afterComplete = board.getPluginOptions(withAutoCompletePluginKey)
+            const afterComplete = board.getPluginOptions(withLineAutoCompletePluginKey)
                 ?.afterComplete;
             afterComplete && afterComplete(temporaryElement);
         }
@@ -3558,12 +3665,12 @@ const withDraw = (board) => {
         }
         return isAlign(element);
     };
-    return withAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))));
+    return withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))));
 };
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, REACTION_MARGIN, ShapeDefaultSpace, StrokeStyle, alignPoints, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getAutoCompletePoints, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDrawDefaultStrokeColor, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, handleLineCreating, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, transformOpsToPoints, transformPointToConnection, withDraw };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, REACTION_MARGIN, ShapeDefaultSpace, StrokeStyle, alignPoints, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getAutoCompletePoints, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultTextShapeProperty, getDrawDefaultStrokeColor, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, handleLineCreating, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, memorizeLatestShape, memorizeLatestText, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map