@logicflow/extension 2.0.12 → 2.0.14

package/lib/tools/proximity-connect/index.js

@@ -0,0 +1,340 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProximityConnect = void 0;
+var core_1 = require("@logicflow/core");
+var lodash_es_1 = require("lodash-es");
+var ProximityConnect = /** @class */ (function () {
+    function ProximityConnect(_a) {
+        var lf = _a.lf, options = _a.options;
+        this.enable = true;
+        this.currentDistance = Infinity; // 当前间距
+        this.thresholdDistance = 100; // 节点-节点连接距离阈值
+        this.reverseDirection = false; // 节点-节点连线方向，默认是拖拽节点连向最近节点
+        this.virtualEdgeStyle = {
+            strokeDasharray: '10,10',
+            stroke: '#acacac',
+        }; // 虚拟边样式
+        this.lf = lf;
+        (0, lodash_es_1.assign)(this, options);
+    }
+    ProximityConnect.prototype.render = function () {
+        this.addEventListeners();
+    };
+    // 增加节点拖拽和锚点拖拽的事件监听
+    ProximityConnect.prototype.addEventListeners = function () {
+        var _this = this;
+        // 节点开始拖拽事件
+        this.lf.graphModel.eventCenter.on('node:dragstart', function (_a) {
+            var data = _a.data;
+            if (!_this.enable)
+                return;
+            var graphModel = _this.lf.graphModel;
+            var id = data.id;
+            _this.currentNode = graphModel.getNodeModelById(id);
+        });
+        // 节点拖拽事件
+        this.lf.graphModel.eventCenter.on('node:drag', function () {
+            _this.handleNodeDrag();
+        });
+        // 锚点开始拖拽事件
+        this.lf.graphModel.eventCenter.on('anchor:dragstart', function (_a) {
+            var data = _a.data, nodeModel = _a.nodeModel;
+            if (!_this.enable)
+                return;
+            _this.currentNode = nodeModel;
+            _this.currentAnchor = data;
+        });
+        // 锚点拖拽事件
+        this.lf.graphModel.eventCenter.on('anchor:drag', function (_a) {
+            var _b = _a.e, clientX = _b.clientX, clientY = _b.clientY;
+            if (!_this.enable)
+                return;
+            _this.handleAnchorDrag(clientX, clientY);
+        });
+        // 节点、锚点拖拽结束事件
+        this.lf.graphModel.eventCenter.on('node:drop,anchor:dragend', function () {
+            if (!_this.enable)
+                return;
+            _this.handleDrop();
+        });
+    };
+    // 节点拖拽动作
+    ProximityConnect.prototype.handleNodeDrag = function () {
+        /**
+         * 主要做几件事情
+         * 判断当前是否有虚拟连线，有的话判断两点距离是否超过阈值，超过的话删除连线
+         * 遍历画布上的所有节点，找到距离最近的节点，获取其所有锚点数据
+         * 判断每个锚点与当前选中节点的所有锚点之间的距离，找到路路径最短的两个点时，把当前节点、当前锚点当前最短记录记录下来，作为当前最近数据
+         * 判断当前最短距离是否小于阈值
+         * 如果是 就创建虚拟边
+         */
+        var nodes = this.lf.graphModel.nodes;
+        if (!(0, lodash_es_1.isNil)(this.virtualEdge)) {
+            var _a = this.virtualEdge, startPoint = _a.startPoint, endPoint = _a.endPoint, id = _a.id;
+            var curDistance = (0, core_1.twoPointDistance)(startPoint, endPoint);
+            if (curDistance > this.thresholdDistance) {
+                this.lf.deleteEdge(id);
+                this.virtualEdge = undefined;
+            }
+        }
+        if (this.currentNode) {
+            this.findClosestAnchorOfNode(this.currentNode, nodes);
+        }
+        if (this.currentDistance < this.thresholdDistance) {
+            this.addVirtualEdge();
+        }
+    };
+    // 节点放下
+    ProximityConnect.prototype.handleDrop = function () {
+        this.addActualEdge();
+        this.resetData();
+    };
+    // 锚点拖拽动作
+    ProximityConnect.prototype.handleAnchorDrag = function (clientX, clientY) {
+        // 获取当前点在画布上的位置
+        var graphModel = this.lf.graphModel;
+        var _a = graphModel.getPointByClient({
+            x: clientX,
+            y: clientY,
+        }).canvasOverlayPosition, x = _a.x, y = _a.y;
+        if ((0, lodash_es_1.isNil)(x) || (0, lodash_es_1.isNil)(y))
+            return;
+        var currentPoint = { x: x, y: y };
+        var nodes = graphModel.nodes;
+        // 判断当前是否有虚拟连线，有的话判断两点距离是否超过阈值，超过的话删除连线
+        if (!(0, lodash_es_1.isNil)(this.virtualEdge)) {
+            var _b = this.virtualEdge, endPoint = _b.endPoint, id = _b.id;
+            var curDistance = (0, core_1.twoPointDistance)(currentPoint, endPoint);
+            if (curDistance > this.thresholdDistance) {
+                this.lf.deleteEdge(id);
+                this.virtualEdge = undefined;
+            }
+        }
+        // 记录最近点的信息
+        this.findClosestAnchorOfAnchor(currentPoint, nodes);
+        if (this.currentDistance < this.thresholdDistance) {
+            this.addVirtualEdge();
+        }
+    };
+    // 节点→节点 找最近的节点和锚点
+    ProximityConnect.prototype.findClosestAnchorOfNode = function (draggingNode, allNodes) {
+        var _this = this;
+        if ((0, lodash_es_1.isNil)(draggingNode) || (0, lodash_es_1.isEmpty)(draggingNode))
+            return;
+        var _a = draggingNode.anchors, draggingAnchors = _a === void 0 ? [] : _a, id = draggingNode.id;
+        var distance;
+        var preConnectAnchor;
+        var closestAnchor;
+        var closestNode;
+        allNodes.forEach(function (node) {
+            if ((0, lodash_es_1.isEqual)(node.id, id))
+                return;
+            var _a = node.anchors, anchors = _a === void 0 ? [] : _a;
+            // 遍历所有节点，找离当前拖拽节点最近的可连接节点和锚点
+            anchors.forEach(function (anchor) {
+                // 找距离最近的两个锚点
+                draggingAnchors.forEach(function (draggingAnchor) {
+                    // 判断拖拽点锚点和当前锚点是否可连线
+                    var anchorAllowConnect = _this.anchorAllowConnect(node, anchor, draggingAnchor);
+                    if (!anchorAllowConnect)
+                        return;
+                    // 获取两个锚点之间的距离
+                    var curDistance = (0, core_1.twoPointDistance)(draggingAnchor, anchor);
+                    if (!distance || curDistance < distance) {
+                        // 如果是第一条数据，或者当前这对锚点距离更短，就替换数据
+                        distance = curDistance;
+                        preConnectAnchor = draggingAnchor;
+                        closestAnchor = anchor;
+                        closestNode = node;
+                    }
+                });
+            });
+        });
+        this.currentDistance = distance;
+        this.currentAnchor = preConnectAnchor;
+        this.closestAnchor = closestAnchor;
+        this.closestNode = closestNode;
+    };
+    // 锚点→节点 找最近的锚点
+    ProximityConnect.prototype.findClosestAnchorOfAnchor = function (draggingPoint, allNodes) {
+        var _this = this;
+        if ((0, lodash_es_1.isNil)(draggingPoint))
+            return;
+        var distance;
+        var closestAnchor;
+        var closestNode;
+        var _a = this, currentNode = _a.currentNode, currentAnchor = _a.currentAnchor;
+        allNodes.forEach(function (node) {
+            if (!currentNode)
+                return;
+            var _a = node.anchors, anchors = _a === void 0 ? [] : _a;
+            // 遍历所有节点，找离当前拖拽节点最近的可连接节点和锚点
+            anchors.forEach(function (anchor) {
+                var _a;
+                if ((0, lodash_es_1.isEqual)((_a = _this.currentAnchor) === null || _a === void 0 ? void 0 : _a.id, anchor.id))
+                    return;
+                // 判断拖拽点锚点和当前锚点是否可连线
+                var anchorAllowConnect = _this.anchorAllowConnect(node, anchor, currentAnchor);
+                if (!anchorAllowConnect)
+                    return;
+                // 获取两个锚点之间的距离
+                var curDistance = (0, core_1.twoPointDistance)(draggingPoint, anchor);
+                if (!distance || curDistance < distance) {
+                    // 如果是第一条数据，或者当前这对锚点距离更短，就替换数据
+                    distance = curDistance;
+                    closestAnchor = anchor;
+                    closestNode = node;
+                }
+            });
+        });
+        this.currentDistance = distance;
+        this.closestAnchor = closestAnchor;
+        this.closestNode = closestNode;
+    };
+    // 判断锚点是否允许连线
+    ProximityConnect.prototype.anchorAllowConnect = function (node, anchor, draggingAnchor) {
+        var currentNode = this.currentNode;
+        if (!currentNode)
+            return;
+        // 判断起点是否可连接
+        var sourceValidResult = (this.reverseDirection
+            ? node.isAllowConnectedAsSource(currentNode, anchor, draggingAnchor)
+            : currentNode.isAllowConnectedAsSource(node, draggingAnchor, anchor)).isAllPass;
+        // 判断终点是否可连接
+        var targetValidResult = (this.reverseDirection
+            ? currentNode.isAllowConnectedAsTarget(node, anchor, draggingAnchor)
+            : node.isAllowConnectedAsTarget(currentNode, draggingAnchor, anchor)).isAllPass;
+        return sourceValidResult && targetValidResult;
+    };
+    // 判断是否应该删除虚拟边
+    ProximityConnect.prototype.sameEdgeIsExist = function (edge) {
+        if ((0, lodash_es_1.isNil)(this.closestNode) ||
+            (0, lodash_es_1.isNil)(this.currentNode) ||
+            (0, lodash_es_1.isNil)(this.closestAnchor) ||
+            (0, lodash_es_1.isNil)(this.currentAnchor))
+            return false;
+        if ((0, lodash_es_1.isNil)(edge))
+            return false;
+        var _a = this, closestNodeId = _a.closestNode.id, currentNodeId = _a.currentNode.id, closestAnchorId = _a.closestAnchor.id, currentAnchorId = _a.currentAnchor.id, reverseDirection = _a.reverseDirection;
+        var sourceNodeId = edge.sourceNodeId, targetNodeId = edge.targetNodeId, sourceAnchorId = edge.sourceAnchorId, targetAnchorId = edge.targetAnchorId;
+        var isExist = reverseDirection
+            ? (0, lodash_es_1.isEqual)(closestNodeId, sourceNodeId) &&
+                (0, lodash_es_1.isEqual)(currentNodeId, targetNodeId) &&
+                (0, lodash_es_1.isEqual)(closestAnchorId, sourceAnchorId) &&
+                (0, lodash_es_1.isEqual)(currentAnchorId, targetAnchorId)
+            : (0, lodash_es_1.isEqual)(currentNodeId, sourceNodeId) &&
+                (0, lodash_es_1.isEqual)(closestNodeId, targetNodeId) &&
+                (0, lodash_es_1.isEqual)(currentAnchorId, sourceAnchorId) &&
+                (0, lodash_es_1.isEqual)(closestAnchorId, targetAnchorId);
+        return isExist;
+    };
+    // 增加虚拟边
+    ProximityConnect.prototype.addVirtualEdge = function () {
+        var _this = this;
+        var edges = this.lf.graphModel.edges;
+        // 判断当前是否已存在一条同样配置的真实边
+        var actualEdgeIsExist = (0, lodash_es_1.reduce)(edges, function (result, edge) {
+            if (edge.virtual)
+                return result;
+            return result || _this.sameEdgeIsExist(edge);
+        }, false);
+        // 如果有真实边就不重复创建边了
+        if (actualEdgeIsExist)
+            return;
+        // 判断当前是否有虚拟边
+        // 如果当前已有虚拟边，判断当前的节点和锚点信息与虚拟边的信息是否一致
+        if (!(0, lodash_es_1.isNil)(this.virtualEdge)) {
+            var edgeId = this.virtualEdge.id;
+            // 信息一致不做处理
+            if (this.sameEdgeIsExist(this.virtualEdge))
+                return;
+            // 不一致就删除老边
+            this.lf.deleteEdge(edgeId);
+        }
+        // 开始创建虚拟边
+        var _a = this, reverseDirection = _a.reverseDirection, currentNode = _a.currentNode, closestNode = _a.closestNode, currentAnchor = _a.currentAnchor, closestAnchor = _a.closestAnchor;
+        if ((0, lodash_es_1.isEmpty)(currentNode) || (0, lodash_es_1.isEmpty)(closestNode))
+            return;
+        var properties = {
+            style: this.virtualEdgeStyle,
+        };
+        this.virtualEdge = this.lf.addEdge(reverseDirection
+            ? {
+                sourceNodeId: closestNode === null || closestNode === void 0 ? void 0 : closestNode.id,
+                targetNodeId: currentNode === null || currentNode === void 0 ? void 0 : currentNode.id,
+                sourceAnchorId: closestAnchor === null || closestAnchor === void 0 ? void 0 : closestAnchor.id,
+                targetAnchorId: currentAnchor === null || currentAnchor === void 0 ? void 0 : currentAnchor.id,
+                properties: properties,
+            }
+            : {
+                sourceNodeId: currentNode === null || currentNode === void 0 ? void 0 : currentNode.id,
+                targetNodeId: closestNode === null || closestNode === void 0 ? void 0 : closestNode.id,
+                sourceAnchorId: currentAnchor === null || currentAnchor === void 0 ? void 0 : currentAnchor.id,
+                targetAnchorId: closestAnchor === null || closestAnchor === void 0 ? void 0 : closestAnchor.id,
+                properties: properties,
+            });
+        this.virtualEdge.virtual = true;
+    };
+    // 增加实体边
+    ProximityConnect.prototype.addActualEdge = function () {
+        if ((0, lodash_es_1.isNil)(this.virtualEdge))
+            return;
+        var _a = this.virtualEdge, type = _a.type, sourceNodeId = _a.sourceNodeId, targetNodeId = _a.targetNodeId, sourceAnchorId = _a.sourceAnchorId, targetAnchorId = _a.targetAnchorId, startPoint = _a.startPoint, endPoint = _a.endPoint, pointsList = _a.pointsList;
+        this.lf.addEdge({
+            type: type,
+            sourceNodeId: sourceNodeId,
+            targetNodeId: targetNodeId,
+            sourceAnchorId: sourceAnchorId,
+            targetAnchorId: targetAnchorId,
+            startPoint: startPoint,
+            endPoint: endPoint,
+            pointsList: pointsList,
+        });
+        this.lf.deleteEdge(this.virtualEdge.id);
+    };
+    // 设置虚拟边样式
+    ProximityConnect.prototype.setVirtualEdgeStyle = function (value) {
+        this.virtualEdgeStyle = __assign(__assign({}, this.virtualEdgeStyle), value);
+    };
+    // 设置连线阈值
+    ProximityConnect.prototype.setThresholdDistance = function (distance) {
+        console.log('distance', distance);
+        if (!(0, lodash_es_1.isFinite)(distance))
+            return;
+        this.thresholdDistance = distance;
+    };
+    // 设置连线方向
+    ProximityConnect.prototype.setReverseDirection = function (value) {
+        this.reverseDirection = value;
+    };
+    // 设置插件开关状态
+    ProximityConnect.prototype.setEnable = function (enable) {
+        this.enable = enable;
+        if (!enable) {
+            this.resetData();
+        }
+    };
+    // 重置数据
+    ProximityConnect.prototype.resetData = function () {
+        this.closestNode = undefined;
+        this.currentDistance = Infinity;
+        this.currentNode = undefined;
+        this.currentAnchor = undefined;
+        this.closestAnchor = undefined;
+        this.virtualEdge = undefined;
+    };
+    ProximityConnect.pluginName = 'proximityConnect';
+    return ProximityConnect;
+}());
+exports.ProximityConnect = ProximityConnect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.0.8"
+    "@logicflow/core": "2.0.10"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -31,7 +31,7 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.0.8"
+    "@logicflow/core": "2.0.10"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/components/selection-select/index.ts

@@ -166,18 +166,20 @@ export class SelectionSelect {
         true,
       )
       const { dynamicGroup, group } = this.lf.graphModel
+      const nonGroupedElements: typeof elements = []
       elements.forEach((element) => {
         // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
-        if (!group || !group.getNodeGroup(element.id)) {
-          this.lf.selectElementById(element.id, true)
+        if (group && group.getNodeGroup(element.id)) {
+          return
         }
-        // 如果节点属于动态分组，则不不选中节点
-        if (!dynamicGroup || !dynamicGroup.getGroupByNodeId(element.id)) {
-          this.lf.selectElementById(element.id, true)
+        if (dynamicGroup && dynamicGroup.getGroupByNodeId(element.id)) {
+          return
         }
+        this.lf.selectElementById(element.id, true)
+        nonGroupedElements.push(element)
       })
       this.lf.emit('selection:selected', {
-        elements,
+        elements: nonGroupedElements,
         leftTopPoint: lt,
         rightBottomPoint: rb,
       })

package/src/dynamic-group/model.ts

@@ -181,6 +181,35 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
     return data
   }
 
+  /**
+   * 获取分组内的节点
+   * @param groupModel
+   */
+  getNodesInGroup(groupModel: DynamicGroupNodeModel): string[] {
+    const nodeIds: string[] = []
+    if (groupModel.isGroup) {
+      forEach(Array.from(groupModel.children), (nodeId: string) => {
+        nodeIds.push(nodeId)
+      })
+    }
+    return nodeIds
+  }
+
+  getMoveDistance(
+    deltaX: number,
+    deltaY: number,
+    isIgnoreRule = false,
+  ): [number, number] {
+    const [moveDeltaX, moveDeltaY] = super.getMoveDistance(
+      deltaX,
+      deltaY,
+      isIgnoreRule,
+    )
+    const nodeIds = this.getNodesInGroup(this)
+    this.graphModel.moveNodes(nodeIds, deltaX, deltaY, isIgnoreRule)
+    return [moveDeltaX, moveDeltaY]
+  }
+
   /**
    * 重写 getHistoryData 方法
    */

package/src/dynamic-group/node.ts

@@ -106,24 +106,27 @@ export class DynamicGroupNode<
     }
   }
 
-  onNodeMouseMove = ({
-    deltaX,
-    deltaY,
-    data,
-  }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => {
-    const { model: curGroup, graphModel } = this.props
-    const { transformModel } = graphModel
-    const { SCALE_X, SCALE_Y } = transformModel
-    if (data.id === curGroup.id) {
-      const nodeIds = this.getNodesInGroup(curGroup, graphModel)
-      // https://github.com/didi/LogicFlow/issues/1914
-      // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
-      // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
-      // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
-      // 因此这里需要增加SCALE的处理
-      graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true)
+  onNodeMouseMove = () =>
+    // {
+    // deltaX,
+    // deltaY,
+    // data,
+    // }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>
+    {
+      // console.log(data,deltaX,deltaY,'111')
+      // const { model: curGroup, graphModel } = this.props
+      // const { transformModel } = graphModel
+      // const { SCALE_X, SCALE_Y } = transformModel
+      // if (data.id === curGroup.id) {
+      //   const nodeIds = this.getNodesInGroup(curGroup, graphModel)
+      //   // https://github.com/didi/LogicFlow/issues/1914
+      //   // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
+      //   // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
+      //   // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
+      //   // 因此这里需要增加SCALE的处理
+      //   graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true)
+      // }
     }
-  }
 
   graphRendered = () => {
     const { model } = this.props
@@ -169,6 +172,7 @@ export class DynamicGroupNode<
   /**
    * 获取分组内的节点
    * @param groupModel
+   * @param graphModel
    */
   getNodesInGroup(
     groupModel: DynamicGroupNodeModel,

package/src/tools/label/Label.tsx

@@ -182,6 +182,14 @@ export class Label extends Component<ILabelProps, ILabelState> {
     })
   }
 
+  handleInput = (e: InputEvent) => {
+    const { label, graphModel } = this.props
+    graphModel.eventCenter.emit('label:input', {
+      e,
+      data: label.getData(),
+    })
+  }
+
   setElementModelLabelInfo(data) {
     const { label, element, graphModel } = this.props
     const {
@@ -330,6 +338,7 @@ export class Label extends Component<ILabelProps, ILabelState> {
             'lf-label-editor-hover': !isEditing && (isHovered || isSelected),
             [`lf-label-editor-${textOverflowMode}`]: !isEditing,
           })}
+          onInput={this.handleInput}
           style={{
             maxWidth: `${maxLabelWidth}px`,
             boxSizing: 'border-box',

package/src/tools/label/index.ts

@@ -221,8 +221,12 @@ export class Label implements Extension {
       editable: true,
       vertical: false,
     }
-
-    if (!isMultiple || len >= (curLabelOption?.maxCount ?? maxCount)) {
+    // 全局的isMultiple为false，或全局isMultiple为true但局部isMultiple指明是false，或当前label长度已经达到上线时，不允许添加多个 label
+    if (
+      !isMultiple ||
+      (isMultiple && curLabelOption.isMultiple === false) ||
+      len >= (curLabelOption?.maxCount ?? maxCount)
+    ) {
       return
     }