@plait/draw 0.52.0 → 0.53.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, Point, RectangleClient, getElementById, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, idCreator, catmullRomFitting, PlaitBoard, findElements, createMask, createRect, getSelectedElements, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, Direction, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, PlaitElement, preventTouchMove, createClipboardContext, WritableClipboardType, addClipboardContext, getRectangleByElements, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, getRectangleByGroup, getElementsInGroup, isSelectedElementOrGroup, PlaitGroupElement } from '@plait/core';
-import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getRectangleResizeHandleRefs, RESIZE_HANDLE_DIAMETER, getMemorizedLatest, memorizeLatest, getPointOnPolyline, rotatePoints, TRANSPARENT, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByVector, getOppositeDirection, getDirectionFactor, getDirectionByPointOfRectangle, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, getDirectionFactorByDirectionComponent, isCornerHandle, getFirstTextManage, withResize, drawHandle, getIndexByResizeHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, isResizingByCondition, getRatioByPoint, ImageGenerator, ResizeHandle } from '@plait/common';
+import { ACTIVE_STROKE_WIDTH, ThemeColorMode, createDebugGenerator, Point, RectangleClient, getElementById, rotatePointsByElement, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, rotatePoints, depthFirstRecursion, rotateAntiPointsByElement, getIsRecursionFunc, idCreator, catmullRomFitting, PlaitBoard, findElements, createMask, createRect, getSelectedElements, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, isPointInPolygon, setStrokeLinecap, getNearestPointBetweenPointAndSegments, isPointInEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, Direction, hasValidAngle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, PlaitElement, getHitElementByPoint, preventTouchMove, createClipboardContext, WritableClipboardType, addClipboardContext, getRectangleByElements, getSelectionAngle, rotatedDataPoints, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getRectangleResizeHandleRefs, RESIZE_HANDLE_DIAMETER, getMemorizedLatest, memorizeLatest, getPointOnPolyline, TRANSPARENT, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByVector, getOppositeDirection, getDirectionFactor, rotateVector, getDirectionByPointOfRectangle, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, getDirectionFactorByDirectionComponent, isCornerHandle, resetPointsAfterResize, getFirstTextManage, withResize, drawHandle, getIndexByResizeHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, isResizingByCondition, getRatioByPoint, ImageGenerator, ResizeHandle } 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';
@@ -166,6 +166,8 @@ const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
 const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 const LINE_ALIGN_TOLERANCE = 3;
 
+const debugKey$2 = 'debug:plait:line-mirror';
+const debugGenerator$2 = createDebugGenerator(debugKey$2);
 const alignPoints = (basePoint, movingPoint) => {
     const newPoint = [...movingPoint];
     if (Point.isVertical(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
@@ -429,6 +431,7 @@ function findOrthogonalParallelSegments(segment, keyPoints) {
     return parallelSegments;
 }
 function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, targetRectangle) {
+    debugGenerator$2.isDebug() && debugGenerator$2.clear();
     const mirrorSegments = [];
     for (let index = 0; index < parallelSegments.length; index++) {
         const parallelPath = parallelSegments[index];
@@ -442,14 +445,7 @@ function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, t
         const isValid = !RectangleClient.isHit(fakeRectangle, sourceRectangle) && !RectangleClient.isHit(fakeRectangle, targetRectangle);
         if (isValid) {
             mirrorSegments.push([startPoint, endPoint]);
-            // const fakeRectangleG = PlaitBoard.getRoughSVG(board).rectangle(
-            //     fakeRectangle.x,
-            //     fakeRectangle.y,
-            //     fakeRectangle.width,
-            //     fakeRectangle.height,
-            //     { stroke: 'blue' }
-            // );
-            // PlaitBoard.getElementActiveHost(board).append(fakeRectangleG);
+            debugGenerator$2.isDebug() && debugGenerator$2.drawPolygon(board, RectangleClient.getCornerPoints(fakeRectangle));
         }
     }
     return mirrorSegments;
@@ -549,8 +545,16 @@ const getSourceAndTargetRectangle = (board, element, handleRefPair) => {
         const target = handleRefPair.target;
         targetElement = createFakeElement(target.point, target.vector);
     }
-    const sourceRectangle = RectangleClient.inflate(RectangleClient.getRectangleByPoints(sourceElement.points), getStrokeWidthByElement(sourceElement) * 2);
-    const targetRectangle = RectangleClient.inflate(RectangleClient.getRectangleByPoints(targetElement.points), getStrokeWidthByElement(targetElement) * 2);
+    let sourceRectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
+    const rotatedSourceCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(sourceRectangle), sourceElement) ||
+        RectangleClient.getCornerPoints(sourceRectangle);
+    sourceRectangle = RectangleClient.getRectangleByPoints(rotatedSourceCornerPoints);
+    sourceRectangle = RectangleClient.inflate(sourceRectangle, getStrokeWidthByElement(sourceElement) * 2);
+    let targetRectangle = RectangleClient.getRectangleByPoints(targetElement.points);
+    const rotatedTargetCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(targetRectangle), targetElement) ||
+        RectangleClient.getCornerPoints(targetRectangle);
+    targetRectangle = RectangleClient.getRectangleByPoints(rotatedTargetCornerPoints);
+    targetRectangle = RectangleClient.inflate(targetRectangle, getStrokeWidthByElement(targetElement) * 2);
     return {
         sourceRectangle,
         targetRectangle
@@ -706,10 +710,12 @@ class LineShapeGenerator extends Generator {
     }
 }
 
-const getHitRectangleResizeHandleRef = (board, rectangle, point) => {
-    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
+const getHitRectangleResizeHandleRef = (board, rectangle, point, angle = 0) => {
+    const centerPoint = RectangleClient.getCenterPoint(rectangle);
+    const rotatedPoint = rotatePoints([point], centerPoint, -angle)[0];
+    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER, angle);
     const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), resizeHandleRef.rectangle);
+        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), resizeHandleRef.rectangle);
     });
     return result;
 };
@@ -720,7 +726,7 @@ const getHitOutlineGeometry = (board, point, offset = 0) => {
             let client = RectangleClient.getRectangleByPoints(node.points);
             client = RectangleClient.getOutlineRectangle(client, offset);
             const shape = getShape(node);
-            const isHit = getEngine(shape).isInsidePoint(client, point);
+            const isHit = getEngine(shape).isInsidePoint(client, rotateAntiPointsByElement(point, node) || point);
             if (isHit) {
                 geometry = node;
             }
@@ -996,8 +1002,12 @@ const Q2C = (points) => {
 };
 const handleLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG) => {
     const hitElement = getHitOutlineGeometry(board, movingPoint, REACTION_MARGIN);
-    const targetConnection = hitElement ? getConnectionByNearestPoint(board, movingPoint, hitElement) : undefined;
-    const connection = sourceElement ? getConnectionByNearestPoint(board, sourcePoint, sourceElement) : undefined;
+    const targetConnection = hitElement
+        ? getConnectionByNearestPoint(board, rotateAntiPointsByElement(movingPoint, hitElement) || movingPoint, hitElement)
+        : undefined;
+    const sourceConnection = sourceElement
+        ? getConnectionByNearestPoint(board, rotateAntiPointsByElement(sourcePoint, sourceElement) || sourcePoint, sourceElement)
+        : undefined;
     const targetBoundId = hitElement ? hitElement.id : undefined;
     const lineGenerator = new LineShapeGenerator(board);
     const memorizedLatest = getLineMemorizedLatest();
@@ -1006,7 +1016,7 @@ const handleLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceEl
     targetMarker = memorizedLatest.target;
     sourceMarker && delete memorizedLatest.source;
     targetMarker && delete memorizedLatest.target;
-    const temporaryLineElement = createLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: connection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
+    const temporaryLineElement = createLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
         strokeWidth: DefaultLineStyle.strokeWidth,
         ...memorizedLatest
     });
@@ -1157,7 +1167,7 @@ const isRectangleHitDrawElement = (board, element, selection) => {
     if (PlaitDrawElement.isImage(element)) {
         const client = RectangleClient.getRectangleByPoints(element.points);
         const rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(client), RectangleClient.getCenterPoint(client), element.angle);
-        return isPolylineHitRectangle(rotatedCornerPoints, client);
+        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
     }
     if (PlaitDrawElement.isLine(element)) {
         const points = getLinePoints(board, element);
@@ -1203,7 +1213,9 @@ const isHitDrawElement = (board, element, point) => {
         }
     }
     if (PlaitDrawElement.isImage(element)) {
-        return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        const rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(client), RectangleClient.getCenterPoint(client), element.angle);
+        return isPointInPolygon(point, rotatedCornerPoints);
     }
     if (PlaitDrawElement.isLine(element)) {
         return isHitLine(board, element, point);
@@ -2537,24 +2549,36 @@ const getLineHandleRefPair = (board, element) => {
     if (sourceBoundElement) {
         const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.source) ? 0 : strokeWidth;
         const sourceVector = getVectorByConnection(sourceBoundElement, element.source.connection);
-        const direction = getDirectionByVector(sourceVector);
-        sourceDirection = direction ? direction : sourceDirection;
-        sourcePoint = getConnectionPoint(sourceBoundElement, element.source.connection, sourceDirection, connectionOffset);
+        sourceHandleRef.vector = sourceVector;
         sourceHandleRef.boundElement = sourceBoundElement;
+        if (hasValidAngle(sourceBoundElement)) {
+            const direction = getDirectionByVector(rotateVector(sourceVector, sourceBoundElement.angle));
+            sourceDirection = direction ? direction : sourceDirection;
+        }
+        else {
+            const direction = getDirectionByVector(sourceVector);
+            sourceDirection = direction ? direction : sourceDirection;
+        }
         sourceHandleRef.direction = sourceDirection;
-        sourceHandleRef.point = sourcePoint;
-        sourceHandleRef.vector = sourceVector;
+        sourcePoint = getConnectionPoint(sourceBoundElement, element.source.connection, sourceDirection, connectionOffset);
+        sourceHandleRef.point = rotatePointsByElement(sourcePoint, sourceBoundElement) || sourcePoint;
     }
     if (targetBoundElement) {
         const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.target) ? 0 : strokeWidth;
         const targetVector = getVectorByConnection(targetBoundElement, element.target.connection);
-        const direction = getDirectionByVector(targetVector);
-        targetDirection = direction ? direction : targetDirection;
-        targetPoint = getConnectionPoint(targetBoundElement, element.target.connection, targetDirection, connectionOffset);
+        targetHandleRef.vector = targetVector;
         targetHandleRef.boundElement = targetBoundElement;
+        if (hasValidAngle(targetBoundElement)) {
+            const direction = getDirectionByVector(rotateVector(targetVector, targetBoundElement.angle));
+            targetDirection = direction ? direction : targetDirection;
+        }
+        else {
+            const direction = getDirectionByVector(targetVector);
+            targetDirection = direction ? direction : targetDirection;
+        }
         targetHandleRef.direction = targetDirection;
-        targetHandleRef.point = targetPoint;
-        targetHandleRef.vector = targetVector;
+        targetPoint = getConnectionPoint(targetBoundElement, element.target.connection, targetDirection, connectionOffset);
+        targetHandleRef.point = rotatePointsByElement(targetPoint, targetBoundElement) || targetPoint;
     }
     return { source: sourceHandleRef, target: targetHandleRef };
 };
@@ -2659,12 +2683,24 @@ const PlaitLine = {
         return line.target.boundId === element.id;
     },
     getPoints(board, line) {
-        let sourcePoint = line.source.boundId
-            ? getConnectionPoint(getElementById(board, line.source.boundId), line.source.connection)
-            : line.points[0];
-        let targetPoint = line.target.boundId
-            ? getConnectionPoint(getElementById(board, line.target.boundId), line.target.connection)
-            : line.points[line.points.length - 1];
+        let sourcePoint;
+        if (line.source.boundId) {
+            const sourceElement = getElementById(board, line.source.boundId);
+            const sourceConnectionPoint = getConnectionPoint(sourceElement, line.source.connection);
+            sourcePoint = rotatePointsByElement(sourceConnectionPoint, sourceElement) || sourceConnectionPoint;
+        }
+        else {
+            sourcePoint = line.points[0];
+        }
+        let targetPoint;
+        if (line.target.boundId) {
+            const targetElement = getElementById(board, line.target.boundId);
+            const targetConnectionPoint = getConnectionPoint(targetElement, line.target.connection);
+            targetPoint = rotatePointsByElement(targetConnectionPoint, targetElement) || targetConnectionPoint;
+        }
+        else {
+            targetPoint = line.points[line.points.length - 1];
+        }
         const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
         return [sourcePoint, ...restPoints, targetPoint];
     }
@@ -3235,6 +3271,8 @@ class LineActiveGenerator extends Generator {
     }
 }
 
+const debugKey$1 = 'debug:plait:line-turning';
+const debugGenerator$1 = createDebugGenerator(debugKey$1);
 class LineComponent extends CommonPluginElement {
     constructor(viewContainerRef, cdr) {
         super(cdr);
@@ -3259,21 +3297,7 @@ class LineComponent extends CommonPluginElement {
         super.ngOnInit();
         this.boundedElements = this.getBoundedElements();
         this.drawText();
-        // const points = this.element.points;
-        // points.forEach((p, index) => {
-        //     if (index === 0) {
-        //         return;
-        //     }
-        //     if (index === points.length - 1) {
-        //         return;
-        //     }
-        //     const dataPointG = PlaitBoard.getRoughSVG(this.board).circle(p[0], p[1], 8 * index, {
-        //         stroke: '#f08c02',
-        //         fill: '#f08c02',
-        //         fillStyle: 'solid'
-        //     });
-        //     PlaitBoard.getElementActiveHost(this.board).append(dataPointG);
-        // });
+        debugGenerator$1.isDebug() && debugGenerator$1.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
     }
     getBoundedElements() {
         const boundedElements = {};
@@ -3429,10 +3453,13 @@ const withDrawHotkey = (board) => {
     };
     board.dblClick = (event) => {
         event.preventDefault();
-        const geometries = getSelectedGeometryElements(board);
-        if (!PlaitBoard.isReadonly(board) && geometries.length === 1) {
-            const component = PlaitElement.getComponent(geometries[0]);
-            component.editText();
+        if (!PlaitBoard.isReadonly(board)) {
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            const hitElement = getHitElementByPoint(board, point);
+            if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
+                const component = PlaitElement.getComponent(hitElement);
+                component.editText();
+            }
         }
         dblClick(event);
     };
@@ -4122,6 +4149,8 @@ function getResizeAlignRef(board, resizeRef, resizeState, resizeOriginPointAndHa
     });
 }
 
+const debugKey = 'debug:plait:resize-for-rotation';
+const debugGenerator = createDebugGenerator(debugKey);
 function withDrawResize(board) {
     const { afterChange } = board;
     let alignG;
@@ -4136,7 +4165,8 @@ function withDrawResize(board) {
         hitTest: (point) => {
             const elements = getSelectedElements(board);
             const boundingRectangle = getRectangleByElements(board, elements, false);
-            const handleRef = getHitRectangleResizeHandleRef(board, boundingRectangle, point);
+            const angle = getSelectionAngle(elements);
+            const handleRef = getHitRectangleResizeHandleRef(board, boundingRectangle, point, angle);
             if (handleRef) {
                 return {
                     element: elements,
@@ -4149,20 +4179,66 @@ function withDrawResize(board) {
         },
         onResize: (resizeRef, resizeState) => {
             alignG?.remove();
+            debugGenerator.isDebug() && debugGenerator.clear();
             const isFromCorner = isCornerHandle(board, resizeRef.handle);
             const isAspectRatio = resizeState.isShift || isFromCorner;
+            const centerPoint = RectangleClient.getCenterPoint(resizeRef.rectangle);
             const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, resizeRef);
+            const angle = getSelectionAngle(resizeRef.element);
+            let bulkRotationRef;
+            if (angle) {
+                bulkRotationRef = {
+                    angle: angle,
+                    offsetX: 0,
+                    offsetY: 0,
+                    newCenterPoint: [0, 0]
+                };
+                const [rotatedStartPoint, rotateEndPoint] = rotatePoints([resizeState.startPoint, resizeState.endPoint], centerPoint, -bulkRotationRef.angle);
+                resizeState.startPoint = rotatedStartPoint;
+                resizeState.endPoint = rotateEndPoint;
+            }
             const resizeAlignRef = getResizeAlignRef(board, resizeRef, resizeState, {
                 originPoint,
                 handlePoint
             }, isAspectRatio, isFromCorner);
             alignG = resizeAlignRef.alignG;
             PlaitBoard.getElementActiveHost(board).append(alignG);
-            resizeRef.element.forEach(target => {
-                const path = PlaitBoard.findPath(board, target);
-                let points = target.points.map(p => {
+            if (bulkRotationRef) {
+                const boundingBoxCornerPoints = RectangleClient.getPoints(resizeRef.rectangle);
+                const resizedBoundingBoxCornerPoints = boundingBoxCornerPoints.map(p => {
                     return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
                 });
+                const newBoundingBox = RectangleClient.getRectangleByPoints(resizedBoundingBoxCornerPoints);
+                debugGenerator.isDebug() && debugGenerator.drawRectangle(board, newBoundingBox, { stroke: 'blue' });
+                const newBoundingBoxCenter = RectangleClient.getCenterPoint(newBoundingBox);
+                const adjustedNewBoundingBoxPoints = resetPointsAfterResize(RectangleClient.getRectangleByPoints(boundingBoxCornerPoints), RectangleClient.getRectangleByPoints(resizedBoundingBoxCornerPoints), centerPoint, newBoundingBoxCenter, bulkRotationRef.angle);
+                const newCenter = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(adjustedNewBoundingBoxPoints));
+                bulkRotationRef = Object.assign(bulkRotationRef, {
+                    offsetX: newCenter[0] - newBoundingBoxCenter[0],
+                    offsetY: newCenter[1] - newBoundingBoxCenter[1],
+                    newCenterPoint: newCenter
+                });
+                debugGenerator.isDebug() && debugGenerator.drawRectangle(board, adjustedNewBoundingBoxPoints);
+            }
+            resizeRef.element.forEach(target => {
+                const path = PlaitBoard.findPath(board, target);
+                let points;
+                if (bulkRotationRef) {
+                    const reversedPoints = rotatedDataPoints(target.points, centerPoint, -bulkRotationRef.angle);
+                    points = reversedPoints.map((p) => {
+                        return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
+                    });
+                    const adjustTargetPoints = points.map(p => [
+                        p[0] + bulkRotationRef.offsetX,
+                        p[1] + bulkRotationRef.offsetY
+                    ]);
+                    points = rotatedDataPoints(adjustTargetPoints, bulkRotationRef.newCenterPoint, bulkRotationRef.angle);
+                }
+                else {
+                    points = target.points.map(p => {
+                        return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
+                    });
+                }
                 if (PlaitDrawElement.isGeometry(target)) {
                     const { height: textHeight } = getFirstTextManage(target).getSize();
                     DrawTransforms.resizeGeometry(board, points, textHeight, path);
@@ -4201,8 +4277,13 @@ function withDrawResize(board) {
             handleG = createG();
             const elements = getSelectedElements(board);
             const boundingRectangle = getRectangleByElements(board, elements, false);
-            const corners = RectangleClient.getCornerPoints(boundingRectangle);
-            corners.forEach((corner) => {
+            let corners = RectangleClient.getCornerPoints(boundingRectangle);
+            const angle = getSelectionAngle(elements);
+            if (angle) {
+                const centerPoint = RectangleClient.getCenterPoint(boundingRectangle);
+                corners = rotatePoints(corners, centerPoint, angle);
+            }
+            corners.forEach(corner => {
                 const g = drawHandle(board, corner);
                 handleG && handleG.append(g);
             });
@@ -4281,7 +4362,7 @@ const withGeometryResize = (board) => {
             const targetComponent = PlaitElement.getComponent(selectedElements[0]);
             if (targetComponent.activeGenerator.hasResizeHandle) {
                 const rectangle = board.getRectangle(target);
-                const handleRef = getHitRectangleResizeHandleRef(board, rectangle, point);
+                const handleRef = getHitRectangleResizeHandleRef(board, rectangle, point, target.angle);
                 if (handleRef) {
                     return {
                         element: target,
@@ -4294,6 +4375,13 @@ const withGeometryResize = (board) => {
             return null;
         },
         onResize: (resizeRef, resizeState) => {
+            const centerPoint = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeRef.element.points));
+            const angle = resizeRef.element.angle;
+            if (angle) {
+                const [rotatedStartPoint, rotateEndPoint] = rotatePoints([resizeState.startPoint, resizeState.endPoint], centerPoint, -resizeRef.element.angle);
+                resizeState.startPoint = rotatedStartPoint;
+                resizeState.endPoint = rotateEndPoint;
+            }
             alignG?.remove();
             const isFromCorner = isCornerHandle(board, resizeRef.handle);
             const isAspectRatio = resizeState.isShift || PlaitDrawElement.isImage(resizeRef.element);
@@ -4305,6 +4393,9 @@ const withGeometryResize = (board) => {
             alignG = resizeAlignRef.alignG;
             PlaitBoard.getElementActiveHost(board).append(alignG);
             let points = resizeAlignRef.activePoints;
+            if (angle) {
+                points = resetPointsAfterResize(resizeRef.rectangle, RectangleClient.getRectangleByPoints(points), centerPoint, RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(points)), angle);
+            }
             if (PlaitDrawElement.isGeometry(resizeRef.element)) {
                 const { height: textHeight } = getFirstTextManage(resizeRef.element).getSize();
                 DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
@@ -4382,7 +4473,7 @@ const withLineResize = (board) => {
                 const object = resizeRef.handle === LineResizeHandle.source ? source : target;
                 points[handleIndex] = resizeState.endPoint;
                 if (hitElement) {
-                    object.connection = getConnectionByNearestPoint(board, resizeState.endPoint, hitElement);
+                    object.connection = getConnectionByNearestPoint(board, rotateAntiPointsByElement(resizeState.endPoint, hitElement) || resizeState.endPoint, hitElement);
                     object.boundId = hitElement.id;
                 }
                 else {
@@ -4490,9 +4581,9 @@ const withLineBoundReaction = (board) => {
         if (isLinePointer || isLineResizing) {
             const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
             if (hitElement) {
-                boundShapeG = drawBoundMask(board, hitElement);
-                let nearestPoint = getNearestPoint(hitElement, movingPoint);
                 const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
+                boundShapeG = drawBoundMask(board, hitElement);
+                let nearestPoint = getNearestPoint(hitElement, rotateAntiPointsByElement(movingPoint, hitElement) || movingPoint);
                 const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
                 const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, activeRectangle);
                 nearestPoint = hitConnector ? hitConnector : nearestPoint;
@@ -4504,6 +4595,9 @@ const withLineBoundReaction = (board) => {
                 });
                 boundShapeG.appendChild(circleG);
                 PlaitBoard.getElementActiveHost(board).append(boundShapeG);
+                if (hasValidAngle(hitElement)) {
+                    setAngleForG(boundShapeG, RectangleClient.getCenterPoint(rectangle), hitElement.angle);
+                }
             }
         }
         pointerMove(event);
@@ -4654,7 +4748,7 @@ const withLineAutoCompleteReaction = (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);
+            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
             const hitPoint = points[hitIndex];
             const component = PlaitElement.getComponent(targetElement);
             component.lineAutoCompleteGenerator.recoverAutoCompleteG();
@@ -4667,6 +4761,9 @@ const withLineAutoCompleteReaction = (board) => {
                 });
                 PlaitBoard.getElementActiveHost(board).append(reactionG);
                 PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
+                if (hasValidAngle(targetElement)) {
+                    setAngleForG(reactionG, RectangleClient.getCenterPoint(board.getRectangle(targetElement)), targetElement.angle);
+                }
             }
         }
         pointerMove(event);
@@ -4687,7 +4784,7 @@ const withLineAutoComplete = (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);
+            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(clickPoint, targetElement) || clickPoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
@@ -4703,7 +4800,7 @@ const withLineAutoComplete = (board) => {
         lineShapeG = createG();
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (startPoint && sourceElement) {
-            const distance = distanceBetweenPointAndPoint(...movingPoint, ...startPoint);
+            const distance = distanceBetweenPointAndPoint(...movingPoint, ...(rotatePointsByElement(startPoint, sourceElement) || startPoint));
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getShape(sourceElement);
@@ -4713,7 +4810,7 @@ const withLineAutoComplete = (board) => {
                     const crossingPoint = engine.getNearestCrossingPoint(rectangle, startPoint);
                     sourcePoint = crossingPoint;
                 }
-                temporaryElement = handleLineCreating(board, LineShape.elbow, sourcePoint, movingPoint, sourceElement, lineShapeG);
+                temporaryElement = handleLineCreating(board, LineShape.elbow, rotatePointsByElement(sourcePoint, sourceElement) || sourcePoint, movingPoint, sourceElement, lineShapeG);
             }
         }
         pointerMove(event);
@@ -4787,66 +4884,6 @@ const withLineTextMove = (board) => {
     return board;
 };
 
-class GroupGenerator extends Generator {
-    canDraw(element) {
-        return true;
-    }
-    draw(element, partialSelected) {
-        const options = {
-            stroke: '',
-            strokeWidth: ACTIVE_STROKE_WIDTH,
-            strokeLineDash: [5]
-        };
-        if (partialSelected) {
-            options.stroke = '#999';
-        }
-        const rectangle = getRectangleByGroup(this.board, element, true);
-        return drawRectangle(this.board, rectangle, options);
-    }
-}
-
-class GroupComponent extends CommonPluginElement {
-    constructor(viewContainerRef, cdr) {
-        super(cdr);
-        this.viewContainerRef = viewContainerRef;
-        this.cdr = cdr;
-    }
-    initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
-            getRectangle: (element) => {
-                return getRectangleByGroup(this.board, element);
-            },
-            getStrokeWidth: () => 0,
-            getStrokeOpacity: () => 0,
-            hasResizeHandle: () => {
-                return !isSelectionMoving(this.board);
-            }
-        });
-        this.groupGenerator = new GroupGenerator(this.board);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.initializeGenerator();
-    }
-    onContextChanged(value, previous) {
-        const elementsInGroup = getElementsInGroup(this.board, value.element, false, true);
-        const isPartialSelectGroup = elementsInGroup.some(item => isSelectedElementOrGroup(this.board, item)) &&
-            !elementsInGroup.every(item => isSelectedElementOrGroup(this.board, item));
-        this.groupGenerator.processDrawing(value.element, this.g, isPartialSelectGroup);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GroupComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GroupComponent, isStandalone: true, selector: "plait-group", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-group',
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }] });
-
 const withDraw = (board) => {
     const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment } = board;
     board.drawElement = (context) => {
@@ -4859,9 +4896,6 @@ const withDraw = (board) => {
         else if (PlaitDrawElement.isImage(context.element)) {
             return ImageComponent;
         }
-        else if (PlaitGroupElement.isGroup(context.element)) {
-            return GroupComponent;
-        }
         return drawElement(context);
     };
     board.getRectangle = (element) => {
@@ -4880,9 +4914,6 @@ const withDraw = (board) => {
         if (PlaitDrawElement.isImage(element)) {
             return RectangleClient.getRectangleByPoints(element.points);
         }
-        if (PlaitGroupElement.isGroup(element)) {
-            return getRectangleByGroup(board, element);
-        }
         return getRectangle(element);
     };
     board.isRectangleHit = (element, selection) => {