@plait/common 0.30.0 → 0.32.0

package/fesm2022/plait-common.mjs

@@ -1,4 +1,4 @@
-import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, getSelectedElements, PlaitElement, Transforms, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, distanceBetweenPointAndPoint, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, MERGING, Direction, Point, hotkeys, PlaitContextService, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
+import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, getSelectedElements, PlaitElement, Transforms, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, distanceBetweenPointAndPoint, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, MERGING, Direction, Point, hotkeys, PlaitContextService, downScale, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
 import { Directive, Input } from '@angular/core';
@@ -8,6 +8,7 @@ const PRIMARY_COLOR = '#6698FF';
 const RESIZE_HANDLE_DIAMETER = 8;
 const WithTextPluginKey = 'plait-text-plugin-key';
 const DEFAULT_ROUTE_MARGIN = 30;
+const TRANSPARENT = 'transparent';
 
 var MediaKeys;
 (function (MediaKeys) {
@@ -29,7 +30,7 @@ var ResizeHandle;
     ResizeHandle["ne"] = "ne";
     ResizeHandle["n"] = "n";
     ResizeHandle["nw"] = "nw";
-    ResizeHandle["e"] = "w";
+    ResizeHandle["e"] = "e";
     ResizeHandle["se"] = "se";
     ResizeHandle["s"] = "s";
     ResizeHandle["sw"] = "sw";
@@ -230,6 +231,14 @@ const getResizeHandleByIndex = (index) => {
             return ResizeHandle.se;
         case 3:
             return ResizeHandle.sw;
+        case 4:
+            return ResizeHandle.n;
+        case 5:
+            return ResizeHandle.e;
+        case 6:
+            return ResizeHandle.s;
+        case 7:
+            return ResizeHandle.w;
         default:
             return null;
     }
@@ -237,24 +246,28 @@ const getResizeHandleByIndex = (index) => {
 const getResizeCursorClassByIndex = (index) => {
     switch (index) {
         case 0:
-            return ResizeCursorClass.nwse;
-        case 1:
-            return ResizeCursorClass.nesw;
         case 2:
             return ResizeCursorClass.nwse;
+        case 1:
         case 3:
             return ResizeCursorClass.nesw;
+        case 4:
+        case 6:
+            return ResizeCursorClass.ns;
+        case 5:
+        case 7:
+            return ResizeCursorClass.ew;
         default:
             return null;
     }
 };
 const getRectangleResizeHandleRefs = (rectangle, diameter) => {
-    const centers = RectangleClient.getCornerPoints(rectangle);
-    return centers.map((center, index) => {
+    const corners = RectangleClient.getCornerPoints(rectangle);
+    const refs = corners.map((corner, index) => {
         return {
             rectangle: {
-                x: center[0] - diameter / 2,
-                y: center[1] - diameter / 2,
+                x: corner[0] - diameter / 2,
+                y: corner[1] - diameter / 2,
                 width: diameter,
                 height: diameter
             },
@@ -262,6 +275,26 @@ const getRectangleResizeHandleRefs = (rectangle, diameter) => {
             cursorClass: getResizeCursorClassByIndex(index)
         };
     });
+    const rectangles = getResizeSideRectangles(corners, diameter / 2);
+    refs.push(...rectangles.map((rectangle, index) => {
+        return {
+            rectangle,
+            handle: getResizeHandleByIndex(index + 4),
+            cursorClass: getResizeCursorClassByIndex(index + 4)
+        };
+    }));
+    return refs;
+};
+const getResizeSideRectangles = (cornerPoints, offset) => {
+    const result = [];
+    for (let i = 0; i < cornerPoints.length; i++) {
+        let rectangle = RectangleClient.toRectangleClient([cornerPoints[i], cornerPoints[(i + 1) % 4]]);
+        const arr = new Array(2).fill(0);
+        arr[(i + 1) % 2] = offset / 2;
+        rectangle = RectangleClient.expand(rectangle, arr[0], arr[1]);
+        result.push(rectangle);
+    }
+    return result;
 };
 const IS_RESIZING = new WeakMap();
 const isResizing = (board) => {
@@ -309,7 +342,6 @@ const withResize = (board, options) => {
                 handle: resizeDetectResult.handle
             };
             preventTouchMove(board, event, true);
-            return;
         }
         pointerDown(event);
     };
@@ -347,6 +379,9 @@ const withResize = (board, options) => {
             const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             const resizeDetectResult = options.detect(point);
             if (resizeDetectResult) {
+                if (hoveDetectResult && resizeDetectResult.cursorClass !== hoveDetectResult.cursorClass) {
+                    PlaitBoard.getBoardContainer(board).classList.remove(`${hoveDetectResult.cursorClass}`);
+                }
                 hoveDetectResult = resizeDetectResult;
                 if (hoveDetectResult.cursorClass) {
                     PlaitBoard.getBoardContainer(board).classList.add(`${hoveDetectResult.cursorClass}`);
@@ -466,6 +501,12 @@ function getDirectionFactor(direction) {
 }
 function getFactorByPoints(source, target) {
     const distance = distanceBetweenPointAndPoint(...source, ...target);
+    if (Point.isEquals(source, target)) {
+        return {
+            x: 1,
+            y: 1
+        };
+    }
     return {
         x: (target[0] - source[0]) / distance,
         y: (target[1] - source[1]) / distance
@@ -626,6 +667,13 @@ const removeDuplicatePoints = (points) => {
     });
     return newArray;
 };
+const getExtendPoint = (source, target, extendDistance) => {
+    const distance = distanceBetweenPointAndPoint(...source, ...target);
+    const isEqual = Point.isEquals(source, target);
+    const sin = isEqual ? 1 : (target[1] - source[1]) / distance;
+    const cos = isEqual ? 1 : (target[0] - source[0]) / distance;
+    return [source[0] + extendDistance * cos, source[1] + extendDistance * sin];
+};
 
 function isVirtualKey(e) {
     const isMod = e.ctrlKey || e.metaKey;
@@ -921,8 +969,8 @@ const adjust = (route, options) => {
                     if (pre &&
                         current &&
                         next &&
-                        !((Math.floor(current[0]) === Math.floor(pre[0]) && Math.floor(current[0]) === Math.floor(next[0])) ||
-                            (Math.floor(current[1]) === Math.floor(pre[1]) && Math.floor(current[1]) === Math.floor(next[1])))) {
+                        !((downScale(current[0]) === downScale(pre[0]) && downScale(current[0]) === downScale(next[0])) ||
+                            (downScale(current[1]) === downScale(pre[1]) && downScale(current[1]) === downScale(next[1])))) {
                         cornerCount++;
                     }
                 }
@@ -1218,5 +1266,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AStar, ActiveGenerator, BASE, BoardCreationMode, CommonPluginElement, DEFAULT_ROUTE_MARGIN, Generator, IS_RESIZING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ResizeCursorClass, ResizeHandle, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, buildImage, calculatePolylineLength, createGraph, generateElbowLineRoute, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getElementOfFocusedImage, getFactorByPoints, getGraphPoints, getNextPoint, getOppositeDirection, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleByPoints, getRectangleResizeHandleRefs, getTextEditors, getTextManages, hasAfterDraw, isDelete, isDndMode, isDrawingMode, isEnterHotkey, isExpandHotkey, isPointOnLineSegment, isResizing, isResizingByCondition, isSpaceHotkey, isTabHotkey, isVirtualKey, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, rotateVectorAnti90, selectImage, setCreationMode, withResize };
+export { AStar, ActiveGenerator, BASE, BoardCreationMode, CommonPluginElement, DEFAULT_ROUTE_MARGIN, Generator, IS_RESIZING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ResizeCursorClass, ResizeHandle, TRANSPARENT, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, buildImage, calculatePolylineLength, createGraph, generateElbowLineRoute, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getElementOfFocusedImage, getExtendPoint, getFactorByPoints, getGraphPoints, getNextPoint, getOppositeDirection, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleByPoints, getRectangleResizeHandleRefs, getTextEditors, getTextManages, hasAfterDraw, isDelete, isDndMode, isDrawingMode, isEnterHotkey, isExpandHotkey, isPointOnLineSegment, isResizing, isResizingByCondition, isSpaceHotkey, isTabHotkey, isVirtualKey, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, rotateVectorAnti90, selectImage, setCreationMode, withResize };
 //# sourceMappingURL=plait-common.mjs.map