@plait/draw 0.31.0 → 0.32.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, BOARD_TO_HOST, transformPoint, toPoint, idCreator, createG, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, drawLinearPath, rotate, getElementById, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElementByPoint } from '@plait/core';
-import { getRectangleByPoints, Generator, normalizeShapePoints, isDndMode, isDrawingMode, getFactorByPoints, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+import { PlaitElement, ACTIVE_STROKE_WIDTH, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, BOARD_TO_HOST, transformPoint, toPoint, idCreator, createG, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, drawLinearPath, distanceBetweenPointAndPoint, rotate, getElementById, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, isPolylineHitRectangle, isSelectionMoving, PlaitPluginElementComponent, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElementByPoint } from '@plait/core';
+import { getRectangleByPoints, Generator, normalizeShapePoints, isDndMode, isDrawingMode, getExtendPoint, getFactorByPoints, getDirectionByVector, getOppositeDirection, getDirectionFactor, DEFAULT_ROUTE_MARGIN, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointByVector, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, acceptImageTypes, getElementOfFocusedImage, buildImage, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
 import { AlignEditor, Alignment, DEFAULT_FONT_SIZE, buildText, TextManage, getTextFromClipboard, getTextSize } from '@plait/text';
 import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
@@ -1493,6 +1493,7 @@ const DefaultLineStyle = {
     strokeWidth: 2,
     strokeColor: '#000'
 };
+const LINE_TEXT_SPACE = 4;
 
 const createGeometryElement = (shape, points, text, options) => {
     let textOptions = {};
@@ -1649,25 +1650,28 @@ const createDefaultFlowchart = (point) => {
     return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
 };
 
+const MAX_LENGTH = 100;
 const drawLineArrow = (element, points, options) => {
     const arrowG = createG();
     if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
         return null;
     }
+    const strokeWidth = getStrokeWidthByElement(element);
+    const offset = (strokeWidth * strokeWidth) / 3;
     if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
-        const source = getExtendPoint(points[0], points[1], 24);
+        const source = getExtendPoint(points[0], points[1], 24 + offset);
         const sourceArrow = getArrow(element, { marker: element.source.marker, source, target: points[0], isSource: true }, options);
         sourceArrow && arrowG.appendChild(sourceArrow);
     }
     if (!PlaitLine.isTargetMark(element, LineMarkerType.none)) {
-        const source = getExtendPoint(points[points.length - 1], points[points.length - 2], 24);
+        const source = getExtendPoint(points[points.length - 1], points[points.length - 2], 24 + offset);
         const arrow = getArrow(element, { marker: element.target.marker, source, target: points[points.length - 1], isSource: false }, options);
         arrow && arrowG.appendChild(arrow);
     }
     return arrowG;
 };
 const getArrow = (element, arrowOptions, options) => {
-    const { marker, source, target, isSource } = arrowOptions;
+    const { marker, target, source, isSource } = arrowOptions;
     let targetArrow;
     switch (marker) {
         case LineMarkerType.openTriangle: {
@@ -1707,10 +1711,10 @@ const getArrow = (element, arrowOptions, options) => {
 };
 const drawSharpArrow = (source, target, options) => {
     const startPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 20);
+    const { pointLeft, pointRight } = arrowPoints(source, target, 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`;
+    let polylinePath = `M${pointRight[0]},${pointRight[1]}A25,25,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}`);
@@ -1722,8 +1726,11 @@ 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 middlePoint = [
+        endPoint[0] - (8 + strokeWidth / 2) * directionFactor.x,
+        endPoint[1] - (8 + strokeWidth / 2) * directionFactor.y
+    ];
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
     const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], { ...options, fill: options.stroke }, true);
     const path = arrowG.querySelector('path');
     path.setAttribute('stroke-linejoin', 'round');
@@ -1731,30 +1738,30 @@ const drawArrow = (element, source, target, options) => {
 };
 const drawSolidTriangle = (source, target, options) => {
     const endPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 12, 30);
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 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);
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 40);
     return drawLinearPath([pointLeft, endPoint, pointRight], options);
 };
 const drawOneSideArrow = (source, target, side, options) => {
-    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 40);
+    const { pointLeft, pointRight } = arrowPoints(source, target, 40);
     return drawLinearPath([side === 'up' ? pointRight : pointLeft, target], options);
 };
 const drawSingleSlash = (source, target, isSource, options) => {
-    source = getExtendPoint(target, source, 12);
-    const middlePoint = getExtendPoint(target, source, 6);
+    const length = distanceBetweenPointAndPoint(...source, ...target);
+    const middlePoint = getExtendPoint(target, source, length / 2);
     const angle = isSource ? 120 : 60;
     const start = rotate(...source, ...middlePoint, (angle * Math.PI) / 180);
     const end = rotate(...target, ...middlePoint, (angle * Math.PI) / 180);
     return drawLinearPath([start, end], options);
 };
 const drawHollowTriangleArrow = (source, target, options) => {
-    const { pointLeft, pointRight } = arrowPoints(source, target, 12, 30);
+    const { pointLeft, pointRight } = arrowPoints(source, target, 30);
     return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
 };
 
@@ -1986,7 +1993,8 @@ function drawMask(board, element, id) {
     mask.appendChild(maskFillRect);
     const texts = element.texts;
     texts.forEach((text, index) => {
-        const textRectangle = getLineTextRectangle(board, element, index);
+        let textRectangle = getLineTextRectangle(board, element, index);
+        textRectangle = RectangleClient.inflate(textRectangle, LINE_TEXT_SPACE * 2);
         const rect = createRect(textRectangle, {
             fill: 'black'
         });
@@ -1995,6 +2003,7 @@ function drawMask(board, element, id) {
     //撑开 line
     const maskTargetFillRect = createRect(rectangle);
     maskTargetFillRect.setAttribute('opacity', '0');
+    maskTargetFillRect.setAttribute('fill', 'none');
     return { mask, maskTargetFillRect };
 }
 const getConnectionPoint = (geometry, connection, direction, delta) => {
@@ -2042,12 +2051,6 @@ const getBoardLines = (board) => {
         recursion: (element) => PlaitDrawElement.isDrawElement(element)
     });
 };
-const getExtendPoint = (source, target, extendDistance) => {
-    const distance = distanceBetweenPointAndPoint(...source, ...target);
-    const sin = (target[1] - source[1]) / distance;
-    const cos = (target[0] - source[0]) / distance;
-    return [source[0] + extendDistance * cos, source[1] + extendDistance * sin];
-};
 // quadratic Bezier to cubic Bezier
 const Q2C = (points) => {
     const result = [];
@@ -2107,11 +2110,18 @@ const getSelectedImageElements = (board) => {
     return selectedElements;
 };
 
+const isTextExceedingBounds = (geometry) => {
+    const client = getRectangleByPoints(geometry.points);
+    if (geometry.textHeight > client.height) {
+        return true;
+    }
+    return false;
+};
 const isRectangleHitDrawElement = (board, element, selection) => {
+    const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
     if (PlaitDrawElement.isGeometry(element)) {
         const client = getRectangleByPoints(element.points);
-        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
-        if (element.textHeight > client.height) {
+        if (isTextExceedingBounds(element)) {
             const textClient = getTextRectangle(element);
             return RectangleClient.isHit(rangeRectangle, client) || RectangleClient.isHit(rangeRectangle, textClient);
         }
@@ -2119,7 +2129,6 @@ const isRectangleHitDrawElement = (board, element, selection) => {
     }
     if (PlaitDrawElement.isImage(element)) {
         const client = getRectangleByPoints(element.points);
-        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
         return RectangleClient.isHit(rangeRectangle, client);
     }
     if (PlaitDrawElement.isLine(element)) {
@@ -2127,7 +2136,6 @@ const isRectangleHitDrawElement = (board, element, selection) => {
         const strokeWidth = getStrokeWidthByElement(element);
         const isHitText = isHitLineText(board, element, selection.focus);
         const isHit = isHitPolyLine(points, selection.focus, strokeWidth, 3) || isHitText;
-        const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
         const isContainPolyLinePoint = points.some(point => {
             return RectangleClient.isHit(rangeRectangle, RectangleClient.toRectangleClient([point, point]));
         });
@@ -2139,15 +2147,24 @@ const isRectangleHitDrawElement = (board, element, selection) => {
 const isHitDrawElement = (board, element, point) => {
     if (PlaitDrawElement.isGeometry(element)) {
         const fill = getFillByElement(element);
-        if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT) {
+        // when shape equals text, fill is not allowed
+        if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
             return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
         }
         else {
+            // if shape equals text, only check text rectangle
+            if (PlaitDrawElement.isText(element)) {
+                const textClient = getTextRectangle(element);
+                let isHitText = RectangleClient.isPointInRectangle(textClient, point);
+                return isHitText;
+            }
             const strokeWidth = getStrokeWidthByElement(element);
             const engine = getEngine(getShape(element));
             const corners = engine.getCornerPoints(getRectangleByPoints(element.points));
             const isHit = isHitPolyLine(corners, point, strokeWidth, 3);
-            return isHit;
+            const textClient = getTextRectangle(element);
+            let isHitText = RectangleClient.isPointInRectangle(textClient, point);
+            return isHit || isHitText;
         }
     }
     if (PlaitDrawElement.isImage(element) || PlaitDrawElement.isLine(element)) {
@@ -3318,5 +3335,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getEdgeOnPolygonByPoint, getElbowPoints, getExtendPoint, getFillByElement, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, transformOpsToPoints, transformPointToConnection, withDraw };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, createDefaultFlowchart, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLinePointers, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getVectorByConnection, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, transformOpsToPoints, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map