@plait/common 0.47.0 → 0.49.0

package/fesm2022/plait-common.mjs

@@ -1,6 +1,7 @@
-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, toViewBoxPoint, toHostPoint, 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 { PlaitMarkEditor, MarkTypes, AlignEditor } from '@plait/text';
+import { Transforms as Transforms$1, Editor } from 'slate';
 import * as i0 from '@angular/core';
 import { Directive, Input } from '@angular/core';
 
@@ -716,8 +717,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];
@@ -801,12 +802,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);
@@ -838,7 +839,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) => {
@@ -1080,6 +1081,171 @@ 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 distributeHorizontal = (board) => {
+    distribute(board, true);
+};
+const distributeVertical = (board) => {
+    distribute(board, false);
+};
+const distribute = (board, isHorizontal) => {
+    const axis = isHorizontal ? 'x' : 'y';
+    const side = isHorizontal ? 'width' : 'height';
+    const selectedElements = getSelectedElements(board).filter(element => board.children.includes(element));
+    const refs = selectedElements.map(element => {
+        return { element, rectangle: board.getRectangle(element) };
+    });
+    const outerRectangle = getRectangleByElements(board, selectedElements, false);
+    const minRectangleRef = refs.sort((a, b) => a.rectangle[axis] - b.rectangle[axis])[0];
+    const maxRectangleRef = refs.sort((a, b) => b.rectangle[axis] + b.rectangle[side] - (a.rectangle[axis] + a.rectangle[side]))[0];
+    const minIndex = refs.findIndex(ref => ref === minRectangleRef);
+    const maxIndex = refs.findIndex(ref => ref === maxRectangleRef);
+    let distributeRefs = refs.filter((element, index) => index !== minIndex && index !== maxIndex);
+    const sum = distributeRefs.reduce((accumulator, current) => current.rectangle[side] + accumulator, 0);
+    const offset = (outerRectangle[side] - minRectangleRef.rectangle[side] - maxRectangleRef.rectangle[side] - sum) / (distributeRefs.length + 1);
+    distributeRefs = distributeRefs.sort((a, b) => a.rectangle[axis] - b.rectangle[axis]);
+    let position = minRectangleRef.rectangle[axis] + minRectangleRef.rectangle[side] + offset;
+    for (let i = 0; i < distributeRefs.length; i++) {
+        const rectangle = distributeRefs[i].rectangle;
+        const moveOffset = [0, 0];
+        const moveAxis = isHorizontal ? 0 : 1;
+        moveOffset[moveAxis] = position - rectangle[axis];
+        const path = PlaitBoard.findPath(board, distributeRefs[i].element);
+        const newPoints = distributeRefs[i].element.points.map(p => [p[0] + moveOffset[0], p[1] + moveOffset[1]]);
+        Transforms.setNode(board, {
+            points: newPoints
+        }, path);
+        MERGING.set(board, true);
+        position = position + rectangle[side] + offset;
+    }
+    MERGING.set(board, false);
+};
+const AlignTransform = {
+    alignTop,
+    alignHorizontalCenter,
+    alignBottom,
+    alignLeft,
+    alignVerticalCenter,
+    alignRight,
+    distributeHorizontal,
+    distributeVertical
+};
+
+const setTextMarks = (board, mark) => {
+    const selectedElements = getSelectedElements(board);
+    if (selectedElements.length) {
+        const firstEditor = getTextEditors(selectedElements[0])[0];
+        const activeMarks = PlaitMarkEditor.getMarks(firstEditor);
+        const elements = selectedElements.filter(element => {
+            const editors = getTextEditors(element);
+            return editors.some(editor => {
+                const elementMarks = PlaitMarkEditor.getMarks(editor);
+                return elementMarks[mark] === activeMarks[mark];
+            });
+        });
+        elements.forEach(element => {
+            const editors = getTextEditors(element);
+            editors.forEach(editor => PlaitMarkEditor.toggleMark(editor, mark));
+        });
+    }
+};
+const setFontSize = (board, size, defaultFontSize) => {
+    const selectedElements = getSelectedElements(board);
+    if (selectedElements.length) {
+        selectedElements.forEach(element => {
+            const editors = getTextEditors(element);
+            const finalDefaultFontSize = typeof defaultFontSize === 'function' ? defaultFontSize(element) : defaultFontSize;
+            editors.forEach(editor => PlaitMarkEditor.setFontSizeMark(editor, size, finalDefaultFontSize));
+        });
+    }
+};
+const setTextColor = (board, color, textSelection) => {
+    const selectedElements = getSelectedElements(board);
+    if (selectedElements?.length) {
+        selectedElements.forEach(element => {
+            const editors = getTextEditors(element);
+            editors.forEach(editor => {
+                if (textSelection) {
+                    Transforms$1.select(editor, textSelection);
+                }
+                if (color === 'transparent') {
+                    Editor.removeMark(editor, MarkTypes.color);
+                }
+                else {
+                    PlaitMarkEditor.setColorMark(editor, color);
+                }
+            });
+        });
+    }
+};
+const setTextAlign = (board, align) => {
+    const selectedElements = getSelectedElements(board);
+    if (selectedElements?.length) {
+        selectedElements.forEach(element => {
+            const editors = getTextEditors(element);
+            editors.forEach(editor => AlignEditor.setAlign(editor, align));
+        });
+    }
+};
+const TextTransforms = { setTextAlign, setTextColor, setFontSize, setTextMarks };
+
 const normalizeShapePoints = (points, shift = false) => {
     let start = points[0];
     let end = points[1];
@@ -1108,7 +1274,7 @@ const withResize = (board, options) => {
             pointerDown(event);
             return;
         }
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         resizeDetectResult = options.detect(point);
         if (resizeDetectResult) {
             if (resizeDetectResult.cursorClass) {
@@ -1136,7 +1302,6 @@ const withResize = (board, options) => {
             // prevent text from being selected
             event.preventDefault();
             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);
@@ -1147,7 +1312,7 @@ const withResize = (board, options) => {
         if (isResizing(board) && startPoint) {
             // prevent text from being selected
             event.preventDefault();
-            const endTransformPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const endTransformPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             throttleRAF(() => {
                 const endPoint = [event.x, event.y];
                 if (startPoint && resizeRef) {
@@ -1160,7 +1325,7 @@ const withResize = (board, options) => {
             return;
         }
         else {
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const resizeDetectResult = options.detect(point);
             if (resizeDetectResult) {
                 if (hoveDetectResult && resizeDetectResult.cursorClass !== hoveDetectResult.cursorClass) {
@@ -1316,5 +1481,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, 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, 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