@plait/draw 0.1.0-next.3 → 0.1.0-next.5

package/fesm2022/plait-draw.mjs

@@ -1,8 +1,8 @@
-import { PlaitElement, RectangleClient, PlaitBoard, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegments, arrowPoints, drawLinearPath, getElementById, 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, 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 * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { getRectangleByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, Generator, normalizeShapePoints, ActiveGenerator, RESIZE_HANDLE_DIAMETER, isVirtualKey, isSpaceHotkey, CommonTransforms, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
+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 { Alignment, buildText, AlignEditor, TextManage, DEFAULT_FONT_SIZE, getTextFromClipboard, getTextSize } from '@plait/text';
 import { isKeyHotkey } from 'is-hotkey';
 import { Node } from 'slate';
@@ -37,6 +37,33 @@ var LineShape;
     LineShape["curve"] = "curve";
     LineShape["elbow"] = "elbow";
 })(LineShape || (LineShape = {}));
+const PlaitLine = {
+    getTextEditors(element) {
+        const component = PlaitElement.getComponent(element);
+        if (component) {
+            const manage = component.textManages.find(manage => manage.isEditing);
+            if (manage) {
+                return [manage.componentRef.instance.editor];
+            }
+            else {
+                return component.textManages.map(manage => manage.componentRef.instance.editor);
+            }
+        }
+        throw new Error('can not get correctly component in get text editor');
+    },
+    isSourceMark(line, markType) {
+        return line.source.marker === markType;
+    },
+    isTargetMark(line, markType) {
+        return line.target.marker === markType;
+    },
+    isBoundElementOfSource(line, element) {
+        return line.source.boundId === element.id;
+    },
+    isBoundElementOfTarget(line, element) {
+        return line.target.boundId === element.id;
+    }
+};
 
 const PlaitDrawElement = {
     isGeometry: (value) => {
@@ -125,7 +152,9 @@ const DiamondEngine = {
     draw(board, rectangle, options) {
         const points = RectangleClient.getEdgeCenterPoints(rectangle);
         const rs = PlaitBoard.getRoughSVG(board);
-        return rs.polygon(points, { ...options, fillStyle: 'solid' });
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
     },
     isHit(rectangle, point) {
         const controlPoints = RectangleClient.getEdgeCenterPoints(rectangle);
@@ -198,7 +227,9 @@ const ParallelogramEngine = {
     draw(board, rectangle, options) {
         const points = getParallelogramPoints(rectangle);
         const rs = PlaitBoard.getRoughSVG(board);
-        return rs.polygon(points, { ...options, fillStyle: 'solid' });
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
     },
     isHit(rectangle, point) {
         const parallelogramPoints = getParallelogramPoints(rectangle);
@@ -375,6 +406,7 @@ const getCenterPointsOnPolygon = (points) => {
     return centerPoint;
 };
 
+const BOUNDED_HANDLE_OFFSET = 0.5;
 const createLineElement = (shape, points, source, target, options) => {
     return {
         id: idCreator(),
@@ -438,26 +470,32 @@ const drawElbowLine = (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 arrow = drawLineArrow(element, points, options);
     arrow && lineG.appendChild(arrow);
     return lineG;
 };
 const drawLineArrow = (element, points, options) => {
-    const sourceMarker = element.source.marker;
-    const targetMarker = element.target.marker;
     const arrowG = createG();
-    if (sourceMarker === LineMarkerType.none && targetMarker === LineMarkerType.none)
+    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
         return null;
-    if (sourceMarker === LineMarkerType.arrow) {
+    }
+    if (PlaitLine.isSourceMark(element, LineMarkerType.arrow)) {
         const sourcePoint = points[0];
-        const { pointLeft, pointRight } = arrowPoints(points[1], sourcePoint, 10, 20);
+        const { pointLeft, pointRight } = arrowPoints(points[1], sourcePoint, 12, 40);
         const sourceArrow = drawLinearPath([pointLeft, sourcePoint, pointRight], options);
         arrowG.appendChild(sourceArrow);
     }
-    if (targetMarker === LineMarkerType.arrow) {
-        const endPoint = points[points.length - 1];
-        const { pointLeft, pointRight } = arrowPoints(points[points.length - 2], endPoint, 10, 20);
+    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);
     }
@@ -465,24 +503,29 @@ const drawLineArrow = (element, points, options) => {
 };
 const getSourcePoint = (board, element) => {
     if (element.source.boundId) {
+        const connectionOffset = PlaitLine.isSourceMark(element, LineMarkerType.arrow) ? BOUNDED_HANDLE_OFFSET : 0;
         const boundElement = getElementById(board, element.source.boundId);
-        return boundElement ? normalizeConnection(boundElement, element.source.connection) : element.points[0];
+        return boundElement ? getConnectionPoint(boundElement, element.source.connection, connectionOffset) : element.points[0];
     }
     return element.points[0];
 };
 const getTargetPoint = (board, element) => {
     if (element.target.boundId) {
+        const connectionOffset = PlaitLine.isTargetMark(element, LineMarkerType.arrow) ? BOUNDED_HANDLE_OFFSET : 0;
         const boundElement = getElementById(board, element.target.boundId);
-        return boundElement ? normalizeConnection(boundElement, element.target.connection) : element.points[element.points.length - 1];
+        return boundElement
+            ? getConnectionPoint(boundElement, element.target.connection, connectionOffset)
+            : element.points[element.points.length - 1];
     }
     return element.points[element.points.length - 1];
 };
-const normalizeConnection = (geometry, connection) => {
+const getConnectionPoint = (geometry, connection, offset) => {
     const rectangle = getRectangleByPoints(geometry.points);
     const strokeWidth = getStrokeWidthByElement(geometry);
+    const directionFactor = getDirectionFactor(getDirectionByPoint(connection, Direction.bottom));
     return [
-        rectangle.x - strokeWidth / 2 + (rectangle.width + strokeWidth) * connection[0],
-        rectangle.y - strokeWidth / 2 + (rectangle.height + strokeWidth) * connection[1]
+        rectangle.x + rectangle.width * connection[0] + strokeWidth * directionFactor.x + offset * directionFactor.x,
+        rectangle.y + rectangle.height * connection[1] + strokeWidth * directionFactor.y + offset * directionFactor.y
     ];
 };
 const transformPointToConnection = (board, point, hitElement) => {
@@ -513,18 +556,11 @@ const getLineTextRectangle = (board, element, index) => {
         height: text.height
     };
 };
-
-var DrawCreateMode;
-(function (DrawCreateMode) {
-    DrawCreateMode["drag"] = "drag";
-    DrawCreateMode["draw"] = "draw";
-})(DrawCreateMode || (DrawCreateMode = {}));
-const BOARD_TO_CREATE_MODE = new WeakMap();
-const getCreateMode = (board) => {
-    return BOARD_TO_CREATE_MODE.get(board);
-};
-const setCreateMode = (board, mode) => {
-    BOARD_TO_CREATE_MODE.set(board, mode);
+const getBoardLines = (board) => {
+    return findElements(board, {
+        match: (element) => PlaitDrawElement.isLine(element),
+        recursion: (element) => PlaitDrawElement.isDrawElement(element)
+    });
 };
 
 const getSelectedDrawElements = (board) => {
@@ -686,7 +722,7 @@ class GeometryComponent extends PlaitPluginElementComponent {
             },
             hasResizeHandle: () => {
                 const selectedElements = getSelectedElements(this.board);
-                if (PlaitBoard.hasBeenTextEditing(this.board)) {
+                if (PlaitBoard.hasBeenTextEditing(this.board) && PlaitDrawElement.isText(this.element)) {
                     return false;
                 }
                 return selectedElements.length === 1 && !isSelectionMoving(this.board);
@@ -982,32 +1018,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const withDrawHotkey = (board) => {
-    const { keydown } = board;
+    const { keydown, dblclick } = board;
     board.keydown = (event) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
         const targetElement = selectedElements[0];
-        if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection && PlaitDrawElement.isDrawElement(targetElement)) {
+        if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection && PlaitDrawElement.isGeometry(targetElement)) {
             event.preventDefault();
             PlaitElement.getComponent(targetElement).editText();
             return;
         }
         keydown(event);
     };
+    board.dblclick = (event) => {
+        event.preventDefault();
+        const geometries = getSelectedGeometryElements(board);
+        if (geometries.length === 1) {
+            const component = PlaitElement.getComponent(geometries[0]);
+            component.editText();
+        }
+        dblclick(event);
+    };
     return board;
 };
 
 const withGeometryCreateByDrag = (board) => {
     const { pointerMove, pointerUp } = board;
-    let createMode = undefined;
     let geometryShapeG = null;
     board.pointerMove = (event) => {
         geometryShapeG?.remove();
         geometryShapeG = createG();
-        createMode = getCreateMode(board);
         const geometryGenerator = new GeometryShapeGenerator(board);
         const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
-        const dragMode = isGeometryPointer && createMode === DrawCreateMode.drag;
+        const dragMode = isGeometryPointer && isDndMode(board);
         const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         const pointer = PlaitBoard.getPointer(board);
         if (dragMode) {
@@ -1031,7 +1074,7 @@ const withGeometryCreateByDrag = (board) => {
     board.pointerUp = (event) => {
         const pointer = PlaitBoard.getPointer(board);
         const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
-        const dragMode = isGeometryPointer && createMode === DrawCreateMode.drag;
+        const dragMode = isGeometryPointer && isDndMode(board);
         if (dragMode) {
             const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             const points = getDefaultGeometryPoints(pointer, targetPoint);
@@ -1065,9 +1108,8 @@ const withGeometryCreateByDraw = (board) => {
         keyup(event);
     };
     board.pointerDown = (event) => {
-        const createMode = getCreateMode(board);
         const isGeometryPointer = PlaitBoard.isInPointer(board, GeometryPointer);
-        if (isGeometryPointer && createMode === DrawCreateMode.draw) {
+        if (isGeometryPointer && isDrawingMode(board)) {
             const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             start = point;
             preventTouchMove(board, true);
@@ -1159,14 +1201,44 @@ const buildClipboardData = (board, elements, startPoint) => {
             return { ...element, points };
         }
         if (PlaitDrawElement.isLine(element)) {
+            let source = { ...element.source };
+            let target = { ...element.target };
+            if (element.source.boundId && !getElementById(board, element.source.boundId, elements)) {
+                delete source.boundId;
+                delete source.connection;
+            }
+            if (element.target.boundId && !getElementById(board, element.target.boundId, elements)) {
+                delete target.boundId;
+                delete target.connection;
+            }
             const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
-            return { ...element, points };
+            return { ...element, points, source, target };
         }
         return element;
     });
 };
 const insertClipboardData = (board, elements, startPoint) => {
-    elements.forEach(element => {
+    const lines = elements.filter(value => PlaitDrawElement.isLine(value));
+    const geometries = elements.filter(value => PlaitDrawElement.isGeometry(value));
+    geometries.forEach(element => {
+        const sourceLines = [];
+        const targetLines = [];
+        lines.forEach(line => {
+            if (PlaitLine.isBoundElementOfSource(line, element)) {
+                sourceLines.push(line);
+            }
+            if (PlaitLine.isBoundElementOfTarget(line, element)) {
+                targetLines.push(line);
+            }
+        });
+        element.id = idCreator();
+        // update lines
+        sourceLines.forEach(sourceLine => (sourceLine.source.boundId = element.id));
+        targetLines.forEach(targetLine => (targetLine.target.boundId = element.id));
+        element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
+        Transforms.insertNode(board, element, [board.children.length]);
+    });
+    lines.forEach(element => {
         element.id = idCreator();
         element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
         Transforms.insertNode(board, element, [board.children.length]);
@@ -1179,10 +1251,15 @@ const withDrawFragment = (baseBoard) => {
     board.deleteFragment = (data) => {
         const drawElements = getSelectedDrawElements(board);
         if (drawElements.length) {
-            const geometryElements = drawElements.filter(value => PlaitDrawElement.isDrawElement(value));
-            // query bound lines
-            const boundLineElements = [];
-            CommonTransforms.removeElements(board, [...geometryElements, ...boundLineElements]);
+            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))
+            ]);
         }
         deleteFragment(data);
     };
@@ -1254,9 +1331,8 @@ const withLineCreateByDraw = (board) => {
     let lineShapeG = null;
     let temporaryElement = null;
     board.pointerDown = (event) => {
-        const createMode = getCreateMode(board);
         const isLinePointer = PlaitBoard.isPointer(board, DrawPointerType.line);
-        if (isLinePointer && createMode === DrawCreateMode.draw) {
+        if (isLinePointer && isDrawingMode(board)) {
             const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             start = point;
             const hitElement = getHitOutlineGeometry(board, point, -4);
@@ -1548,6 +1624,11 @@ const withDraw = (board) => {
         if (PlaitDrawElement.isGeometry(element)) {
             return getRectangleByPoints(element.points);
         }
+        if (PlaitDrawElement.isLine(element)) {
+            const source = getSourcePoint(board, element);
+            const target = getTargetPoint(board, element);
+            return getRectangleByPoints([source, target]);
+        }
         return getRectangle(element);
     };
     board.isHitSelection = (element, range) => {
@@ -1583,14 +1664,6 @@ const withDraw = (board) => {
         }
         return isMovable(element);
     };
-    board.dblclick = (event) => {
-        const element = getSelectedElements(board)[0];
-        if (element && PlaitDrawElement.isGeometry(element)) {
-            const component = PlaitElement.getComponent(element);
-            component.editText();
-        }
-        dblclick(event);
-    };
     return withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withGeometryCreateByDrag(withGeometryCreateByDraw(withDrawFragment(withDrawHotkey(board)))))))));
 };
 
@@ -1598,5 +1671,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawCreateMode, DrawPointerType, GeometryPointer, GeometryShape, GeometryThreshold, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, ShapeDefaultSpace, createGeometryElement, createLineElement, drawBoundMask, drawElbowLine, drawGeometry, drawLineArrow, getCenterPointsOnPolygon, getCreateMode, getElbowPoints, getHitConnectorPoint, getHitLineTextIndex, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getSourcePoint, getTargetPoint, getTextRectangle, isHitLineText, isHitPolyLine, normalizeConnection, setCreateMode, transformPointToConnection, withDraw };
+export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawPointerType, GeometryComponent, GeometryPointer, GeometryShape, GeometryThreshold, LineComponent, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, ShapeDefaultSpace, createGeometryElement, createLineElement, drawBoundMask, drawElbowLine, drawGeometry, drawLineArrow, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getElbowPoints, getHitConnectorPoint, getHitLineTextIndex, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getSourcePoint, getTargetPoint, getTextRectangle, isHitLineText, isHitPolyLine, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map