@plait/draw 0.48.0 → 0.49.0

package/fesm2022/plait-draw.mjs

@@ -1,4 +1,4 @@
-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 { 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, 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 { pointsOnBezierCurves } from 'points-on-curve';
@@ -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);
@@ -3188,7 +3205,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 +3218,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 +3466,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 +3505,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 +3636,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 +3669,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 +3686,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) {