@plait/draw 0.1.0-next.6 → 0.1.0-next.8

package/fesm2022/plait-draw.mjs

@@ -1,8 +1,8 @@
-import { PlaitElement, RectangleClient, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegments, setPathStrokeLinecap, arrowPoints, drawLinearPath, getElementById, findElements, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, PlaitPluginElementComponent, isSelectionMoving, createMask, createRect, transformPoint, toPoint, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElements, isPolylineHitRectangle } from '@plait/core';
+import { PlaitElement, ACTIVE_STROKE_WIDTH, RectangleClient, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, arrowPoints, createPath, drawLinearPath, distanceBetweenPointAndSegments, createMask, createRect, getElementById, findElements, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, isSelectionMoving, PlaitPluginElementComponent, transformPoint, toPoint, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElements, isPolylineHitRectangle } from '@plait/core';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { getRectangleByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, getDirectionBetweenPointAndPoint, getDirectionFactor, Generator, normalizeShapePoints, ActiveGenerator, RESIZE_HANDLE_DIAMETER, isVirtualKey, isSpaceHotkey, isDndMode, isDrawingMode, CommonTransforms, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
+import { getRectangleByPoints, getFactorByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, getDirectionFactor, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
 import { Alignment, buildText, AlignEditor, TextManage, DEFAULT_FONT_SIZE, getTextFromClipboard, getTextSize } from '@plait/text';
 import { isKeyHotkey } from 'is-hotkey';
 import { Node } from 'slate';
@@ -18,9 +18,12 @@ var GeometryShape;
 })(GeometryShape || (GeometryShape = {}));
 const PlaitGeometry = {
     getTextEditor(element) {
+        return PlaitGeometry.getTextManage(element).componentRef.instance.editor;
+    },
+    getTextManage(element) {
         const component = PlaitElement.getComponent(element);
         if (component) {
-            return component.textManage.componentRef.instance.editor;
+            return component.textManage;
         }
         throw new Error('can not get correctly component in get text editor');
     }
@@ -30,6 +33,9 @@ var LineMarkerType;
 (function (LineMarkerType) {
     LineMarkerType["arrow"] = "arrow";
     LineMarkerType["none"] = "none";
+    LineMarkerType["openTriangle"] = "open-triangle";
+    LineMarkerType["solidTriangle"] = "solid-triangle";
+    LineMarkerType["sharpArrow"] = "sharp-arrow";
 })(LineMarkerType || (LineMarkerType = {}));
 var LineShape;
 (function (LineShape) {
@@ -37,6 +43,11 @@ var LineShape;
     LineShape["curve"] = "curve";
     LineShape["elbow"] = "elbow";
 })(LineShape || (LineShape = {}));
+var LineHandleKey;
+(function (LineHandleKey) {
+    LineHandleKey["source"] = "source";
+    LineHandleKey["target"] = "target";
+})(LineHandleKey || (LineHandleKey = {}));
 const PlaitLine = {
     getTextEditors(element) {
         const component = PlaitElement.getComponent(element);
@@ -101,8 +112,8 @@ const DefaultGeometryStyle = {
     fill: 'none'
 };
 const DefaultGeometryActiveStyle = {
-    strokeWidth: 2,
-    selectionStrokeWidth: 1
+    strokeWidth: ACTIVE_STROKE_WIDTH,
+    selectionStrokeWidth: ACTIVE_STROKE_WIDTH
 };
 const DefaultGeometryProperty = {
     width: 100,
@@ -365,20 +376,20 @@ const getPointsByCenterPoint = (point, width, height) => {
 };
 const getTextRectangle = (element) => {
     const elementRectangle = getRectangleByPoints(element.points);
+    const strokeWidth = getStrokeWidthByElement(element);
     const height = element.textHeight;
-    const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2;
+    const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
     return {
         height,
         width: width > 0 ? width : 0,
-        x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText,
+        x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
         y: elementRectangle.y + (elementRectangle.height - height) / 2
     };
 };
 const drawBoundMask = (board, element) => {
     const G = createG();
     const rectangle = getRectangleByPoints(element.points);
-    const offset = (getStrokeWidthByElement(element) + 1) / 2 - 0.1;
-    const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
+    const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
     const maskG = drawGeometry(board, activeRectangle, element.shape, {
         stroke: SELECTION_BORDER_COLOR,
         strokeWidth: 1,
@@ -401,9 +412,9 @@ const drawBoundMask = (board, element) => {
 const drawGeometry = (board, outerRectangle, shape, options) => {
     return getEngine(shape).draw(board, outerRectangle, options);
 };
-const getNearestPoint = (element, point, offset = 0) => {
+const getNearestPoint = (element, point, inflateDelta = 0) => {
     const rectangle = getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
+    const activeRectangle = RectangleClient.inflate(rectangle, inflateDelta);
     return getEngine(element.shape).getNearestPoint(activeRectangle, point);
 };
 const getCenterPointsOnPolygon = (points) => {
@@ -415,7 +426,91 @@ const getCenterPointsOnPolygon = (points) => {
     return centerPoint;
 };
 
-const BOUNDED_HANDLE_OFFSET = 0.5;
+const drawLineArrow = (element, points, options) => {
+    const arrowG = createG();
+    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
+        return null;
+    }
+    if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
+        const sourceArrow = getArrow(element, element.source.marker, points[1], points[0], options);
+        sourceArrow && arrowG.appendChild(sourceArrow);
+    }
+    if (!PlaitLine.isTargetMark(element, LineMarkerType.none)) {
+        const arrow = getArrow(element, element.target.marker, points[points.length - 2], points[points.length - 1], options);
+        arrow && arrowG.appendChild(arrow);
+    }
+    return arrowG;
+};
+const getArrow = (element, marker, source, target, options) => {
+    let targetArrow;
+    switch (marker) {
+        case LineMarkerType.openTriangle: {
+            targetArrow = drawOpenTriangle(element, source, target, options);
+            break;
+        }
+        case LineMarkerType.solidTriangle: {
+            targetArrow = drawSolidTriangle(source, target, options);
+            break;
+        }
+        case LineMarkerType.arrow: {
+            targetArrow = drawArrow(element, source, target, options);
+            break;
+        }
+        case LineMarkerType.sharpArrow: {
+            targetArrow = drawSharpArrow(source, target, options);
+            break;
+        }
+    }
+    return targetArrow;
+};
+const drawSharpArrow = (source, target, options) => {
+    const directionFactor = getFactorByPoints(source, target);
+    const startPoint = target;
+    // const startPoint: Point = [
+    //     target[0],
+    //     target[1]
+    // ];
+    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 20);
+    const g = createG();
+    const path = createPath();
+    let polylinePath = `M${pointRight[0]},${pointRight[1]}A8,8,20,0,1,${pointLeft[0]},${pointLeft[1]}L${startPoint[0]},${startPoint[1]}Z`;
+    path.setAttribute('d', polylinePath);
+    path.setAttribute('stroke', `${options?.stroke}`);
+    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
+    path.setAttribute('fill', `${options?.stroke}`);
+    g.appendChild(path);
+    return g;
+};
+const drawArrow = (element, source, target, options) => {
+    const directionFactor = getFactorByPoints(source, target);
+    const strokeWidth = getStrokeWidthByElement(element);
+    const endPoint = [
+        target[0] + strokeWidth * directionFactor.x / 2,
+        target[1] + strokeWidth * directionFactor.y / 2
+    ];
+    const middlePoint = [endPoint[0] - 8 * directionFactor.x, endPoint[1] - 8 * directionFactor.y];
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 30);
+    const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], { ...options, fill: options.stroke }, true);
+    const path = arrowG.querySelector('path');
+    path.setAttribute('stroke-linejoin', 'round');
+    return arrowG;
+};
+const drawSolidTriangle = (source, target, options) => {
+    const endPoint = target;
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 30);
+    return drawLinearPath([pointLeft, endPoint, pointRight], { ...options, fill: options.stroke }, true);
+};
+const drawOpenTriangle = (element, source, target, options) => {
+    const directionFactor = getFactorByPoints(source, target);
+    const strokeWidth = getStrokeWidthByElement(element);
+    const endPoint = [
+        target[0] + strokeWidth * directionFactor.x / 2,
+        target[1] + strokeWidth * directionFactor.y / 2
+    ];
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 40);
+    return drawLinearPath([pointLeft, endPoint, pointRight], options);
+};
+
 const createLineElement = (shape, points, source, target, options) => {
     return {
         id: idCreator(),
@@ -429,6 +524,12 @@ const createLineElement = (shape, points, source, target, options) => {
         ...options
     };
 };
+const getLinePoints = (board, element) => {
+    return element.shape === LineShape.elbow ? getElbowPoints(board, element) : getStraightPoints(board, element);
+};
+const getStraightPoints = (board, element) => {
+    return [getSourcePoint(board, element), getTargetPoint(board, element)];
+};
 const getElbowPoints = (board, element) => {
     if (element.points.length === 2) {
         const source = getSourcePoint(board, element);
@@ -469,50 +570,50 @@ const getHitLineTextIndex = (board, element, point) => {
 const isHitLineText = (board, element, point) => {
     return getHitLineTextIndex(board, element, point) !== -1;
 };
-const drawElbowLine = (board, element) => {
+const drawLine = (board, element) => {
     const strokeWidth = getStrokeWidthByElement(element);
     const strokeColor = getStrokeColorByElement(element);
     const strokeLineDash = getLineDashByElement(element);
     const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
     const lineG = createG();
-    const points = getElbowPoints(board, element);
-    const elbowLine = PlaitBoard.getRoughSVG(board).linearPath(points, options);
-    const path = elbowLine.querySelector('path');
-    path?.setAttribute('mask', `url(#${element.id})`);
-    setPathStrokeLinecap(elbowLine, 'square');
-    lineG.appendChild(elbowLine);
+    const points = getLinePoints(board, element);
+    const line = drawLinearPath(points, options);
+    line.setAttribute('mask', `url(#${element.id})`);
+    lineG.appendChild(line);
+    const { mask, maskTargetFillRect } = drawMask(board, element);
+    lineG.appendChild(mask);
+    line.appendChild(maskTargetFillRect);
     const arrow = drawLineArrow(element, points, options);
     arrow && lineG.appendChild(arrow);
     return lineG;
 };
-const drawLineArrow = (element, points, options) => {
-    const arrowG = createG();
-    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
-        return null;
-    }
-    if (PlaitLine.isSourceMark(element, LineMarkerType.arrow)) {
-        const sourcePoint = points[0];
-        const { pointLeft, pointRight } = arrowPoints(points[1], sourcePoint, 12, 40);
-        const sourceArrow = drawLinearPath([pointLeft, sourcePoint, pointRight], options);
-        arrowG.appendChild(sourceArrow);
-    }
-    if (PlaitLine.isTargetMark(element, LineMarkerType.arrow)) {
-        const _endPoint = points[points.length - 1];
-        const arrowDirection = getDirectionBetweenPointAndPoint(points[points.length - 2], _endPoint);
-        const directionFactor = getDirectionFactor(arrowDirection);
-        const endPoint = [
-            _endPoint[0] + BOUNDED_HANDLE_OFFSET * directionFactor.x,
-            _endPoint[1] + BOUNDED_HANDLE_OFFSET * directionFactor.y
-        ];
-        const { pointLeft, pointRight } = arrowPoints(points[points.length - 2], endPoint, 12, 40);
-        const targetArrow = drawLinearPath([pointLeft, endPoint, pointRight], options);
-        arrowG.appendChild(targetArrow);
-    }
-    return arrowG;
-};
+function drawMask(board, element) {
+    const mask = createMask();
+    mask.setAttribute('id', element.id);
+    const points = getLinePoints(board, element);
+    let rectangle = getRectangleByPoints(points);
+    rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
+    const maskFillRect = createRect(rectangle, {
+        fill: 'white'
+    });
+    mask.appendChild(maskFillRect);
+    const texts = element.texts;
+    texts.forEach((text, index) => {
+        const textRectangle = getLineTextRectangle(board, element, index);
+        const rect = createRect(textRectangle, {
+            fill: 'black'
+        });
+        mask.appendChild(rect);
+    });
+    //撑开 line
+    const maskTargetFillRect = createRect(rectangle);
+    maskTargetFillRect.setAttribute('opacity', '0');
+    return { mask, maskTargetFillRect };
+}
 const getSourcePoint = (board, element) => {
     if (element.source.boundId) {
-        const connectionOffset = PlaitLine.isSourceMark(element, LineMarkerType.arrow) ? BOUNDED_HANDLE_OFFSET : 0;
+        const strokeWidth = getStrokeWidthByElement(element);
+        const connectionOffset = PlaitLine.isSourceMark(element, LineMarkerType.none) ? 0 : strokeWidth;
         const boundElement = getElementById(board, element.source.boundId);
         return boundElement ? getConnectionPoint(boundElement, element.source.connection, connectionOffset) : element.points[0];
     }
@@ -520,7 +621,8 @@ const getSourcePoint = (board, element) => {
 };
 const getTargetPoint = (board, element) => {
     if (element.target.boundId) {
-        const connectionOffset = PlaitLine.isTargetMark(element, LineMarkerType.arrow) ? BOUNDED_HANDLE_OFFSET : 0;
+        const strokeWidth = getStrokeWidthByElement(element);
+        const connectionOffset = PlaitLine.isTargetMark(element, LineMarkerType.none) ? 0 : strokeWidth;
         const boundElement = getElementById(board, element.target.boundId);
         return boundElement
             ? getConnectionPoint(boundElement, element.target.connection, connectionOffset)
@@ -530,18 +632,16 @@ const getTargetPoint = (board, element) => {
 };
 const getConnectionPoint = (geometry, connection, offset) => {
     const rectangle = getRectangleByPoints(geometry.points);
-    const strokeWidth = getStrokeWidthByElement(geometry);
     const directionFactor = getDirectionFactor(getDirectionByPoint(connection, Direction.bottom));
     return [
-        rectangle.x + rectangle.width * connection[0] + strokeWidth * directionFactor.x + offset * directionFactor.x,
-        rectangle.y + rectangle.height * connection[1] + strokeWidth * directionFactor.y + offset * directionFactor.y
+        rectangle.x + rectangle.width * connection[0] + directionFactor.x * offset,
+        rectangle.y + rectangle.height * connection[1] + directionFactor.y * offset
     ];
 };
 const transformPointToConnection = (board, point, hitElement) => {
-    const offset = (getStrokeWidthByElement(hitElement) + 1) / 2;
     let rectangle = getRectangleByPoints(hitElement.points);
-    rectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
-    let nearestPoint = getNearestPoint(hitElement, point, offset);
+    rectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
+    let nearestPoint = getNearestPoint(hitElement, point, ACTIVE_STROKE_WIDTH);
     const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, rectangle);
     nearestPoint = hitConnector ? hitConnector : nearestPoint;
     return [(nearestPoint[0] - rectangle.x) / rectangle.width, (nearestPoint[1] - rectangle.y) / rectangle.height];
@@ -556,7 +656,7 @@ const getHitConnectorPoint = (movingPoint, hitElement, rectangle) => {
 };
 const getLineTextRectangle = (board, element, index) => {
     const text = element.texts[index];
-    const elbowPoints = getElbowPoints(board, element);
+    const elbowPoints = getLinePoints(board, element);
     const point = getPointOnPolyline(elbowPoints, text.position);
     return {
         x: point[0] - text.width / 2,
@@ -590,7 +690,7 @@ class GeometryShapeGenerator extends Generator {
         return true;
     }
     baseDraw(element, data) {
-        const outerRectangle = getRectangleByPoints(element.points);
+        const rectangle = getRectangleByPoints(element.points);
         const shape = element.shape;
         if (shape === GeometryShape.text) {
             return;
@@ -599,7 +699,7 @@ class GeometryShapeGenerator extends Generator {
         const strokeColor = getStrokeColorByElement(element);
         const fill = getFillByElement(element);
         const strokeLineDash = getLineDashByElement(element);
-        return drawGeometry(this.board, outerRectangle, shape, { stroke: strokeColor, strokeWidth, fill, strokeLineDash });
+        return drawGeometry(this.board, RectangleClient.inflate(rectangle, -strokeWidth), shape, { stroke: strokeColor, strokeWidth, fill, strokeLineDash });
     }
 }
 
@@ -693,6 +793,12 @@ const removeLineText = (board, element, index) => {
     newTexts.splice(index, 1);
     Transforms.setNode(board, { texts: newTexts }, path);
 };
+const setLineMark = (board, element, handleKey, marker) => {
+    const path = PlaitBoard.findPath(board, element);
+    let handle = handleKey === LineHandleKey.source ? element.source : element.target;
+    handle = { ...handle, marker };
+    Transforms.setNode(board, { [handleKey]: handle }, path);
+};
 
 const DrawTransforms = {
     setText,
@@ -702,10 +808,14 @@ const DrawTransforms = {
     setTextSize,
     resizeLine,
     setLineTexts,
-    removeLineText
+    removeLineText,
+    setLineMark
 };
 
-class GeometryComponent extends PlaitPluginElementComponent {
+class GeometryComponent extends CommonPluginElement {
+    get textManage() {
+        return this.getTextManages()[0];
+    }
     constructor(viewContainerRef, cdr) {
         super(cdr);
         this.viewContainerRef = viewContainerRef;
@@ -726,9 +836,6 @@ class GeometryComponent extends PlaitPluginElementComponent {
             getRectangle: (element) => {
                 return getRectangleByPoints(element.points);
             },
-            getStrokeWidthByElement: (element) => {
-                return getStrokeWidthByElement(element);
-            },
             hasResizeHandle: () => {
                 const selectedElements = getSelectedElements(this.board);
                 if (PlaitBoard.hasBeenTextEditing(this.board) && PlaitDrawElement.isText(this.element)) {
@@ -774,7 +881,8 @@ class GeometryComponent extends PlaitPluginElementComponent {
         this.textManage.updateRectangle();
     }
     initializeTextManage() {
-        this.textManage = new TextManage(this.board, this.viewContainerRef, {
+        const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
+        const manage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
                 return getTextRectangle(this.element);
             },
@@ -791,8 +899,10 @@ class GeometryComponent extends PlaitPluginElementComponent {
             getMaxWidth: () => {
                 const width = getTextRectangle(this.element).width;
                 return this.element?.autoSize ? GeometryThreshold.defaultTextMaxWidth : width;
-            }
+            },
+            textPlugins: plugins
         });
+        this.initializeTextManages([manage]);
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -821,8 +931,8 @@ class LineShapeGenerator extends Generator {
         let lineG;
         switch (shape) {
             case LineShape.elbow:
-                lineG = drawElbowLine(this.board, element);
-                drawMask(this.board, lineG, element);
+            case LineShape.straight:
+                lineG = drawLine(this.board, element);
                 break;
             default:
                 break;
@@ -830,26 +940,6 @@ class LineShapeGenerator extends Generator {
         return lineG;
     }
 }
-function drawMask(board, g, element) {
-    const mask = createMask();
-    mask.setAttribute('id', element.id);
-    const points = getElbowPoints(board, element);
-    let rectangle = getRectangleByPoints(points);
-    rectangle = RectangleClient.getOutlineRectangle(rectangle, -3);
-    const maskRect = createRect(rectangle, {
-        fill: 'white'
-    });
-    mask.appendChild(maskRect);
-    const texts = element.texts;
-    texts.forEach((text, index) => {
-        const textRectangle = getLineTextRectangle(board, element, index);
-        const rect = createRect(textRectangle, {
-            fill: 'black'
-        });
-        mask.appendChild(rect);
-    });
-    g.appendChild(mask);
-}
 
 class LineActiveGenerator extends Generator {
     canDraw(element, data) {
@@ -1032,7 +1122,11 @@ const withDrawHotkey = (board) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
         const targetElement = selectedElements[0];
-        if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection && PlaitDrawElement.isGeometry(targetElement)) {
+        if (!isVirtualKey(event) &&
+            !isDelete(event) &&
+            !isSpaceHotkey(event) &&
+            isSingleSelection &&
+            PlaitDrawElement.isGeometry(targetElement)) {
             event.preventDefault();
             PlaitElement.getComponent(targetElement).editText();
             return;
@@ -1097,7 +1191,7 @@ const withGeometryCreateByDrag = (board) => {
         }
         geometryShapeG?.remove();
         geometryShapeG = null;
-        preventTouchMove(board, false);
+        preventTouchMove(board, event, false);
         pointerUp(event);
     };
     return board;
@@ -1121,8 +1215,8 @@ const withGeometryCreateByDraw = (board) => {
         if (isGeometryPointer && isDrawingMode(board)) {
             const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             start = point;
-            preventTouchMove(board, true);
             const pointer = PlaitBoard.getPointer(board);
+            preventTouchMove(board, event, true);
             if (pointer === DrawPointerType.text) {
                 const points = getDefaultGeometryPoints(pointer, point);
                 const textElement = createGeometryElement(GeometryShape.text, points, DefaultTextProperty.text);
@@ -1131,7 +1225,6 @@ const withGeometryCreateByDraw = (board) => {
                 addSelectedElement(board, textElement);
                 BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
                 start = null;
-                preventTouchMove(board, false);
             }
         }
         pointerDown(event);
@@ -1180,7 +1273,7 @@ const withGeometryCreateByDraw = (board) => {
         geometryShapeG = null;
         start = null;
         temporaryElement = null;
-        preventTouchMove(board, false);
+        preventTouchMove(board, event, false);
         pointerUp(event);
     };
     return board;
@@ -1256,21 +1349,17 @@ const insertClipboardData = (board, elements, startPoint) => {
 
 const withDrawFragment = (baseBoard) => {
     const board = baseBoard;
-    const { deleteFragment, setFragment, insertFragment } = board;
-    board.deleteFragment = (data) => {
+    const { getDeletedFragment, setFragment, insertFragment } = board;
+    board.getDeletedFragment = (data) => {
         const drawElements = getSelectedDrawElements(board);
         if (drawElements.length) {
             const lines = getBoardLines(board);
             const geometryElements = drawElements.filter(value => PlaitDrawElement.isGeometry(value));
             const lineElements = drawElements.filter(value => PlaitDrawElement.isLine(value));
             const boundLineElements = lines.filter(line => geometryElements.find(geometry => PlaitLine.isBoundElementOfSource(line, geometry) || PlaitLine.isBoundElementOfTarget(line, geometry)));
-            CommonTransforms.removeElements(board, [
-                ...geometryElements,
-                ...lineElements,
-                ...boundLineElements.filter(line => !lineElements.includes(line))
-            ]);
+            data.push(...[...geometryElements, ...lineElements, ...boundLineElements.filter(line => !lineElements.includes(line))]);
         }
-        deleteFragment(data);
+        return getDeletedFragment(data);
     };
     board.setFragment = (data, rectangle) => {
         const targetDrawElements = getSelectedDrawElements(board);
@@ -1349,7 +1438,7 @@ const withLineCreateByDraw = (board) => {
                 sourceRef.connection = transformPointToConnection(board, point, hitElement);
                 sourceRef.boundId = hitElement.id;
             }
-            preventTouchMove(board, true);
+            preventTouchMove(board, event, true);
         }
         pointerDown(event);
     };
@@ -1384,7 +1473,7 @@ const withLineCreateByDraw = (board) => {
         sourceRef = {};
         targetRef = {};
         temporaryElement = null;
-        preventTouchMove(board, false);
+        preventTouchMove(board, event, false);
         pointerUp(event);
     };
     return board;
@@ -1408,7 +1497,7 @@ const withGeometryResize = (board) => {
         },
         detect: (point) => {
             const selectedGeometryElements = getSelectedGeometryElements(board);
-            if (selectedGeometryElements.length !== 1) {
+            if (selectedGeometryElements.length !== 1 || getSelectedElements(board).length !== 1) {
                 return null;
             }
             const target = selectedGeometryElements[0];
@@ -1446,8 +1535,7 @@ const withGeometryResize = (board) => {
                 ];
             }
             points = normalizeShapePoints(points, isShift);
-            const component = PlaitElement.getComponent(resizeRef.element);
-            const { height: textHeight } = component.textManage.getSize();
+            const { height: textHeight } = PlaitGeometry.getTextManage(resizeRef.element).getSize();
             DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
         }
     };
@@ -1544,15 +1632,14 @@ const withLineBoundReaction = (board) => {
             const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
             if (hitElement) {
                 boundShapeG = drawBoundMask(board, hitElement);
-                const offset = (getStrokeWidthByElement(hitElement) + 1) / 2;
-                let nearestPoint = getNearestPoint(hitElement, movingPoint, offset);
+                let nearestPoint = getNearestPoint(hitElement, movingPoint, ACTIVE_STROKE_WIDTH);
                 const rectangle = getRectangleByPoints(hitElement.points);
-                const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
+                const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
                 const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, activeRectangle);
                 nearestPoint = hitConnector ? hitConnector : nearestPoint;
                 const circleG = drawCircle(PlaitBoard.getRoughSVG(board), nearestPoint, 6, {
                     stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: 1,
+                    strokeWidth: ACTIVE_STROKE_WIDTH,
                     fill: SELECTION_BORDER_COLOR,
                     fillStyle: 'solid'
                 });
@@ -1578,7 +1665,7 @@ const withLineText = (board) => {
             return PlaitDrawElement.isLine(element);
         })[0];
         if (hitTarget) {
-            const points = getElbowPoints(board, hitTarget);
+            const points = getLinePoints(board, hitTarget);
             const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
             const texts = hitTarget.texts?.length ? [...hitTarget.texts] : [];
             const textIndex = getHitLineTextIndex(board, hitTarget, clickPoint);
@@ -1651,7 +1738,7 @@ const withDraw = (board) => {
             return RectangleClient.isHit(rangeRectangle, client);
         }
         if (PlaitDrawElement.isLine(element)) {
-            const points = getElbowPoints(board, element);
+            const points = getLinePoints(board, element);
             const strokeWidth = getStrokeWidthByElement(element);
             const isHitText = isHitLineText(board, element, range.focus);
             const isHit = isHitPolyLine(points, range.focus, strokeWidth, 3) || isHitText;
@@ -1680,5 +1767,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawPointerType, GeometryComponent, GeometryPointer, GeometryShape, GeometryThreshold, LineComponent, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawElbowLine, drawGeometry, drawLineArrow, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getElbowPoints, getFillByElement, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getSourcePoint, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTargetPoint, getTextRectangle, isHitLineText, isHitPolyLine, transformPointToConnection, withDraw };
+export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawPointerType, DrawTransforms, GeometryComponent, GeometryPointer, GeometryShape, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getElbowPoints, getFillByElement, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getSourcePoint, getStraightPoints, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTargetPoint, getTextRectangle, isHitLineText, isHitPolyLine, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map