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

package/fesm2022/plait-draw.mjs

@@ -2,7 +2,7 @@ import { PlaitElement, RectangleClient, PlaitBoard, setStrokeLinecap, isPointInP
 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, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, getFactorByPoints, getDirectionFactor, Generator, normalizeShapePoints, 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';
@@ -65,6 +65,12 @@ const PlaitLine = {
     }
 };
 
+var StrokeStyle;
+(function (StrokeStyle) {
+    StrokeStyle["solid"] = "solid";
+    StrokeStyle["dashed"] = "dashed";
+})(StrokeStyle || (StrokeStyle = {}));
+
 const PlaitDrawElement = {
     isGeometry: (value) => {
         return value.type === 'geometry';
@@ -147,6 +153,9 @@ const getFillByElement = (element) => {
 const getLineDashByElement = (element) => {
     return element.strokeStyle === 'dashed' ? [8, 8 + getStrokeWidthByElement(element)] : undefined;
 };
+const getStrokeStyleByElement = (element) => {
+    return element.strokeStyle || StrokeStyle.solid;
+};
 
 const DiamondEngine = {
     draw(board, rectangle, options) {
@@ -420,6 +429,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);
@@ -460,18 +475,18 @@ 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');
+    const points = getLinePoints(board, element);
+    const line = PlaitBoard.getRoughSVG(board).linearPath(points, options);
+    const path = line.querySelector('path');
     path?.setAttribute('mask', `url(#${element.id})`);
-    setPathStrokeLinecap(elbowLine, 'square');
-    lineG.appendChild(elbowLine);
+    setPathStrokeLinecap(line, 'square');
+    lineG.appendChild(line);
     const arrow = drawLineArrow(element, points, options);
     arrow && lineG.appendChild(arrow);
     return lineG;
@@ -489,8 +504,7 @@ const drawLineArrow = (element, points, options) => {
     }
     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 directionFactor = getFactorByPoints(points[points.length - 2], _endPoint);
         const endPoint = [
             _endPoint[0] + BOUNDED_HANDLE_OFFSET * directionFactor.x,
             _endPoint[1] + BOUNDED_HANDLE_OFFSET * directionFactor.y
@@ -547,7 +561,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,
@@ -765,6 +779,7 @@ class GeometryComponent extends PlaitPluginElementComponent {
         this.textManage.updateRectangle();
     }
     initializeTextManage() {
+        const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
         this.textManage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
                 return getTextRectangle(this.element);
@@ -782,7 +797,8 @@ class GeometryComponent extends PlaitPluginElementComponent {
             getMaxWidth: () => {
                 const width = getTextRectangle(this.element).width;
                 return this.element?.autoSize ? GeometryThreshold.defaultTextMaxWidth : width;
-            }
+            },
+            textPlugins: plugins
         });
     }
     ngOnDestroy() {
@@ -812,7 +828,8 @@ class LineShapeGenerator extends Generator {
         let lineG;
         switch (shape) {
             case LineShape.elbow:
-                lineG = drawElbowLine(this.board, element);
+            case LineShape.straight:
+                lineG = drawLine(this.board, element);
                 drawMask(this.board, lineG, element);
                 break;
             default:
@@ -824,7 +841,8 @@ class LineShapeGenerator extends Generator {
 function drawMask(board, g, element) {
     const mask = createMask();
     mask.setAttribute('id', element.id);
-    const points = getElbowPoints(board, element);
+    mask.setAttribute('maskUnits', 'userSpaceOnUse');
+    const points = getLinePoints(board, element);
     let rectangle = getRectangleByPoints(points);
     rectangle = RectangleClient.getOutlineRectangle(rectangle, -3);
     const maskRect = createRect(rectangle, {
@@ -1023,7 +1041,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;
@@ -1247,21 +1269,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);
@@ -1569,7 +1587,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);
@@ -1642,7 +1660,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;
@@ -1671,5 +1689,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, 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 };
+export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawPointerType, GeometryComponent, GeometryPointer, GeometryShape, GeometryThreshold, LineComponent, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, drawLineArrow, 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