@logicflow/extension 2.0.12 → 2.0.13

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

@@ -0,0 +1,337 @@
+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);
+};
+import { twoPointDistance, } from '@logicflow/core';
+import { assign, isEmpty, isEqual, isNil, isFinite, reduce } from '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;
+        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 (!isNil(this.virtualEdge)) {
+            var _a = this.virtualEdge, startPoint = _a.startPoint, endPoint = _a.endPoint, id = _a.id;
+            var curDistance = 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 (isNil(x) || isNil(y))
+            return;
+        var currentPoint = { x: x, y: y };
+        var nodes = graphModel.nodes;
+        // 判断当前是否有虚拟连线，有的话判断两点距离是否超过阈值，超过的话删除连线
+        if (!isNil(this.virtualEdge)) {
+            var _b = this.virtualEdge, endPoint = _b.endPoint, id = _b.id;
+            var curDistance = 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 (isNil(draggingNode) || 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 (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 = 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 (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 (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 = 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 (isNil(this.closestNode) ||
+            isNil(this.currentNode) ||
+            isNil(this.closestAnchor) ||
+            isNil(this.currentAnchor))
+            return false;
+        if (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
+            ? isEqual(closestNodeId, sourceNodeId) &&
+                isEqual(currentNodeId, targetNodeId) &&
+                isEqual(closestAnchorId, sourceAnchorId) &&
+                isEqual(currentAnchorId, targetAnchorId)
+            : isEqual(currentNodeId, sourceNodeId) &&
+                isEqual(closestNodeId, targetNodeId) &&
+                isEqual(currentAnchorId, sourceAnchorId) &&
+                isEqual(closestAnchorId, targetAnchorId);
+        return isExist;
+    };
+    // 增加虚拟边
+    ProximityConnect.prototype.addVirtualEdge = function () {
+        var _this = this;
+        var edges = this.lf.graphModel.edges;
+        // 判断当前是否已存在一条同样配置的真实边
+        var actualEdgeIsExist = reduce(edges, function (result, edge) {
+            if (edge.virtual)
+                return result;
+            return result || _this.sameEdgeIsExist(edge);
+        }, false);
+        // 如果有真实边就不重复创建边了
+        if (actualEdgeIsExist)
+            return;
+        // 判断当前是否有虚拟边
+        // 如果当前已有虚拟边，判断当前的节点和锚点信息与虚拟边的信息是否一致
+        if (!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 (isEmpty(currentNode) || 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 (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 (!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;
+}());
+export { ProximityConnect };

package/lib/bpmn-elements/presets/Pool/Pool.d.ts

@@ -24,8 +24,8 @@ export declare class HorizontalLaneModel extends GroupNodeModel {
         color?: string | undefined;
         fontSize: number;
         lineHeight?: number | undefined;
-        textAnchor?: "start" | "end" | "middle" | undefined;
-        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
     };
     foldGroup(isFolded: boolean): void;
     resizePool(resizeId?: string, newNodeSize?: {

package/lib/components/mini-map/index.d.ts

@@ -151,6 +151,7 @@ export declare class MiniMap {
      */
     private disabledPlugins;
     constructor({ lf, LogicFlow, options }: LogicFlow.IExtensionProps);
+    onGraphResize: () => void;
     render: (_: LogicFlow, container: HTMLElement) => void;
     /**
      * 显示小地图
@@ -232,5 +233,6 @@ export declare class MiniMap {
      * 点击小地图中非预览视窗的区域时，移动主画布视口聚焦于点击位置
      */
     private mapClick;
+    destroy(): void;
 }
 export default MiniMap;

package/lib/components/mini-map/index.js

@@ -71,6 +71,12 @@ var MiniMap = /** @class */ (function () {
          * 小地图的logicFlow实例需要禁用的插件
          */
         this.disabledPlugins = ['miniMap', 'control', 'selectionSelect'];
+        this.onGraphResize = function () {
+            _this.updateViewPortBounds();
+            if (_this.isShow) {
+                _this.updateViewPort();
+            }
+        };
         this.render = function (_, container) {
             _this.container = container;
             _this.lf.on('history:change', function () {
@@ -230,6 +236,7 @@ var MiniMap = /** @class */ (function () {
         this.elementAreaBounds = boundsInit;
         this.viewPortBounds = boundsInit;
         this.initMiniMap();
+        lf.on('graph:resize', this.onGraphResize);
     }
     /**
      * 初始化小地图的配置
@@ -511,6 +518,9 @@ var MiniMap = /** @class */ (function () {
         });
         this.viewport = div;
     };
+    MiniMap.prototype.destroy = function () {
+        this.lf.off('graph:resize', this.onGraphResize);
+    };
     MiniMap.pluginName = 'miniMap';
     return MiniMap;
 }());