@logicflow/extension 2.0.16 → 2.0.18

package/es/components/highlight/index.js

@@ -34,7 +34,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { concat } from 'lodash-es';
+import { uniqBy, concat } from 'lodash-es';
 // 后续并入FlowPath
 var getPath = function (id, lf) {
     var el = lf.getModelById(id);
@@ -131,10 +131,14 @@ var Highlight = /** @class */ (function () {
             model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id]);
             model.targetNode.updateStyles(this.tempStyles[model.targetNode.id]);
         }
+        this.lf.emit('highlight:single', {
+            data: model,
+        });
     };
     Highlight.prototype.highlightNeighbours = function (id) {
         var _this = this;
         var model = this.lf.getModelById(id);
+        var relateElements = [];
         if ((model === null || model === void 0 ? void 0 : model.BaseType) === 'node') {
             // 高亮节点
             model.updateStyles(this.tempStyles[id]);
@@ -146,21 +150,33 @@ var Highlight = /** @class */ (function () {
             concat(incomingEdges, outgoingEdges).forEach(function (edge) {
                 edge.updateStyles(_this.tempStyles[edge.id]);
             });
+            relateElements = uniqBy(concat(relateElements, incomingNodes, outgoingNodes, incomingEdges, outgoingEdges), 'id');
         }
         else if ((model === null || model === void 0 ? void 0 : model.BaseType) === 'edge') {
             // 高亮边及对应的节点
             model.updateStyles(this.tempStyles[id]);
             model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id]);
             model.targetNode.updateStyles(this.tempStyles[model.targetNode.id]);
+            relateElements = [model.sourceNode, model.targetNode];
         }
+        this.lf.emit('highlight:neighbours', {
+            data: model,
+            relateElements: relateElements,
+        });
     };
     Highlight.prototype.highlightPath = function (id) {
         var _this = this;
         var path = getPath(id, this.lf);
+        var relateElements = [];
         path.forEach(function (_id) {
-            var _a;
+            var elementModel = _this.lf.getModelById(_id);
             // 高亮路径上所有的边和节点
-            (_a = _this.lf.getModelById(_id)) === null || _a === void 0 ? void 0 : _a.updateStyles(_this.tempStyles[_id]);
+            elementModel === null || elementModel === void 0 ? void 0 : elementModel.updateStyles(_this.tempStyles[_id]);
+            relateElements.push(elementModel);
+        });
+        this.lf.emit('highlight:path', {
+            data: this.lf.getModelById(id),
+            relateElements: relateElements,
         });
     };
     Highlight.prototype.highlight = function (id, mode) {

package/es/components/selection-select/index.d.ts

@@ -1,4 +1,7 @@
 import LogicFlow from '@logicflow/core';
+export interface SelectionConfig {
+    exclusiveMode?: boolean;
+}
 export declare class SelectionSelect {
     static pluginName: string;
     private container?;
@@ -9,11 +12,30 @@ export declare class SelectionSelect {
     private disabled;
     private isWholeNode;
     private isWholeEdge;
+    exclusiveMode: boolean;
     private mouseDownInfo;
-    constructor({ lf }: LogicFlow.IExtensionProps);
+    private originalStopMoveGraph;
+    constructor({ lf, options }: LogicFlow.IExtensionProps);
     render(_: LogicFlow, domContainer: HTMLElement): void;
-    onToolContainerMouseDown: (e: MouseEvent) => void;
-    onToolContainerMouseUp: (e: MouseEvent) => void;
+    /**
+     * 清理选区状态
+     */
+    private cleanupSelectionState;
+    /**
+     * 切换框选模式
+     * @param exclusive 是否为独占模式。true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
+     */
+    setExclusiveMode(exclusive?: boolean): void;
+    private addEventListeners;
+    private removeEventListeners;
+    /**
+     * 处理画布空白处鼠标按下事件（非独占模式）
+     */
+    private handleBlankMouseDown;
+    /**
+     * 处理鼠标按下事件
+     */
+    private handleMouseDown;
     /**
      * 设置选中的灵敏度
      * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true

package/es/components/selection-select/index.js

@@ -1,69 +1,48 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { cloneDeep } from 'lodash-es';
 var SelectionSelect = /** @class */ (function () {
     function SelectionSelect(_a) {
-        var lf = _a.lf;
+        var lf = _a.lf, options = _a.options;
         var _this = this;
+        var _b;
         this.disabled = true;
         this.isWholeNode = true;
         this.isWholeEdge = true;
+        this.exclusiveMode = false; // 框选独占模式：true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
         // 用于区分选区和点击事件
         this.mouseDownInfo = null;
-        this.onToolContainerMouseDown = function (e) {
-            // 避免在其他插件元素上点击时开启选区
-            if (e.target !== _this.container) {
-                return;
-            }
-            _this.mouseDownInfo = {
-                x: e.clientX,
-                y: e.clientY,
-                time: Date.now(),
-            };
-            var lf = _this.lf;
-            var domContainer = _this.container;
-            if (!domContainer) {
-                return;
-            }
-            if (_this.disabled) {
-                return;
-            }
-            // 禁用右键框选，修复可能导致画布出现多个框选框不消失的问题，见https://github.com/didi/LogicFlow/issues/985
-            var isRightClick = e.button === 2;
-            if (isRightClick) {
-                return;
-            }
-            var _a = lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _a.x, y = _a.y;
-            _this.startPoint = {
-                x: x,
-                y: y,
-            };
-            _this.endPoint = {
-                x: x,
-                y: y,
-            };
-            var wrapper = document.createElement('div');
-            wrapper.className = 'lf-selection-select';
-            wrapper.oncontextmenu = function prevent(ev) {
-                ev.preventDefault();
-            };
-            wrapper.style.top = "".concat(_this.startPoint.y, "px");
-            wrapper.style.left = "".concat(_this.startPoint.x, "px");
-            domContainer.appendChild(wrapper);
-            _this.wrapper = wrapper;
-            document.addEventListener('mousemove', _this.draw);
-            document.addEventListener('mouseup', _this.drawOff);
-        };
-        this.onToolContainerMouseUp = function (e) {
-            if (_this.mouseDownInfo) {
-                var _a = _this.mouseDownInfo, x = _a.x, y = _a.y, time = _a.time;
-                var now = Date.now();
-                // 用 mouseDown 和 mouseUp 的位置偏移及时间间隔来判断是否是点击事件
-                var isClickEvent = Math.abs(e.clientX - x) < 10 &&
-                    Math.abs(e.clientY - y) < 10 &&
-                    now - time < 100;
-                if (isClickEvent) {
-                    _this.lf.clearSelectElements();
-                }
-                _this.mouseDownInfo = null;
-            }
+        // 记录原始的 stopMoveGraph 设置
+        this.originalStopMoveGraph = false;
+        /**
+         * 处理画布空白处鼠标按下事件（非独占模式）
+         */
+        this.handleBlankMouseDown = function (_a) {
+            var e = _a.e;
+            _this.handleMouseDown(e);
         };
         this.draw = function (ev) {
             var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
@@ -93,17 +72,33 @@ var SelectionSelect = /** @class */ (function () {
                 }
             }
         };
-        this.drawOff = function () {
-            var _a;
+        this.drawOff = function (e) {
+            // 处理鼠标抬起事件
+            // 首先判断是否是点击，如果是，则清空框选
+            if (_this.mouseDownInfo) {
+                var _a = _this.mouseDownInfo, x = _a.x, y = _a.y, time = _a.time;
+                var isClick = Math.abs(e.clientX - x) < 5 &&
+                    Math.abs(e.clientY - y) < 5 &&
+                    Date.now() - time < 200;
+                if (isClick) {
+                    _this.lf.clearSelectElements();
+                    _this.cleanupSelectionState();
+                    return;
+                }
+            }
+            var curStartPoint = cloneDeep(_this.startPoint);
+            var curEndPoint = cloneDeep(_this.endPoint);
             document.removeEventListener('mousemove', _this.draw);
-            document.removeEventListener('mouseup', _this.drawOff);
-            if (_this.wrapper) {
-                _this.wrapper.oncontextmenu = null;
-                (_a = _this.container) === null || _a === void 0 ? void 0 : _a.removeChild(_this.wrapper);
+            if (!_this.exclusiveMode) {
+                document.removeEventListener('mouseup', _this.drawOff);
             }
-            if (_this.startPoint && _this.endPoint) {
-                var _b = _this.startPoint, x = _b.x, y = _b.y;
-                var _c = _this.endPoint, x1 = _c.x, y1 = _c.y;
+            // 恢复原始的 stopMoveGraph 设置
+            _this.lf.updateEditConfig({
+                stopMoveGraph: _this.originalStopMoveGraph,
+            });
+            if (curStartPoint && curEndPoint) {
+                var x = curStartPoint.x, y = curStartPoint.y;
+                var x1 = curEndPoint.x, y1 = curEndPoint.y;
                 // 返回框选范围，左上角和右下角的坐标
                 var lt = [Math.min(x, x1), Math.min(y, y1)];
                 var rb = [Math.max(x, x1), Math.max(y, y1)];
@@ -113,11 +108,21 @@ var SelectionSelect = /** @class */ (function () {
                 });
                 // 选区太小的情况就忽略
                 if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
+                    if (_this.wrapper) {
+                        _this.wrapper.oncontextmenu = null;
+                        if (_this.container && _this.wrapper.parentNode === _this.container) {
+                            _this.container.removeChild(_this.wrapper);
+                        }
+                        _this.wrapper = undefined;
+                    }
                     return;
                 }
                 var elements_1 = _this.lf.graphModel.getAreaElement(lt, rb, _this.isWholeEdge, _this.isWholeNode, true);
-                var _d = _this.lf.graphModel, dynamicGroup_1 = _d.dynamicGroup, group_1 = _d.group;
+                var _b = _this.lf.graphModel, dynamicGroup_1 = _b.dynamicGroup, group_1 = _b.group;
                 var nonGroupedElements_1 = [];
+                var selectedElements = _this.lf.getSelectElements();
+                // 同时记录节点和边的ID
+                var selectedIds_1 = new Set(__spreadArray(__spreadArray([], __read(selectedElements.nodes.map(function (node) { return node.id; })), false), __read(selectedElements.edges.map(function (edge) { return edge.id; })), false));
                 elements_1.forEach(function (element) {
                     // 如果节点属于分组，则不选中节点，此处兼容旧版 Group 插件
                     if (group_1) {
@@ -134,17 +139,40 @@ var SelectionSelect = /** @class */ (function () {
                             return;
                         }
                     }
+                    // 在独占模式下，如果元素已经被选中，则取消选中
+                    if (_this.exclusiveMode && selectedIds_1.has(element.id)) {
+                        _this.lf.deselectElementById(element.id);
+                        return;
+                    }
+                    // 非独占模式下，或者元素未被选中时，选中元素
                     _this.lf.selectElementById(element.id, true);
                     nonGroupedElements_1.push(element);
                 });
+                // 重置起始点和终点
+                // 注意：这两个值必须在触发closeSelectionSelect方法前充值，否则会导致独占模式下元素无法选中的问题
+                _this.startPoint = undefined;
+                _this.endPoint = undefined;
+                // 如果有选中的元素，触发 selection:drop 事件
+                if (nonGroupedElements_1.length > 0) {
+                    _this.lf.emit('selection:drop', { e: e });
+                }
+                // 触发 selection:selected 事件
                 _this.lf.emit('selection:selected', {
                     elements: nonGroupedElements_1,
                     leftTopPoint: lt,
                     rightBottomPoint: rb,
                 });
             }
+            if (_this.wrapper) {
+                _this.wrapper.oncontextmenu = null;
+                if (_this.container && _this.wrapper.parentNode === _this.container) {
+                    _this.container.removeChild(_this.wrapper);
+                }
+                _this.wrapper = undefined;
+            }
         };
         this.lf = lf;
+        this.exclusiveMode = (_b = options === null || options === void 0 ? void 0 : options.exclusiveMode) !== null && _b !== void 0 ? _b : false;
         // TODO: 有没有既能将方法挂载到lf上，又能提供类型提示的方法？
         lf.openSelectionSelect = function () {
             _this.openSelectionSelect();
@@ -152,10 +180,115 @@ var SelectionSelect = /** @class */ (function () {
         lf.closeSelectionSelect = function () {
             _this.closeSelectionSelect();
         };
+        // 新增切换独占模式的方法
+        lf.setSelectionSelectMode = function (exclusive) {
+            _this.setExclusiveMode(exclusive);
+        };
+        // 绑定方法的 this 上下文
+        this.handleMouseDown = this.handleMouseDown.bind(this);
+        this.draw = this.draw.bind(this);
+        this.drawOff = this.drawOff.bind(this);
     }
     SelectionSelect.prototype.render = function (_, domContainer) {
         this.container = domContainer;
     };
+    /**
+     * 清理选区状态
+     */
+    SelectionSelect.prototype.cleanupSelectionState = function () {
+        // 清理当前的选区状态
+        if (this.wrapper) {
+            this.wrapper.oncontextmenu = null;
+            if (this.container && this.wrapper.parentNode === this.container) {
+                this.container.removeChild(this.wrapper);
+            }
+            this.wrapper = undefined;
+        }
+        this.startPoint = undefined;
+        this.endPoint = undefined;
+        this.mouseDownInfo = null;
+        // 移除事件监听
+        document.removeEventListener('mousemove', this.draw);
+        document.removeEventListener('mouseup', this.drawOff);
+    };
+    /**
+     * 切换框选模式
+     * @param exclusive 是否为独占模式。true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
+     */
+    SelectionSelect.prototype.setExclusiveMode = function (exclusive) {
+        if (exclusive === void 0) { exclusive = false; }
+        if (this.exclusiveMode === exclusive)
+            return;
+        this.cleanupSelectionState();
+        this.exclusiveMode = exclusive;
+        if (this.container && !this.disabled) {
+            // 切换事件监听方式
+            this.removeEventListeners();
+            this.addEventListeners();
+        }
+    };
+    SelectionSelect.prototype.addEventListeners = function () {
+        if (!this.container)
+            return;
+        if (this.exclusiveMode) {
+            // 独占模式：监听 container 的 mousedown 事件
+            this.container.style.pointerEvents = 'auto';
+            this.container.addEventListener('mousedown', this.handleMouseDown);
+        }
+        else {
+            // 非独占模式：监听画布的 blank:mousedown 事件
+            this.container.style.pointerEvents = 'none';
+            // 使用实例方法而不是箭头函数，这样可以正确移除事件监听
+            this.lf.on('blank:mousedown', this.handleBlankMouseDown);
+        }
+    };
+    SelectionSelect.prototype.removeEventListeners = function () {
+        if (this.container) {
+            this.container.style.pointerEvents = 'none';
+            this.container.removeEventListener('mousedown', this.handleMouseDown);
+        }
+        // 移除 blank:mousedown 事件监听
+        this.lf.off('blank:mousedown', this.handleBlankMouseDown);
+    };
+    /**
+     * 处理鼠标按下事件
+     */
+    SelectionSelect.prototype.handleMouseDown = function (e) {
+        var _a;
+        if (!this.container || this.disabled)
+            return;
+        // 禁用右键框选
+        var isRightClick = e.button === 2;
+        if (isRightClick)
+            return;
+        // 清理之前可能存在的选区状态
+        this.cleanupSelectionState();
+        // 记录鼠标按下时的位置和时间
+        this.mouseDownInfo = {
+            x: e.clientX,
+            y: e.clientY,
+            time: Date.now(),
+        };
+        // 记录原始设置并临时禁止画布移动
+        this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+        this.lf.updateEditConfig({
+            stopMoveGraph: true,
+        });
+        var _b = this.lf.getPointByClient(e.clientX, e.clientY).domOverlayPosition, x = _b.x, y = _b.y;
+        this.startPoint = { x: x, y: y };
+        this.endPoint = { x: x, y: y };
+        var wrapper = document.createElement('div');
+        wrapper.className = 'lf-selection-select';
+        wrapper.oncontextmenu = function prevent(ev) {
+            ev.preventDefault();
+        };
+        wrapper.style.top = "".concat(this.startPoint.y, "px");
+        wrapper.style.left = "".concat(this.startPoint.x, "px");
+        (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(wrapper);
+        this.wrapper = wrapper;
+        document.addEventListener('mousemove', this.draw);
+        document.addEventListener('mouseup', this.drawOff);
+    };
     /**
      * 设置选中的灵敏度
      * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true
@@ -177,11 +310,8 @@ var SelectionSelect = /** @class */ (function () {
         if (!this.container) {
             return;
         }
-        this.mouseDownInfo = null;
-        this.container.addEventListener('mousedown', this.onToolContainerMouseDown);
-        this.container.addEventListener('mouseup', this.onToolContainerMouseUp);
-        // 取消点击事件的穿透，只让 ToolOverlay 接收事件，避免与图形元素的事件冲突
-        this.container.style.pointerEvents = 'auto';
+        this.cleanupSelectionState();
+        this.addEventListeners();
         this.open();
     };
     /**
@@ -191,10 +321,18 @@ var SelectionSelect = /** @class */ (function () {
         if (!this.container) {
             return;
         }
-        this.container.style.pointerEvents = 'none';
-        this.mouseDownInfo = null;
-        this.container.removeEventListener('mousedown', this.onToolContainerMouseDown);
-        this.container.removeEventListener('mouseup', this.onToolContainerMouseUp);
+        // 如果还有未完成的框选，先触发 drawOff 完成框选
+        if (this.wrapper && this.startPoint && this.endPoint) {
+            // 记录上一次的结束点，用于触发 mouseup 事件
+            var lastEndPoint = cloneDeep(this.endPoint);
+            var lastEvent = new MouseEvent('mouseup', {
+                clientX: lastEndPoint.x,
+                clientY: lastEndPoint.y,
+            });
+            this.drawOff(lastEvent);
+        }
+        this.cleanupSelectionState();
+        this.removeEventListeners();
         this.close();
     };
     SelectionSelect.prototype.open = function () {

package/es/dynamic-group/index.js

@@ -105,7 +105,6 @@ var DynamicGroup = /** @class */ (function () {
                 var group = _this.getGroupByBounds(bounds, node);
                 if (group) {
                     var isAllowAppendIn = group.isAllowAppendIn(node);
-                    console.log('isAllowAppendIn', isAllowAppendIn);
                     if (isAllowAppendIn) {
                         group.addChild(node.id);
                         // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
@@ -123,7 +122,6 @@ var DynamicGroup = /** @class */ (function () {
         };
         this.onGroupAddNode = function (_a) {
             var groupData = _a.data, childId = _a.childId;
-            console.log('group:add-node', groupData);
             _this.nodeGroupMap.set(childId, groupData.id);
         };
         this.removeNodeFromGroup = function (_a) {
@@ -166,7 +164,6 @@ var DynamicGroup = /** @class */ (function () {
                 if (!isAllowAppendIn)
                     return;
                 _this.activeGroup = targetGroup;
-                console.log('this.activeGroup', _this.activeGroup);
                 _this.activeGroup.setAllowAppendChild(true);
             }
         };
@@ -276,7 +273,6 @@ var DynamicGroup = /** @class */ (function () {
         };
         this.onGraphRendered = function (_a) {
             var data = _a.data;
-            console.log('data', data);
             forEach(data.nodes, function (node) {
                 if (node.children) {
                     forEach(node.children, function (childId) {
@@ -453,8 +449,6 @@ var DynamicGroup = /** @class */ (function () {
                 }
             }
         });
-        // TODO: 确认，递归的方式，是否将所有嵌套的边数据都有返回
-        console.log('allRelatedEdges -->>', allRelatedEdges);
         // 1. 判断每一条边的开始节点、目标节点是否在 Group 中
         var edgesInnerGroup = filter(allRelatedEdges, function (edge) {
             return (has(nodeIdMap, edge.sourceNodeId) && has(nodeIdMap, edge.targetNodeId));
@@ -591,10 +585,6 @@ var DynamicGroup = /** @class */ (function () {
         lf.on('node:click', this.onNodeSelect);
         lf.on('node:mousemove', this.onNodeMove);
         lf.on('graph:rendered', this.onGraphRendered);
-        lf.on('graph:updated', function (_a) {
-            var data = _a.data;
-            return console.log('data', data);
-        });
         lf.on('group:add-node', this.onGroupAddNode);
         // https://github.com/didi/LogicFlow/issues/1346
         // 重写 addElements() 方法，在 addElements() 原有基础上增加对 group 内部所有 nodes 和 edges 的复制功能
@@ -628,7 +618,6 @@ var DynamicGroup = /** @class */ (function () {
             forEach(edgesInnerGroup, function (edge) {
                 _this.createEdge(edge, nodeIdMap, distance);
             });
-            console.log('selectedEdges --->>>', selectedEdges);
             forEach(selectedEdges, function (edge) {
                 elements.edges.push(_this.createEdge(edge, nodeIdMap, distance));
             });

package/es/materials/group/GroupNode.js

@@ -326,7 +326,6 @@ var GroupNodeModel = /** @class */ (function (_super) {
         var _this = this;
         var data = _super.prototype.getData.call(this);
         data.children = [];
-        console.log('this.children', this.children);
         this.children.forEach(function (childId) {
             var model = _this.graphModel.getNodeModelById(childId);
             if (model && !model.virtual) {