@plait/common 0.45.0 → 0.48.0

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, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, throttleRAF, handleTouchTarget, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
+import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, ResizeCursorClass, setDragging, Direction, distanceBetweenPointAndPoint, Point, hotkeys, PlaitElement, PlaitContextService, downScale, getSelectedElements, Transforms, getRectangleByElements, MERGING, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import { PlaitMarkEditor } from '@plait/text';
 import * as i0 from '@angular/core';
@@ -44,7 +44,12 @@ class Generator {
                     this.g.replaceWith(g);
                 }
                 else {
-                    parentG.appendChild(g);
+                    if (this.options?.prepend) {
+                        parentG.prepend(g);
+                    }
+                    else {
+                        parentG.appendChild(g);
+                    }
                 }
                 this.g = g;
             }
@@ -711,8 +716,8 @@ class AStar {
             current.node.adjacentNodes.forEach(next => {
                 let newCost = costSoFar.get(current.node) + this.heuristic(next.data, current.node.data);
                 const previousNode = this.cameFrom.get(current.node);
-                // 拐点权重，出现拐点则 cost + 1 以避免拐点路径
-                // 以三点一线确定是否出现拐点
+                // Inflection point weight, if an inflection point occurs, cost + 1 to avoid the inflection point path
+                // Three points on a line to determine whether there is an inflection point
                 const previousPoint = previousNode ? previousNode.data : previousStart;
                 const x = previousPoint[0] === current?.node.data[0] && previousPoint[0] === next.data[0];
                 const y = previousPoint[1] === current?.node.data[1] && previousPoint[1] === next.data[1];
@@ -796,12 +801,12 @@ const generateElbowLineRoute = (options) => {
     aStar.search(nextSourcePoint, nextTargetPoint, options.sourcePoint);
     let route = aStar.getRoute(nextSourcePoint, nextTargetPoint);
     route = [options.sourcePoint, ...route, nextTargetPoint, options.targetPoint];
-    // 中线纠正: 基于水平中线/垂直中线纠正最短路径 route
-    // 1. 找水平中线（xAxis）/垂直中线（yAxis）
-    // 2. 在 route 中找到和 xAxis/yAxis 相交的点、在 route 中找和 xAxis/yAxis 平行的线段
-    // 3. 基于步骤上一步找到的相交点和平行线构建矩形
-    // 4. 判断矩形是否和元素相交，不相交则可以基于上步构建的矩形进行中线的映射
-    // 5. 判断映射中线后的路径是否符合约束条件（拐点数据不能增加）
+    // 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
+    // 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);
@@ -833,7 +838,7 @@ const adjust = (route, options) => {
     const { parallelPaths, pointOfHit, sourceRectangle, targetRectangle } = options;
     let result = null;
     parallelPaths.forEach(parallelPath => {
-        // 构建矩形
+        // Construct a rectangle
         const tempRect = RectangleClient.toRectangleClient([pointOfHit, parallelPath[0], parallelPath[1]]);
         if (!RectangleClient.isHit(tempRect, sourceRectangle) && !RectangleClient.isHit(tempRect, targetRectangle)) {
             const getCornerCount = (path) => {
@@ -1075,6 +1080,73 @@ const PropertyTransforms = {
     setStrokeColor
 };
 
+const alignTop = (board) => {
+    function getOffset(outerRectangle, rectangle) {
+        return [0, outerRectangle.y - rectangle.y];
+    }
+    setOffset(board, getOffset);
+};
+const alignHorizontalCenter = (board) => {
+    function getOffset(outerRectangle, rectangle) {
+        const outerCenter = outerRectangle.y + outerRectangle.height / 2;
+        const elementCenter = rectangle.y + rectangle.height / 2;
+        return [0, outerCenter - elementCenter];
+    }
+    setOffset(board, getOffset);
+};
+const alignBottom = (board) => {
+    function getOffset(outerRectangle, rectangle) {
+        return [0, outerRectangle.y + outerRectangle.height - (rectangle.y + rectangle.height)];
+    }
+    setOffset(board, getOffset);
+};
+const alignLeft = (board) => {
+    function getOffset(outerRectangle, rectangle) {
+        return [outerRectangle.x - rectangle.x, 0];
+    }
+    setOffset(board, getOffset);
+};
+const alignVerticalCenter = (board) => {
+    function getOffset(outerRectangle, rectangle) {
+        const outerCenter = outerRectangle.x + outerRectangle.width / 2;
+        const elementCenter = rectangle.x + rectangle.width / 2;
+        return [outerCenter - elementCenter, 0];
+    }
+    setOffset(board, getOffset);
+};
+const alignRight = (board) => {
+    function getOffset(outerRectangle, rectangle) {
+        return [outerRectangle.x + outerRectangle.width - (rectangle.x + rectangle.width), 0];
+    }
+    setOffset(board, getOffset);
+};
+function setOffset(board, getOffset) {
+    let elements = getSelectedElements(board);
+    elements = elements.filter(element => board.children.includes(element));
+    const outerRectangle = getRectangleByElements(board, elements, false);
+    elements.forEach(element => {
+        if (!element.points)
+            return;
+        const path = PlaitBoard.findPath(board, element);
+        const rectangle = board.getRectangle(element);
+        const offset = getOffset(outerRectangle, rectangle);
+        const newPoints = element.points.map(p => [p[0] + offset[0], p[1] + offset[1]]);
+        Transforms.setNode(board, {
+            points: newPoints
+        }, path);
+        MERGING.set(board, true);
+    });
+    MERGING.set(board, false);
+}
+const AlignTransform = {
+    alignTop,
+    alignHorizontalCenter,
+    alignBottom,
+    alignLeft,
+    alignVerticalCenter,
+    alignRight
+};
+
 const normalizeShapePoints = (points, shift = false) => {
     let start = points[0];
     let end = points[1];
@@ -1130,7 +1202,8 @@ const withResize = (board, options) => {
         if (startPoint && resizeDetectResult && !isResizing(board)) {
             // prevent text from being selected
             event.preventDefault();
-            const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const endPoint = [event.x, event.y];
+            ;
             const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 addResizing(board, resizeRef, options.key);
@@ -1310,5 +1383,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, ResizeHandle, TRANSPARENT, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, buildImage, calculatePolylineLength, createGraph, generateElbowLineRoute, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getElementOfFocusedImage, 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, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, alignBottom, alignHorizontalCenter, alignLeft, alignRight, alignTop, alignVerticalCenter, buildImage, calculatePolylineLength, createGraph, generateElbowLineRoute, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getElementOfFocusedImage, 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 };
 //# sourceMappingURL=plait-common.mjs.map