@logicflow/extension 1.2.0-next.2 → 1.2.0-next.4

package/cjs/insert-node-in-polyline/edge.js

@@ -1,21 +1,43 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isNodeInSegment = exports.crossPointInSegment = exports.isInSegment = void 0;
+exports.isNodeInSegment = exports.crossPointInSegment = exports.distToSegment = exports.distToSegmentSquared = exports.isInSegment = void 0;
 // 这个里面的函数有些在core中已经存在，为了解耦关系，没有引用
 var SegmentDirection;
 (function (SegmentDirection) {
     SegmentDirection["HORIZONTAL"] = "horizontal";
     SegmentDirection["VERTICAL"] = "vertical";
 })(SegmentDirection || (SegmentDirection = {}));
-/* 判断一个点是否在线段中
-入参点：point, 线段起终点，start,end,
-返回值： 在线段中true，否则false
-*/
-exports.isInSegment = function (point, start, end) {
-    var x = point.x, y = point.y;
-    return (x - start.x) * (x - end.x) <= 0
-        && (y - start.y) * (y - end.y) <= 0;
+/**
+ * 判断一个点是否在线段中
+ * @param point 判断的点
+ * @param start 线段的起点
+ * @param end 线段的终点
+ * @param deviation 误差范围
+ * @returns boolean
+ */
+exports.isInSegment = function (point, start, end, deviation) {
+    if (deviation === void 0) { deviation = 0; }
+    var distance = exports.distToSegment(point, start, end);
+    return distance <= deviation;
 };
+function sqr(x) {
+    return x * x;
+}
+function dist2(v, w) {
+    return sqr(v.x - w.x) + sqr(v.y - w.y);
+}
+exports.distToSegmentSquared = function (p, v, w) {
+    var l2 = dist2(v, w);
+    if (l2 === 0)
+        return dist2(p, v);
+    var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
+    t = Math.max(0, Math.min(1, t));
+    return dist2(p, {
+        x: v.x + t * (w.x - v.x),
+        y: v.y + t * (w.y - v.y),
+    });
+};
+exports.distToSegment = function (point, start, end) { return Math.sqrt(exports.distToSegmentSquared(point, start, end)); };
 /* 获取节点bbox */
 var getNodeBBox = function (node) {
     var x = node.x, y = node.y, width = node.width, height = node.height;
@@ -55,29 +77,29 @@ exports.crossPointInSegment = function (node, start, end) {
     var x = node.x, y = node.y, width = node.width, height = node.height;
     if (direction === SegmentDirection.HORIZONTAL) {
         // 同一水平线
-        if (start.y === y && maxX >= bBox.maxX && minX <= bBox.minX) {
+        if (maxX >= bBox.maxX && minX <= bBox.minX) {
             return {
                 startCrossPoint: {
                     x: start.x > end.x ? x + (width / 2) : x - (width / 2),
-                    y: y,
+                    y: start.y,
                 },
                 endCrossPoint: {
                     x: start.x > end.x ? x - (width / 2) : x + (width / 2),
-                    y: y,
+                    y: start.y,
                 },
             };
         }
     }
     else if (direction === SegmentDirection.VERTICAL) {
         // 同一垂直线
-        if (start.x === node.x && maxY >= bBox.maxY && minY <= bBox.minY) {
+        if (maxY >= bBox.maxY && minY <= bBox.minY) {
             return {
                 startCrossPoint: {
-                    x: x,
+                    x: start.x,
                     y: start.y > end.y ? y + (height / 2) : y - (height / 2),
                 },
                 endCrossPoint: {
-                    x: x,
+                    x: start.x,
                     y: start.y > end.y ? y - (height / 2) : y + (height / 2),
                 },
             };
@@ -86,11 +108,12 @@ exports.crossPointInSegment = function (node, start, end) {
 };
 // 节点是否在线段内
 // eslint-disable-next-line max-len
-exports.isNodeInSegment = function (node, polyline) {
+exports.isNodeInSegment = function (node, polyline, deviation) {
+    if (deviation === void 0) { deviation = 0; }
     var x = node.x, y = node.y;
     var pointsList = polyline.pointsList;
     for (var i = 0; i < pointsList.length - 1; i++) {
-        if (exports.isInSegment({ x: x, y: y }, pointsList[i], pointsList[i + 1])) {
+        if (exports.isInSegment({ x: x, y: y }, pointsList[i], pointsList[i + 1], deviation)) {
             var bBoxCross = exports.crossPointInSegment(node, pointsList[i], pointsList[i + 1]);
             if (bBoxCross) {
                 return {

package/cjs/insert-node-in-polyline/index.js

@@ -21,11 +21,14 @@ var __spread = (this && this.__spread) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InsertNodeInPolyline = void 0;
+var lodash_es_1 = require("lodash-es");
 var edge_1 = require("./edge");
 var InsertNodeInPolyline = /** @class */ (function () {
     function InsertNodeInPolyline(_a) {
         var lf = _a.lf;
         this._lf = lf;
+        // fix https://github.com/didi/LogicFlow/issues/754
+        this.deviation = 20;
         this.dndAdd = true;
         this.dropAdd = true;
         this.eventHandler();
@@ -44,6 +47,7 @@ var InsertNodeInPolyline = /** @class */ (function () {
                 var data = _a.data;
                 var edges = _this._lf.graphModel.edges;
                 var id = data.id;
+                // 只有游离节点才能插入到连线上
                 var pureNode = true;
                 for (var i = 0; i < edges.length; i++) {
                     if (edges[i].sourceNodeId === id || edges[i].targetNodeId === id) {
@@ -62,19 +66,26 @@ var InsertNodeInPolyline = /** @class */ (function () {
         var nodeModel = this._lf.getNodeModelById(nodeData.id);
         for (var i = 0; i < edges.length; i++) {
             // eslint-disable-next-line max-len
-            var _a = edge_1.isNodeInSegment(nodeModel, edges[i]), crossIndex = _a.crossIndex, crossPoints = _a.crossPoints;
+            var _a = edge_1.isNodeInSegment(nodeModel, edges[i], this.deviation), crossIndex = _a.crossIndex, crossPoints = _a.crossPoints;
             if (crossIndex >= 0) {
                 var _b = edges[i], sourceNodeId = _b.sourceNodeId, targetNodeId = _b.targetNodeId, id = _b.id, type = _b.type, pointsList = _b.pointsList;
+                // fix https://github.com/didi/LogicFlow/issues/996
+                var startPoint = lodash_es_1.cloneDeep(pointsList[0]);
+                var endPoint = lodash_es_1.cloneDeep(crossPoints.startCrossPoint);
                 this._lf.addEdge({
                     type: type,
                     sourceNodeId: sourceNodeId,
                     targetNodeId: nodeData.id,
+                    startPoint: startPoint,
+                    endPoint: endPoint,
                     pointsList: __spread(pointsList.slice(0, crossIndex), [crossPoints.startCrossPoint]),
                 });
                 this._lf.addEdge({
                     type: type,
                     sourceNodeId: nodeData.id,
                     targetNodeId: targetNodeId,
+                    startPoint: lodash_es_1.cloneDeep(crossPoints.endCrossPoint),
+                    endPoint: lodash_es_1.cloneDeep(pointsList[pointsList.length - 1]),
                     pointsList: __spread([crossPoints.endCrossPoint], pointsList.slice(crossIndex)),
                 });
                 this._lf.deleteEdge(id);

package/cjs/materials/group/GroupNode.js

@@ -124,6 +124,10 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
+            // FIX: https://github.com/didi/LogicFlow/issues/1007
+            if (nodeModel.isGroup && !nodeModel.isFolded) {
+                nodeModel.foldGroup(isFolded);
+            }
             nodeModel.visible = !isFolded;
             allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
         });

package/cjs/materials/group/index.js

@@ -55,7 +55,7 @@ var Group = /** @class */ (function () {
                 data.children.forEach(function (nodeId) {
                     _this.nodeGroupMap.set(nodeId, data.id);
                 });
-                _this.nodeSelected({ data: data });
+                _this.nodeSelected({ data: data, isSelected: false, isMultiple: false });
             }
         };
         this.deleteGroupChild = function (_a) {
@@ -98,7 +98,7 @@ var Group = /** @class */ (function () {
          * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
          */
         this.nodeSelected = function (_a) {
-            var data = _a.data;
+            var data = _a.data, isMultiple = _a.isMultiple, isSelected = _a.isSelected;
             var nodeModel = _this.lf.getNodeModelById(data.id);
             _this.toFrontGroup(nodeModel);
             // 重置所有的group zIndex,防止group节点zIndex增长为正。
@@ -117,6 +117,25 @@ var Group = /** @class */ (function () {
                     group.setZIndex(_this.topGroupZIndex);
                 }
             }
+            // FIX #1004
+            // 如果节点被多选，
+            // 这个节点是分组，则将分组的所有子节点取消选中
+            // 这个节点是分组的子节点，且其所属分组节点已选，则取消选中
+            if (isMultiple && isSelected) {
+                if (nodeModel.isGroup) {
+                    nodeModel.children.forEach(function (child) {
+                        var childModel = _this.lf.graphModel.getElement(child);
+                        childModel.setSelected(false);
+                    });
+                }
+                else {
+                    var groupId = _this.nodeGroupMap.get(data.id);
+                    if (groupId) {
+                        var groupModel = _this.lf.getNodeModelById(groupId);
+                        groupModel.isSelected && nodeModel.setSelected(false);
+                    }
+                }
+            }
         };
         this.toFrontGroup = function (model) {
             if (!model || !model.isGroup) {
@@ -153,7 +172,7 @@ var Group = /** @class */ (function () {
             return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add,node:drop', this.appendNodeToGroup);
+        lf.on('node:add,node:drop,node:dnd-add', this.appendNodeToGroup);
         lf.on('node:delete', this.deleteGroupChild);
         lf.on('node:dnd-drag,node:drag', this.setActiveGroup);
         lf.on('node:click', this.nodeSelected);

package/es/insert-node-in-polyline/edge.d.ts

@@ -1,5 +1,15 @@
 import { Point, PolylineEdgeModel, BaseNodeModel } from '@logicflow/core';
-export declare const isInSegment: (point: any, start: any, end: any) => boolean;
+/**
+ * 判断一个点是否在线段中
+ * @param point 判断的点
+ * @param start 线段的起点
+ * @param end 线段的终点
+ * @param deviation 误差范围
+ * @returns boolean
+ */
+export declare const isInSegment: (point: any, start: any, end: any, deviation?: number) => boolean;
+export declare const distToSegmentSquared: (p: any, v: any, w: any) => number;
+export declare const distToSegment: (point: Point, start: Point, end: Point) => number;
 export declare const crossPointInSegment: (node: BaseNodeModel, start: Point, end: Point) => {
     startCrossPoint: {
         x: number;
@@ -17,5 +27,5 @@ interface SegmentCross {
         endCrossPoint: Point;
     };
 }
-export declare const isNodeInSegment: (node: BaseNodeModel, polyline: PolylineEdgeModel) => SegmentCross;
+export declare const isNodeInSegment: (node: BaseNodeModel, polyline: PolylineEdgeModel, deviation?: number) => SegmentCross;
 export {};

package/es/insert-node-in-polyline/edge.js

@@ -4,15 +4,37 @@ var SegmentDirection;
     SegmentDirection["HORIZONTAL"] = "horizontal";
     SegmentDirection["VERTICAL"] = "vertical";
 })(SegmentDirection || (SegmentDirection = {}));
-/* 判断一个点是否在线段中
-入参点：point, 线段起终点，start,end,
-返回值： 在线段中true，否则false
-*/
-export var isInSegment = function (point, start, end) {
-    var x = point.x, y = point.y;
-    return (x - start.x) * (x - end.x) <= 0
-        && (y - start.y) * (y - end.y) <= 0;
+/**
+ * 判断一个点是否在线段中
+ * @param point 判断的点
+ * @param start 线段的起点
+ * @param end 线段的终点
+ * @param deviation 误差范围
+ * @returns boolean
+ */
+export var isInSegment = function (point, start, end, deviation) {
+    if (deviation === void 0) { deviation = 0; }
+    var distance = distToSegment(point, start, end);
+    return distance <= deviation;
 };
+function sqr(x) {
+    return x * x;
+}
+function dist2(v, w) {
+    return sqr(v.x - w.x) + sqr(v.y - w.y);
+}
+export var distToSegmentSquared = function (p, v, w) {
+    var l2 = dist2(v, w);
+    if (l2 === 0)
+        return dist2(p, v);
+    var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
+    t = Math.max(0, Math.min(1, t));
+    return dist2(p, {
+        x: v.x + t * (w.x - v.x),
+        y: v.y + t * (w.y - v.y),
+    });
+};
+export var distToSegment = function (point, start, end) { return Math.sqrt(distToSegmentSquared(point, start, end)); };
 /* 获取节点bbox */
 var getNodeBBox = function (node) {
     var x = node.x, y = node.y, width = node.width, height = node.height;
@@ -52,29 +74,29 @@ export var crossPointInSegment = function (node, start, end) {
     var x = node.x, y = node.y, width = node.width, height = node.height;
     if (direction === SegmentDirection.HORIZONTAL) {
         // 同一水平线
-        if (start.y === y && maxX >= bBox.maxX && minX <= bBox.minX) {
+        if (maxX >= bBox.maxX && minX <= bBox.minX) {
             return {
                 startCrossPoint: {
                     x: start.x > end.x ? x + (width / 2) : x - (width / 2),
-                    y: y,
+                    y: start.y,
                 },
                 endCrossPoint: {
                     x: start.x > end.x ? x - (width / 2) : x + (width / 2),
-                    y: y,
+                    y: start.y,
                 },
             };
         }
     }
     else if (direction === SegmentDirection.VERTICAL) {
         // 同一垂直线
-        if (start.x === node.x && maxY >= bBox.maxY && minY <= bBox.minY) {
+        if (maxY >= bBox.maxY && minY <= bBox.minY) {
             return {
                 startCrossPoint: {
-                    x: x,
+                    x: start.x,
                     y: start.y > end.y ? y + (height / 2) : y - (height / 2),
                 },
                 endCrossPoint: {
-                    x: x,
+                    x: start.x,
                     y: start.y > end.y ? y - (height / 2) : y + (height / 2),
                 },
             };
@@ -83,11 +105,12 @@ export var crossPointInSegment = function (node, start, end) {
 };
 // 节点是否在线段内
 // eslint-disable-next-line max-len
-export var isNodeInSegment = function (node, polyline) {
+export var isNodeInSegment = function (node, polyline, deviation) {
+    if (deviation === void 0) { deviation = 0; }
     var x = node.x, y = node.y;
     var pointsList = polyline.pointsList;
     for (var i = 0; i < pointsList.length - 1; i++) {
-        if (isInSegment({ x: x, y: y }, pointsList[i], pointsList[i + 1])) {
+        if (isInSegment({ x: x, y: y }, pointsList[i], pointsList[i + 1], deviation)) {
             var bBoxCross = crossPointInSegment(node, pointsList[i], pointsList[i + 1]);
             if (bBoxCross) {
                 return {

package/es/insert-node-in-polyline/index.d.ts

@@ -4,6 +4,7 @@ declare class InsertNodeInPolyline {
     _lf: LogicFlow;
     dndAdd: boolean;
     dropAdd: boolean;
+    deviation: number;
     constructor({ lf }: {
         lf: any;
     });

package/es/insert-node-in-polyline/index.js

@@ -18,11 +18,14 @@ var __spread = (this && this.__spread) || function () {
     for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
     return ar;
 };
+import { cloneDeep } from 'lodash-es';
 import { isNodeInSegment } from './edge';
 var InsertNodeInPolyline = /** @class */ (function () {
     function InsertNodeInPolyline(_a) {
         var lf = _a.lf;
         this._lf = lf;
+        // fix https://github.com/didi/LogicFlow/issues/754
+        this.deviation = 20;
         this.dndAdd = true;
         this.dropAdd = true;
         this.eventHandler();
@@ -41,6 +44,7 @@ var InsertNodeInPolyline = /** @class */ (function () {
                 var data = _a.data;
                 var edges = _this._lf.graphModel.edges;
                 var id = data.id;
+                // 只有游离节点才能插入到连线上
                 var pureNode = true;
                 for (var i = 0; i < edges.length; i++) {
                     if (edges[i].sourceNodeId === id || edges[i].targetNodeId === id) {
@@ -59,19 +63,26 @@ var InsertNodeInPolyline = /** @class */ (function () {
         var nodeModel = this._lf.getNodeModelById(nodeData.id);
         for (var i = 0; i < edges.length; i++) {
             // eslint-disable-next-line max-len
-            var _a = isNodeInSegment(nodeModel, edges[i]), crossIndex = _a.crossIndex, crossPoints = _a.crossPoints;
+            var _a = isNodeInSegment(nodeModel, edges[i], this.deviation), crossIndex = _a.crossIndex, crossPoints = _a.crossPoints;
             if (crossIndex >= 0) {
                 var _b = edges[i], sourceNodeId = _b.sourceNodeId, targetNodeId = _b.targetNodeId, id = _b.id, type = _b.type, pointsList = _b.pointsList;
+                // fix https://github.com/didi/LogicFlow/issues/996
+                var startPoint = cloneDeep(pointsList[0]);
+                var endPoint = cloneDeep(crossPoints.startCrossPoint);
                 this._lf.addEdge({
                     type: type,
                     sourceNodeId: sourceNodeId,
                     targetNodeId: nodeData.id,
+                    startPoint: startPoint,
+                    endPoint: endPoint,
                     pointsList: __spread(pointsList.slice(0, crossIndex), [crossPoints.startCrossPoint]),
                 });
                 this._lf.addEdge({
                     type: type,
                     sourceNodeId: nodeData.id,
                     targetNodeId: targetNodeId,
+                    startPoint: cloneDeep(crossPoints.endCrossPoint),
+                    endPoint: cloneDeep(pointsList[pointsList.length - 1]),
                     pointsList: __spread([crossPoints.endCrossPoint], pointsList.slice(crossIndex)),
                 });
                 this._lf.deleteEdge(id);

package/es/materials/group/GroupNode.js

@@ -122,6 +122,10 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
+            // FIX: https://github.com/didi/LogicFlow/issues/1007
+            if (nodeModel.isGroup && !nodeModel.isFolded) {
+                nodeModel.foldGroup(isFolded);
+            }
             nodeModel.visible = !isFolded;
             allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
         });

package/es/materials/group/index.d.ts

@@ -37,8 +37,10 @@ declare class Group {
      * 3. 分组节点取消选中后，不会将分组节点重置为原来的高度。
      * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
      */
-    nodeSelected: ({ data }: {
+    nodeSelected: ({ data, isMultiple, isSelected }: {
         data: any;
+        isMultiple: any;
+        isSelected: any;
     }) => void;
     toFrontGroup: (model: any) => void;
     /**

package/es/materials/group/index.js

@@ -51,7 +51,7 @@ var Group = /** @class */ (function () {
                 data.children.forEach(function (nodeId) {
                     _this.nodeGroupMap.set(nodeId, data.id);
                 });
-                _this.nodeSelected({ data: data });
+                _this.nodeSelected({ data: data, isSelected: false, isMultiple: false });
             }
         };
         this.deleteGroupChild = function (_a) {
@@ -94,7 +94,7 @@ var Group = /** @class */ (function () {
          * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
          */
         this.nodeSelected = function (_a) {
-            var data = _a.data;
+            var data = _a.data, isMultiple = _a.isMultiple, isSelected = _a.isSelected;
             var nodeModel = _this.lf.getNodeModelById(data.id);
             _this.toFrontGroup(nodeModel);
             // 重置所有的group zIndex,防止group节点zIndex增长为正。
@@ -113,6 +113,25 @@ var Group = /** @class */ (function () {
                     group.setZIndex(_this.topGroupZIndex);
                 }
             }
+            // FIX #1004
+            // 如果节点被多选，
+            // 这个节点是分组，则将分组的所有子节点取消选中
+            // 这个节点是分组的子节点，且其所属分组节点已选，则取消选中
+            if (isMultiple && isSelected) {
+                if (nodeModel.isGroup) {
+                    nodeModel.children.forEach(function (child) {
+                        var childModel = _this.lf.graphModel.getElement(child);
+                        childModel.setSelected(false);
+                    });
+                }
+                else {
+                    var groupId = _this.nodeGroupMap.get(data.id);
+                    if (groupId) {
+                        var groupModel = _this.lf.getNodeModelById(groupId);
+                        groupModel.isSelected && nodeModel.setSelected(false);
+                    }
+                }
+            }
         };
         this.toFrontGroup = function (model) {
             if (!model || !model.isGroup) {
@@ -149,7 +168,7 @@ var Group = /** @class */ (function () {
             return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add,node:drop', this.appendNodeToGroup);
+        lf.on('node:add,node:drop,node:dnd-add', this.appendNodeToGroup);
         lf.on('node:delete', this.deleteGroupChild);
         lf.on('node:dnd-drag,node:drag', this.setActiveGroup);
         lf.on('node:click', this.nodeSelected);