@plait/draw 0.82.0-next.0 → 0.83.0

package/constants/line.d.ts

@@ -4,8 +4,8 @@ export declare const DefaultLineStyle: {
 };
 export declare const LINE_TEXT_SPACE = 4;
 export declare const LINE_AUTO_COMPLETE_DIAMETER = 6;
-export declare const LINE_AUTO_COMPLETE_OPACITY = 0.6;
-export declare const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
-export declare const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
+export declare const LINE_AUTO_COMPLETE_OPACITY = 1;
+export declare const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 1;
+export declare const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 12;
 export declare const LINE_ALIGN_TOLERANCE = 3;
 export declare const LINE_TEXT = "\u6587\u672C";

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, createDebugGenerator, Point, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, catmullRomFitting, PlaitBoard, setStrokeLinecap, findElements, createMask, createRect, getNearestPointBetweenPointAndArc, setPathStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, getI18nValue, toActiveRectangleFromViewBoxRectangle, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByElements, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, getEllipseTangentSlope, getVectorFromPointAndSlope, getNearestPointBetweenPointAndEllipse, isPointInEllipse, isPointInRoundRectangle, drawRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, toActivePointFromViewBoxPoint, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, toActivePoint, temporaryDisableSelection, toScreenPointFromActivePoint, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
-import { DEFAULT_FILL, Alignment, getMemorizedLatest, memorizeLatest, WithTextPluginKey, TextManage, StrokeStyle, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getPointByVectorComponent, getStrokeLineDash, getPointOnPolyline, buildText, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_SIZE, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, isCornerHandle, getIndexByResizeHandle, withResize, getSymmetricHandleIndex, getResizeHandlePointByIndex, drawHandle, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, createActiveGenerator, hasResizeHandle, ActiveGenerator, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
+import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, createDebugGenerator, Point, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, catmullRomFitting, PlaitBoard, setStrokeLinecap, findElements, createMask, createRect, getNearestPointBetweenPointAndArc, setPathStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, getI18nValue, toActiveRectangleFromViewBoxRectangle, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByElements, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, getEllipseTangentSlope, getVectorFromPointAndSlope, getNearestPointBetweenPointAndEllipse, isPointInEllipse, isPointInRoundRectangle, drawRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, rgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, toActivePointFromViewBoxPoint, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, toActivePoint, temporaryDisableSelection, toScreenPointFromActivePoint, PRESS_AND_MOVE_BUFFER, CursorClass, isHorizontalDirection, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
+import { DEFAULT_FILL, Alignment, getMemorizedLatest, memorizeLatest, WithTextPluginKey, TextManage, StrokeStyle, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getPointByVectorComponent, getStrokeLineDash, getPointOnPolyline, buildText, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_SIZE, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, isCornerHandle, getIndexByResizeHandle, withResize, getSymmetricHandleIndex, getResizeHandlePointByIndex, drawHandle, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, createActiveGenerator, hasResizeHandle, ActiveGenerator, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, getDirectionByIndex, moveXOfPoint, getXDistanceBetweenPoint, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { Editor, Node } from 'slate';
@@ -472,9 +472,9 @@ const DefaultLineStyle = {
 };
 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 LINE_AUTO_COMPLETE_OPACITY = 1;
+const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 1;
+const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 12;
 const LINE_ALIGN_TOLERANCE = 3;
 const LINE_TEXT = '文本';
 
@@ -1486,7 +1486,7 @@ const Q2C = (points) => {
     }
     return result;
 };
-const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG) => {
+const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG, options) => {
     const hitElement = getSnappingShape(board, movingPoint);
     const targetConnection = hitElement ? getHitConnection(board, movingPoint, hitElement) : undefined;
     const sourceConnection = sourceElement ? getHitConnection(board, sourcePoint, sourceElement) : undefined;
@@ -1500,7 +1500,8 @@ const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sou
     targetMarker && delete memorizedLatest.target;
     const temporaryLineElement = createArrowLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || ArrowLineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || ArrowLineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
         strokeWidth: DefaultLineStyle.strokeWidth,
-        ...memorizedLatest
+        ...memorizedLatest,
+        ...options
     });
     const linePoints = getArrowLinePoints(board, temporaryLineElement);
     const otherPoint = linePoints[0];
@@ -2421,7 +2422,7 @@ const getFlowchartDefaultFill = (theme) => {
 };
 const getTextShapeProperty = (board, text, fontSize) => {
     fontSize = fontSize ? Number(fontSize) : DEFAULT_FONT_SIZE;
-    const textSize = measureElement(buildText(text), { fontSize, fontFamily: DEFAULT_FONT_FAMILY });
+    const textSize = measureElement(board, buildText(text), { fontSize, fontFamily: DEFAULT_FONT_FAMILY });
     return {
         width: textSize.width + ShapeDefaultSpace.rectangleAndText * 2,
         height: textSize.height
@@ -7075,7 +7076,7 @@ class ArrowLineAutoCompleteGenerator extends Generator {
         middlePoints.forEach((point, index) => {
             const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, LINE_AUTO_COMPLETE_DIAMETER, {
                 stroke: 'none',
-                fill: RgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_OPACITY),
+                fill: rgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_OPACITY),
                 fillStyle: 'solid'
             });
             circle.classList.add(`line-auto-complete-${index}`);
@@ -7957,7 +7958,7 @@ const withArrowLineResize = (board) => {
             const selectedLineElements = getSelectedArrowLineElements(board);
             if (selectedLineElements.length > 0) {
                 let result = null;
-                selectedLineElements.forEach(value => {
+                selectedLineElements.forEach((value) => {
                     const handleRef = getHitLineResizeHandleRef(board, value, point);
                     if (handleRef) {
                         result = {
@@ -8160,7 +8161,7 @@ const withArrowLineText = (board) => {
                     const defaultLineText = getDefaultLineText(board);
                     const textMemory = getMemorizedLatest('arrow-line')?.text || {};
                     const textElement = buildText(defaultLineText, undefined, textMemory);
-                    const { width, height } = measureElement(textElement, {
+                    const { width, height } = measureElement(board, textElement, {
                         fontSize: DEFAULT_FONT_SIZE,
                         fontFamily: DEFAULT_FONT_FAMILY
                     });
@@ -8263,44 +8264,8 @@ class ImageComponent extends CommonElementFlavour {
     }
 }
 
-const withArrowLineAutoCompleteReaction = (board) => {
-    const { pointerMove } = board;
-    let reactionG = null;
-    board.pointerMove = (event) => {
-        reactionG?.remove();
-        PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
-        const selectedElements = getSelectedDrawElements(board);
-        const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const activePoint = toActivePoint(board, event.x, event.y);
-        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
-            const points = getAutoCompletePoints(board, targetElement, true);
-            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(board, activePoint, targetElement, true) || activePoint, points);
-            const hitPoint = points[hitIndex];
-            const ref = PlaitElement.getElementRef(targetElement);
-            const lineAutoCompleteGenerator = ref.getGenerator(ArrowLineAutoCompleteGenerator.key);
-            lineAutoCompleteGenerator.recoverAutoCompleteG();
-            if (hitPoint) {
-                lineAutoCompleteGenerator?.removeAutoCompleteG(hitIndex);
-                reactionG = drawCircle(PlaitBoard.getRoughSVG(board), hitPoint, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, {
-                    stroke: 'none',
-                    fill: RgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_HOVERED_OPACITY),
-                    fillStyle: 'solid'
-                });
-                PlaitBoard.getActiveHost(board).append(reactionG);
-                PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
-                if (hasValidAngle(targetElement)) {
-                    const rectangle = board.getRectangle(targetElement);
-                    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
-                    setAngleForG(reactionG, RectangleClient.getCenterPoint(activeRectangle), targetElement.angle);
-                }
-            }
-        }
-        pointerMove(event);
-    };
-    return board;
-};
-
 const WithArrowLineAutoCompletePluginKey = 'plait-arrow-line-auto-complete-plugin-key';
+const BOARD_TO_PRE_COMMIT = new WeakMap();
 const withArrowLineAutoComplete = (board) => {
     const { pointerDown, pointerMove, globalPointerUp } = board;
     let autoCompletePoint = null;
@@ -8331,7 +8296,7 @@ const withArrowLineAutoComplete = (board) => {
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (autoCompletePoint && sourceElement) {
             const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(board, movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
-            if (distance > PRESS_AND_MOVE_BUFFER) {
+            if (distance > PRESS_AND_MOVE_BUFFER * 2) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getElementShape(sourceElement);
                 const engine = getEngine(shape);
@@ -8356,6 +8321,14 @@ const withArrowLineAutoComplete = (board) => {
             const afterComplete = board.getPluginOptions(WithArrowLineAutoCompletePluginKey)?.afterComplete;
             afterComplete && afterComplete(temporaryElement);
         }
+        else {
+            const preCommitRef = BOARD_TO_PRE_COMMIT.get(board);
+            if (preCommitRef) {
+                Transforms.insertNode(board, preCommitRef.temporaryArrowLineElement, [board.children.length]);
+                insertElement(board, preCommitRef.temporaryShapeElement);
+                BOARD_TO_PRE_COMMIT.delete(board);
+            }
+        }
         if (autoCompletePoint) {
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
             autoCompletePoint = null;
@@ -8369,6 +8342,96 @@ const withArrowLineAutoComplete = (board) => {
     return board;
 };
 
+const PREVIEW_ARROW_LINE_DISTANCE = 100;
+const withArrowLineAutoCompleteReaction = (board) => {
+    const { pointerMove, pointerLeave, globalPointerUp } = board;
+    let reactionG = null;
+    let temporaryArrowLineElement = null;
+    let temporaryShapeElement = null;
+    let temporaryArrowLineG = null;
+    let temporaryShapeG = null;
+    board.pointerMove = (event) => {
+        reactionG?.remove();
+        PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
+        const selectedElements = getSelectedDrawElements(board);
+        temporaryArrowLineG?.remove();
+        temporaryShapeG?.remove();
+        const originElement = selectedElements.length === 1 && selectedElements[0];
+        const activePoint = toActivePoint(board, event.x, event.y);
+        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && originElement && PlaitDrawElement.isShapeElement(originElement)) {
+            const points = getAutoCompletePoints(board, originElement, true);
+            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(board, activePoint, originElement, true) || activePoint, points);
+            const hitPoint = points[hitIndex];
+            const ref = PlaitElement.getElementRef(originElement);
+            const lineAutoCompleteGenerator = ref.getGenerator(ArrowLineAutoCompleteGenerator.key);
+            lineAutoCompleteGenerator.recoverAutoCompleteG();
+            if (hitPoint) {
+                reactionG = drawCircle(PlaitBoard.getRoughSVG(board), hitPoint, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, {
+                    stroke: 'none',
+                    fill: rgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_HOVERED_OPACITY),
+                    fillStyle: 'solid'
+                });
+                const originRect = RectangleClient.getRectangleByPoints(originElement.points);
+                let arrowLineStartPoint = RectangleClient.getEdgeCenterPoints(originRect)[hitIndex];
+                const arrowLineDirection = getDirectionByIndex(hitIndex);
+                let arrowLineEndPoint = moveXOfPoint(arrowLineStartPoint, PREVIEW_ARROW_LINE_DISTANCE, arrowLineDirection);
+                const pointer = PlaitBoard.getPointer(board);
+                const geometryGenerator = getGeometryGeneratorByShape(board, pointer);
+                const temporaryShapePoints = originElement.points.map((point) => moveXOfPoint(point, PREVIEW_ARROW_LINE_DISTANCE +
+                    getXDistanceBetweenPoint(originElement.points[0], originElement.points[1], isHorizontalDirection(arrowLineDirection)), arrowLineDirection));
+                temporaryArrowLineG = createG();
+                temporaryShapeG = createG();
+                temporaryArrowLineG.style.opacity = '0.6';
+                temporaryShapeG.style.opacity = '0.6';
+                temporaryShapeElement = {
+                    ...originElement,
+                    points: temporaryShapePoints,
+                    id: idCreator()
+                };
+                const rotatedArrowLineStartPoint = rotatePointsByElement(arrowLineStartPoint, originElement) || arrowLineStartPoint;
+                const rotatedArrowLineEndPoint = rotatePointsByElement(arrowLineEndPoint, temporaryShapeElement) || arrowLineEndPoint;
+                temporaryArrowLineElement = handleArrowLineCreating(board, ArrowLineShape.elbow, rotatedArrowLineStartPoint, rotatedArrowLineEndPoint, originElement, temporaryArrowLineG);
+                BOARD_TO_PRE_COMMIT.set(board, { temporaryArrowLineElement, temporaryShapeElement });
+                const connectionInfo = getHitConnection(board, rotatedArrowLineEndPoint, temporaryShapeElement);
+                temporaryArrowLineElement.target.boundId = temporaryShapeElement.id;
+                temporaryArrowLineElement.target.connection = connectionInfo;
+                geometryGenerator.processDrawing(temporaryShapeElement, temporaryShapeG);
+                PlaitBoard.getElementTopHost(board).append(temporaryShapeG);
+                PlaitBoard.getActiveHost(board).append(reactionG);
+                PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
+                if (hasValidAngle(originElement)) {
+                    const rectangle = board.getRectangle(originElement);
+                    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+                    setAngleForG(reactionG, RectangleClient.getCenterPoint(activeRectangle), originElement.angle);
+                }
+                return;
+            }
+        }
+        BOARD_TO_PRE_COMMIT.delete(board);
+        pointerMove(event);
+    };
+    board.pointerLeave = (pointer) => {
+        clearRef();
+        pointerLeave(pointer);
+    };
+    const clearRef = () => {
+        if (reactionG) {
+            reactionG?.remove();
+            PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
+            temporaryArrowLineG?.remove();
+            temporaryShapeG?.remove();
+        }
+        if (BOARD_TO_PRE_COMMIT.get(board)) {
+            BOARD_TO_PRE_COMMIT.delete(board);
+        }
+    };
+    board.globalPointerUp = (event) => {
+        globalPointerUp(event);
+        clearRef();
+    };
+    return board;
+};
+
 const withArrowLineTextMove = (board) => {
     let textIndex = 0;
     const movableBuffer = 100;
@@ -9250,8 +9313,8 @@ const withDraw = (board) => {
         }
         return isHit(element, point, isStrict);
     };
-    board.getOneHitElement = elements => {
-        const isAllDrawElements = elements.every(item => PlaitDrawElement.isDrawElement(item));
+    board.getOneHitElement = (elements) => {
+        const isAllDrawElements = elements.every((item) => PlaitDrawElement.isDrawElement(item));
         if (isAllDrawElements) {
             return getHitDrawElement(board, elements);
         }
@@ -9277,7 +9340,7 @@ const withDraw = (board) => {
         if (PlaitDrawElement.isArrowLine(element)) {
             const selectedElements = getSelectedElements(board);
             const isSelected = (boundId) => {
-                return !!selectedElements.find(value => value.id === boundId);
+                return !!selectedElements.find((value) => value.id === boundId);
             };
             if (!element.source.boundId && !element.target.boundId) {
                 return true;
@@ -9300,10 +9363,10 @@ const withDraw = (board) => {
     };
     board.getRelatedFragment = (elements, originData) => {
         const selectedElements = originData?.length ? originData : getSelectedElements(board);
-        const lineElements = board.children.filter(element => PlaitDrawElement.isArrowLine(element));
-        const activeLines = lineElements.filter(line => {
-            const source = selectedElements.find(element => element.id === line.source.boundId);
-            const target = selectedElements.find(element => element.id === line.target.boundId);
+        const lineElements = board.children.filter((element) => PlaitDrawElement.isArrowLine(element));
+        const activeLines = lineElements.filter((line) => {
+            const source = selectedElements.find((element) => element.id === line.source.boundId);
+            const target = selectedElements.find((element) => element.id === line.target.boundId);
             const isSelected = selectedElements.includes(line);
             return source && target && !isSelected;
         });
@@ -9316,5 +9379,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultLineStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawI18nKey, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_ALIGN_TOLERANCE, LINE_AUTO_COMPLETE_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_OPACITY, LINE_AUTO_COMPLETE_OPACITY, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LINE_TEXT, LINE_TEXT_SPACE, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultGeometryText, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectionFromConnectionPoint, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSolidElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
+export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BOARD_TO_PRE_COMMIT, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultLineStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawI18nKey, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_ALIGN_TOLERANCE, LINE_AUTO_COMPLETE_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_DIAMETER, LINE_AUTO_COMPLETE_HOVERED_OPACITY, LINE_AUTO_COMPLETE_OPACITY, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LINE_TEXT, LINE_TEXT_SPACE, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultGeometryText, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectionFromConnectionPoint, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSolidElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map