@plait/draw 0.48.0 → 0.50.0

package/fesm2022/plait-draw.mjs

@@ -1,6 +1,6 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, Path, PlaitNode, BOARD_TO_HOST, transformPoint, toPoint, isSelectionMoving, RgbaToHEX, PlaitElement, preventTouchMove, setClipboardData, getDataFromClipboard, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
-import { getRectangleByPoints, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, Generator, getRectangleResizeHandleRefs, getDirectionByVector, getOppositeDirection, getDirectionFactor, getPointByVector, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, getFirstTextManage, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
-import { Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, TextManage, getTextFromClipboard } from '@plait/text';
+import { ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, PlaitElement, preventTouchMove, createClipboardContext, WritableClipboardType, addClipboardContext, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { getRectangleByPoints, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, Generator, getRectangleResizeHandleRefs, getDirectionByVector, getOppositeDirection, getDirectionFactor, getPointByVector, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, getFirstTextManage, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+import { Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, TextManage } from '@plait/text';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgZone } from '@angular/core';
@@ -2244,12 +2244,29 @@ 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 };
+const setLineMark = (board, handleKey, marker) => {
     memorizeLatest(MemorizeKey.line, handleKey, marker);
-    Transforms.setNode(board, { [handleKey]: handle }, path);
+    const selectedElements = getSelectedLineElements(board);
+    selectedElements.forEach((element) => {
+        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 setLineShape = (board, newProperties) => {
+    const elements = getSelectedLineElements(board);
+    elements.map(element => {
+        const _properties = { ...newProperties };
+        if (element.shape === newProperties.shape) {
+            return;
+        }
+        if (newProperties.shape === LineShape.elbow) {
+            _properties.points = [element.points[0], element.points[element.points.length - 1]];
+        }
+        const path = PlaitBoard.findPath(board, element);
+        Transforms.setNode(board, _properties, path);
+    });
 };
 const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
     const lines = findElements(board, {
@@ -2419,10 +2436,9 @@ const setTextSize = (board, element, textWidth, textHeight) => {
 
 const insertImage = (board, imageItem, startPoint) => {
     const { width, height, url } = imageItem;
-    const host = BOARD_TO_HOST.get(board);
     const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
     const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
-    const point = transformPoint(board, toPoint(viewportWidth / 2, viewportHeight / 2, host));
+    const point = toViewBoxPoint(board, toHostPoint(board, viewportWidth / 2, viewportHeight / 2));
     const points = startPoint
         ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
         : [
@@ -2449,6 +2465,7 @@ const DrawTransforms = {
     setLineTexts,
     removeLineText,
     setLineMark,
+    setLineShape,
     insertImage,
     switchGeometryShape,
     connectLineToGeometry,
@@ -2915,7 +2932,7 @@ const withGeometryCreateByDrag = (board) => {
         const geometryPointers = getGeometryPointers();
         const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
         const dragMode = isGeometryPointer && isDndMode(board);
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
         if (dragMode) {
             const memorizedLatest = getMemorizedLatestByPointer(pointer);
@@ -2990,7 +3007,7 @@ const withGeometryCreateByDrawing = (board) => {
         const geometryPointers = getGeometryPointers();
         const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
         if (!PlaitBoard.isReadonly(board) && isGeometryPointer && isDrawingMode(board)) {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             start = point;
             const pointer = PlaitBoard.getPointer(board);
             preventTouchMove(board, event, true);
@@ -3010,7 +3027,7 @@ const withGeometryCreateByDrawing = (board) => {
         geometryShapeG = createG();
         const geometryGenerator = new GeometryShapeGenerator(board);
         const drawMode = !!start;
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
         if (drawMode && pointer !== BasicShapes.text) {
             const points = normalizeShapePoints([start, movingPoint], isShift);
@@ -3023,7 +3040,7 @@ const withGeometryCreateByDrawing = (board) => {
     board.pointerUp = (event) => {
         const isDrawMode = !!start;
         if (isDrawMode) {
-            const targetPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const targetPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
             if (Math.hypot(width, height) === 0) {
                 const pointer = PlaitBoard.getPointer(board);
@@ -3127,7 +3144,7 @@ const withDrawFragment = (baseBoard) => {
         }
         return getDeletedFragment(data);
     };
-    board.setFragment = (data, rectangle, type) => {
+    board.setFragment = (data, clipboardContext, rectangle, type) => {
         const targetDrawElements = getSelectedDrawElements(board);
         let boundLineElements = [];
         if (targetDrawElements.length) {
@@ -3136,40 +3153,53 @@ const withDrawFragment = (baseBoard) => {
                 const lineElements = targetDrawElements.filter(value => PlaitDrawElement.isLine(value));
                 boundLineElements = getBoundedLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
             }
-            const elements = buildClipboardData(board, [...targetDrawElements, ...boundLineElements], rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
-            setClipboardData(data, elements);
+            const selectedElements = [...targetDrawElements, ...boundLineElements];
+            const elements = buildClipboardData(board, selectedElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
+            const text = getElementsText(selectedElements);
+            if (!clipboardContext) {
+                clipboardContext = createClipboardContext(WritableClipboardType.elements, elements, text);
+            }
+            else {
+                clipboardContext = addClipboardContext(clipboardContext, {
+                    text,
+                    type: WritableClipboardType.elements,
+                    data: elements
+                });
+            }
         }
-        setFragment(data, rectangle, type);
+        setFragment(data, clipboardContext, rectangle, type);
     };
-    board.insertFragment = (data, targetPoint) => {
-        const elements = getDataFromClipboard(data);
+    board.insertFragment = (data, clipboardData, targetPoint) => {
         const selectedElements = getSelectedElements(board);
-        const drawElements = elements.filter(value => PlaitDrawElement.isDrawElement(value));
-        if (elements.length > 0 && drawElements.length > 0) {
-            insertClipboardData(board, drawElements, targetPoint);
-        }
-        else if (elements.length === 0) {
-            const text = getTextFromClipboard(data);
-            // (*￣︶￣)
-            const insertAsChildren = selectedElements.length === 1 && selectedElements[0].children;
-            const insertAsFreeText = !insertAsChildren;
-            if (text && insertAsFreeText) {
-                DrawTransforms.insertText(board, targetPoint, text);
-                return;
-            }
-        }
-        if (data?.files.length) {
+        if (clipboardData?.files?.length) {
             const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
             const canInsertionImage = !getElementOfFocusedImage(board) && !(selectedElements.length === 1 && board.isImageBindingAllowed(selectedElements[0]));
-            if (acceptImageArray.includes(data?.files[0].type) && canInsertionImage) {
-                const imageFile = data.files[0];
+            if (acceptImageArray.includes(clipboardData.files[0].type) && canInsertionImage) {
+                const imageFile = clipboardData.files[0];
                 buildImage(board, imageFile, DEFAULT_IMAGE_WIDTH, imageItem => {
                     DrawTransforms.insertImage(board, imageItem, targetPoint);
                 });
                 return;
             }
         }
-        insertFragment(data, targetPoint);
+        if (clipboardData?.elements?.length) {
+            const drawElements = clipboardData.elements?.filter(value => PlaitDrawElement.isDrawElement(value));
+            if (clipboardData.elements && clipboardData.elements.length > 0 && drawElements.length > 0) {
+                insertClipboardData(board, drawElements, targetPoint);
+            }
+        }
+        if (clipboardData?.text) {
+            if (!clipboardData.elements || clipboardData.elements.length === 0) {
+                // (*￣︶￣)
+                const insertAsChildren = selectedElements.length === 1 && selectedElements[0].children;
+                const insertAsFreeText = !insertAsChildren;
+                if (insertAsFreeText) {
+                    DrawTransforms.insertText(board, targetPoint, clipboardData.text);
+                    return;
+                }
+            }
+        }
+        insertFragment(data, clipboardData, targetPoint);
     };
     return board;
 };
@@ -3188,7 +3218,7 @@ const withLineCreateByDraw = (board) => {
         const linePointers = getLinePointers();
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         if (!PlaitBoard.isReadonly(board) && isLinePointer && isDrawingMode(board)) {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             start = point;
             const hitElement = getHitOutlineGeometry(board, point, REACTION_MARGIN);
             if (hitElement) {
@@ -3201,7 +3231,7 @@ const withLineCreateByDraw = (board) => {
     board.pointerMove = (event) => {
         lineShapeG?.remove();
         lineShapeG = createG();
-        let movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (start) {
             const lineShape = PlaitBoard.getPointer(board);
             temporaryElement = handleLineCreating(board, lineShape, start, movingPoint, sourceElement, lineShapeG);
@@ -3449,7 +3479,7 @@ const withLineBoundReaction = (board) => {
         }
         const linePointers = Object.keys(LineShape);
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const isLineResizing = isResizingByCondition(board, resizeRef => {
             const { element, handle } = resizeRef;
             const isSourceOrTarget = handle === LineResizeHandle.target || handle === LineResizeHandle.source;
@@ -3488,7 +3518,7 @@ const withLineText = (board) => {
     const { dblclick } = board;
     board.dblclick = (event) => {
         if (!PlaitBoard.isReadonly(board)) {
-            const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const hitTarget = getHitElementByPoint(board, clickPoint, (element) => {
                 return PlaitDrawElement.isLine(element);
             });
@@ -3619,7 +3649,7 @@ const withLineAutoCompleteReaction = (board) => {
         PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
             const points = getAutoCompletePoints(targetElement);
             const hitIndex = getHitIndexOfAutoCompletePoint(movingPoint, points);
@@ -3652,7 +3682,7 @@ const withLineAutoComplete = (board) => {
     board.pointerDown = (event) => {
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const clickPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
             const points = getAutoCompletePoints(targetElement);
             const index = getHitIndexOfAutoCompletePoint(clickPoint, points);
@@ -3669,7 +3699,7 @@ const withLineAutoComplete = (board) => {
     board.pointerMove = (event) => {
         lineShapeG?.remove();
         lineShapeG = createG();
-        let movingPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (startPoint && sourceElement) {
             const distance = distanceBetweenPointAndPoint(...movingPoint, ...startPoint);
             if (distance > PRESS_AND_MOVE_BUFFER) {