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

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

@@ -47,8 +47,6 @@ declare class GroupNodeModel extends RectResize.model {
      */
     foldGroup(isFolded: any): void;
     getAnchorStyle(anchorInfo: any): Record<string, any>;
-    foldRect(isFolded: any): void;
-    foldChildren(isFolded: any): import("@logicflow/core/types/model/edge/BaseEdgeModel").BaseEdgeModel[];
     /**
      * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
      * 边的分类：
@@ -92,10 +90,6 @@ declare class GroupNodeModel extends RectResize.model {
      * @param id 节点id
      */
     removeChild(id: any): void;
-    /**
-     * 获得包含嵌套组的所有子节点
-     */
-    getChildren(): any[];
     getAddableOutlineStyle(): {
         stroke: string;
         strokeWidth: number;
@@ -108,10 +102,14 @@ declare class GroupNodeModel extends RectResize.model {
      * 是否允许此节点添加到此分组中
      */
     isAllowAppendIn(nodeData: any): boolean;
+    /**
+     * 当groupA被添加到groupB中时，将groupB及groupB所属的group的zIndex减1
+     */
+    toBack(): void;
 }
 declare class GroupNode extends RectResize.view {
     getControlGroup(): h.JSX.Element;
-    getAddAbleShape(): import("preact").VNode<any>;
+    getAddableShape(): import("preact").VNode<any>;
     getFoldIcon(): import("preact").VNode<any>;
     getResizeShape(): import("preact").VNode<any>;
 }

package/es/materials/group/GroupNode.js

@@ -46,6 +46,7 @@ import { h } from '@logicflow/core';
 import { RectResize } from '../../NodeResize';
 var defaultWidth = 500;
 var defaultHeight = 300;
+var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
@@ -68,8 +69,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.height = defaultHeight;
         this.foldedWidth = 80;
         this.foldedHeight = 60;
-        // todo: 参考bpmn.js, 分组和未加入分组的节点重合时，未加入分组的节点在分组之下。方便标识。
-        this.zIndex = -1;
+        this.zIndex = DEFAULT_BOTTOM_Z_INDEX;
         this.radius = 0;
         this.text.editable = false;
         this.text.draggable = false;
@@ -77,8 +77,6 @@ var GroupNodeModel = /** @class */ (function (_super) {
         this.resizable = false;
         this.autoToFront = false;
         this.foldable = false;
-        // 是否可以被嵌套
-        this.nestable = false;
         if (this.properties.isFolded === undefined) {
             this.properties.isFolded = false;
         }
@@ -102,60 +100,41 @@ var GroupNodeModel = /** @class */ (function (_super) {
      * 3. 处理连线
      */
     GroupNodeModel.prototype.foldGroup = function (isFolded) {
+        var _this = this;
         this.setProperty('isFolded', isFolded);
         this.isFolded = isFolded;
         // step 1
-        this.foldRect(isFolded);
-        // step 2
-        var allEdges = this.foldChildren(isFolded);
-        // step 3
-        console.log({ allEdges: allEdges });
-        this.foldEdge(isFolded, allEdges);
-    };
-    GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
-        var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
-        style.stroke = 'transparent';
-        style.fill = 'transparent';
-        style.hover.fill = 'transparent';
-        style.hover.stroke = 'transparent';
-        return style;
-    };
-    GroupNodeModel.prototype.foldRect = function (isFolded) {
         if (isFolded) {
+            this.x = this.x - this.width / 2 + this.foldedWidth / 2;
+            this.y = this.y - this.height / 2 + this.foldedHeight / 2;
             this.unfoldedWidth = this.width;
             this.unfoldedHight = this.height;
-            this.updateAttributes({
-                x: this.x - this.width / 2 + this.foldedWidth / 2,
-                y: this.y - this.height / 2 + this.foldedHeight / 2,
-                width: this.foldedWidth,
-                height: this.foldedHeight,
-            });
+            this.width = this.foldedWidth;
+            this.height = this.foldedHeight;
         }
         else {
-            this.updateAttributes({
-                width: this.unfoldedWidth,
-                height: this.unfoldedHight,
-                x: this.x + this.unfoldedWidth / 2 - this.foldedWidth / 2,
-                y: this.y + this.unfoldedHight / 2 - this.foldedHeight / 2,
-            });
+            this.width = this.unfoldedWidth;
+            this.height = this.unfoldedHight;
+            this.x = this.x + this.width / 2 - this.foldedWidth / 2;
+            this.y = this.y + this.height / 2 - this.foldedHeight / 2;
         }
-    };
-    GroupNodeModel.prototype.foldChildren = function (isFolded) {
-        var _this = this;
+        // step 2
         var allEdges = this.incoming.edges.concat(this.outgoing.edges);
         this.children.forEach(function (elementId) {
             var nodeModel = _this.graphModel.getElement(elementId);
-            if (nodeModel.isGroup) {
-                var childEdges = nodeModel.foldChildren(isFolded || nodeModel.isFolded);
-                allEdges = allEdges.concat(childEdges);
-                nodeModel.foldEdge(isFolded, childEdges);
-            }
+            nodeModel.visible = !isFolded;
             allEdges = allEdges.concat(nodeModel.incoming.edges.concat(nodeModel.outgoing.edges));
-            nodeModel.updateAttributes({
-                visible: !isFolded,
-            });
         });
-        return allEdges;
+        // step 3
+        this.foldEdge(isFolded, allEdges);
+    };
+    GroupNodeModel.prototype.getAnchorStyle = function (anchorInfo) {
+        var style = _super.prototype.getAnchorStyle.call(this, anchorInfo);
+        style.stroke = 'transparent';
+        style.fill = 'transparent';
+        style.hover.fill = 'transparent';
+        style.hover.stroke = 'transparent';
+        return style;
     };
     /**
      * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
@@ -215,9 +194,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
                 if (targetNodeIdGroup.id !== _this.id || sourceNodeIdGroup.id !== _this.id) {
                     _this.createVirtualEdge(data);
                 }
-                edgeModel.updateAttributes({
-                    visible: false,
-                });
+                edgeModel.visible = false;
             }
             // 展开时，处理被隐藏的边的逻辑
             if (!isFolded && edgeModel.visible === false) {
@@ -233,9 +210,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
                     _this.createVirtualEdge(data);
                 }
                 else {
-                    edgeModel.updateAttributes({
-                        visible: true,
-                    });
+                    edgeModel.visible = true;
                 }
             }
         });
@@ -280,19 +255,6 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
     };
-    /**
-     * 获得包含嵌套组的所有子节点
-     */
-    GroupNodeModel.prototype.getChildren = function () {
-        var _this = this;
-        return __spread(this.children).flatMap(function (child) {
-            var model = _this.graphModel.getElement(child);
-            if (model.isGroup) {
-                return __spread([child], model.getChildren());
-            }
-            return child;
-        });
-    };
     GroupNodeModel.prototype.getAddableOutlineStyle = function () {
         return {
             stroke: '#FEB663',
@@ -312,6 +274,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.getHistoryData = function () {
         var data = _super.prototype.getData.call(this);
         data.children = __spread(this.children);
+        data.isGroup = true;
         var properties = data.properties;
         delete properties.groupAddable;
         if (properties.isFolded) { // 如果分组被折叠
@@ -326,6 +289,12 @@ var GroupNodeModel = /** @class */ (function (_super) {
     GroupNodeModel.prototype.isAllowAppendIn = function (nodeData) {
         return true;
     };
+    /**
+     * 当groupA被添加到groupB中时，将groupB及groupB所属的group的zIndex减1
+     */
+    GroupNodeModel.prototype.toBack = function () {
+        this.zIndex--;
+    };
     return GroupNodeModel;
 }(RectResize.model));
 var GroupNode = /** @class */ (function (_super) {
@@ -337,7 +306,7 @@ var GroupNode = /** @class */ (function (_super) {
         var _a = this.props.model, resizable = _a.resizable, properties = _a.properties;
         return resizable && !properties.isFolded ? _super.prototype.getControlGroup.call(this) : null;
     };
-    GroupNode.prototype.getAddAbleShape = function () {
+    GroupNode.prototype.getAddableShape = function () {
         var _a = this.props.model, width = _a.width, height = _a.height, x = _a.x, y = _a.y, radius = _a.radius, properties = _a.properties;
         if (!properties.groupAddable)
             return null;
@@ -383,7 +352,7 @@ var GroupNode = /** @class */ (function (_super) {
     };
     GroupNode.prototype.getResizeShape = function () {
         return h('g', {}, [
-            this.getAddAbleShape(),
+            this.getAddableShape(),
             _super.prototype.getResizeShape.call(this),
             this.getFoldIcon(),
         ]);

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

@@ -2,9 +2,16 @@ import LogicFlow, { BaseNodeModel } from '@logicflow/core';
 import GroupNode from './GroupNode';
 declare type BaseNodeId = string;
 declare type GroupId = string;
+declare type Bounds = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
 declare class Group {
     static pluginName: string;
     lf: LogicFlow;
+    topGroupZIndex: number;
     activeGroup: any;
     nodeGroupMap: Map<BaseNodeId, GroupId>;
     constructor({ lf }: {
@@ -24,10 +31,21 @@ declare class Group {
     setActiveGroup: ({ data }: {
         data: any;
     }) => void;
+    /**
+     * 1. 分组节点默认在普通节点下面。
+     * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。
+     * 3. 分组节点取消选中后，不会将分组节点重置为原来的高度。
+     * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
+     */
+    nodeSelected: ({ data }: {
+        data: any;
+    }) => void;
+    toFrontGroup: (model: any) => void;
     /**
      * 获取自定位置其所属分组
+     * 当分组重合时，优先返回最上层的分组
      */
-    getGroup(nodeModel: BaseNodeModel): BaseNodeModel | undefined;
+    getGroup(bounds: Bounds, nodeData: BaseNodeModel): BaseNodeModel | undefined;
     /**
      * 获取某个节点所属的groupModel
      */

package/es/materials/group/index.js

@@ -1,28 +1,11 @@
-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 __spread = (this && this.__spread) || function () {
-    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
-    return ar;
-};
 import GroupNode from './GroupNode';
+var DEFAULT_TOP_Z_INDEX = -1000;
+var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var Group = /** @class */ (function () {
     function Group(_a) {
         var _this = this;
         var lf = _a.lf;
+        this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
         this.nodeGroupMap = new Map();
         this.graphRendered = function (data) {
             // 如果节点
@@ -47,7 +30,9 @@ var Group = /** @class */ (function () {
                 preGroup.setAllowAppendChild(false);
             }
             // 然后再判断这个节点是否在某个group中，如果在，则将其添加到对应的group中
-            var group = _this.getGroup(_this.lf.getNodeModelById(data.id));
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            var bounds = nodeModel.getBounds();
+            var group = _this.getGroup(bounds, data);
             if (!group)
                 return;
             var isAllowAppendIn = group.isAllowAppendIn(data);
@@ -58,20 +43,26 @@ var Group = /** @class */ (function () {
                 });
                 return;
             }
-            if (data.id !== group.id) {
-                group.addChild(data.id);
-                _this.nodeGroupMap.set(data.id, group.id);
-                group.setAllowAppendChild(false);
-            }
-            else if (data.children && data.children.length > 0) {
-                // 表示当前添加的节点是一个新增的group
+            group.addChild(data.id);
+            _this.nodeGroupMap.set(data.id, group.id);
+            group.setAllowAppendChild(false);
+            // 如果这个节点是分组，那么将其子节点也记录下来
+            if (nodeModel.isGroup) {
                 data.children.forEach(function (nodeId) {
                     _this.nodeGroupMap.set(nodeId, data.id);
                 });
+                _this.nodeSelected({ data: data });
             }
         };
         this.deleteGroupChild = function (_a) {
             var data = _a.data;
+            // 如果删除的是分组节点，则同时删除分组的子节点
+            if (data.children) {
+                data.children.forEach(function (nodeId) {
+                    _this.nodeGroupMap.delete(nodeId);
+                    _this.lf.deleteNode(nodeId);
+                });
+            }
             var groupId = _this.nodeGroupMap.get(data.id);
             if (groupId) {
                 var group = _this.lf.getNodeModelById(groupId);
@@ -82,7 +73,8 @@ var Group = /** @class */ (function () {
         this.setActiveGroup = function (_a) {
             var data = _a.data;
             var nodeModel = _this.lf.getNodeModelById(data.id);
-            var newGroup = _this.getGroup(nodeModel);
+            var bounds = nodeModel.getBounds();
+            var newGroup = _this.getGroup(bounds, data);
             if (_this.activeGroup) {
                 _this.activeGroup.setAllowAppendChild(false);
             }
@@ -95,6 +87,46 @@ var Group = /** @class */ (function () {
             _this.activeGroup = newGroup;
             _this.activeGroup.setAllowAppendChild(true);
         };
+        /**
+         * 1. 分组节点默认在普通节点下面。
+         * 2. 分组节点被选中后，会将分组节点以及其内部的其他分组节点放到其余分组节点的上面。
+         * 3. 分组节点取消选中后，不会将分组节点重置为原来的高度。
+         * 4. 由于LogicFlow核心目标是支持用户手动绘制流程图，所以不考虑一张流程图超过1000个分组节点的情况。
+         */
+        this.nodeSelected = function (_a) {
+            var data = _a.data;
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            _this.toFrontGroup(nodeModel);
+            // 重置所有的group zIndex,防止group节点zIndex增长为正。
+            if (_this.topGroupZIndex > DEFAULT_TOP_Z_INDEX) {
+                _this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
+                var allGroups = _this.lf.graphModel.nodes
+                    .filter(function (node) { return node.isGroup; })
+                    .sort(function (a, b) { return a.zIndex - b.zIndex; });
+                var preZIndex = 0;
+                for (var i = 0; i < allGroups.length; i++) {
+                    var group = allGroups[i];
+                    if (group.zIndex !== preZIndex) {
+                        _this.topGroupZIndex++;
+                        preZIndex = group.zIndex;
+                    }
+                    group.setZIndex(_this.topGroupZIndex);
+                }
+            }
+        };
+        this.toFrontGroup = function (model) {
+            if (!model || !model.isGroup) {
+                return;
+            }
+            _this.topGroupZIndex++;
+            model.setZIndex(_this.topGroupZIndex);
+            if (model.children) {
+                model.children.forEach(function (nodeId) {
+                    var node = _this.lf.getNodeModelById(nodeId);
+                    _this.toFrontGroup(node);
+                });
+            }
+        };
         lf.register(GroupNode);
         this.lf = lf;
         lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
@@ -104,34 +136,23 @@ var Group = /** @class */ (function () {
                 return true;
             }
             var groupModel = lf.getNodeModelById(_this.nodeGroupMap.get(model.id));
-            var allowMove = true;
-            if (groupModel && groupModel.isRestrict) {
-                // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
+            if (groupModel && groupModel.isRestrict) { // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
                 var _a = model.getBounds(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
-                allowMove = groupModel.isAllowMoveTo({
+                var r = groupModel.isAllowMoveTo({
                     x1: x1 + deltaX,
                     y1: y1 + deltaY,
                     x2: x2 + deltaX,
                     y2: y2 + deltaY,
                 });
+                return r;
             }
-            if (model.isGroup) {
-                // 如果移动的是分组，那么分组的子节点也跟着移动。
-                if (allowMove === true) {
-                    lf.graphModel.moveNodes(__spread(model.getChildren()), deltaX, deltaY, true);
-                }
-                else if (typeof allowMove !== 'boolean') {
-                    lf.graphModel.moveNodes(__spread(model.getChildren()), allowMove.x ? deltaX : 0, allowMove.y ? deltaY : 0, true);
-                }
-            }
-            return allowMove;
+            return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add', this.appendNodeToGroup);
+        lf.on('node:add,node:drop', this.appendNodeToGroup);
         lf.on('node:delete', this.deleteGroupChild);
-        lf.on('node:drop', this.appendNodeToGroup);
-        lf.on('node:dnd-drag', this.setActiveGroup);
-        lf.on('node:drag', this.setActiveGroup);
+        lf.on('node:dnd-drag,node:drag', this.setActiveGroup);
+        lf.on('node:click', this.nodeSelected);
         lf.on('graph:rendered', this.graphRendered);
     }
     /**
@@ -153,33 +174,22 @@ var Group = /** @class */ (function () {
     };
     /**
      * 获取自定位置其所属分组
+     * 当分组重合时，优先返回最上层的分组
      */
-    Group.prototype.getGroup = function (nodeModel) {
-        if (nodeModel.nestable === false) {
-            return null;
-        }
-        var bounds = nodeModel.getBounds();
+    Group.prototype.getGroup = function (bounds, nodeData) {
         var nodes = this.lf.graphModel.nodes;
-        var selectedModel = null;
-        for (var i = 0; i < nodes.length; i++) {
-            var model = nodes[i];
-            if (model !== nodeModel && model.isGroup && model.isInRange(bounds)) {
-                if (selectedModel) {
-                    if (selectedModel.zIndex > model.zIndex) {
-                        selectedModel = model;
-                    }
-                    else if (selectedModel.zIndex === model.zIndex) {
-                        if (!model.isInRange(selectedModel.getBounds())) {
-                            selectedModel = model;
-                        }
-                    }
-                }
-                else {
-                    selectedModel = model;
-                }
+        var groups = nodes.filter(function (node) { return node.isGroup && node.isInRange(bounds) && node.id !== nodeData.id; });
+        if (groups.length === 0)
+            return;
+        if (groups.length === 1)
+            return groups[0];
+        var topGroup = groups[groups.length - 1];
+        for (var i = groups.length - 2; i >= 0; i--) {
+            if (groups[i].zIndex > topGroup.zIndex) {
+                topGroup = groups[i];
             }
         }
-        return selectedModel;
+        return topGroup;
     };
     /**
      * 获取某个节点所属的groupModel

package/es/style/index.css

@@ -164,6 +164,16 @@
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACL0lEQVRoQ+1YT2vUQBT/vS+Smc3u0ZtfwA+hUKEttIIVbMEWrGAL3UItqKCCCipooS3Ynu29ePfqLcnO5Nov0NsrWbc0myxtJpNmGZw9LZk37/3+vCTzQnD8R47jhycwbQe9A94BSwV8C1kKaL3dO2AtoWWC/8+BMJB9ItwHcM6MX0mqtm1EzOU7Y8bvJFV9k3zGDnSFPAVw76oIb8ZavzIpehnbE+Ilg/J7/8Za3THJVYfAHwB3x4owXsSpemNSuCs6zwEu7rl9AmEgt4hQspkIa5FS76uQCKV8RoxSLDP6pi1p7EAGsCvEBkA7ZbC0EuvBp+tI9IR4yqBSDIE3Iq13qwiQj6lFYEgikOsgvC4VJDyJlfo6CUg3kI9BmLBG67EevDUFn8XXJpBt7km5yox3xcIMfpRo/SN/PZRygRhj17J1JqwmSn2oA96awL926iwD/LEIgJjmo3RwMCQadGaZePh/3H5ejrT+XBd8IwSGJKRcAuPLhHZ6mIkMxlFpjbEUp+qbDfjGCGSJQiEWCfS9CiAmLCZK7VWJvSnG6h4oJu8FnTkm3r+uKDHNReng8CZgVdcbJTBqpxkwfk4EQJiJlTquCq5KnCeQV8npFnL6Jnb6Mer0i8zpo4TThzmnj9OjGXardDBrZqDZbmMmdnukdH6oL3xWOTG1vNh6oxn7AYB2PqtUOWC1GdP4Ya5N8I0ONG0Dv6znHZiW8t6BaSvvHfAONKSAf4w2JGTtNBey0xBAkjSEzwAAAABJRU5ErkJggg==');
 }
 
+.lf-mini-map-no-header {
+  padding-top: 0;
+}
+.lf-mini-map-no-header .lf-mini-map-header {
+  display: none;
+}
+.lf-mini-map-no-close-icon .lf-mini-map-close{
+  display: none;
+}
+
 /* 节点调整 */
 
 .lf-resize-control-0{

package/es/tools/auto-layout/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * 自动布局插件
- * 依赖flow-path插件
+ * 依赖flowPath插件
  * 未完善
  */
 import LogicFlow from '@logicflow/core';

package/es/tools/auto-layout/index.js

@@ -1,6 +1,6 @@
 /**
  * 自动布局插件
- * 依赖flow-path插件
+ * 依赖flowPath插件
  * 未完善
  */
 var __assign = (this && this.__assign) || function () {