@plait/common 0.50.1 → 0.51.1

package/fesm2022/plait-common.mjs

@@ -1,4 +1,4 @@
-import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, ResizeCursorClass, setDragging, Direction, distanceBetweenPointAndPoint, Point, hotkeys, PlaitElement, PlaitContextService, downScale, getSelectedElements, Transforms, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
+import { setTransformRotate, drawCircle, PlaitBoard, createG, RectangleClient, drawRectangle, createForeignObject, updateForeignObject, ResizeCursorClass, setDragging, Direction, distanceBetweenPointAndPoint, Point, hotkeys, PlaitElement, PlaitContextService, getSelectedElements, Transforms, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, isDragging, throttleRAF, handleTouchTarget, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import { PlaitMarkEditor, MarkTypes, AlignEditor } from '@plait/text';
 import { Node, Transforms as Transforms$1, Editor } from 'slate';
@@ -7,7 +7,7 @@ import { Directive, Input } from '@angular/core';
 
 const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
-const RESIZE_HANDLE_DIAMETER = 8;
+const RESIZE_HANDLE_DIAMETER = 9;
 const WithTextPluginKey = 'plait-text-plugin-key';
 const DEFAULT_ROUTE_MARGIN = 30;
 const TRANSPARENT = 'transparent';
@@ -22,14 +22,14 @@ const WithCommonPluginKey = 'plait-common-plugin-key';
 
 var ResizeHandle;
 (function (ResizeHandle) {
-    ResizeHandle["ne"] = "ne";
-    ResizeHandle["n"] = "n";
-    ResizeHandle["nw"] = "nw";
-    ResizeHandle["e"] = "e";
-    ResizeHandle["se"] = "se";
-    ResizeHandle["s"] = "s";
-    ResizeHandle["sw"] = "sw";
-    ResizeHandle["w"] = "w";
+    ResizeHandle["nw"] = "0";
+    ResizeHandle["n"] = "4";
+    ResizeHandle["ne"] = "1";
+    ResizeHandle["e"] = "5";
+    ResizeHandle["se"] = "2";
+    ResizeHandle["s"] = "6";
+    ResizeHandle["sw"] = "3";
+    ResizeHandle["w"] = "7";
 })(ResizeHandle || (ResizeHandle = {}));
 
 class Generator {
@@ -53,6 +53,10 @@ class Generator {
                     }
                 }
                 this.g = g;
+                const rect = this.board.getRectangle(element);
+                if (rect && element.angle) {
+                    setTransformRotate(g, rect, element.angle);
+                }
             }
             else {
                 this.destroy();
@@ -79,6 +83,27 @@ function hasAfterDraw(value) {
     return false;
 }
 
+const drawHandle = (board, centerPoint) => {
+    const options = { stroke: '#99999995', strokeWidth: 2, fill: '#FFF', fillStyle: 'solid' };
+    return drawCircle(PlaitBoard.getRoughSVG(board), centerPoint, RESIZE_HANDLE_DIAMETER, options);
+};
+function drawFillPrimaryHandle(board, point) {
+    return drawCircle(PlaitBoard.getRoughSVG(board), point, RESIZE_HANDLE_DIAMETER, {
+        stroke: '#FFFFFF',
+        strokeWidth: 1,
+        fill: `${PRIMARY_COLOR}`,
+        fillStyle: 'solid'
+    });
+}
+function drawPrimaryHandle(board, point) {
+    return drawCircle(PlaitBoard.getRoughSVG(board), point, RESIZE_HANDLE_DIAMETER, {
+        stroke: `${PRIMARY_COLOR}`,
+        strokeWidth: 2,
+        fill: `#FFFFFF`,
+        fillStyle: 'solid'
+    });
+}
+
 class ActiveGenerator extends Generator {
     constructor(board, options) {
         super(board, options);
@@ -107,13 +132,11 @@ class ActiveGenerator extends Generator {
         strokeG.style.opacity = `${this.options.getStrokeOpacity()}`;
         if (this.options.hasResizeHandle()) {
             this.hasResizeHandle = true;
-            // resize handle
-            const options = { stroke: '#999999', strokeWidth: 1, fill: '#FFF', fillStyle: 'solid' };
-            const leftTopHandleG = drawCircle(PlaitBoard.getRoughSVG(this.board), [activeRectangle.x, activeRectangle.y], RESIZE_HANDLE_DIAMETER, options);
-            const rightTopHandleG = drawCircle(PlaitBoard.getRoughSVG(this.board), [activeRectangle.x + activeRectangle.width, activeRectangle.y], RESIZE_HANDLE_DIAMETER, options);
-            const rightBottomHandleG = drawCircle(PlaitBoard.getRoughSVG(this.board), [activeRectangle.x + activeRectangle.width, activeRectangle.y + activeRectangle.height], RESIZE_HANDLE_DIAMETER, options);
-            const leftBottomHandleG = drawCircle(PlaitBoard.getRoughSVG(this.board), [activeRectangle.x, activeRectangle.y + activeRectangle.height], RESIZE_HANDLE_DIAMETER, options);
-            activeG.append(...[leftTopHandleG, rightTopHandleG, rightBottomHandleG, leftBottomHandleG]);
+            // draw resize handle
+            RectangleClient.getCornerPoints(activeRectangle).forEach(corner => {
+                const cornerHandleG = drawHandle(this.board, corner);
+                activeG.append(cornerHandleG);
+            });
         }
         else {
             this.hasResizeHandle = false;
@@ -174,26 +197,18 @@ class ImageGenerator extends Generator {
 }
 
 const getResizeHandleByIndex = (index) => {
-    switch (index) {
-        case 0:
-            return ResizeHandle.nw;
-        case 1:
-            return ResizeHandle.ne;
-        case 2:
-            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;
+    return `${index}`;
+};
+const getIndexByResizeHandle = (resizeHandle) => {
+    return Number(resizeHandle);
+};
+const getSymmetricHandleIndex = (board, index) => {
+    const originIndex = isEdgeHandle(board, getResizeHandleByIndex(index)) ? index - 4 : index;
+    let originSymmetricHandleIndex = originIndex + 2;
+    if (originSymmetricHandleIndex >= 4) {
+        originSymmetricHandleIndex = originSymmetricHandleIndex - 4;
     }
+    return isEdgeHandle(board, getResizeHandleByIndex(index)) ? originSymmetricHandleIndex + 4 : originSymmetricHandleIndex;
 };
 const getResizeCursorClassByIndex = (index) => {
     switch (index) {
@@ -237,10 +252,20 @@ const getRectangleResizeHandleRefs = (rectangle, diameter) => {
     }));
     return refs;
 };
+const getResizeHandlePointByIndex = (rectangle, index) => {
+    if (index <= 3) {
+        const corners = RectangleClient.getCornerPoints(rectangle);
+        return corners[index];
+    }
+    else {
+        const edgeCenterPoints = RectangleClient.getEdgeCenterPoints(rectangle);
+        return edgeCenterPoints[index - 4];
+    }
+};
 const getResizeSideRectangles = (cornerPoints, offset) => {
     const result = [];
     for (let i = 0; i < cornerPoints.length; i++) {
-        let rectangle = RectangleClient.toRectangleClient([cornerPoints[i], cornerPoints[(i + 1) % 4]]);
+        let rectangle = RectangleClient.getRectangleByPoints([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]);
@@ -265,6 +290,18 @@ const removeResizing = (board, key) => {
     IS_RESIZING.delete(board);
     setDragging(board, false);
 };
+const isEdgeHandle = (board, handle) => {
+    const index = getIndexByResizeHandle(handle);
+    if (index >= 4) {
+        return true;
+    }
+    else {
+        return false;
+    }
+};
+const isCornerHandle = (board, handle) => {
+    return !isEdgeHandle(board, handle);
+};
 
 const handleDirectionFactors = {
     [Direction.left]: { x: -1, y: 0 },
@@ -319,17 +356,6 @@ function getDirectionByVector(vector) {
         return Direction.left;
     }
 }
-function getPointByVector(point, vector, offset) {
-    const distance = Math.hypot(vector[0], vector[1]);
-    return [point[0] + (vector[0] / distance) * offset, point[1] + (vector[1] / distance) * offset];
-}
-function rotateVectorAnti90(vector) {
-    const x = vector[0];
-    const y = vector[1];
-    const rotatedX = y;
-    const rotatedY = -x;
-    return [rotatedX, rotatedY];
-}
 function getDirectionBetweenPointAndPoint(source, target) {
     if (source[0] === target[0]) {
         if (source[1] >= target[1]) {
@@ -352,19 +378,65 @@ function getDirectionBetweenPointAndPoint(source, target) {
 function getDirectionFactor(direction) {
     return handleDirectionFactors[direction];
 }
-function getFactorByPoints(source, target) {
-    const distance = distanceBetweenPointAndPoint(...source, ...target);
-    if (Point.isEquals(source, target)) {
-        return {
-            x: 1,
-            y: 1
-        };
+function getDirectionFactorByVectorComponent(vectorComponent) {
+    const directionFactor = vectorComponent === 0 ? vectorComponent : vectorComponent / Math.abs(vectorComponent);
+    return directionFactor;
+}
+
+function getUnitVectorByPointAndPoint(point1, point2) {
+    const deltaX = point2[0] - point1[0];
+    const deltaY = point2[1] - point1[1];
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    // Avoid division by zero if the points are the same
+    if (distance === 0) {
+        throw new Error('Points must not be the same for a unit vector calculation.');
+    }
+    // Calculate the unit vector components
+    const unitX = deltaX / distance;
+    const unitY = deltaY / distance;
+    return [unitX, unitY];
+}
+function getPointByVector(point, vector, component) {
+    const distance = Math.hypot(vector[0], vector[1]);
+    return [point[0] + (vector[0] / distance) * component, point[1] + (vector[1] / distance) * component];
+}
+function getPointByUnitVectorAndVectorComponent(point, unitVector, vectorComponent, isHorizontal) {
+    if (isHorizontal) {
+        return [point[0] + vectorComponent, point[1] + (vectorComponent / unitVector[0]) * unitVector[1]];
+    }
+    else {
+        return [point[0] + (vectorComponent / unitVector[1]) * unitVector[0], point[1] + vectorComponent];
     }
-    return {
-        x: (target[0] - source[0]) / distance,
-        y: (target[1] - source[1]) / distance
-    };
 }
+function rotateVectorAnti90(vector) {
+    const x = vector[0];
+    const y = vector[1];
+    const rotatedX = y;
+    const rotatedY = -x;
+    return [rotatedX, rotatedY];
+}
+
+function isPointOnSegment(point, startPoint, endPoint) {
+    const distanceToStart = distanceBetweenPointAndPoint(point[0], point[1], startPoint[0], startPoint[1]);
+    const distanceToEnd = distanceBetweenPointAndPoint(point[0], point[1], endPoint[0], endPoint[1]);
+    const segmentLength = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
+    return Math.abs(distanceToStart + distanceToEnd - segmentLength) < 0.1;
+}
+const getCrossingPointsBetweenPointAndSegment = (point, startPoint, endPoint) => {
+    const result = [];
+    const xRange = [Math.min(startPoint[0], endPoint[0]), Math.max(startPoint[0], endPoint[0])];
+    const yRange = [Math.min(startPoint[1], endPoint[1]), Math.max(startPoint[1], endPoint[1])];
+    const unitVector = getUnitVectorByPointAndPoint(startPoint, endPoint);
+    if (point[0] >= xRange[0] && point[0] <= xRange[1]) {
+        const crossingPoint = getPointByUnitVectorAndVectorComponent(startPoint, unitVector, point[0] - startPoint[0], true);
+        result.push(crossingPoint);
+    }
+    else if (point[1] >= yRange[0] && point[1] <= yRange[1]) {
+        const crossingPoint = getPointByUnitVectorAndVectorComponent(startPoint, unitVector, point[1] - startPoint[1], false);
+        result.push(crossingPoint);
+    }
+    return result;
+};
 
 function getOppositeDirection(direction) {
     switch (direction) {
@@ -435,11 +507,11 @@ const getPoints = (source, sourcePosition, target, targetPosition, offset) => {
         if (sourcePosition !== targetPosition) {
             const dirAccessorOpposite = dirAccessor === 'x' ? 1 : 0;
             const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessor === 'x' ? 'y' : 'x'];
-            const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
-            const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
+            const sourceGtTarget = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
+            const sourceLtTarget = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
             flipSourceTarget =
-                (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
-                    (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));
+                (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTarget) || (isSameDir && sourceLtTarget))) ||
+                    (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTarget) || (isSameDir && sourceGtTarget)));
             if (flipSourceTarget) {
                 points = dirAccessor === 'x' ? sourceTarget : targetSource;
             }
@@ -492,7 +564,7 @@ function getRatioByPoint(points, point) {
     const totalLength = calculatePolylineLength(points);
     let distance = 0;
     for (let i = 0; i < points.length - 1; i++) {
-        const isOverlap = isPointOnLineSegment(point, points[i], points[i + 1]);
+        const isOverlap = isPointOnSegment(point, points[i], points[i + 1]);
         if (isOverlap) {
             distance += distanceBetweenPointAndPoint(point[0], point[1], points[i][0], points[i][1]);
             return distance / totalLength;
@@ -503,12 +575,6 @@ function getRatioByPoint(points, point) {
     }
     throw new Error('Cannot get ratio by point');
 }
-function isPointOnLineSegment(point, startPoint, endPoint) {
-    const distanceToStart = distanceBetweenPointAndPoint(point[0], point[1], startPoint[0], startPoint[1]);
-    const distanceToEnd = distanceBetweenPointAndPoint(point[0], point[1], endPoint[0], endPoint[1]);
-    const segmentLength = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
-    return Math.abs(distanceToStart + distanceToEnd - segmentLength) < 0.1;
-}
 const removeDuplicatePoints = (points) => {
     const newArray = [];
     points.forEach(point => {
@@ -520,6 +586,22 @@ const removeDuplicatePoints = (points) => {
     });
     return newArray;
 };
+function simplifyOrthogonalPoints(points) {
+    if (points.length <= 2)
+        return points;
+    let simplifiedPoints = [points[0]];
+    for (let i = 1; i < points.length - 1; i++) {
+        const previous = points[i - 1];
+        const current = points[i];
+        const next = points[i + 1];
+        const isTurn = !(Point.isOverHorizontal([previous, current, next]) || Point.isOverVertical([previous, current, next]));
+        if (isTurn) {
+            simplifiedPoints.push(current);
+        }
+    }
+    simplifiedPoints.push(points[points.length - 1]);
+    return simplifiedPoints;
+}
 const getExtendPoint = (source, target, extendDistance) => {
     const distance = distanceBetweenPointAndPoint(...source, ...target);
     const isEqual = Point.isEquals(source, target);
@@ -555,22 +637,6 @@ const isDelete = (event) => {
     return hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event);
 };
 
-const getRectangleByPoints = (points) => {
-    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-    points.forEach(point => {
-        minX = Math.min(point[0], minX);
-        maxX = Math.max(point[0], maxX);
-        minY = Math.min(point[1], minY);
-        maxY = Math.max(point[1], maxY);
-    });
-    return {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY
-    };
-};
-
 var BoardCreationMode;
 (function (BoardCreationMode) {
     BoardCreationMode["dnd"] = "dnd";
@@ -825,30 +891,30 @@ const generateElbowLineRoute = (options) => {
     let route = aStar.getRoute(nextSourcePoint, nextTargetPoint);
     route = [options.sourcePoint, ...route, nextTargetPoint, options.targetPoint];
     // Centerline correction: Correct the shortest path route based on the horizontal centerline/vertical centerline
-    // 1. Find the horizontal center line (xAxis)/vertical center line (yAxis)
-    // 2. Find the point that intersects xAxis/yAxis in route, and find the line segment parallel to xAxis/yAxis in route
+    // 1. Find the horizontal center line (centerX)/vertical center line (centerY)
+    // 2. Find the point that intersects centerX/centerY in route, and find the line segment parallel to centerX/centerY in route
     // 3. Construct a rectangle based on the intersection points and parallel lines found in the previous step.
     // 4. Determine whether the rectangle intersects with the element. If it does not intersect, the center line can be mapped based on the rectangle constructed in the previous step.
     // 5. Determine whether the path after mapping the center line meets the constraints (inflection point cannot be increased)
     const isHitX = RectangleClient.isHitX(options.sourceOuterRectangle, options.targetOuterRectangle);
     const isHitY = RectangleClient.isHitY(options.sourceOuterRectangle, options.targetOuterRectangle);
-    const xAxis = isHitX ? undefined : RectangleClient.getGapCenter(options.sourceOuterRectangle, options.targetOuterRectangle, true);
-    const yAxis = isHitY ? undefined : RectangleClient.getGapCenter(options.sourceOuterRectangle, options.targetOuterRectangle, false);
-    route = routeAdjust(route, { xAxis, yAxis, sourceRectangle: options.sourceRectangle, targetRectangle: options.targetRectangle });
+    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 });
     return route;
 };
 const routeAdjust = (path, options) => {
-    const { sourceRectangle, targetRectangle, xAxis, yAxis } = options;
-    if (xAxis !== undefined) {
-        const optionsX = getAdjustOptions(path, xAxis, true);
+    const { sourceRectangle, targetRectangle, centerX, centerY } = options;
+    if (centerX !== undefined) {
+        const optionsX = getAdjustOptions(path, centerX, true);
         const resultX = optionsX.pointOfHit &&
             adjust(path, { parallelPaths: optionsX.parallelPaths, pointOfHit: optionsX.pointOfHit, sourceRectangle, targetRectangle });
         if (resultX) {
             path = resultX;
         }
     }
-    if (yAxis !== undefined) {
-        const optionsY = getAdjustOptions(path, yAxis, false);
+    if (centerY !== undefined) {
+        const optionsY = getAdjustOptions(path, centerY, false);
         const resultY = optionsY.pointOfHit &&
             adjust(path, { parallelPaths: optionsY.parallelPaths, pointOfHit: optionsY.pointOfHit, sourceRectangle, targetRectangle });
         if (resultY) {
@@ -862,29 +928,15 @@ const adjust = (route, options) => {
     let result = null;
     parallelPaths.forEach(parallelPath => {
         // Construct a rectangle
-        const tempRect = RectangleClient.toRectangleClient([pointOfHit, parallelPath[0], parallelPath[1]]);
+        const tempRectPoints = [pointOfHit, parallelPath[0], parallelPath[1]];
+        // 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 getCornerCount = (path) => {
-                let cornerCount = 0;
-                for (let index = 1; index < path.length - 1; index++) {
-                    const pre = path[index - 1];
-                    const current = path[index];
-                    const next = path[index + 1];
-                    if (pre &&
-                        current &&
-                        next &&
-                        !((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++;
-                    }
-                }
-                return cornerCount;
-            };
             const tempCorners = RectangleClient.getCornerPoints(tempRect);
             const indexRangeInPath = [];
             const indexRangeInCorner = [];
             route.forEach((point, index) => {
-                const cornerResult = tempCorners.findIndex(corner => Math.floor(corner[0]) === Math.floor(point[0]) && Math.floor(corner[1]) === Math.floor(point[1]));
+                const cornerResult = tempCorners.findIndex(corner => Point.isEquals(point, corner));
                 if (cornerResult !== -1) {
                     indexRangeInPath.push(index);
                     indexRangeInCorner.push(cornerResult);
@@ -894,9 +946,9 @@ const adjust = (route, options) => {
             const missCorner = tempCorners.find((c, index) => !indexRangeInCorner.includes(index));
             const removeLength = Math.abs(indexRangeInPath[0] - indexRangeInPath[indexRangeInPath.length - 1]) + 1;
             newPath.splice(indexRangeInPath[0] + 1, removeLength - 2, missCorner);
-            const cornerCount = getCornerCount([...route]);
-            const newCornerCount = getCornerCount([...newPath]);
-            if (newCornerCount <= cornerCount) {
+            const turnCount = simplifyOrthogonalPoints([...route]).length - 1;
+            const newTurnCount = simplifyOrthogonalPoints([...newPath]).length - 1;
+            if (newTurnCount <= turnCount) {
                 result = newPath;
             }
         }
@@ -904,7 +956,7 @@ const adjust = (route, options) => {
     });
     return result;
 };
-const getAdjustOptions = (path, middle, isHorizontal) => {
+const getAdjustOptions = (path, centerOfAxis, isHorizontal) => {
     const parallelPaths = [];
     let start = null;
     let pointOfHit = null;
@@ -921,7 +973,7 @@ const getAdjustOptions = (path, middle, isHorizontal) => {
                 start = null;
             }
         }
-        if (current[axis] === middle) {
+        if (current[axis] === centerOfAxis) {
             pointOfHit = current;
         }
     }
@@ -1054,6 +1106,22 @@ const getNextPoint = (point, outerRectangle, direction) => {
         }
     }
 };
+const getSourceAndTargetOuterRectangle = (sourceRectangle, targetRectangle) => {
+    const { sourceOffset, targetOffset } = reduceRouteMargin(sourceRectangle, targetRectangle);
+    const sourceOuterRectangle = RectangleClient.expand(sourceRectangle, sourceOffset[3], sourceOffset[0], sourceOffset[1], sourceOffset[2]);
+    const targetOuterRectangle = RectangleClient.expand(targetRectangle, targetOffset[3], targetOffset[0], targetOffset[1], targetOffset[2]);
+    return {
+        sourceOuterRectangle,
+        targetOuterRectangle
+    };
+};
+const isSourceAndTargetIntersect = (options) => {
+    const { sourcePoint, nextSourcePoint, sourceRectangle, sourceOuterRectangle, targetPoint, nextTargetPoint, targetRectangle, targetOuterRectangle } = options;
+    return (RectangleClient.isPointInRectangle(targetRectangle, sourcePoint) ||
+        RectangleClient.isPointInRectangle(targetOuterRectangle, nextSourcePoint) ||
+        RectangleClient.isPointInRectangle(sourceOuterRectangle, nextTargetPoint) ||
+        RectangleClient.isPointInRectangle(sourceRectangle, targetPoint));
+};
 
 const map = new Map();
 const memorizeLatest = (memorizedKey, propertyKey, propertyValue) => {
@@ -1287,26 +1355,31 @@ const generalCanResize = (board, event) => {
 };
 const withResize = (board, options) => {
     const { pointerDown, pointerMove, globalPointerUp } = board;
-    let resizeDetectResult = null;
+    let resizeHitTestRef = null;
     let resizeRef = null;
     let startPoint = null;
-    let hoveDetectResult = null;
+    let hoverHitTestRef = null;
     board.pointerDown = (event) => {
         if (!options.canResize() || !generalCanResize(board, event) || !isMainPointer(event)) {
             pointerDown(event);
             return;
         }
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        resizeDetectResult = options.detect(point);
-        if (resizeDetectResult) {
-            if (resizeDetectResult.cursorClass) {
-                PlaitBoard.getBoardContainer(board).classList.add(`${resizeDetectResult.cursorClass}`);
+        resizeHitTestRef = options.hitTest(point);
+        if (resizeHitTestRef) {
+            if (resizeHitTestRef.cursorClass) {
+                PlaitBoard.getBoardContainer(board).classList.add(`${resizeHitTestRef.cursorClass}`);
             }
             startPoint = [event.x, event.y];
+            const path = Array.isArray(resizeHitTestRef.element)
+                ? resizeHitTestRef.element.map(el => PlaitBoard.findPath(board, el))
+                : PlaitBoard.findPath(board, resizeHitTestRef.element);
             resizeRef = {
-                path: PlaitBoard.findPath(board, resizeDetectResult.element),
-                element: resizeDetectResult.element,
-                handle: resizeDetectResult.handle
+                path,
+                element: resizeHitTestRef.element,
+                handle: resizeHitTestRef.handle,
+                handleIndex: resizeHitTestRef.handleIndex,
+                rectangle: resizeHitTestRef.rectangle
             };
             preventTouchMove(board, event, true);
             // prevent text from being selected when user pressed shift and pointer down
@@ -1320,7 +1393,7 @@ const withResize = (board, options) => {
             pointerMove(event);
             return;
         }
-        if (startPoint && resizeDetectResult && !isResizing(board)) {
+        if (startPoint && resizeHitTestRef && !isResizing(board)) {
             // prevent text from being selected
             event.preventDefault();
             const endPoint = [event.x, event.y];
@@ -1331,51 +1404,55 @@ const withResize = (board, options) => {
                 options.beforeResize && options.beforeResize(resizeRef);
             }
         }
-        if (isResizing(board) && startPoint) {
-            // prevent text from being selected
-            event.preventDefault();
-            const endTransformPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            throttleRAF(() => {
-                const endPoint = [event.x, event.y];
-                if (startPoint && resizeRef) {
-                    handleTouchTarget(board);
-                    const offsetX = endPoint[0] - startPoint[0];
-                    const offsetY = endPoint[1] - startPoint[1];
-                    options.onResize(resizeRef, { offsetX, offsetY, endTransformPoint });
+        if (!isResizing(board) && !isDragging(board)) {
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            throttleRAF(board, options.key + '-common-resize-hit-test', () => {
+                const hitTestRef = options.hitTest(point);
+                if (hitTestRef) {
+                    if (hoverHitTestRef && hitTestRef.cursorClass !== hoverHitTestRef.cursorClass) {
+                        PlaitBoard.getBoardContainer(board).classList.remove(`${hoverHitTestRef.cursorClass}`);
+                    }
+                    hoverHitTestRef = hitTestRef;
+                    if (hoverHitTestRef.cursorClass) {
+                        PlaitBoard.getBoardContainer(board).classList.add(`${hoverHitTestRef.cursorClass}`);
+                    }
+                }
+                else {
+                    if (hoverHitTestRef) {
+                        if (hoverHitTestRef.cursorClass) {
+                            PlaitBoard.getBoardContainer(board).classList.remove(`${hoverHitTestRef.cursorClass}`);
+                        }
+                        hoverHitTestRef = null;
+                    }
                 }
             });
-            return;
         }
         else {
-            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            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}`);
-                }
-            }
-            else {
-                if (hoveDetectResult) {
-                    if (hoveDetectResult.cursorClass) {
-                        PlaitBoard.getBoardContainer(board).classList.remove(`${hoveDetectResult.cursorClass}`);
+            if (startPoint && isResizing(board)) {
+                event.preventDefault();
+                const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+                throttleRAF(board, 'with-common-resize', () => {
+                    if (startPoint && resizeRef) {
+                        handleTouchTarget(board);
+                        options.onResize(resizeRef, {
+                            startPoint: toViewBoxPoint(board, toHostPoint(board, startPoint[0], startPoint[1])),
+                            endPoint,
+                            isShift: !!event.shiftKey
+                        });
                     }
-                    hoveDetectResult = null;
-                }
+                });
+                return;
             }
         }
         pointerMove(event);
     };
     board.globalPointerUp = (event) => {
         globalPointerUp(event);
-        if (isResizing(board) || resizeDetectResult) {
-            options.beforeResize && options.beforeResize(resizeRef);
+        if (isResizing(board) || resizeHitTestRef) {
+            options.afterResize && options.afterResize(resizeRef);
             removeResizing(board, options.key);
             startPoint = null;
-            resizeDetectResult = null;
+            resizeHitTestRef = null;
             resizeRef = null;
             MERGING.set(board, false);
             preventTouchMove(board, event, false);
@@ -1471,10 +1548,10 @@ class ImageBaseComponent {
             this.activeGenerator.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ImageBaseComponent, inputs: { element: "element", imageItem: "imageItem", board: "board", isFocus: "isFocus", getRectangle: "getRectangle", hasResizeHandle: "hasResizeHandle" }, host: { classAttribute: "plait-image-container" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", type: ImageBaseComponent, inputs: { element: "element", imageItem: "imageItem", board: "board", isFocus: "isFocus", getRectangle: "getRectangle", hasResizeHandle: "hasResizeHandle" }, host: { classAttribute: "plait-image-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: ImageBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -1503,5 +1580,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AStar, ActiveGenerator, AlignTransform, 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, ResizeHandle, TRANSPARENT, TextTransforms, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildImage, calculatePolylineLength, createGraph, distributeHorizontal, distributeVertical, generateElbowLineRoute, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getElementOfFocusedImage, getElementsText, getExtendPoint, getFactorByPoints, getFirstTextEditor, getFirstTextManage, getGraphPoints, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleByPoints, getRectangleResizeHandleRefs, getTextEditors, getTextManages, getTextMarksByElement, hasAfterDraw, isDelete, isDndMode, isDrawingMode, isEnterHotkey, isExpandHotkey, isPointOnLineSegment, isResizing, isResizingByCondition, isSpaceHotkey, isTabHotkey, isVirtualKey, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, withResize };
+export { AStar, ActiveGenerator, AlignTransform, 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, ResizeHandle, TRANSPARENT, TextTransforms, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildImage, calculatePolylineLength, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByVectorComponent, getEdgeCenter, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByUnitVectorAndVectorComponent, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getSourceAndTargetOuterRectangle, getSymmetricHandleIndex, getTextEditors, getTextManages, getTextMarksByElement, getUnitVectorByPointAndPoint, hasAfterDraw, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isPointOnSegment, isResizing, isResizingByCondition, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, withResize };
 //# sourceMappingURL=plait-common.mjs.map