@plait/draw 0.38.0 → 0.40.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, idCreator, createG, 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, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, BOARD_TO_HOST, transformPoint, toPoint, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, preventTouchMove, BoardTransforms, PlaitPointerType, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
-import { getRectangleByPoints, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, Generator, getRectangleResizeHandleRefs, getMemorizedLatest, memorizeLatest, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, normalizeShapePoints, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, 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, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, Path, PlaitNode, BOARD_TO_HOST, transformPoint, toPoint, isSelectionMoving, RgbaToHEX, PlaitPluginElementComponent, preventTouchMove, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { getRectangleByPoints, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, Generator, getRectangleResizeHandleRefs, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, normalizeShapePoints, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
 import { Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, TextManage, getTextFromClipboard } from '@plait/text';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
@@ -1090,7 +1090,7 @@ const StoredDataEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
         const shape = rs.path(`M${rectangle.x + rectangle.width / 10} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y} A  ${rectangle.width /
-            10} ${rectangle.height / 2}, 1, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} L${rectangle.x +
+            10} ${rectangle.height / 2}, 0, 0, 0,${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} L${rectangle.x +
             rectangle.width / 10} ${rectangle.y + rectangle.height}A  ${rectangle.width / 10} ${rectangle.height /
             2}, 0, 0, 1,${rectangle.x + rectangle.width / 10} ${rectangle.y}`, { ...options, fillStyle: 'solid' });
         setStrokeLinecap(shape, 'round');
@@ -1210,6 +1210,79 @@ const LINE_AUTO_COMPLETE_OPACITY = 0.6;
 const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
 const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 
+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 createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
     let textOptions = {};
     let alignment = Alignment.center;
@@ -1409,6 +1482,26 @@ const getDefaultTextPoints = (board, centerPoint, fontSize) => {
     const property = getDefaultTextShapeProperty(board, fontSize);
     return getPointsByCenterPoint(centerPoint, property.width, property.height);
 };
+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 createDefaultText = (board, points) => {
+    const memorizedLatest = getMemorizedLatestByPointer(BasicShapes.text);
+    const property = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']);
+    return createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, { ...memorizedLatest.textProperties, textHeight: property.height });
+};
+const createDefaultGeometry = (board, points, shape) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
+    return createGeometryElement(shape, points, '', {
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+        ...memorizedLatest.geometryProperties
+    }, { ...memorizedLatest.textProperties, textHeight });
+};
 
 const ARROW_LENGTH = 20;
 const drawLineArrow = (element, points, options) => {
@@ -1564,79 +1657,6 @@ 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(),
@@ -1659,7 +1679,11 @@ const getLinePoints = (board, element) => {
             return getCurvePoints(board, element);
         }
         default: {
-            return PlaitLine.getPoints(board, element);
+            const points = PlaitLine.getPoints(board, element);
+            const handleRefPair = getLineHandleRefPair(board, element);
+            points[0] = handleRefPair.source.point;
+            points[points.length - 1] = handleRefPair.target.point;
+            return points;
         }
     }
 };
@@ -1810,7 +1834,7 @@ const getHitLineTextIndex = (board, element, point) => {
     const texts = element.texts;
     if (!texts.length)
         return -1;
-    const points = getElbowPoints(board, element);
+    const points = getLinePoints(board, element);
     return texts.findIndex(text => {
         const center = getPointOnPolyline(points, text.position);
         const rectangle = {
@@ -2212,19 +2236,69 @@ class GeometryShapeGenerator extends Generator {
     }
 }
 
-const insertGeometry = (board, points, shape) => {
-    let newElement = createGeometryElement(shape, points, '', {
-        strokeWidth: DefaultBasicShapeProperty.strokeWidth
+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 collectRefs = (board, geometry, refs) => {
+    const lines = findElements(board, {
+        match: (element) => {
+            if (PlaitDrawElement.isLine(element)) {
+                return element.source.boundId === geometry.id || element.target.boundId === geometry.id;
+            }
+            return false;
+        },
+        recursion: element => true
     });
-    Transforms.insertNode(board, newElement, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
+    if (lines.length) {
+        lines.forEach(line => {
+            const isSourceBound = line.source.boundId === geometry.id;
+            const handle = isSourceBound ? 'source' : 'target';
+            const object = { ...line[handle] };
+            const linePoints = getLinePoints(board, line);
+            const point = isSourceBound ? linePoints[0] : linePoints[linePoints.length - 1];
+            object.connection = transformPointToConnection(board, point, geometry);
+            const path = PlaitBoard.findPath(board, line);
+            const index = refs.findIndex(obj => Path.equals(obj.path, path));
+            if (index === -1) {
+                refs.push({
+                    property: {
+                        [handle]: object
+                    },
+                    path
+                });
+            }
+            else {
+                refs[index].property = { ...refs[index].property, [handle]: object };
+            }
+        });
+    }
+};
+
+const insertGeometry = (board, points, shape) => {
+    const newElement = createDefaultGeometry(board, points, shape);
+    insertElement(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 newElement = createDefaultText(board, points);
+    insertElement(board, newElement);
 };
 const resizeGeometry = (board, points, textHeight, path) => {
     const normalizePoints = normalizeShapePoints(points);
@@ -2236,9 +2310,21 @@ const resizeGeometry = (board, points, textHeight, path) => {
     }
     Transforms.setNode(board, newProperties, path);
 };
-const transformShape = (board, element, shape) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { shape }, path);
+const switchGeometryShape = (board, shape) => {
+    const selectedElements = getSelectedElements(board);
+    const refs = [];
+    selectedElements.forEach(item => {
+        if (PlaitDrawElement.isGeometry(item) && !PlaitDrawElement.isText(item)) {
+            const path = PlaitBoard.findPath(board, item);
+            Transforms.setNode(board, { shape }, path);
+            collectRefs(board, { ...item, shape }, refs);
+        }
+    });
+    if (refs.length) {
+        refs.forEach(ref => {
+            DrawTransforms.resizeLine(board, ref.property, ref.path);
+        });
+    }
 };
 
 const normalizePoints = (board, element, width, textHeight) => {
@@ -2313,28 +2399,6 @@ const insertImage = (board, imageItem, startPoint) => {
     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,
@@ -2346,7 +2410,7 @@ const DrawTransforms = {
     removeLineText,
     setLineMark,
     insertImage,
-    transformShape
+    switchGeometryShape
 };
 
 class LineAutoCompleteGenerator extends Generator {
@@ -2588,9 +2652,13 @@ class LineActiveGenerator extends Generator {
 function getMiddlePoints(board, element) {
     const result = [];
     const shape = element.shape;
+    const hideBuffer = 10;
     if (shape === LineShape.straight) {
         const points = PlaitLine.getPoints(board, element);
         for (let i = 0; i < points.length - 1; i++) {
+            const distance = distanceBetweenPointAndPoint(...points[i], ...points[i + 1]);
+            if (distance < hideBuffer)
+                continue;
             result.push([(points[i][0] + points[i + 1][0]) / 2, (points[i][1] + points[i + 1][1]) / 2]);
         }
     }
@@ -2608,6 +2676,9 @@ function getMiddlePoints(board, element) {
                 const startIndex = pointsOnBezier.findIndex(point => point[0] === points[i][0] && point[1] === points[i][1]);
                 const endIndex = pointsOnBezier.findIndex(point => point[0] === points[i + 1][0] && point[1] === points[i + 1][1]);
                 const middleIndex = Math.round((startIndex + endIndex) / 2);
+                const distance = distanceBetweenPointAndPoint(...points[i], ...points[i + 1]);
+                if (distance < hideBuffer)
+                    continue;
                 result.push(pointsOnBezier[middleIndex]);
             }
         }
@@ -2811,7 +2882,7 @@ const withGeometryCreateByDrag = (board) => {
             if (pointer === BasicShapes.text) {
                 const property = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']);
                 const points = getPointsByCenterPoint(movingPoint, property.width, property.height);
-                temporaryElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, { ...memorizedLatest.textProperties, textHeight: property.height });
+                temporaryElement = createDefaultText(board, points);
                 if (!fakeCreateTextRef) {
                     const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
                         getRectangle: () => {
@@ -2837,11 +2908,7 @@ const withGeometryCreateByDrag = (board) => {
             }
             else {
                 const points = getDefaultGeometryPoints(pointer, movingPoint);
-                const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
-                temporaryElement = createGeometryElement(pointer, points, '', {
-                    strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-                    ...memorizedLatest.geometryProperties
-                }, { ...memorizedLatest.textProperties, textHeight });
+                temporaryElement = createDefaultGeometry(board, points, pointer);
                 geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
                 PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
             }
@@ -2891,11 +2958,8 @@ const withGeometryCreateByDrawing = (board) => {
                 const memorizedLatest = getMemorizedLatestByPointer(pointer);
                 const property = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']);
                 const points = getPointsByCenterPoint(point, property.width, property.height);
-                const textElement = createGeometryElement(BasicShapes.text, points, DefaultTextProperty.text, memorizedLatest.geometryProperties, { ...memorizedLatest.textProperties, textHeight: property.height });
-                Transforms.insertNode(board, textElement, [board.children.length]);
-                clearSelectedElement(board);
-                addSelectedElement(board, textElement);
-                BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+                const textElement = createDefaultText(board, points);
+                insertElement(board, textElement);
                 start = null;
             }
         }
@@ -2910,12 +2974,7 @@ const withGeometryCreateByDrawing = (board) => {
         const pointer = PlaitBoard.getPointer(board);
         if (drawMode && pointer !== BasicShapes.text) {
             const points = normalizeShapePoints([start, movingPoint], isShift);
-            const memorizedLatest = getMemorizedLatestByPointer(pointer);
-            const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
-            temporaryElement = createGeometryElement(pointer, points, '', {
-                strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-                ...memorizedLatest.geometryProperties
-            }, { ...memorizedLatest.textProperties, textHeight });
+            temporaryElement = createDefaultGeometry(board, points, pointer);
             geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
             PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
         }
@@ -2930,12 +2989,7 @@ const withGeometryCreateByDrawing = (board) => {
                 const pointer = PlaitBoard.getPointer(board);
                 if (pointer !== BasicShapes.text) {
                     const points = getDefaultGeometryPoints(pointer, targetPoint);
-                    const memorizedLatest = getMemorizedLatestByPointer(pointer);
-                    const textHeight = getDefaultTextShapeProperty(board, memorizedLatest.textProperties['font-size']).height;
-                    temporaryElement = createGeometryElement(pointer, points, '', {
-                        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-                        ...memorizedLatest.geometryProperties
-                    }, { ...memorizedLatest.textProperties, textHeight });
+                    temporaryElement = createDefaultGeometry(board, points, pointer);
                 }
             }
         }
@@ -2951,13 +3005,6 @@ const withGeometryCreateByDrawing = (board) => {
     };
     return board;
 };
-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 buildClipboardData = (board, elements, startPoint) => {
     return elements.map(element => {
@@ -3297,7 +3344,7 @@ const withLineResize = (board) => {
                             element: value,
                             handle: handleRef.handle
                         };
-                        pointIndex = handleRef.index;
+                        pointIndex = handleRef.handle === LineResizeHandle.addHandle ? handleRef.index + 1 : handleRef.index;
                     }
                 });
                 return result;
@@ -3308,10 +3355,10 @@ const withLineResize = (board) => {
             let points = [...resizeRef.element.points];
             let source = { ...resizeRef.element.source };
             let target = { ...resizeRef.element.target };
+            const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, REACTION_MARGIN);
             if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
                 const object = resizeRef.handle === LineResizeHandle.source ? source : target;
                 points[pointIndex] = resizeState.endTransformPoint;
-                const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, REACTION_MARGIN);
                 if (hitElement) {
                     object.connection = transformPointToConnection(board, resizeState.endTransformPoint, hitElement);
                     object.boundId = hitElement.id;
@@ -3319,21 +3366,21 @@ const withLineResize = (board) => {
                 else {
                     object.connection = undefined;
                     object.boundId = undefined;
-                    if (points.length === 2) {
-                        let movingPoint = points[pointIndex];
-                        const drawPoints = getLinePoints(board, resizeRef.element);
-                        const index = pointIndex === 0 ? drawPoints.length - 1 : 0;
-                        const otherPoint = drawPoints[index];
-                        points[pointIndex] = alignPoints(otherPoint, movingPoint);
-                    }
                 }
             }
             else if (resizeRef.handle === LineResizeHandle.addHandle) {
-                points.splice(pointIndex + 1, 0, resizeState.endTransformPoint);
+                points.splice(pointIndex, 0, resizeState.endTransformPoint);
             }
             else {
                 points[pointIndex] = resizeState.endTransformPoint;
             }
+            if (!hitElement) {
+                points.forEach((point, index) => {
+                    if (index === pointIndex)
+                        return;
+                    points[pointIndex] = alignPoints(point, points[pointIndex]);
+                });
+            }
             DrawTransforms.resizeLine(board, { points, source, target }, resizeRef.path);
         }
     };
@@ -3545,7 +3592,7 @@ const withLineAutoCompleteReaction = (board) => {
     return board;
 };
 
-const withLineAutoCompletePluginKey = 'plait-line-auto-complete-plugin-key';
+const WithLineAutoCompletePluginKey = 'plait-line-auto-complete-plugin-key';
 const withLineAutoComplete = (board) => {
     const { pointerDown, pointerMove, pointerUp } = board;
     let startPoint = null;
@@ -3586,7 +3633,7 @@ const withLineAutoComplete = (board) => {
             Transforms.insertNode(board, temporaryElement, [board.children.length]);
             clearSelectedElement(board);
             addSelectedElement(board, temporaryElement);
-            const afterComplete = board.getPluginOptions(withLineAutoCompletePluginKey)
+            const afterComplete = board.getPluginOptions(WithLineAutoCompletePluginKey)
                 ?.afterComplete;
             afterComplete && afterComplete(temporaryElement);
         }
@@ -3603,6 +3650,53 @@ const withLineAutoComplete = (board) => {
     return board;
 };
 
+const withLineTextMove = (board) => {
+    let textIndex = 0;
+    const movableBuffer = 100;
+    const options = {
+        key: 'line-text',
+        canResize: () => {
+            return true;
+        },
+        detect: (point) => {
+            let result = null;
+            const line = getHitElementByPoint(board, point, (element) => {
+                return PlaitDrawElement.isLine(element);
+            });
+            if (line) {
+                const index = getHitLineTextIndex(board, line, point);
+                const hitComponent = PlaitElement.getComponent(line);
+                const textManage = hitComponent.textManages[index];
+                if (index !== -1 && !textManage.isEditing) {
+                    textIndex = index;
+                    return { element: line, handle: ResizeHandle.e };
+                }
+            }
+            return result;
+        },
+        onResize: (resizeRef, resizeState) => {
+            const element = resizeRef.element;
+            if (element) {
+                const movingPoint = resizeState.endTransformPoint;
+                const points = getLinePoints(board, element);
+                const distance = distanceBetweenPointAndSegments(points, movingPoint);
+                if (distance <= movableBuffer) {
+                    const point = getNearestPointBetweenPointAndSegments(movingPoint, points, false);
+                    const position = getRatioByPoint(points, point);
+                    const texts = [...element.texts];
+                    texts[textIndex] = {
+                        ...texts[textIndex],
+                        position
+                    };
+                    DrawTransforms.setLineTexts(board, element, texts);
+                }
+            }
+        }
+    };
+    withResize(board, options);
+    return board;
+};
+
 const withDraw = (board) => {
     const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, isAlign } = board;
     board.drawElement = (context) => {
@@ -3672,12 +3766,12 @@ const withDraw = (board) => {
         }
         return isAlign(element);
     };
-    return withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))));
+    return withLineTextMove(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, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, 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 };
+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, WithLineAutoCompletePluginKey, alignPoints, createDefaultFlowchart, createDefaultGeometry, createDefaultText, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getAutoCompletePoints, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, 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, insertElement, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, memorizeLatestShape, memorizeLatestText, transformOpsToPoints, transformPointToConnection, withDraw, withLineAutoComplete };
 //# sourceMappingURL=plait-draw.mjs.map