@plait/common 0.53.0 → 0.54.0

package/fesm2022/plait-common.mjs

@@ -1,4 +1,4 @@
-import { setAngleForG, RectangleClient, drawCircle, PlaitBoard, createG, drawRectangle, createForeignObject, updateForeignObject, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, distanceBetweenPointAndPoint, Point, Direction, hotkeys, PlaitElement, PlaitContextService, getSelectedElements, Transforms, getHighestSelectedElements, getRectangleByElements, PlaitGroupElement, getElementsInGroup, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, ACTIVE_STROKE_WIDTH, getRectangleByGroup, PlaitPluginElementComponent, isSelectionMoving, isSelectedElementOrGroup, Selection, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, idCreator, GroupTransforms, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement } from '@plait/core';
+import { PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, RectangleClient, drawCircle, PlaitBoard, createG, drawRectangle, createForeignObject, updateForeignObject, ResizeCursorClass, RESIZE_CURSORS, setDragging, rotatePoints, distanceBetweenPointAndPoint, Point, Direction, hotkeys, PlaitElement, PlaitContextService, createDebugGenerator, getSelectedElements, Transforms, getHighestSelectedElements, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, ACTIVE_STROKE_WIDTH, getRectangleByGroup, PlaitPluginElementComponent, isSelectionMoving, isSelectedElementOrGroup, Selection, getHitElementsBySelection, createGroupRectangleG, getSelectedGroups, getHighestSelectedGroups, getSelectedIsolatedElements, idCreator, GroupTransforms, getSelectedIsolatedElementsCanAddToGroup, getGroupByElement } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import { PlaitMarkEditor, MarkTypes, AlignEditor } from '@plait/text';
 import { Node, Transforms as Transforms$1, Editor } from 'slate';
@@ -54,8 +54,17 @@ class Generator {
                 }
                 this.g = g;
                 const rect = this.board.getRectangle(element);
-                if (rect && element.angle) {
-                    setAngleForG(g, RectangleClient.getCenterPoint(rect), element.angle);
+                if (rect) {
+                    let angle;
+                    if (PlaitGroupElement.isGroup(element)) {
+                        angle = getSelectionAngle(getElementsInGroup(this.board, element, true));
+                    }
+                    else {
+                        angle = element.angle;
+                    }
+                    if (angle) {
+                        setAngleForG(g, RectangleClient.getCenterPoint(rect), angle);
+                    }
                 }
             }
             else {
@@ -240,7 +249,7 @@ const getRotatedResizeCursorClassByAngle = (cursor, angle) => {
     }
     return cursor;
 };
-const getRectangleResizeHandleRefs = (rectangle, diameter, angle = 0) => {
+const getRectangleResizeHandleRefs = (rectangle, diameter) => {
     const corners = RectangleClient.getCornerPoints(rectangle);
     const refs = corners.map((corner, index) => {
         return {
@@ -251,7 +260,7 @@ const getRectangleResizeHandleRefs = (rectangle, diameter, angle = 0) => {
                 height: diameter
             },
             handle: getResizeHandleByIndex(index),
-            cursorClass: getRotatedResizeCursorClassByAngle(getResizeCursorClassByIndex(index), angle)
+            cursorClass: getResizeCursorClassByIndex(index)
         };
     });
     const rectangles = getResizeSideRectangles(corners, diameter / 2);
@@ -259,7 +268,7 @@ const getRectangleResizeHandleRefs = (rectangle, diameter, angle = 0) => {
         return {
             rectangle,
             handle: getResizeHandleByIndex(index + 4),
-            cursorClass: getRotatedResizeCursorClassByAngle(getResizeCursorClassByIndex(index + 4), angle)
+            cursorClass: getResizeCursorClassByIndex(index + 4)
         };
     }));
     return refs;
@@ -917,7 +926,8 @@ class PointGraph {
     }
 }
 
-const generateElbowLineRoute = (options) => {
+const debugGenerator = createDebugGenerator('debug:plait:elbow-line-routing');
+const generateElbowLineRoute = (options, board) => {
     const { nextSourcePoint, nextTargetPoint } = options;
     const points = getGraphPoints(options);
     const graph = createGraph(points);
@@ -935,15 +945,18 @@ const generateElbowLineRoute = (options) => {
     const isHitY = RectangleClient.isHitY(options.sourceOuterRectangle, options.targetOuterRectangle);
     const centerX = isHitX ? undefined : RectangleClient.getGapCenter(options.sourceOuterRectangle, options.targetOuterRectangle, true);
     const centerY = isHitY ? undefined : RectangleClient.getGapCenter(options.sourceOuterRectangle, options.targetOuterRectangle, false);
-    route = routeAdjust(route, { centerX, centerY, sourceRectangle: options.sourceRectangle, targetRectangle: options.targetRectangle });
+    route = routeAdjust(route, { centerX, centerY, sourceRectangle: options.sourceRectangle, targetRectangle: options.targetRectangle }, board);
     return route;
 };
-const routeAdjust = (path, options) => {
+const routeAdjust = (path, options, board) => {
     const { sourceRectangle, targetRectangle, centerX, centerY } = options;
+    if (board) {
+        debugGenerator.clear();
+    }
     if (centerX !== undefined) {
         const optionsX = getAdjustOptions(path, centerX, true);
         const resultX = optionsX.pointOfHit &&
-            adjust(path, { parallelPaths: optionsX.parallelPaths, pointOfHit: optionsX.pointOfHit, sourceRectangle, targetRectangle });
+            adjust(path, { parallelPaths: optionsX.parallelPaths, pointOfHit: optionsX.pointOfHit, sourceRectangle, targetRectangle }, board);
         if (resultX) {
             path = resultX;
         }
@@ -951,14 +964,14 @@ const routeAdjust = (path, options) => {
     if (centerY !== undefined) {
         const optionsY = getAdjustOptions(path, centerY, false);
         const resultY = optionsY.pointOfHit &&
-            adjust(path, { parallelPaths: optionsY.parallelPaths, pointOfHit: optionsY.pointOfHit, sourceRectangle, targetRectangle });
+            adjust(path, { parallelPaths: optionsY.parallelPaths, pointOfHit: optionsY.pointOfHit, sourceRectangle, targetRectangle }, board);
         if (resultY) {
             path = resultY;
         }
     }
     return path;
 };
-const adjust = (route, options) => {
+const adjust = (route, options, board) => {
     const { parallelPaths, pointOfHit, sourceRectangle, targetRectangle } = options;
     let result = null;
     parallelPaths.forEach(parallelPath => {
@@ -967,7 +980,10 @@ const adjust = (route, options) => {
         // directly use getCornerPoints will bring the precision issue (eg: 263.6923375175286 - 57.130859375)
         const tempRect = RectangleClient.getRectangleByPoints(tempRectPoints);
         if (!RectangleClient.isHit(tempRect, sourceRectangle) && !RectangleClient.isHit(tempRect, targetRectangle)) {
-            const tempCorners = RectangleClient.getCornerPoints(tempRect);
+            const tempCorners = RectangleClient.getCornerPointsByPoints(tempRectPoints);
+            if (board) {
+                debugGenerator.drawRectangle(board, tempRect);
+            }
             const indexRangeInPath = [];
             const indexRangeInCorner = [];
             route.forEach((point, index) => {
@@ -982,7 +998,11 @@ const adjust = (route, options) => {
             const removeLength = Math.abs(indexRangeInPath[0] - indexRangeInPath[indexRangeInPath.length - 1]) + 1;
             newPath.splice(indexRangeInPath[0] + 1, removeLength - 2, missCorner);
             const turnCount = simplifyOrthogonalPoints([...route]).length - 1;
-            const newTurnCount = simplifyOrthogonalPoints([...newPath]).length - 1;
+            const simplifyPoints = simplifyOrthogonalPoints([...newPath]);
+            // if (board) {
+            //     debugGenerator.drawLine(board, simplifyPoints);
+            // }
+            const newTurnCount = simplifyPoints.length - 1;
             if (newTurnCount <= turnCount) {
                 result = newPath;
             }
@@ -1616,9 +1636,9 @@ function withGroup(board) {
         groupRectangleG = null;
         globalPointerUp(event);
     };
-    board.getRelatedFragment = (elements) => {
-        const groups = getSelectedGroups(board);
-        return getRelatedFragment([...elements, ...groups]);
+    board.getRelatedFragment = (elements, originData) => {
+        const groups = getSelectedGroups(board, originData);
+        return getRelatedFragment([...elements, ...groups], originData);
     };
     board.insertFragment = (data, clipboardData, targetPoint) => {
         const elements = [];
@@ -1644,22 +1664,22 @@ function withGroup(board) {
         });
     };
     board.getDeletedFragment = (data) => {
+        removeGroups = getRemoveGroups(board);
         if (removeGroups && removeGroups.length) {
             data.push(...removeGroups);
         }
         return getDeletedFragment(data);
     };
-    board.deleteFragment = (data) => {
-        removeGroups = getRemoveGroups(board);
+    board.deleteFragment = (elements) => {
         if (removeGroups?.length) {
             updateSiblingElementGroupId(board, removeGroups);
         }
-        deleteFragment(data);
+        deleteFragment(elements);
         removeGroups = null;
     };
     board.getRectangle = (element) => {
         if (PlaitGroupElement.isGroup(element)) {
-            return getRectangleByGroup(board, element);
+            return getRectangleByGroup(board, element, true);
         }
         return getRectangle(element);
     };
@@ -1704,7 +1724,8 @@ const updateElementsGroupId = (group, clipboardDataElements, newGroupId) => {
     return elements;
 };
 const getRemoveGroups = (board) => {
-    const selectedGroups = board.getRelatedFragment([]);
+    const selectedElements = getSelectedElements(board);
+    const selectedGroups = board.getRelatedFragment([], selectedElements);
     const removeGroups = [...selectedGroups];
     const highestSelectedGroups = getHighestSelectedGroups(board);
     const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);