@plait/draw 0.34.0 → 0.36.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-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 { 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, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { getRectangleByPoints, Generator, getMemorizedLatest, memorizeLatest, PropertyTransforms, normalizeShapePoints, isDndMode, isDrawingMode, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, getRectangleResizeHandleRefs, 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 { AlignEditor, Alignment, DEFAULT_FONT_SIZE, buildText, TextManage, getTextFromClipboard, getTextSize } from '@plait/text';
 import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
@@ -1223,22 +1223,16 @@ 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 SHAPE_MAX_LENGTH = 6;
+const memorizedShape = new WeakMap();
 const getMemorizeKey = (element) => {
     let key = '';
     switch (true) {
-        case PlaitDrawElement.isBaseShape(element): {
+        case PlaitDrawElement.isText(element): {
+            key = MemorizeKey.text;
+            break;
+        }
+        case PlaitDrawElement.isBasicShape(element): {
             key = MemorizeKey.basicShape;
             break;
         }
@@ -1253,6 +1247,67 @@ const getMemorizeKey = (element) => {
     }
     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 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 insertGeometry = (board, points, shape) => {
     let newElement = createGeometryElement(shape, points, '', {
@@ -1464,14 +1519,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 memorizedLatest = getMemorizedLatestByPointer(pointer);
                 const points = getDefaultGeometryPoints(pointer, point);
-                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text);
+                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, memorizedLatest.textProperties);
                 Transforms.insertNode(board, textElement, [board.children.length]);
                 clearSelectedElement(board);
                 addSelectedElement(board, textElement);
@@ -1490,9 +1546,11 @@ const withGeometryCreateByDrawing = (board) => {
         const pointer = PlaitBoard.getPointer(board);
         if (drawMode && pointer !== BasicShapes.text) {
             const points = normalizeShapePoints([start, movingPoint], isShift);
+            const memorizedLatest = getMemorizedLatestByPointer(pointer);
             temporaryElement = createGeometryElement(pointer, points, '', {
-                strokeWidth: DefaultBasicShapeProperty.strokeWidth
-            });
+                strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                ...memorizedLatest.geometryProperties
+            }, memorizedLatest.textProperties);
             geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
             PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
         }
@@ -1507,13 +1565,16 @@ const withGeometryCreateByDrawing = (board) => {
                 const pointer = PlaitBoard.getPointer(board);
                 const points = getDefaultGeometryPoints(pointer, targetPoint);
                 if (pointer !== BasicShapes.text) {
+                    const memorizedLatest = getMemorizedLatestByPointer(pointer);
                     temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeWidth: DefaultBasicShapeProperty.strokeWidth
-                    });
+                        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+                        ...memorizedLatest.geometryProperties
+                    }, memorizedLatest.textProperties);
                 }
             }
         }
         if (temporaryElement) {
+            memorizeLatestShape(board, temporaryElement.shape);
             Transforms.insertNode(board, temporaryElement, [board.children.length]);
             clearSelectedElement(board);
             addSelectedElement(board, temporaryElement);
@@ -1563,14 +1624,21 @@ 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 = (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;
     return {
         id: idCreator(),
         type: 'geometry',
@@ -1578,7 +1646,7 @@ const createGeometryElement = (shape, points, text, options) => {
         angle: 0,
         opacity: 1,
         textHeight: DefaultTextProperty.height,
-        text: buildText(text, alignment),
+        text: buildText(text, alignment, textProperties),
         points,
         ...textOptions,
         ...options
@@ -1732,7 +1800,7 @@ const getFlowchartDefaultFill = (theme) => {
     return DrawThemeColors[theme].fill;
 };
 
-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 +1808,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 +1879,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);
@@ -2079,7 +2151,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 +2213,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 +2294,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 +2470,7 @@ var MemorizeKey;
 (function (MemorizeKey) {
     MemorizeKey["basicShape"] = "basicShape";
     MemorizeKey["flowchart"] = "flowchart";
+    MemorizeKey["text"] = "text";
     MemorizeKey["line"] = "line";
 })(MemorizeKey || (MemorizeKey = {}));
 
@@ -2419,7 +2498,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 +2506,7 @@ const PlaitDrawElement = {
     }
 };
 
-class AutoCompleteGenerator extends Generator {
+class LineAutoCompleteGenerator extends Generator {
     constructor(board) {
         super(board);
         this.board = board;
@@ -2446,18 +2525,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 +2588,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 +2596,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);
@@ -2569,6 +2654,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 +2673,8 @@ class GeometryComponent extends CommonPluginElement {
         this.textManage.destroy();
         this.destroy$.next();
         this.destroy$.complete();
+        this.activeGenerator.destroy();
+        this.lineAutoCompleteGenerator;
     }
     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 +2690,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 +2700,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 +2728,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 +2821,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 +2871,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 +2925,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 +2940,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 +3084,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 +3312,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 +3336,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 +3380,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);
@@ -3399,31 +3493,29 @@ 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 movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        if (selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
+        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
             const points = getAutoCompletePoints(selectedElements[0]);
             const hitIndex = getHitIndexOfAutoCompletePoint(movingPoint, points);
             const hitPoint = points[hitIndex];
             const component = PlaitElement.getComponent(selectedElements[0]);
-            component.autoCompleteGenerator.recoverAutoCompleteG();
+            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,10 +3523,9 @@ 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;
@@ -3442,7 +3533,7 @@ const withAutoComplete = (board) => {
     board.pointerDown = (event) => {
         const selectedElements = getSelectedDrawElements(board);
         const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        if (selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
+        if (!PlaitBoard.isReadonly(board) && selectedElements.length === 1 && PlaitDrawElement.isGeometry(selectedElements[0])) {
             const points = getAutoCompletePoints(selectedElements[0]);
             const index = getHitIndexOfAutoCompletePoint(clickPoint, points);
             const hitPoint = points[index];
@@ -3461,7 +3552,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 +3563,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 +3649,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, 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