@plait/draw 0.83.0 → 0.84.0

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, 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 { 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, SELECTION_RECTANGLE_CLASS_NAME, toActivePointFromViewBoxPoint, toActiveRectangleFromViewBoxRectangle, drawRectangle, isSelectionMoving, rgbaToHEX, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByElements, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, getEllipseTangentSlope, getVectorFromPointAndSlope, getNearestPointBetweenPointAndEllipse, isPointInEllipse, isPointInRoundRectangle, drawRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, 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, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getPointByVectorComponent, getStrokeLineDash, StrokeStyle, getPointOnPolyline, buildText, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, RESIZE_HANDLE_DIAMETER, drawPrimaryHandle, drawFillPrimaryHandle, PRIMARY_COLOR, 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, CommonElementFlavour, createActiveGenerator, hasResizeHandle, ActiveGenerator, 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';
@@ -395,6 +395,9 @@ const getGeometryPointers = () => {
 const getSwimlanePointers = () => {
     return Object.keys(SwimlaneDrawSymbols);
 };
+const getSwimlaneShapes = () => {
+    return Object.keys(SwimlaneSymbols);
+};
 const getBasicPointers = () => {
     return Object.keys(BasicShapes);
 };
@@ -478,107 +481,6 @@ const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 12;
 const LINE_ALIGN_TOLERANCE = 3;
 const LINE_TEXT = '文本';
 
-const getElementShape = (value) => {
-    if (PlaitDrawElement.isImage(value)) {
-        return BasicShapes.rectangle;
-    }
-    if (PlaitDrawElement.isTable(value)) {
-        return TableSymbols.table;
-    }
-    return value.shape;
-};
-
-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.isArrowLine(element): {
-            key = MemorizeKey.arrowLine;
-            break;
-        }
-        case PlaitDrawElement.isUML(element): {
-            key = MemorizeKey.UML;
-        }
-    }
-    return key;
-};
-const getLineMemorizedLatest = () => {
-    const properties = getMemorizedLatest(MemorizeKey.arrowLine);
-    return { ...properties } || {};
-};
-const getMemorizedLatestByPointer = (pointer) => {
-    let memorizeKey = '';
-    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
-        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
-    }
-    else if (PlaitDrawElement.isUML({ shape: pointer })) {
-        memorizeKey = MemorizeKey.UML;
-    }
-    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 { properties, newProperties } = setNodeOperation;
-        for (const key in newProperties) {
-            const value = newProperties[key];
-            if (value == null) {
-                delete textMemory[key];
-            }
-            else {
-                textMemory[key] = value;
-            }
-        }
-        for (const key in properties) {
-            if (!newProperties.hasOwnProperty(key)) {
-                delete textMemory[key];
-            }
-        }
-        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);
-};
-
 // TODO: 是否可以完全基于位置定位 TextManager，实现 line 和 多文本 geometry 统一
 // 一个元素有多个文本时，单纯通过位置无法获取 TextManage，因此这里单独通过 Map 保存关键字 key 和 TextManage 的对应关系
 // 1. 单文本元素 key 就是元素的 id
@@ -892,20 +794,95 @@ const getSelectedTableCellsEditor = (board) => {
     return undefined;
 };
 
-const getStrokeColorByElement = (board, element) => {
-    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
-    const strokeColor = element.strokeColor || defaultColor;
-    return strokeColor;
+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.isArrowLine(element): {
+            key = MemorizeKey.arrowLine;
+            break;
+        }
+        case PlaitDrawElement.isUML(element): {
+            key = MemorizeKey.UML;
+        }
+    }
+    return key;
 };
-const getFillByElement = (board, element) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element) && isClosedDrawElement(element)
-        ? getFlowchartDefaultFill(board.theme.themeColorMode)
-        : DefaultDrawStyle.fill;
-    const fill = element.fill || defaultFill;
-    return fill;
+const getLineMemorizedLatest = () => {
+    const properties = getMemorizedLatest(MemorizeKey.arrowLine);
+    return { ...properties } || {};
 };
-const getStrokeStyleByElement = (board, element) => {
-    return element.strokeStyle || StrokeStyle.solid;
+const getMemorizedLatestByPointer = (pointer) => {
+    let memorizeKey = '';
+    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
+        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
+    }
+    else if (PlaitDrawElement.isUML({ shape: pointer })) {
+        memorizeKey = MemorizeKey.UML;
+    }
+    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 { properties, newProperties } = setNodeOperation;
+        for (const key in newProperties) {
+            const value = newProperties[key];
+            if (value == null) {
+                delete textMemory[key];
+            }
+            else {
+                textMemory[key] = value;
+            }
+        }
+        for (const key in properties) {
+            if (!newProperties.hasOwnProperty(key)) {
+                delete textMemory[key];
+            }
+        }
+        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 debugKey$4 = 'debug:plait:line-mirror';
@@ -2245,43 +2222,360 @@ const getDefaultGeometryText = (board) => {
     return getI18nValue(board, DrawI18nKey.geometryText, DefaultTextProperty.text);
 };
 
-const createUMLClassOrInterfaceGeometryElement = (board, shape, points) => {
-    const memorizedLatest = getMemorizedLatestByPointer(shape);
-    const element = {
-        id: idCreator(),
-        type: 'geometry',
-        angle: 0,
-        opacity: 1,
-        points,
-        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-        ...memorizedLatest.geometryProperties
-    };
-    let rows;
-    let columns;
-    if (shape === UMLSymbols.class) {
-        rows = [
-            {
-                id: idCreator(),
-                height: 30
-            },
-            {
-                id: idCreator()
-            },
-            {
-                id: idCreator()
-            }
-        ];
-        columns = [
-            {
-                id: idCreator()
-            }
-        ];
+const getStrokeColorByElement = (board, element) => {
+    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
+    const strokeColor = element.strokeColor || defaultColor;
+    return strokeColor;
+};
+const getFillByElement = (board, element) => {
+    const defaultFill = PlaitDrawElement.isFlowchart(element) && isClosedDrawElement(element)
+        ? getFlowchartDefaultFill(board.theme.themeColorMode)
+        : DefaultDrawStyle.fill;
+    const fill = element.fill || defaultFill;
+    return fill;
+};
+const getStrokeStyleByElement = (board, element) => {
+    return element.strokeStyle || StrokeStyle.solid;
+};
+
+class GeometryShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
     }
-    else {
-        rows = [
-            {
-                id: idCreator(),
-                height: 50
+    draw(element, data) {
+        const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const shape = element.shape;
+        if (shape === BasicShapes.text) {
+            return;
+        }
+        const fill = getFillByElement(this.board, element);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(this.board, element);
+        const strokeStyle = getStrokeStyleByElement(this.board, element);
+        const strokeLineDash = getStrokeLineDash(strokeStyle, strokeWidth);
+        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
+            stroke: strokeColor,
+            strokeWidth,
+            fill,
+            strokeLineDash
+        });
+    }
+}
+
+function getMiddlePoints(board, element) {
+    const result = [];
+    const shape = element.shape;
+    const hideBuffer = 10;
+    if (shape === ArrowLineShape.straight) {
+        const points = PlaitDrawElement.isArrowLine(element)
+            ? PlaitArrowLine.getPoints(board, element)
+            : element.points;
+        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]);
+        }
+    }
+    if (shape === ArrowLineShape.curve) {
+        const points = PlaitDrawElement.isArrowLine(element)
+            ? PlaitArrowLine.getPoints(board, element)
+            : element.points;
+        const pointsOnBezier = PlaitDrawElement.isArrowLine(element)
+            ? getCurvePoints(board, element)
+            : getVectorLinePoints(board, element);
+        if (points.length === 2) {
+            const start = 0;
+            const endIndex = pointsOnBezier.length - 1;
+            const middleIndex = Math.round((start + endIndex) / 2);
+            result.push(pointsOnBezier[middleIndex]);
+        }
+        else {
+            for (let i = 0; i < points.length - 1; i++) {
+                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]);
+            }
+        }
+    }
+    if (shape === ArrowLineShape.elbow) {
+        const renderPoints = getElbowPoints(board, element);
+        const options = getElbowLineRouteOptions(board, element);
+        if (!isUseDefaultOrthogonalRoute(element, options)) {
+            const [nextSourcePoint, nextTargetPoint] = getNextSourceAndTargetPoints(board, element);
+            for (let i = 0; i < renderPoints.length - 1; i++) {
+                if ((i == 0 && Point.isEquals(renderPoints[i + 1], nextSourcePoint)) ||
+                    (i === renderPoints.length - 2 && Point.isEquals(renderPoints[renderPoints.length - 2], nextTargetPoint))) {
+                    continue;
+                }
+                const [currentX, currentY] = renderPoints[i];
+                const [nextX, nextY] = renderPoints[i + 1];
+                const middlePoint = [(currentX + nextX) / 2, (currentY + nextY) / 2];
+                result.push(middlePoint);
+            }
+        }
+    }
+    return result;
+}
+
+var LineResizeHandle;
+(function (LineResizeHandle) {
+    LineResizeHandle["source"] = "source";
+    LineResizeHandle["target"] = "target";
+    LineResizeHandle["addHandle"] = "addHandle";
+})(LineResizeHandle || (LineResizeHandle = {}));
+const getHitLineResizeHandleRef = (board, element, point) => {
+    let dataPoints = PlaitDrawElement.isArrowLine(element) ? PlaitArrowLine.getPoints(board, element) : element.points;
+    const index = getHitPointIndex(dataPoints, point);
+    if (index !== -1) {
+        const handleIndex = index;
+        if (index === 0) {
+            return { handle: LineResizeHandle.source, handleIndex };
+        }
+        if (index === dataPoints.length - 1) {
+            return { handle: LineResizeHandle.target, handleIndex };
+        }
+        // elbow line, data points only verify source connection point and target connection point
+        if (element.shape !== ArrowLineShape.elbow) {
+            return { handleIndex };
+        }
+    }
+    const middlePoints = getMiddlePoints(board, element);
+    const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
+    if (indexOfMiddlePoints !== -1) {
+        return {
+            handle: LineResizeHandle.addHandle,
+            handleIndex: indexOfMiddlePoints
+        };
+    }
+    return undefined;
+};
+function getHitPointIndex(points, movingPoint) {
+    const rectangles = points.map(point => {
+        return {
+            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
+            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
+            width: RESIZE_HANDLE_DIAMETER,
+            height: RESIZE_HANDLE_DIAMETER
+        };
+    });
+    const rectangle = rectangles.find(rectangle => {
+        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
+    });
+    return rectangle ? rectangles.indexOf(rectangle) : -1;
+}
+
+class LineActiveGenerator extends Generator {
+    constructor(board, options = { active: true }) {
+        super(board, options);
+        this.board = board;
+        this.onlySelectedCurrentLine = false;
+    }
+    canDraw(element, data) {
+        if (data.selected) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    draw(element, data) {
+        const activeG = createG();
+        const selectedElements = getSelectedElements(this.board);
+        this.onlySelectedCurrentLine = selectedElements.length === 1;
+        if (this.onlySelectedCurrentLine) {
+            activeG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
+            const points = PlaitDrawElement.isArrowLine(element) ? PlaitArrowLine.getPoints(this.board, element) : element.points;
+            let updatePoints = [...points];
+            let elbowNextRenderPoints = [];
+            if (element.shape === ArrowLineShape.elbow) {
+                updatePoints = points.slice(0, 1).concat(points.slice(-1));
+                elbowNextRenderPoints = getNextRenderPoints(this.board, element, data.linePoints);
+            }
+            const activePoints = updatePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
+            activePoints.forEach((point) => {
+                const updateHandle = drawPrimaryHandle(this.board, point);
+                activeG.appendChild(updateHandle);
+            });
+            const middlePoints = getMiddlePoints(this.board, element);
+            const activeMiddlePoints = middlePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
+            if (!PlaitBoard.hasBeenTextEditing(this.board)) {
+                for (let i = 0; i < activeMiddlePoints.length; i++) {
+                    const point = activeMiddlePoints[i];
+                    if (element.shape === ArrowLineShape.elbow && elbowNextRenderPoints.length) {
+                        const handleIndex = getHitPointIndex(activeMiddlePoints, point);
+                        const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
+                        if (isUpdateHandleIndex) {
+                            const updateHandle = drawPrimaryHandle(this.board, point);
+                            activeG.appendChild(updateHandle);
+                            continue;
+                        }
+                    }
+                    const circle = drawFillPrimaryHandle(this.board, point);
+                    activeG.appendChild(circle);
+                }
+            }
+        }
+        else {
+            const rectangle = this.board.getRectangle(element);
+            if (rectangle) {
+                const activeRectangle = toActiveRectangleFromViewBoxRectangle(this.board, rectangle);
+                let opacity = '0.5';
+                if (activeRectangle.height === 0 || activeRectangle.width === 0) {
+                    opacity = '0.8';
+                }
+                const strokeG = drawRectangle(this.board, activeRectangle, {
+                    stroke: PRIMARY_COLOR,
+                    strokeWidth: DefaultDrawActiveStyle.selectionStrokeWidth
+                });
+                strokeG.style.opacity = opacity;
+                activeG.appendChild(strokeG);
+            }
+        }
+        return activeG;
+    }
+    needUpdate() {
+        const selectedElements = getSelectedElements(this.board);
+        const onlySelectedCurrentLine = selectedElements.length === 1;
+        return onlySelectedCurrentLine !== this.onlySelectedCurrentLine;
+    }
+}
+
+class ArrowLineAutoCompleteGenerator extends Generator {
+    static { this.key = 'line-auto-complete-generator'; }
+    constructor(board) {
+        super(board, { active: true });
+        this.board = board;
+        this.hoverElement = null;
+    }
+    canDraw(element, data) {
+        const selectedElements = getSelectedElements(this.board);
+        if (data.selected && selectedElements.length === 1 && !isSelectionMoving(this.board)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    draw(element, data) {
+        this.autoCompleteG = createG();
+        const middlePoints = getAutoCompletePoints(this.board, element, true);
+        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),
+                fillStyle: 'solid'
+            });
+            circle.classList.add(`line-auto-complete-${index}`);
+            this.autoCompleteG.appendChild(circle);
+        });
+        return this.autoCompleteG;
+    }
+    removeAutoCompleteG(index) {
+        this.hoverElement = this.autoCompleteG.querySelector(`.line-auto-complete-${index}`);
+        this.hoverElement.style.visibility = 'hidden';
+    }
+    recoverAutoCompleteG() {
+        if (this.hoverElement) {
+            this.hoverElement.style.visibility = 'visible';
+            this.hoverElement = null;
+        }
+    }
+}
+
+class SingleTextGenerator extends TextGenerator {
+    get textManage() {
+        return this.textManages[0];
+    }
+    constructor(board, element, text, options) {
+        super(board, element, [{ id: element.id, text: text, textHeight: element.textHeight }], options);
+    }
+    update(element, previousText, currentText, elementG) {
+        if (!isMultipleTextGeometry(element)) {
+            super.update(element, [{ text: previousText, id: element.id, textHeight: element.textHeight }], [{ text: currentText, id: element.id, textHeight: element.textHeight }], elementG);
+        }
+    }
+}
+
+class TableGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    draw(element, data) {
+        const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(this.board, element);
+        const strokeStyle = getStrokeStyleByElement(this.board, element);
+        const strokeLineDash = getStrokeLineDash(strokeStyle, strokeWidth);
+        return getEngine(TableSymbols.table).draw(this.board, rectangle, {
+            strokeWidth,
+            stroke: strokeColor,
+            strokeLineDash
+        }, {
+            element: element
+        });
+    }
+}
+
+const getElementShape = (value) => {
+    if (PlaitDrawElement.isImage(value)) {
+        return BasicShapes.rectangle;
+    }
+    if (PlaitDrawElement.isTable(value)) {
+        return TableSymbols.table;
+    }
+    return value.shape;
+};
+const getGeometryGeneratorByShape = (board, shape) => {
+    if (PlaitDrawElement.isUMLClassOrInterface({ shape: shape })) {
+        return new TableGenerator(board);
+    }
+    else {
+        return new GeometryShapeGenerator(board);
+    }
+};
+
+const createUMLClassOrInterfaceGeometryElement = (board, shape, points) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const element = {
+        id: idCreator(),
+        type: 'geometry',
+        angle: 0,
+        opacity: 1,
+        points,
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+        ...memorizedLatest.geometryProperties
+    };
+    let rows;
+    let columns;
+    if (shape === UMLSymbols.class) {
+        rows = [
+            {
+                id: idCreator(),
+                height: 30
+            },
+            {
+                id: idCreator()
+            },
+            {
+                id: idCreator()
+            }
+        ];
+        columns = [
+            {
+                id: idCreator()
+            }
+        ];
+    }
+    else {
+        rows = [
+            {
+                id: idCreator(),
+                height: 50
             },
             {
                 id: idCreator()
@@ -2935,13 +3229,16 @@ const getSwimlaneCount = (swimlane) => {
 const isSwimlaneWithHeader = (shape) => {
     return [SwimlaneDrawSymbols.swimlaneHorizontalWithHeader, SwimlaneDrawSymbols.swimlaneVerticalWithHeader].includes(shape);
 };
+const isSwimlaneShape = (shape) => {
+    return getSwimlaneShapes().includes(shape);
+};
 const adjustSwimlaneShape = (shape) => {
     return [SwimlaneDrawSymbols.swimlaneHorizontalWithHeader, SwimlaneDrawSymbols.swimlaneHorizontal].includes(shape)
         ? SwimlaneSymbols.swimlaneHorizontal
         : SwimlaneSymbols.swimlaneVertical;
 };
-const isSwimlanePointers = (board) => {
-    return PlaitBoard.isInPointer(board, getSwimlanePointers());
+const isSwimlanePointers = (board, pointer = board.pointer) => {
+    return getSwimlanePointers().includes(pointer);
 };
 
 const updateSwimlaneCount = (board, swimlane, count) => {
@@ -3708,87 +4005,27 @@ function drawResizingPointSnapLines(board, activePoints, snapRectangles, resizeS
 }
 function drawIsometricSnapLines(board, activePoints, snapRectangles, resizeSnapOptions, angle) {
     let widthIsometricPoints = [];
-    let heightIsometricPoints = [];
-    const drawHorizontalLine = resizeSnapOptions.directionFactors[0] !== 0 || resizeSnapOptions.isAspectRatio;
-    const drawVerticalLine = resizeSnapOptions.directionFactors[1] !== 0 || resizeSnapOptions.isAspectRatio;
-    const rectangle = RectangleClient.getRectangleByPoints(activePoints);
-    const activeRectangle = getRectangleByAngle(rectangle, angle);
-    for (let snapRectangle of snapRectangles) {
-        if (activeRectangle.width === snapRectangle.width && drawHorizontalLine) {
-            widthIsometricPoints.push(getIsometricLinePoints(snapRectangle, true));
-        }
-        if (activeRectangle.height === snapRectangle.height && drawVerticalLine) {
-            heightIsometricPoints.push(getIsometricLinePoints(snapRectangle, false));
-        }
-    }
-    if (widthIsometricPoints.length && drawHorizontalLine) {
-        widthIsometricPoints.push(getIsometricLinePoints(activeRectangle, true));
-    }
-    if (heightIsometricPoints.length && drawVerticalLine) {
-        heightIsometricPoints.push(getIsometricLinePoints(activeRectangle, false));
-    }
-    const isometricLines = [...widthIsometricPoints, ...heightIsometricPoints];
-    return drawSolidLines(board, isometricLines);
-}
-
-function getMiddlePoints(board, element) {
-    const result = [];
-    const shape = element.shape;
-    const hideBuffer = 10;
-    if (shape === ArrowLineShape.straight) {
-        const points = PlaitDrawElement.isArrowLine(element)
-            ? PlaitArrowLine.getPoints(board, element)
-            : element.points;
-        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]);
-        }
-    }
-    if (shape === ArrowLineShape.curve) {
-        const points = PlaitDrawElement.isArrowLine(element)
-            ? PlaitArrowLine.getPoints(board, element)
-            : element.points;
-        const pointsOnBezier = PlaitDrawElement.isArrowLine(element)
-            ? getCurvePoints(board, element)
-            : getVectorLinePoints(board, element);
-        if (points.length === 2) {
-            const start = 0;
-            const endIndex = pointsOnBezier.length - 1;
-            const middleIndex = Math.round((start + endIndex) / 2);
-            result.push(pointsOnBezier[middleIndex]);
-        }
-        else {
-            for (let i = 0; i < points.length - 1; i++) {
-                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]);
-            }
-        }
-    }
-    if (shape === ArrowLineShape.elbow) {
-        const renderPoints = getElbowPoints(board, element);
-        const options = getElbowLineRouteOptions(board, element);
-        if (!isUseDefaultOrthogonalRoute(element, options)) {
-            const [nextSourcePoint, nextTargetPoint] = getNextSourceAndTargetPoints(board, element);
-            for (let i = 0; i < renderPoints.length - 1; i++) {
-                if ((i == 0 && Point.isEquals(renderPoints[i + 1], nextSourcePoint)) ||
-                    (i === renderPoints.length - 2 && Point.isEquals(renderPoints[renderPoints.length - 2], nextTargetPoint))) {
-                    continue;
-                }
-                const [currentX, currentY] = renderPoints[i];
-                const [nextX, nextY] = renderPoints[i + 1];
-                const middlePoint = [(currentX + nextX) / 2, (currentY + nextY) / 2];
-                result.push(middlePoint);
-            }
+    let heightIsometricPoints = [];
+    const drawHorizontalLine = resizeSnapOptions.directionFactors[0] !== 0 || resizeSnapOptions.isAspectRatio;
+    const drawVerticalLine = resizeSnapOptions.directionFactors[1] !== 0 || resizeSnapOptions.isAspectRatio;
+    const rectangle = RectangleClient.getRectangleByPoints(activePoints);
+    const activeRectangle = getRectangleByAngle(rectangle, angle);
+    for (let snapRectangle of snapRectangles) {
+        if (activeRectangle.width === snapRectangle.width && drawHorizontalLine) {
+            widthIsometricPoints.push(getIsometricLinePoints(snapRectangle, true));
+        }
+        if (activeRectangle.height === snapRectangle.height && drawVerticalLine) {
+            heightIsometricPoints.push(getIsometricLinePoints(snapRectangle, false));
         }
     }
-    return result;
+    if (widthIsometricPoints.length && drawHorizontalLine) {
+        widthIsometricPoints.push(getIsometricLinePoints(activeRectangle, true));
+    }
+    if (heightIsometricPoints.length && drawVerticalLine) {
+        heightIsometricPoints.push(getIsometricLinePoints(activeRectangle, false));
+    }
+    const isometricLines = [...widthIsometricPoints, ...heightIsometricPoints];
+    return drawSolidLines(board, isometricLines);
 }
 
 const buildClipboardData = (board, elements, startPoint) => {
@@ -7030,86 +7267,6 @@ const PlaitDrawElement = {
     }
 };
 
-class GeometryShapeGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    draw(element, data) {
-        const rectangle = RectangleClient.getRectangleByPoints(element.points);
-        const shape = element.shape;
-        if (shape === BasicShapes.text) {
-            return;
-        }
-        const fill = getFillByElement(this.board, element);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const strokeColor = getStrokeColorByElement(this.board, element);
-        const strokeStyle = getStrokeStyleByElement(this.board, element);
-        const strokeLineDash = getStrokeLineDash(strokeStyle, strokeWidth);
-        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, {
-            stroke: strokeColor,
-            strokeWidth,
-            fill,
-            strokeLineDash
-        });
-    }
-}
-
-class ArrowLineAutoCompleteGenerator extends Generator {
-    static { this.key = 'line-auto-complete-generator'; }
-    constructor(board) {
-        super(board, { active: true });
-        this.board = board;
-        this.hoverElement = null;
-    }
-    canDraw(element, data) {
-        const selectedElements = getSelectedElements(this.board);
-        if (data.selected && selectedElements.length === 1 && !isSelectionMoving(this.board)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    draw(element, data) {
-        this.autoCompleteG = createG();
-        const middlePoints = getAutoCompletePoints(this.board, element, true);
-        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),
-                fillStyle: 'solid'
-            });
-            circle.classList.add(`line-auto-complete-${index}`);
-            this.autoCompleteG.appendChild(circle);
-        });
-        return this.autoCompleteG;
-    }
-    removeAutoCompleteG(index) {
-        this.hoverElement = this.autoCompleteG.querySelector(`.line-auto-complete-${index}`);
-        this.hoverElement.style.visibility = 'hidden';
-    }
-    recoverAutoCompleteG() {
-        if (this.hoverElement) {
-            this.hoverElement.style.visibility = 'visible';
-            this.hoverElement = null;
-        }
-    }
-}
-
-class SingleTextGenerator extends TextGenerator {
-    get textManage() {
-        return this.textManages[0];
-    }
-    constructor(board, element, text, options) {
-        super(board, element, [{ id: element.id, text: text, textHeight: element.textHeight }], options);
-    }
-    update(element, previousText, currentText, elementG) {
-        if (!isMultipleTextGeometry(element)) {
-            super.update(element, [{ text: previousText, id: element.id, textHeight: element.textHeight }], [{ text: currentText, id: element.id, textHeight: element.textHeight }], elementG);
-        }
-    }
-}
-
 class GeometryComponent extends CommonElementFlavour {
     constructor() {
         super();
@@ -7245,129 +7402,6 @@ class GeometryComponent extends CommonElementFlavour {
     }
 }
 
-var LineResizeHandle;
-(function (LineResizeHandle) {
-    LineResizeHandle["source"] = "source";
-    LineResizeHandle["target"] = "target";
-    LineResizeHandle["addHandle"] = "addHandle";
-})(LineResizeHandle || (LineResizeHandle = {}));
-const getHitLineResizeHandleRef = (board, element, point) => {
-    let dataPoints = PlaitDrawElement.isArrowLine(element) ? PlaitArrowLine.getPoints(board, element) : element.points;
-    const index = getHitPointIndex(dataPoints, point);
-    if (index !== -1) {
-        const handleIndex = index;
-        if (index === 0) {
-            return { handle: LineResizeHandle.source, handleIndex };
-        }
-        if (index === dataPoints.length - 1) {
-            return { handle: LineResizeHandle.target, handleIndex };
-        }
-        // elbow line, data points only verify source connection point and target connection point
-        if (element.shape !== ArrowLineShape.elbow) {
-            return { handleIndex };
-        }
-    }
-    const middlePoints = getMiddlePoints(board, element);
-    const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
-    if (indexOfMiddlePoints !== -1) {
-        return {
-            handle: LineResizeHandle.addHandle,
-            handleIndex: indexOfMiddlePoints
-        };
-    }
-    return undefined;
-};
-function getHitPointIndex(points, movingPoint) {
-    const rectangles = points.map(point => {
-        return {
-            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
-            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
-            width: RESIZE_HANDLE_DIAMETER,
-            height: RESIZE_HANDLE_DIAMETER
-        };
-    });
-    const rectangle = rectangles.find(rectangle => {
-        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
-    });
-    return rectangle ? rectangles.indexOf(rectangle) : -1;
-}
-
-class LineActiveGenerator extends Generator {
-    constructor(board, options = { active: true }) {
-        super(board, options);
-        this.board = board;
-        this.onlySelectedCurrentLine = false;
-    }
-    canDraw(element, data) {
-        if (data.selected) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    draw(element, data) {
-        const activeG = createG();
-        const selectedElements = getSelectedElements(this.board);
-        this.onlySelectedCurrentLine = selectedElements.length === 1;
-        if (this.onlySelectedCurrentLine) {
-            activeG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
-            const points = PlaitDrawElement.isArrowLine(element) ? PlaitArrowLine.getPoints(this.board, element) : element.points;
-            let updatePoints = [...points];
-            let elbowNextRenderPoints = [];
-            if (element.shape === ArrowLineShape.elbow) {
-                updatePoints = points.slice(0, 1).concat(points.slice(-1));
-                elbowNextRenderPoints = getNextRenderPoints(this.board, element, data.linePoints);
-            }
-            const activePoints = updatePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
-            activePoints.forEach((point) => {
-                const updateHandle = drawPrimaryHandle(this.board, point);
-                activeG.appendChild(updateHandle);
-            });
-            const middlePoints = getMiddlePoints(this.board, element);
-            const activeMiddlePoints = middlePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
-            if (!PlaitBoard.hasBeenTextEditing(this.board)) {
-                for (let i = 0; i < activeMiddlePoints.length; i++) {
-                    const point = activeMiddlePoints[i];
-                    if (element.shape === ArrowLineShape.elbow && elbowNextRenderPoints.length) {
-                        const handleIndex = getHitPointIndex(activeMiddlePoints, point);
-                        const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
-                        if (isUpdateHandleIndex) {
-                            const updateHandle = drawPrimaryHandle(this.board, point);
-                            activeG.appendChild(updateHandle);
-                            continue;
-                        }
-                    }
-                    const circle = drawFillPrimaryHandle(this.board, point);
-                    activeG.appendChild(circle);
-                }
-            }
-        }
-        else {
-            const rectangle = this.board.getRectangle(element);
-            if (rectangle) {
-                const activeRectangle = toActiveRectangleFromViewBoxRectangle(this.board, rectangle);
-                let opacity = '0.5';
-                if (activeRectangle.height === 0 || activeRectangle.width === 0) {
-                    opacity = '0.8';
-                }
-                const strokeG = drawRectangle(this.board, activeRectangle, {
-                    stroke: PRIMARY_COLOR,
-                    strokeWidth: DefaultDrawActiveStyle.selectionStrokeWidth
-                });
-                strokeG.style.opacity = opacity;
-                activeG.appendChild(strokeG);
-            }
-        }
-        return activeG;
-    }
-    needUpdate() {
-        const selectedElements = getSelectedElements(this.board);
-        const onlySelectedCurrentLine = selectedElements.length === 1;
-        return onlySelectedCurrentLine !== this.onlySelectedCurrentLine;
-    }
-}
-
 const debugKey = 'debug:plait:line-turning';
 const debugGenerator = createDebugGenerator(debugKey);
 class ArrowLineComponent extends CommonElementFlavour {
@@ -7614,26 +7648,6 @@ const withDrawHotkey = (board) => {
     return board;
 };
 
-class TableGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    draw(element, data) {
-        const rectangle = RectangleClient.getRectangleByPoints(element.points);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const strokeColor = getStrokeColorByElement(this.board, element);
-        const strokeStyle = getStrokeStyleByElement(this.board, element);
-        const strokeLineDash = getStrokeLineDash(strokeStyle, strokeWidth);
-        return getEngine(TableSymbols.table).draw(this.board, rectangle, {
-            strokeWidth,
-            stroke: strokeColor,
-            strokeLineDash
-        }, {
-            element: element
-        });
-    }
-}
-
 const isGeometryDndMode = (board) => {
     const geometryPointers = getGeometryPointers();
     const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
@@ -7646,14 +7660,6 @@ const isGeometryDrawingMode = (board) => {
     const drawingMode = isGeometryPointer && isDrawingMode(board);
     return drawingMode;
 };
-const getGeometryGeneratorByShape = (board, shape) => {
-    if (PlaitDrawElement.isUMLClassOrInterface({ shape: shape })) {
-        return new TableGenerator(board);
-    }
-    else {
-        return new GeometryShapeGenerator(board);
-    }
-};
 const withGeometryCreateByDrag = (board) => {
     const { pointerMove, globalPointerUp, pointerUp } = board;
     let geometryShapeG = null;
@@ -8366,37 +8372,12 @@ const withArrowLineAutoCompleteReaction = (board) => {
             const lineAutoCompleteGenerator = ref.getGenerator(ArrowLineAutoCompleteGenerator.key);
             lineAutoCompleteGenerator.recoverAutoCompleteG();
             if (hitPoint) {
+                // function 1: dnd
                 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)) {
@@ -8404,6 +8385,36 @@ const withArrowLineAutoCompleteReaction = (board) => {
                     const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
                     setAngleForG(reactionG, RectangleClient.getCenterPoint(activeRectangle), originElement.angle);
                 }
+                // function 2: hover to preview and click to commit
+                if (PlaitDrawElement.isGeometry(originElement) && !PlaitDrawElement.isText(originElement)) {
+                    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 geometryGenerator = getGeometryGeneratorByShape(board, originElement.shape);
+                    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 = createDefaultGeometry(board, temporaryShapePoints, originElement.shape);
+                    temporaryShapeElement.angle = originElement.angle;
+                    temporaryShapeElement.fill = originElement.fill;
+                    temporaryShapeElement.strokeColor = originElement.strokeColor;
+                    temporaryShapeElement.strokeStyle = originElement.strokeStyle;
+                    temporaryShapeElement.strokeWidth = originElement.strokeWidth;
+                    temporaryShapeElement.groupId = originElement.groupId;
+                    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);
+                }
                 return;
             }
         }
@@ -9003,9 +9014,9 @@ const withSwimlaneCreateByDrag = (board) => {
         swimlaneG?.remove();
         swimlaneG = createG();
         const tableGenerator = new TableGenerator(board);
+        const pointer = PlaitBoard.getPointer(board);
         const dragMode = isSwimlaneDndMode(board);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const pointer = PlaitBoard.getPointer(board);
         if (dragMode) {
             const points = getDefaultSwimlanePoints(pointer, movingPoint);
             temporaryElement = createDefaultSwimlane(pointer, points);
@@ -9379,5 +9390,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, getSwimlaneShapes, 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, isSwimlaneShape, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map