@logicflow/core 2.2.0 → 2.2.1

package/es/tool/MultipleSelectTool.js

@@ -55,6 +55,10 @@ var MultipleSelect = /** @class */ (function (_super) {
     function MultipleSelect(props) {
         var _this = _super.call(this, props) || this;
         _this.handleMouseDown = function (ev) {
+            // 多选区域的拖拽步长随缩放变化
+            var _a = _this.props, gridSize = _a.graphModel.gridSize, lf = _a.lf;
+            var SCALE_X = lf.getTransform().SCALE_X;
+            _this.stepDrag.setStep(gridSize * SCALE_X);
             _this.stepDrag.handleMouseDown(ev);
         };
         // 使多选区域的滚轮事件可以触发画布的滚轮事件
@@ -115,8 +119,9 @@ var MultipleSelect = /** @class */ (function (_super) {
     }
     MultipleSelect.prototype.render = function () {
         var _a, _b;
-        var _c = this.props.graphModel, selectElements = _c.selectElements, transformModel = _c.transformModel;
+        var _c = this.props.graphModel, selectElements = _c.selectElements, transformModel = _c.transformModel, theme = _c.theme;
         var _d = this.props.lf.getTransform(), SCALE_X = _d.SCALE_X, SCALE_Y = _d.SCALE_Y;
+        var _e = theme.multiSelect || {}, _f = _e.xPadding, xPadding = _f === void 0 ? 8 : _f, _g = _e.yPadding, yPadding = _g === void 0 ? 8 : _g;
         if (selectElements.size <= 1)
             return;
         var x = Number.MAX_SAFE_INTEGER;
@@ -141,10 +146,10 @@ var MultipleSelect = /** @class */ (function (_super) {
         _a = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x = _a[0], y = _a[1];
         _b = __read(transformModel.CanvasPointToHtmlPoint([x1, y1]), 2), x1 = _b[0], y1 = _b[1];
         var style = {
-            left: "".concat(x - (20 * SCALE_X) / 2, "px"),
-            top: "".concat(y - (20 * SCALE_Y) / 2, "px"),
-            width: "".concat(x1 - x + 20 * SCALE_X, "px"),
-            height: "".concat(y1 - y + 20 * SCALE_Y, "px"),
+            left: "".concat(x - (20 * SCALE_X) / 2 - xPadding / 2, "px"),
+            top: "".concat(y - (20 * SCALE_Y) / 2 - yPadding / 2, "px"),
+            width: "".concat(x1 - x + 20 * SCALE_X + xPadding, "px"),
+            height: "".concat(y1 - y + 20 * SCALE_Y + yPadding, "px"),
             'border-width': "".concat(2 * SCALE_X, "px"),
         };
         return (_jsx("div", { className: "lf-multiple-select", style: style, onPointerDown: this.handleMouseDown, onContextMenu: this.handleContextMenu, onWheel: this.handleWheelEvent }));

package/es/util/drag.js

@@ -23,7 +23,6 @@ var StepDrag = /** @class */ (function () {
                 return;
             if (_this.isStopPropagation)
                 e.stopPropagation();
-            e.preventDefault();
             _this.isStartDragging = true;
             _this.startX = e.clientX;
             _this.startY = e.clientY;

package/es/util/edge.d.ts

@@ -14,9 +14,18 @@ export declare const filterRepeatPoints: (points: Point[]) => Point[];
 export declare const getSimplePolyline: (sPoint: Point, tPoint: Point) => Point[];
 export declare const getExpandedBBox: (bbox: BoxBounds, offset: number) => BoxBounds;
 export declare const pointDirection: (point: Point, bbox: BoxBounds) => Direction;
+/**
+ * 计算扩展包围盒上的相邻点（起点或终点的下一个/上一个拐点）
+ * - 使用原始节点 bbox 来判定点相对中心的方向，避免 offset 扩展后宽高改变导致方向误判
+ * - 若 start 相对中心为水平方向，则返回扩展盒在 x 上的边界，y 保持不变
+ * - 若为垂直方向，则返回扩展盒在 y 上的边界，x 保持不变
+ * @param expendBBox 扩展后的包围盒（包含 offset）
+ * @param bbox 原始节点包围盒（用于正确的方向判定）
+ * @param point 起点或终点坐标
+ */
 export declare const getExpandedBBoxPoint: (expendBBox: BoxBounds, bbox: BoxBounds, point: Point) => Point;
 export declare const mergeBBox: (b1: BoxBounds, b2: BoxBounds) => BoxBounds;
-export declare const getBBoxOfPoints: (points?: Point[], offset?: number) => BoxBounds;
+export declare const getBBoxOfPoints: (points?: Point[], offset?: number, heightOffset?: number) => BoxBounds;
 export declare const getPointsFromBBox: (bbox: BoxBounds) => [Point, Point, Point, Point];
 export declare const isPointOutsideBBox: (point: Point, bbox: BoxBounds) => boolean;
 export declare const getBBoxXCrossPoints: (bbox: BoxBounds, x: number) => [Point, Point] | [
@@ -32,10 +41,36 @@ export declare const rebuildPath: (pathPoints: Point[], pointById: PolyPointMap,
 export declare const removeClosePointFromOpenList: (arr: Point[], item: Point) => void;
 export declare const isSegmentsIntersected: (p0: Point, p1: Point, p2: Point, p3: Point) => boolean;
 export declare const isSegmentCrossingBBox: (p1: Point, p2: Point, bbox: BoxBounds) => boolean;
+/**
+ * 基于轴对齐规则获取某点的相邻可连通点（不穿越节点）
+ * - 仅考虑 x 或 y 相同的候选点，保证严格水平/垂直
+ * - 使用 isSegmentCrossingBBox 校验线段不穿越源/目标节点
+ */
 export declare const getNextNeighborPoints: (points: Point[], point: Point, bbox1: BoxBounds, bbox2: BoxBounds) => Point[];
+/**
+ * 使用 A* + 曼哈顿启发式在候选点图上查找正交路径
+ * - 开放集/关闭集管理遍历
+ * - gScore 为累计实际代价，fScore = gScore + 启发式
+ * - 邻居仅为与当前点 x 或 y 相同且不穿越节点的点
+ * 参考：https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
+ */
 export declare const pathFinder: (points: Point[], start: Point, goal: Point, sBBox: BoxBounds, tBBox: BoxBounds, os: Point, ot: Point) => Point[];
 export declare const getBoxByOriginNode: (node: BaseNodeModel) => BoxBounds;
+/**
+ * 去除共线冗余中间点，保持每条直线段仅保留两端点
+ * - 若三点在同一水平线或同一垂直线，移除中间点
+ */
 export declare const pointFilter: (points: Point[]) => Point[];
+/**
+ * 计算折线点（正交候选点 + A* 路径）
+ * 步骤：
+ * 1) 取源/目标节点的扩展包围盒与相邻点 sPoint/tPoint
+ * 2) 若两个扩展盒重合，使用简单路径 getSimplePoints
+ * 3) 构造 lineBBox/sMixBBox/tMixBBox，并收集其角点与中心交点
+ * 4) 过滤掉落在两个扩展盒内部的点，形成 connectPoints
+ * 5) 以 sPoint/tPoint 为起止，用 A* 查找路径
+ * 6) 拼入原始 start/end，并用 pointFilter 去除冗余共线点
+ */
 export declare const getPolylinePoints: (start: Point, end: Point, sNode: BaseNodeModel, tNode: BaseNodeModel, offset: number) => Point[];
 /**
  * 获取折线中最长的一个线
@@ -47,6 +82,10 @@ export declare const isSegmentsCrossNode: (start: Point, end: Point, node: BaseN
 export declare const getCrossPointInRect: (start: Point, end: Point, node: BaseNodeModel) => Point | false | undefined;
 export declare const segmentDirection: (start: Point, end: Point) => Direction | undefined;
 export declare const points2PointsList: (points: string) => Point[];
+/**
+ * 当扩展 bbox 重合时的简化拐点计算
+ * - 根据起止段的方向（水平/垂直）插入 1~2 个中间点，避免折线重合与穿越
+ */
 export declare const getSimplePoints: (start: Point, end: Point, sPoint: Point, tPoint: Point) => Point[];
 export declare const getBytesLength: (word: string) => number;
 export declare const getTextWidth: (text: string, font: string) => number;

package/es/util/edge.js

@@ -113,6 +113,15 @@ export var pointDirection = function (point, bbox) {
         : SegmentDirection.VERTICAL;
 };
 /* 获取扩展图形上的点，即起始终点相邻的点，上一个或者下一个节点 */
+/**
+ * 计算扩展包围盒上的相邻点（起点或终点的下一个/上一个拐点）
+ * - 使用原始节点 bbox 来判定点相对中心的方向，避免 offset 扩展后宽高改变导致方向误判
+ * - 若 start 相对中心为水平方向，则返回扩展盒在 x 上的边界，y 保持不变
+ * - 若为垂直方向，则返回扩展盒在 y 上的边界，x 保持不变
+ * @param expendBBox 扩展后的包围盒（包含 offset）
+ * @param bbox 原始节点包围盒（用于正确的方向判定）
+ * @param point 起点或终点坐标
+ */
 export var getExpandedBBoxPoint = function (expendBBox, bbox, point) {
     // https://github.com/didi/LogicFlow/issues/817
     // 没有修复前传入的参数bbox实际是expendBBox
@@ -155,7 +164,7 @@ export var mergeBBox = function (b1, b2) {
  * 1、获取起始终点相邻点(expendBboxPoint)的bbox
  * 2、polylineEdge, bezierEdge，获取outline边框，这种情况传入offset
  */
-export var getBBoxOfPoints = function (points, offset) {
+export var getBBoxOfPoints = function (points, offset, heightOffset) {
     if (points === void 0) { points = []; }
     var xList = [];
     var yList = [];
@@ -171,7 +180,7 @@ export var getBBoxOfPoints = function (points, offset) {
     var height = maxY - minY;
     if (offset) {
         width += offset;
-        height += offset;
+        height += heightOffset || offset;
     }
     return {
         centerX: (minX + maxX) / 2,
@@ -313,7 +322,11 @@ export var isSegmentCrossingBBox = function (p1, p2, bbox) {
         isSegmentsIntersected(p1, p2, pb, pc) ||
         isSegmentsIntersected(p1, p2, pc, pd));
 };
-/* 获取下一个相邻的点 */
+/**
+ * 基于轴对齐规则获取某点的相邻可连通点（不穿越节点）
+ * - 仅考虑 x 或 y 相同的候选点，保证严格水平/垂直
+ * - 使用 isSegmentCrossingBBox 校验线段不穿越源/目标节点
+ */
 export var getNextNeighborPoints = function (points, point, bbox1, bbox2) {
     var neighbors = [];
     points.forEach(function (p) {
@@ -328,9 +341,12 @@ export var getNextNeighborPoints = function (points, point, bbox1, bbox2) {
     });
     return filterRepeatPoints(neighbors);
 };
-/* 路径查找,AStar查找+曼哈顿距离
- * 算法wiki:https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
- * 方法无法复用，且调用了很多polyline相关的方法，暂不抽离到src/algorithm中
+/**
+ * 使用 A* + 曼哈顿启发式在候选点图上查找正交路径
+ * - 开放集/关闭集管理遍历
+ * - gScore 为累计实际代价，fScore = gScore + 启发式
+ * - 邻居仅为与当前点 x 或 y 相同且不穿越节点的点
+ * 参考：https://zh.wikipedia.org/wiki/A*%E6%90%9C%E5%B0%8B%E6%BC%94%E7%AE%97%E6%B3%95
  */
 export var pathFinder = function (points, start, goal, sBBox, tBBox, os, ot) {
     // 定义已经遍历过的点
@@ -371,6 +387,7 @@ export var pathFinder = function (points, start, goal, sBBox, tBBox, os, ot) {
         removeClosePointFromOpenList(openSet, current);
         closedSet.push(current);
         getNextNeighborPoints(points, current, sBBox, tBBox).forEach(function (neighbor) {
+            var _a;
             if (closedSet.indexOf(neighbor) !== -1) {
                 return;
             }
@@ -378,7 +395,8 @@ export var pathFinder = function (points, start, goal, sBBox, tBBox, os, ot) {
                 openSet.push(neighbor);
             }
             if ((current === null || current === void 0 ? void 0 : current.id) && (neighbor === null || neighbor === void 0 ? void 0 : neighbor.id)) {
-                var tentativeGScore = fScore[current.id] + estimateDistance(current, neighbor);
+                // 修复：累计代价应基于 gScore[current] 而非 fScore[current]
+                var tentativeGScore = ((_a = gScore[current.id]) !== null && _a !== void 0 ? _a : 0) + estimateDistance(current, neighbor);
                 if (gScore[neighbor.id] && tentativeGScore >= gScore[neighbor.id]) {
                     return;
                 }
@@ -400,7 +418,10 @@ export var pathFinder = function (points, start, goal, sBBox, tBBox, os, ot) {
 export var getBoxByOriginNode = function (node) {
     return getNodeBBox(node);
 };
-/* 保证一条直线上只有2个节点： 删除x/y相同的中间节点 */
+/**
+ * 去除共线冗余中间点，保持每条直线段仅保留两端点
+ * - 若三点在同一水平线或同一垂直线，移除中间点
+ */
 export var pointFilter = function (points) {
     var i = 1;
     while (i < points.length - 1) {
@@ -417,7 +438,16 @@ export var pointFilter = function (points) {
     }
     return points;
 };
-/* 计算折线点 */
+/**
+ * 计算折线点（正交候选点 + A* 路径）
+ * 步骤：
+ * 1) 取源/目标节点的扩展包围盒与相邻点 sPoint/tPoint
+ * 2) 若两个扩展盒重合，使用简单路径 getSimplePoints
+ * 3) 构造 lineBBox/sMixBBox/tMixBBox，并收集其角点与中心交点
+ * 4) 过滤掉落在两个扩展盒内部的点，形成 connectPoints
+ * 5) 以 sPoint/tPoint 为起止，用 A* 查找路径
+ * 6) 拼入原始 start/end，并用 pointFilter 去除冗余共线点
+ */
 export var getPolylinePoints = function (start, end, sNode, tNode, offset) {
     var sBBox = getBoxByOriginNode(sNode);
     var tBBox = getBoxByOriginNode(tNode);
@@ -554,6 +584,10 @@ export var points2PointsList = function (points) {
         });
     return pointsList;
 };
+/**
+ * 当扩展 bbox 重合时的简化拐点计算
+ * - 根据起止段的方向（水平/垂直）插入 1~2 个中间点，避免折线重合与穿越
+ */
 export var getSimplePoints = function (start, end, sPoint, tPoint) {
     var points = [];
     // start,sPoint的方向，水平或者垂直，即路径第一条线段的方向

package/es/util/geometry.d.ts

@@ -1,5 +1,6 @@
 import LogicFlow from '../LogicFlow';
 import PointTuple = LogicFlow.PointTuple;
+import Point = LogicFlow.Point;
 export declare function snapToGrid(point: number, gridSize: number, snapGrid: boolean): number;
 export declare function getGridOffset(distance: number, gridSize: number): number;
 /**
@@ -9,3 +10,10 @@ export declare function getGridOffset(distance: number, gridSize: number): numbe
  * @param height
  */
 export declare function normalizePolygon(points?: PointTuple[], width?: number, height?: number): PointTuple[];
+/**
+ * 通用圆角生成：为菱形、多边形、折线在转折处生成与矩形视觉一致的圆角
+ * - 圆角基于角平分线，切点距顶点的距离 t = r * tan(theta/2)
+ * - 半径会根据相邻边长度进行钳制，避免超过边长造成断裂
+ * - 多边形/菱形保持闭合；折线保持开口
+ */
+export declare const generateRoundedCorners: (points: Point[], radius: number, isClosedShape: boolean) => Point[];

package/es/util/geometry.js

@@ -72,3 +72,82 @@ export function normalizePolygon(points, width, height) {
         return [x * scaleFactor, y * scaleFactor];
     });
 }
+/**
+ * 通用圆角生成：为菱形、多边形、折线在转折处生成与矩形视觉一致的圆角
+ * - 圆角基于角平分线，切点距顶点的距离 t = r * tan(theta/2)
+ * - 半径会根据相邻边长度进行钳制，避免超过边长造成断裂
+ * - 多边形/菱形保持闭合；折线保持开口
+ */
+export var generateRoundedCorners = function (points, radius, isClosedShape) {
+    var n = points.length;
+    if (n < 2 || radius <= 0)
+        return points.slice();
+    var toVec = function (a, b) { return ({ x: b.x - a.x, y: b.y - a.y }); };
+    var len = function (v) { return Math.hypot(v.x, v.y); };
+    var norm = function (v) {
+        var l = len(v) || 1;
+        return { x: v.x / l, y: v.y / l };
+    };
+    var result = [];
+    // 用二次贝塞尔近似圆角，控制点取角点，避免复杂圆心计算
+    var makeRoundCorner = function (prev, curr, next) {
+        var vPrev = toVec(curr, prev);
+        var vNext = toVec(curr, next);
+        var dPrev = len(vPrev);
+        var dNext = len(vNext);
+        if (dPrev < 1e-6 || dNext < 1e-6)
+            return [curr];
+        var uPrev = norm(vPrev);
+        var uNext = norm(vNext);
+        var t = Math.min(radius, dPrev * 0.45, dNext * 0.45);
+        var start = { x: curr.x + uPrev.x * t, y: curr.y + uPrev.y * t };
+        var end = { x: curr.x + uNext.x * t, y: curr.y + uNext.y * t };
+        // 二次贝塞尔采样：B(s) = (1-s)^2*start + 2(1-s)s*curr + s^2*end
+        var steps = 10; // 3段近似，简洁且效果稳定
+        var pts = [start];
+        for (var k = 1; k < steps; k++) {
+            var s = k / steps;
+            var a = 1 - s;
+            pts.push({
+                x: a * a * start.x + 2 * a * s * curr.x + s * s * end.x,
+                y: a * a * start.y + 2 * a * s * curr.y + s * s * end.y,
+            });
+        }
+        pts.push(end);
+        return pts;
+    };
+    for (var i = 0; i < n; i++) {
+        var prevIdx = i === 0 ? (isClosedShape ? n - 1 : 0) : i - 1;
+        var nextIdx = i === n - 1 ? (isClosedShape ? 0 : n - 1) : i + 1;
+        var prev = points[prevIdx];
+        var curr = points[i];
+        var next = points[nextIdx];
+        var isEndpoint = !isClosedShape && (i === 0 || i === n - 1);
+        if (isEndpoint) {
+            // 折线两端不处理圆角
+            result.push(curr);
+        }
+        else {
+            var arc = makeRoundCorner(prev, curr, next);
+            arc.forEach(function (p) { return result.push(p); });
+        }
+    }
+    // 去重处理：避免连续重复点
+    var dedup = [];
+    for (var i = 0; i < result.length; i++) {
+        var p = result[i];
+        if (dedup.length === 0 ||
+            Math.hypot(p.x - dedup[dedup.length - 1].x, p.y - dedup[dedup.length - 1].y) > 1e-6) {
+            dedup.push(p);
+        }
+    }
+    // 闭合图形：确保首尾不重复闭合
+    if (isClosedShape && dedup.length > 1) {
+        var first = dedup[0];
+        var last = dedup[dedup.length - 1];
+        if (Math.hypot(first.x - last.x, first.y - last.y) < 1e-6) {
+            dedup.pop();
+        }
+    }
+    return dedup;
+};

package/es/util/theme.d.ts

@@ -1,69 +1,6 @@
 import LogicFlow from '../LogicFlow';
-export declare const defaultTheme: LogicFlow.Theme;
-export declare const radiusMode: any;
-export declare const darkMode: any;
-export declare const colorfulMode: any;
-export declare const themeModeMap: {
-    colorful: any;
-    dark: any;
-    radius: any;
-    default: LogicFlow.Theme;
-};
-export declare const darkBackground: {
-    background: string;
-};
-export declare const colorfulBackground: {
-    background: string;
-};
-export declare const defaultBackground: {
-    background: string;
-};
-export declare const backgroundModeMap: {
-    colorful: {
-        background: string;
-    };
-    dark: {
-        background: string;
-    };
-    radius: {
-        background: string;
-    };
-    default: {
-        background: string;
-    };
-};
-export declare const darkGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const colorfulGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const defaultGrid: {
-    color: string;
-    thickness: number;
-};
-export declare const gridModeMap: {
-    colorful: {
-        color: string;
-        thickness: number;
-    };
-    dark: {
-        color: string;
-        thickness: number;
-    };
-    radius: {
-        color: string;
-        thickness: number;
-    };
-    default: {
-        color: string;
-        thickness: number;
-    };
-};
-export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string) => LogicFlow.Theme;
+export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: LogicFlow.ThemeMode | string) => LogicFlow.Theme;
 export declare const addThemeMode: (themeMode: string, style: Partial<LogicFlow.Theme>) => void;
 export declare const removeThemeMode: (themeMode: string) => void;
 export declare const clearThemeMode: () => void;
-export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string) => LogicFlow.Theme;
+export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: LogicFlow.ThemeMode | string) => LogicFlow.Theme;