@plait/draw 0.39.0 → 0.41.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, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, 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 { 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, getPointByVector, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, 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');
@@ -1679,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;
         }
     }
 };
@@ -1731,43 +1735,52 @@ const getLineHandleRefPair = (board, element) => {
     }
     return { source: sourceHandleRef, target: targetHandleRef };
 };
+const createFakeElement = (startPoint, vector) => {
+    const point = getPointByVector(startPoint, vector, -25);
+    const points = getPointsByCenterPoint(point, 50, 50);
+    return createGeometryElement(BasicShapes.rectangle, points, '');
+};
 const getElbowPoints = (board, element) => {
     if (element.points.length === 2) {
         const handleRefPair = getLineHandleRefPair(board, element);
-        const offset = element.source.boundId || element.target.boundId ? DEFAULT_ROUTE_MARGIN : 0;
-        const sourceElement = element.source.boundId && getElementById(board, element.source.boundId);
-        const targetElement = element.target.boundId && getElementById(board, element.target.boundId);
-        const isBound = sourceElement && targetElement;
+        let sourceElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
+        let targetElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
         let points = [];
-        if (isBound) {
-            const targetRectangle = RectangleClient.inflate(getRectangleByPoints(targetElement.points), getStrokeWidthByElement(targetElement) * 2);
-            const sourceRectangle = RectangleClient.inflate(getRectangleByPoints(sourceElement.points), getStrokeWidthByElement(sourceElement) * 2);
-            const sourcePoint = handleRefPair.source.point;
-            const targetPoint = handleRefPair.target.point;
-            const { sourceOffset, targetOffset } = reduceRouteMargin(sourceRectangle, targetRectangle);
-            const sourceOuterRectangle = RectangleClient.expand(sourceRectangle, sourceOffset[3], sourceOffset[0], sourceOffset[1], sourceOffset[2]);
-            const targetOuterRectangle = RectangleClient.expand(targetRectangle, targetOffset[3], targetOffset[0], targetOffset[1], targetOffset[2]);
-            const nextSourcePoint = getNextPoint(sourcePoint, sourceOuterRectangle, handleRefPair.source.direction);
-            const nextTargetPoint = getNextPoint(targetPoint, targetOuterRectangle, handleRefPair.target.direction);
-            const isIntersect = RectangleClient.isPointInRectangle(targetRectangle, sourcePoint) ||
-                RectangleClient.isPointInRectangle(targetOuterRectangle, nextSourcePoint) ||
-                RectangleClient.isPointInRectangle(sourceOuterRectangle, nextTargetPoint) ||
-                RectangleClient.isPointInRectangle(sourceRectangle, targetPoint);
-            if (!isIntersect) {
-                points = generateElbowLineRoute({
-                    sourcePoint,
-                    nextSourcePoint,
-                    sourceRectangle,
-                    sourceOuterRectangle,
-                    targetPoint,
-                    nextTargetPoint,
-                    targetRectangle,
-                    targetOuterRectangle
-                });
-            }
+        if (!sourceElement) {
+            const source = handleRefPair.source;
+            sourceElement = createFakeElement(source.point, source.vector);
+        }
+        if (!targetElement) {
+            const target = handleRefPair.target;
+            targetElement = createFakeElement(target.point, target.vector);
+        }
+        const targetRectangle = RectangleClient.inflate(getRectangleByPoints(targetElement.points), getStrokeWidthByElement(targetElement) * 2);
+        const sourceRectangle = RectangleClient.inflate(getRectangleByPoints(sourceElement.points), getStrokeWidthByElement(sourceElement) * 2);
+        const sourcePoint = handleRefPair.source.point;
+        const targetPoint = handleRefPair.target.point;
+        const { sourceOffset, targetOffset } = reduceRouteMargin(sourceRectangle, targetRectangle);
+        const sourceOuterRectangle = RectangleClient.expand(sourceRectangle, sourceOffset[3], sourceOffset[0], sourceOffset[1], sourceOffset[2]);
+        const targetOuterRectangle = RectangleClient.expand(targetRectangle, targetOffset[3], targetOffset[0], targetOffset[1], targetOffset[2]);
+        const nextSourcePoint = getNextPoint(sourcePoint, sourceOuterRectangle, handleRefPair.source.direction);
+        const nextTargetPoint = getNextPoint(targetPoint, targetOuterRectangle, handleRefPair.target.direction);
+        const isIntersect = RectangleClient.isPointInRectangle(targetRectangle, sourcePoint) ||
+            RectangleClient.isPointInRectangle(targetOuterRectangle, nextSourcePoint) ||
+            RectangleClient.isPointInRectangle(sourceOuterRectangle, nextTargetPoint) ||
+            RectangleClient.isPointInRectangle(sourceRectangle, targetPoint);
+        if (!isIntersect) {
+            points = generateElbowLineRoute({
+                sourcePoint,
+                nextSourcePoint,
+                sourceRectangle,
+                sourceOuterRectangle,
+                targetPoint,
+                nextTargetPoint,
+                targetRectangle,
+                targetOuterRectangle
+            });
         }
-        if (!points.length) {
-            points = getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, offset);
+        else {
+            points = getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, 0);
         }
         points = removeDuplicatePoints(points);
         return points;
@@ -1830,7 +1843,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 = {
@@ -1905,10 +1918,10 @@ const getConnectionPoint = (geometry, connection, direction, delta) => {
         return RectangleClient.getConnectionPoint(rectangle, connection);
     }
 };
-const transformPointToConnection = (board, point, hitElement) => {
+const transformPointToConnection = (board, point, hitElement, tolerance = ACTIVE_STROKE_WIDTH) => {
     let rectangle = getRectangleByPoints(hitElement.points);
-    rectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    let nearestPoint = getNearestPoint(hitElement, point, ACTIVE_STROKE_WIDTH);
+    rectangle = RectangleClient.inflate(rectangle, tolerance);
+    let nearestPoint = getNearestPoint(hitElement, point, tolerance);
     const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, rectangle);
     nearestPoint = hitConnector ? hitConnector : nearestPoint;
     return [(nearestPoint[0] - rectangle.x) / rectangle.width, (nearestPoint[1] - rectangle.y) / rectangle.height];
@@ -2232,9 +2245,108 @@ class GeometryShapeGenerator extends Generator {
     }
 }
 
+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 collectLineUpdatedRefsByGeometry = (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
+    });
+    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 connectLineToGeometry = (board, lineElement, handle, geometryElement) => {
+    const linePoints = PlaitLine.getPoints(board, lineElement);
+    const point = handle === LineHandleKey.source ? linePoints[0] : linePoints[linePoints.length - 1];
+    const connection = transformPointToConnection(board, point, geometryElement, Math.max(geometryElement.width, geometryElement.height));
+    if (connection) {
+        let source = lineElement.source;
+        let target = lineElement.target;
+        if (handle === LineHandleKey.source) {
+            source = {
+                ...source,
+                boundId: geometryElement.id,
+                connection
+            };
+        }
+        else {
+            target = {
+                ...target,
+                boundId: geometryElement.id,
+                connection
+            };
+        }
+        const path = PlaitBoard.findPath(board, lineElement);
+        resizeLine(board, { source, target }, path);
+    }
+};
+
 const insertGeometry = (board, points, shape) => {
     const newElement = createDefaultGeometry(board, points, shape);
     insertElement(board, newElement);
+    return newElement;
+};
+const insertGeometryByVector = (board, point, shape, vector) => {
+    const shapeProperty = DefaultFlowchartPropertyMap[shape] || DefaultBasicShapeProperty;
+    const direction = getDirectionByVector(vector);
+    if (direction) {
+        let offset = 0;
+        if ([Direction.left, Direction.right].includes(direction)) {
+            offset = -shapeProperty.width / 2;
+        }
+        else {
+            offset = -shapeProperty.height / 2;
+        }
+        const vectorPoint = getPointByVector(point, vector, offset);
+        const points = getPointsByCenterPoint(vectorPoint, shapeProperty.width, shapeProperty.height);
+        return insertGeometry(board, points, shape);
+    }
+    return null;
 };
 const insertText = (board, points, text = '文本') => {
     const newElement = createDefaultText(board, points);
@@ -2250,9 +2362,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);
+            collectLineUpdatedRefsByGeometry(board, { ...item, shape }, refs);
+        }
+    });
+    if (refs.length) {
+        refs.forEach(ref => {
+            DrawTransforms.resizeLine(board, ref.property, ref.path);
+        });
+    }
 };
 
 const normalizePoints = (board, element, width, textHeight) => {
@@ -2327,28 +2451,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,
@@ -2360,7 +2462,9 @@ const DrawTransforms = {
     removeLineText,
     setLineMark,
     insertImage,
-    transformShape
+    switchGeometryShape,
+    connectLineToGeometry,
+    insertGeometryByVector
 };
 
 class LineAutoCompleteGenerator extends Generator {
@@ -2602,9 +2706,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]);
         }
     }
@@ -2622,6 +2730,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]);
             }
         }
@@ -3287,7 +3398,7 @@ const withLineResize = (board) => {
                             element: value,
                             handle: handleRef.handle
                         };
-                        pointIndex = handleRef.index;
+                        pointIndex = handleRef.handle === LineResizeHandle.addHandle ? handleRef.index + 1 : handleRef.index;
                     }
                 });
                 return result;
@@ -3298,10 +3409,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;
@@ -3309,21 +3420,25 @@ 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) {
+                const drawPoints = getLinePoints(board, resizeRef.element);
+                const newPoints = [...points];
+                newPoints[0] = drawPoints[0];
+                newPoints[newPoints.length - 1] = drawPoints[drawPoints.length - 1];
+                newPoints.forEach((point, index) => {
+                    if (index === pointIndex)
+                        return;
+                    points[pointIndex] = alignPoints(point, points[pointIndex]);
+                });
+            }
             DrawTransforms.resizeLine(board, { points, source, target }, resizeRef.path);
         }
     };
@@ -3535,7 +3650,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;
@@ -3576,7 +3691,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);
         }
@@ -3593,6 +3708,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) => {
@@ -3662,12 +3824,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, 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 };
+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