@plait/common 0.28.0 → 0.30.0

package/fesm2022/plait-common.mjs

@@ -1,4 +1,4 @@
-import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, getSelectedElements, PlaitElement, Transforms, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, distanceBetweenPointAndPoint, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, MERGING, Direction, hotkeys, PlaitContextService, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
+import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, getSelectedElements, PlaitElement, Transforms, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, distanceBetweenPointAndPoint, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, MERGING, Direction, Point, hotkeys, PlaitContextService, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
 import { Directive, Input } from '@angular/core';
@@ -7,6 +7,7 @@ const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
 const RESIZE_HANDLE_DIAMETER = 8;
 const WithTextPluginKey = 'plait-text-plugin-key';
+const DEFAULT_ROUTE_MARGIN = 30;
 
 var MediaKeys;
 (function (MediaKeys) {
@@ -614,6 +615,17 @@ function isPointOnLineSegment(point, startPoint, endPoint) {
     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 => {
+        const index = newArray.findIndex(otherPoint => {
+            return Point.isEquals(point, otherPoint);
+        });
+        if (index === -1)
+            newArray.push(point);
+    });
+    return newArray;
+};
 
 function isVirtualKey(e) {
     const isMod = e.ctrlKey || e.metaKey;
@@ -725,6 +737,376 @@ function getImageSize(file, defaultImageWidth) {
         };
     });
 }
+const BOARD_TO_ELEMENT_OF_FOCUSED_IMAGE = new WeakMap();
+const getElementOfFocusedImage = (board) => {
+    return BOARD_TO_ELEMENT_OF_FOCUSED_IMAGE.get(board);
+};
+const addElementOfFocusedImage = (board, element) => {
+    BOARD_TO_ELEMENT_OF_FOCUSED_IMAGE.set(board, element);
+};
+const removeElementOfFocusedImage = (board) => {
+    BOARD_TO_ELEMENT_OF_FOCUSED_IMAGE.delete(board);
+};
+
+class PriorityQueue {
+    constructor() {
+        this.list = [];
+    }
+    enqueue(item) {
+        this.list.push(item);
+        this.list = this.list.sort((item1, item2) => item1.priority - item2.priority);
+    }
+    dequeue() {
+        return this.list.shift();
+    }
+}
+
+class AStar {
+    constructor(graph) {
+        this.graph = graph;
+        this.cameFrom = new Map();
+    }
+    heuristic(a, b) {
+        return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
+    }
+    search(start, end, previousStart) {
+        const frontier = new PriorityQueue();
+        const startNode = this.graph.get(start);
+        this.cameFrom = new Map();
+        const costSoFar = new Map();
+        costSoFar.set(startNode, 0);
+        frontier.enqueue({ node: startNode, priority: 0 });
+        while (frontier.list.length > 0) {
+            var current = frontier.dequeue();
+            if (!current) {
+                throw new Error(`can't find current`);
+            }
+            const currentPoint = current.node.data;
+            if (currentPoint[0] === end[0] && currentPoint[1] === end[1]) {
+                break;
+            }
+            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);
+                // 拐点权重
+                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];
+                if (!x && !y) {
+                    newCost = newCost + 1;
+                }
+                if (!costSoFar.has(next) || (costSoFar.get(next) && newCost < costSoFar.get(next))) {
+                    costSoFar.set(next, newCost);
+                    const priority = newCost + this.heuristic(next.data, end);
+                    frontier.enqueue({ node: next, priority });
+                    this.cameFrom.set(next, current.node);
+                }
+            });
+        }
+    }
+    getRoute(start, end) {
+        const result = [];
+        let temp = end;
+        while (temp[0] !== start[0] || temp[1] !== start[1]) {
+            const node = this.graph.get(temp);
+            const preNode = this.cameFrom.get(node);
+            result.unshift(preNode.data);
+            temp = preNode.data;
+        }
+        return result;
+    }
+}
+
+class PointNode {
+    constructor(data) {
+        this.data = data;
+        this.distance = Number.MAX_SAFE_INTEGER;
+        this.adjacentNodes = [];
+    }
+}
+class PointGraph {
+    constructor() {
+        this.index = {};
+    }
+    add(p) {
+        const x = p[0];
+        const y = p[1];
+        const xs = x.toString(), ys = y.toString();
+        if (!(xs in this.index)) {
+            this.index[xs] = {};
+        }
+        if (!(ys in this.index[xs])) {
+            this.index[xs][ys] = new PointNode(p);
+        }
+    }
+    connect(a, b) {
+        const nodeA = this.get(a);
+        const nodeB = this.get(b);
+        if (!nodeA || !nodeB) {
+            throw new Error(`A point was not found`);
+        }
+        nodeA.adjacentNodes.push(nodeB);
+    }
+    has(p) {
+        const x = p[0];
+        const y = p[1];
+        const xs = x.toString(), ys = y.toString();
+        return xs in this.index && ys in this.index[xs];
+    }
+    get(p) {
+        const x = p[0];
+        const y = p[1];
+        const xs = x.toString(), ys = y.toString();
+        if (xs in this.index && ys in this.index[xs]) {
+            return this.index[xs][ys];
+        }
+        return null;
+    }
+}
+
+const generateElbowLineRoute = (options) => {
+    const { nextSourcePoint, nextTargetPoint } = options;
+    const points = getGraphPoints(options);
+    const graph = createGraph(points);
+    const aStar = new AStar(graph);
+    aStar.search(nextSourcePoint, nextTargetPoint, options.sourcePoint);
+    let route = aStar.getRoute(nextSourcePoint, nextTargetPoint);
+    route = [options.sourcePoint, ...route, nextTargetPoint, options.targetPoint];
+    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, false);
+    const yAxis = isHitY ? undefined : RectangleClient.getGapCenter(options.sourceOuterRectangle, options.targetOuterRectangle, true);
+    route = routeAdjust(route, { xAxis, yAxis, sourceRectangle: options.sourceRectangle, targetRectangle: options.targetRectangle });
+    return route;
+};
+const routeAdjust = (path, options) => {
+    // 基于 middleX/middleY 中线纠正 path
+    // 1. 找垂直/水平的线段
+    // 2. 找到和middleX/middleY相交的点
+    // 3. 基于垂直/水平的线段分别和相交点构建矩形
+    // 4. 判断矩形相交
+    // 5. 处理 path
+    const { sourceRectangle, targetRectangle, xAxis, yAxis } = options;
+    if (xAxis !== undefined) {
+        const optionsX = getAdjustOptions(path, xAxis, 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);
+        const resultY = optionsY.pointOfHit &&
+            adjust(path, { parallelPaths: optionsY.parallelPaths, pointOfHit: optionsY.pointOfHit, sourceRectangle, targetRectangle });
+        if (resultY) {
+            path = resultY;
+        }
+    }
+    return path;
+};
+const adjust = (route, options) => {
+    const { parallelPaths, pointOfHit, sourceRectangle, targetRectangle } = options;
+    let result = null;
+    parallelPaths.forEach(parallelPath => {
+        // 构建矩形
+        const tempRect = RectangleClient.toRectangleClient([pointOfHit, parallelPath[0], parallelPath[1]]);
+        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 &&
+                        !((Math.floor(current[0]) === Math.floor(pre[0]) && Math.floor(current[0]) === Math.floor(next[0])) ||
+                            (Math.floor(current[1]) === Math.floor(pre[1]) && Math.floor(current[1]) === Math.floor(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]));
+                if (cornerResult !== -1) {
+                    indexRangeInPath.push(index);
+                    indexRangeInCorner.push(cornerResult);
+                }
+            });
+            const newPath = [...route];
+            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) {
+                result = newPath;
+            }
+        }
+        return null;
+    });
+    return result;
+};
+const getAdjustOptions = (path, middle, isHorizontal) => {
+    const parallelPaths = [];
+    let start = null;
+    let pointOfHit = null;
+    const axis = isHorizontal ? 0 : 1;
+    for (let index = 0; index < path.length; index++) {
+        const previous = path[index - 1];
+        const current = path[index];
+        if (start === null && previous && previous[axis] === current[axis]) {
+            start = previous;
+        }
+        if (start !== null) {
+            if (previous[axis] !== current[axis]) {
+                parallelPaths.push([start, previous]);
+                start = null;
+            }
+        }
+        if (current[axis] === middle) {
+            pointOfHit = current;
+        }
+    }
+    if (start) {
+        parallelPaths.push([start, path[path.length - 1]]);
+    }
+    return { pointOfHit, parallelPaths };
+};
+const getGraphPoints = (options) => {
+    const { nextSourcePoint, nextTargetPoint, sourceOuterRectangle, targetOuterRectangle } = options;
+    const x = [];
+    const y = [];
+    let result = [];
+    [sourceOuterRectangle, targetOuterRectangle].forEach(rectangle => {
+        x.push(rectangle.x, rectangle.x + rectangle.width / 2, rectangle.x + rectangle.width);
+        y.push(rectangle.y, rectangle.y + rectangle.height / 2, rectangle.y + rectangle.height);
+    });
+    const rectanglesX = [
+        sourceOuterRectangle.x,
+        sourceOuterRectangle.x + sourceOuterRectangle.width,
+        targetOuterRectangle.x,
+        targetOuterRectangle.x + targetOuterRectangle.width
+    ].sort((a, b) => a - b);
+    x.push((rectanglesX[1] + rectanglesX[2]) / 2, nextSourcePoint[0], nextTargetPoint[0]);
+    const rectanglesY = [
+        sourceOuterRectangle.y,
+        sourceOuterRectangle.y + sourceOuterRectangle.height,
+        targetOuterRectangle.y,
+        targetOuterRectangle.y + targetOuterRectangle.height
+    ].sort((a, b) => a - b);
+    y.push((rectanglesY[1] + rectanglesY[2]) / 2, nextSourcePoint[1], nextTargetPoint[1]);
+    for (let i = 0; i < x.length; i++) {
+        for (let j = 0; j < y.length; j++) {
+            const point = [x[i], y[j]];
+            const isInSource = RectangleClient.isPointInRectangle(sourceOuterRectangle, point);
+            const isInTarget = RectangleClient.isPointInRectangle(targetOuterRectangle, point);
+            if (!isInSource && !isInTarget) {
+                result.push(point);
+            }
+        }
+    }
+    result = removeDuplicatePoints(result).filter(point => {
+        const isInSource = RectangleClient.isPointInRectangle(sourceOuterRectangle, point);
+        const isInTarget = RectangleClient.isPointInRectangle(targetOuterRectangle, point);
+        return !isInSource && !isInTarget;
+    });
+    return result;
+};
+const createGraph = (points) => {
+    const graph = new PointGraph();
+    const Xs = [];
+    const Ys = [];
+    points.forEach(p => {
+        const x = p[0], y = p[1];
+        if (Xs.indexOf(x) < 0)
+            Xs.push(x);
+        if (Ys.indexOf(y) < 0)
+            Ys.push(y);
+        graph.add(p);
+    });
+    Xs.sort((a, b) => a - b);
+    Ys.sort((a, b) => a - b);
+    const inHotIndex = (p) => graph.has(p);
+    for (let i = 0; i < Xs.length; i++) {
+        for (let j = 0; j < Ys.length; j++) {
+            const point = [Xs[i], Ys[j]];
+            if (!inHotIndex(point))
+                continue;
+            if (i > 0) {
+                const otherPoint = [Xs[i - 1], Ys[j]];
+                if (inHotIndex(otherPoint)) {
+                    graph.connect(otherPoint, point);
+                    graph.connect(point, otherPoint);
+                }
+            }
+            if (j > 0) {
+                const otherPoint = [Xs[i], Ys[j - 1]];
+                if (inHotIndex(otherPoint)) {
+                    graph.connect(otherPoint, point);
+                    graph.connect(point, otherPoint);
+                }
+            }
+        }
+    }
+    return graph;
+};
+const reduceRouteMargin = (sourceRectangle, targetRectangle) => {
+    const defaultOffset = DEFAULT_ROUTE_MARGIN;
+    let sourceOffset = new Array(4).fill(defaultOffset);
+    let targetOffset = new Array(4).fill(defaultOffset);
+    const sourceOuterRectangle = RectangleClient.inflate(sourceRectangle, defaultOffset * 2);
+    const targetOuterRectangle = RectangleClient.inflate(targetRectangle, defaultOffset * 2);
+    const isHit = RectangleClient.isHit(sourceOuterRectangle, targetOuterRectangle);
+    if (isHit) {
+        const leftToRight = sourceRectangle.x - (targetRectangle.x + targetRectangle.width);
+        const rightToLeft = targetRectangle.x - (sourceRectangle.x + sourceRectangle.width);
+        if (leftToRight > 0 && leftToRight < defaultOffset * 2) {
+            const offset = leftToRight / 2;
+            sourceOffset[3] = offset;
+            targetOffset[1] = offset;
+        }
+        if (rightToLeft > 0 && rightToLeft < defaultOffset * 2) {
+            const offset = rightToLeft / 2;
+            targetOffset[3] = offset;
+            sourceOffset[1] = offset;
+        }
+        const topToBottom = sourceRectangle.y - (targetRectangle.y + targetRectangle.height);
+        const bottomToTop = targetRectangle.y - (sourceRectangle.y + sourceRectangle.height);
+        if (topToBottom > 0 && topToBottom < defaultOffset * 2) {
+            const offset = topToBottom / 2;
+            sourceOffset[0] = offset;
+            targetOffset[2] = offset;
+        }
+        if (bottomToTop > 0 && bottomToTop < defaultOffset * 2) {
+            const offset = bottomToTop / 2;
+            sourceOffset[2] = offset;
+            targetOffset[0] = offset;
+        }
+    }
+    return { sourceOffset, targetOffset };
+};
+const getNextPoint = (point, outerRectangle, direction) => {
+    switch (direction) {
+        case Direction.top: {
+            return [point[0], outerRectangle.y];
+        }
+        case Direction.bottom: {
+            return [point[0], outerRectangle.y + outerRectangle.height];
+        }
+        case Direction.right: {
+            return [outerRectangle.x + outerRectangle.width, point[1]];
+        }
+        default: {
+            return [outerRectangle.x, point[1]];
+        }
+    }
+};
 
 class CommonPluginElement extends PlaitPluginElementComponent {
     constructor() {
@@ -804,10 +1186,10 @@ class ImageBaseComponent {
             this.activeGenerator.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", 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.3", 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.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: ImageBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -836,5 +1218,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveGenerator, BASE, BoardCreationMode, CommonPluginElement, Generator, IS_RESIZING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ResizeCursorClass, ResizeHandle, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addResizing, buildImage, calculatePolylineLength, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getFactorByPoints, getOppositeDirection, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleByPoints, getRectangleResizeHandleRefs, getTextEditors, getTextManages, hasAfterDraw, isDelete, isDndMode, isDrawingMode, isEnterHotkey, isExpandHotkey, isPointOnLineSegment, isResizing, isResizingByCondition, isSpaceHotkey, isTabHotkey, isVirtualKey, normalizeShapePoints, removeResizing, rotateVectorAnti90, selectImage, setCreationMode, withResize };
+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, ResizeCursorClass, ResizeHandle, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addElementOfFocusedImage, addResizing, buildImage, calculatePolylineLength, createGraph, generateElbowLineRoute, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getElementOfFocusedImage, getFactorByPoints, getGraphPoints, getNextPoint, getOppositeDirection, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleByPoints, getRectangleResizeHandleRefs, getTextEditors, getTextManages, hasAfterDraw, isDelete, isDndMode, isDrawingMode, isEnterHotkey, isExpandHotkey, isPointOnLineSegment, isResizing, isResizingByCondition, isSpaceHotkey, isTabHotkey, isVirtualKey, normalizeShapePoints, reduceRouteMargin, removeDuplicatePoints, removeElementOfFocusedImage, removeResizing, rotateVectorAnti90, selectImage, setCreationMode, withResize };
 //# sourceMappingURL=plait-common.mjs.map