@plait/common 0.54.0 → 0.55.1

package/fesm2022/plait-common.mjs

@@ -1,9 +1,10 @@
-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 { PlaitGroupElement, getSelectionAngle, getElementsInGroup, setAngleForG, RectangleClient, drawCircle, PlaitBoard, RESIZE_HANDLE_CLASS_NAME, createG, setStrokeLinecap, drawRectangle, SELECTION_RECTANGLE_CLASS_NAME, 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, 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';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Directive, Input } from '@angular/core';
+import { inject, Component, ChangeDetectionStrategy, Directive, Input } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
@@ -11,6 +12,8 @@ const RESIZE_HANDLE_DIAMETER = 9;
 const WithTextPluginKey = 'plait-text-plugin-key';
 const DEFAULT_ROUTE_MARGIN = 30;
 const TRANSPARENT = 'transparent';
+const ROTATE_HANDLE_DISTANCE_TO_ELEMENT = 20;
+const ROTATE_HANDLE_SIZE = 18;
 
 var MediaKeys;
 (function (MediaKeys) {
@@ -94,7 +97,9 @@ function hasAfterDraw(value) {
 
 const drawHandle = (board, centerPoint) => {
     const options = { stroke: '#99999995', strokeWidth: 2, fill: '#FFF', fillStyle: 'solid' };
-    return drawCircle(PlaitBoard.getRoughSVG(board), centerPoint, RESIZE_HANDLE_DIAMETER, options);
+    const handleG = drawCircle(PlaitBoard.getRoughSVG(board), centerPoint, RESIZE_HANDLE_DIAMETER, options);
+    handleG.classList.add(RESIZE_HANDLE_CLASS_NAME);
+    return handleG;
 };
 function drawFillPrimaryHandle(board, point) {
     return drawCircle(PlaitBoard.getRoughSVG(board), point, RESIZE_HANDLE_DIAMETER, {
@@ -113,6 +118,26 @@ function drawPrimaryHandle(board, point) {
     });
 }
 
+const rotateHandleRadius = 6;
+const drawRotateHandle = (board, rectangle) => {
+    const options = { stroke: '#333', strokeWidth: 1, fillStyle: 'solid' };
+    const handleCenterPoint = [
+        rectangle.x - ROTATE_HANDLE_DISTANCE_TO_ELEMENT - ROTATE_HANDLE_SIZE / 2,
+        rectangle.y + rectangle.height + ROTATE_HANDLE_DISTANCE_TO_ELEMENT + ROTATE_HANDLE_SIZE / 2
+    ];
+    const rs = PlaitBoard.getRoughSVG(board);
+    const handleG = createG();
+    const line = rs.path(`M ${handleCenterPoint[0] + rotateHandleRadius} ${handleCenterPoint[1]} A ${rotateHandleRadius} ${rotateHandleRadius}, 0, 1, 0, ${handleCenterPoint[0]} ${handleCenterPoint[1] + rotateHandleRadius}`, options);
+    const arrow = rs.polygon([
+        [handleCenterPoint[0], handleCenterPoint[1] + rotateHandleRadius - 2],
+        [handleCenterPoint[0], handleCenterPoint[1] + rotateHandleRadius + 2],
+        [handleCenterPoint[0] + 4.5, handleCenterPoint[1] + rotateHandleRadius]
+    ], { ...options, fill: '#333' });
+    setStrokeLinecap(arrow, 'round');
+    handleG.append(line, arrow);
+    return handleG;
+};
+
 class ActiveGenerator extends Generator {
     constructor(board, options) {
         super(board, options);
@@ -138,6 +163,7 @@ class ActiveGenerator extends Generator {
             strokeWidth: delta
         });
         activeG.append(strokeG);
+        strokeG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
         strokeG.style.opacity = `${this.options.getStrokeOpacity()}`;
         if (this.options.hasResizeHandle()) {
             this.hasResizeHandle = true;
@@ -1188,6 +1214,21 @@ const getMemorizedLatest = (memorizedKey) => {
     return map.get(memorizedKey);
 };
 
+const IS_ROTATING = new WeakMap();
+const isRotating = (board) => {
+    return !!IS_ROTATING.get(board);
+};
+const addRotating = (board, rotateRef) => {
+    PlaitBoard.getBoardContainer(board).classList.add(`draw-elements-rotating`);
+    IS_ROTATING.set(board, rotateRef);
+    setDragging(board, true);
+};
+const removeRotating = (board) => {
+    PlaitBoard.getBoardContainer(board).classList.remove(`draw-elements-rotating`);
+    IS_ROTATING.delete(board);
+    setDragging(board, false);
+};
+
 const setProperty = (board, properties, options) => {
     const selectedElements = getSelectedElements(board);
     selectedElements.forEach(element => {
@@ -1566,10 +1607,11 @@ class CommonPluginElement extends PlaitPluginElementComponent {
 }
 
 class GroupComponent extends CommonPluginElement {
-    constructor(viewContainerRef, cdr) {
+    constructor(cdr, destroyRef) {
         super(cdr);
-        this.viewContainerRef = viewContainerRef;
         this.cdr = cdr;
+        this.destroyRef = destroyRef;
+        this.contextService = inject(PlaitContextService);
     }
     initializeGenerator() {
         this.activeGenerator = new ActiveGenerator(this.board, {
@@ -1587,14 +1629,18 @@ class GroupComponent extends CommonPluginElement {
     ngOnInit() {
         super.ngOnInit();
         this.initializeGenerator();
+        this.contextService
+            .onStable()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            const elementsInGroup = getElementsInGroup(this.board, this.element, false, true);
+            const isPartialSelectGroup = elementsInGroup.some(item => isSelectedElementOrGroup(this.board, item)) &&
+                !elementsInGroup.every(item => isSelectedElementOrGroup(this.board, item));
+            this.groupGenerator.processDrawing(this.element, this.getElementG(), isPartialSelectGroup);
+        });
     }
-    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 }); }
+    onContextChanged(value, previous) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }], 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: [{
@@ -1605,7 +1651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }] });
 
 function withGroup(board) {
     let groupRectangleG;
@@ -1640,24 +1686,27 @@ function withGroup(board) {
         const groups = getSelectedGroups(board, originData);
         return getRelatedFragment([...elements, ...groups], originData);
     };
-    board.insertFragment = (data, clipboardData, targetPoint) => {
-        const elements = [];
+    board.insertFragment = (clipboardData, targetPoint) => {
+        let elements = [];
         if (clipboardData?.elements?.length) {
+            elements = new Array(clipboardData?.elements?.length);
             const groups = getHighestSelectedGroups(board, clipboardData?.elements);
             const selectedIsolatedElements = getSelectedIsolatedElements(board, clipboardData?.elements);
             selectedIsolatedElements.forEach(item => {
-                elements.push(!item.groupId ? item : updateGroupId(item, undefined));
+                const index = clipboardData.elements.map(element => element.id).indexOf(item.id);
+                elements.splice(index, 1, !item.groupId ? item : updateGroupId(item, undefined));
             });
             if (groups.length) {
                 groups.forEach(item => {
+                    const index = clipboardData.elements.map(element => element.id).indexOf(item.id);
                     const newGroup = { ...updateGroupId(item, undefined), id: idCreator() };
-                    elements.push(newGroup);
-                    elements.push(...updateElementsGroupId(item, clipboardData.elements, newGroup.id));
+                    elements.splice(index, 1, newGroup);
+                    updateElementsGroupId(item, clipboardData.elements, newGroup.id, elements);
                 });
             }
             clipboardData.elements = elements;
         }
-        insertFragment(data, clipboardData, targetPoint);
+        insertFragment(clipboardData, targetPoint);
         const groupElements = elements?.filter(value => PlaitGroupElement.isGroup(value));
         groupElements.forEach(element => {
             Transforms.insertNode(board, element, [board.children.length]);
@@ -1687,12 +1736,12 @@ function withGroup(board) {
         if (!PlaitBoard.isReadonly(board)) {
             if (isKeyHotkey('mod+g', event)) {
                 event.preventDefault();
-                GroupTransforms.addGroup(board);
+                Transforms.addGroup(board);
                 return;
             }
             if (isKeyHotkey('mod+shift+g', event)) {
                 event.preventDefault();
-                GroupTransforms.removeGroup(board);
+                Transforms.removeGroup(board);
                 return;
             }
         }
@@ -1706,26 +1755,25 @@ const updateGroupId = (element, groupId) => {
         groupId: groupId
     };
 };
-const updateElementsGroupId = (group, clipboardDataElements, newGroupId) => {
-    const elements = [];
+const updateElementsGroupId = (group, clipboardDataElements, newGroupId, elements) => {
     const elementsInGroup = clipboardDataElements.filter(item => item.groupId === group.id);
     if (elementsInGroup.length) {
         elementsInGroup.forEach(item => {
+            const index = clipboardDataElements.map(item => item.id).indexOf(item.id);
             if (PlaitGroupElement.isGroup(item)) {
                 const newGroup = { ...updateGroupId(item, newGroupId), id: idCreator() };
-                elements.push(newGroup);
-                elements.push(...updateElementsGroupId(item, clipboardDataElements, newGroup.id));
+                elements.splice(index, 1, newGroup);
+                updateElementsGroupId(item, clipboardDataElements, newGroup.id, elements);
             }
             else {
-                elements.push(updateGroupId(item, newGroupId));
+                elements.splice(index, 1, updateGroupId(item, newGroupId));
             }
         });
     }
     return elements;
 };
 const getRemoveGroups = (board) => {
-    const selectedElements = getSelectedElements(board);
-    const selectedGroups = board.getRelatedFragment([], selectedElements);
+    const selectedGroups = board.getRelatedFragment([]);
     const removeGroups = [...selectedGroups];
     const highestSelectedGroups = getHighestSelectedGroups(board);
     const selectedIsolatedElements = getSelectedIsolatedElementsCanAddToGroup(board);
@@ -1891,5 +1939,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
  * 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, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, 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, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, withGroup, withResize };
+export { AStar, ActiveGenerator, AlignTransform, BASE, BoardCreationMode, CommonPluginElement, DEFAULT_ROUTE_MARGIN, Generator, IS_RESIZING, IS_ROTATING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PointGraph, PointNode, PriorityQueue, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, ResizeHandle, TRANSPARENT, TextTransforms, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, addRotating, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildImage, calculatePolylineLength, createGraph, distributeHorizontal, distributeVertical, drawFillPrimaryHandle, drawHandle, drawPrimaryHandle, drawRotateHandle, generateElbowLineRoute, getCreationMode, getCrossingPointsBetweenPointAndSegment, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getDirectionFactorByDirectionComponent, getElementOfFocusedImage, getElementsText, getExtendPoint, getFirstTextEditor, getFirstTextManage, getGraphPoints, getIndexByResizeHandle, getMemorizedLatest, getNextPoint, getOppositeDirection, getPointByVectorComponent, getPointByVectorDirectionComponent, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleResizeHandleRefs, getResizeHandleByIndex, getResizeHandlePointByIndex, getRotatedResizeCursorClassByAngle, getSourceAndTargetOuterRectangle, getSymmetricHandleIndex, getTextEditors, getTextManages, getTextMarksByElement, getUnitVectorByPointAndPoint, hasAfterDraw, isCornerHandle, isDelete, isDndMode, isDrawingMode, isEdgeHandle, isEnterHotkey, isExpandHotkey, isPointOnSegment, isResizing, isResizingByCondition, isRotating, isSourceAndTargetIntersect, isSpaceHotkey, isTabHotkey, isVirtualKey, memorizeLatest, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, removeRotating, resetPointsAfterResize, rotateVector, rotateVectorAnti90, routeAdjust, selectImage, setCreationMode, setProperty, simplifyOrthogonalPoints, withGroup, withResize };
 //# sourceMappingURL=plait-common.mjs.map