@logicflow/extension 2.2.2 → 2.2.4-alpha.0

package/lib/materials/group/GroupNode.js

@@ -54,6 +54,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupNode = exports.GroupNodeModel = void 0;
 var core_1 = require("@logicflow/core");
 var lodash_es_1 = require("lodash-es");
+var events_1 = require("../../constant/events");
 var NodeResize_1 = require("../../NodeResize");
 var defaultWidth = 500;
 var defaultHeight = 300;
@@ -300,7 +301,9 @@ var GroupNodeModel = /** @class */ (function (_super) {
      */
     GroupNodeModel.prototype.addChild = function (id) {
         this.children.add(id);
-        this.graphModel.eventCenter.emit('group:add-node', { data: this.getData() });
+        this.graphModel.eventCenter.emit(events_1.ExtensionEventType.GROUP_ADD_NODE, {
+            data: this.getData(),
+        });
     };
     /**
      * 删除分组子节点
@@ -308,7 +311,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
      */
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
-        this.graphModel.eventCenter.emit('group:remove-node', {
+        this.graphModel.eventCenter.emit(events_1.ExtensionEventType.GROUP_REMOVE_NODE, {
             data: this.getData(),
         });
     };

package/lib/materials/group/index.js

@@ -72,6 +72,7 @@ exports.Group = void 0;
 var lodash_es_1 = require("lodash-es");
 var core_1 = require("@logicflow/core");
 var GroupNode_1 = __importDefault(require("./GroupNode"));
+var events_1 = require("../../constant/events");
 var DEFAULT_TOP_Z_INDEX = -1000;
 var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var Group = /** @class */ (function () {
@@ -138,7 +139,7 @@ var Group = /** @class */ (function () {
                     return;
                 var isAllowAppendIn = group.isAllowAppendIn(data);
                 if (!isAllowAppendIn) {
-                    _this.lf.emit('group:not-allowed', {
+                    _this.lf.emit(events_1.ExtensionEventType.GROUP_NOT_ALLOWED, {
                         group: group.getData(),
                         node: data,
                     });
@@ -324,11 +325,11 @@ var Group = /** @class */ (function () {
             return true;
         });
         lf.graphModel.group = this;
-        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);
-        lf.on('graph:rendered', this.graphRendered);
+        lf.on(events_1.NODE_ADD_DROP_DND_EVENTS, this.appendNodeToGroup);
+        lf.on(core_1.EventType.NODE_DELETE, this.deleteGroupChild);
+        lf.on(events_1.NODE_DRAG_EVENTS, this.setActiveGroup);
+        lf.on(core_1.EventType.NODE_CLICK, this.nodeSelected);
+        lf.on(core_1.EventType.GRAPH_RENDERED, this.graphRendered);
         // https://github.com/didi/LogicFlow/issues/1346
         // 重写 addElements() 方法，在 addElements() 原有基础上增加对 group 内部所有 nodes 和 edges 的复制功能
         lf.addElements = function (_a, distance) {

package/lib/pool/LaneModel.d.ts

@@ -54,7 +54,7 @@ export declare class LaneModel extends DynamicGroupNodeModel {
     /**
      * 获取文本样式
      */
-    getTextStyle(): {
+    getTextStyle(): Record<string, unknown> & {
         [x: string]: unknown;
         fill?: string | undefined;
         stroke?: string | undefined;

package/lib/pool/PoolModel.d.ts

@@ -91,7 +91,7 @@ export declare class PoolModel extends DynamicGroupNodeModel {
     /**
      * 获取文本样式
      */
-    getTextStyle(): {
+    getTextStyle(): Record<string, unknown> & {
         [x: string]: unknown;
         fill?: string | undefined;
         stroke?: string | undefined;

package/lib/pool/index.d.ts

@@ -1,4 +1,5 @@
 import LogicFlow, { CallbackArgs, Model, BaseNodeModel, BaseEdgeModel } from '@logicflow/core';
+import { ExtensionEventType } from '../constant/events';
 import { PoolModel } from './PoolModel';
 import { PoolView } from './PoolView';
 import { LaneModel } from './LaneModel';
@@ -46,7 +47,7 @@ export declare class PoolElements {
     onSelectionDrop: () => void;
     onNodeAddOrDrop: ({ data: node }: CallbackArgs<'node:add'>) => void;
     addNodeToGroup: (node: LogicFlow.NodeData) => void;
-    onGroupAddNode: ({ data: groupData, childId, }: CallbackArgs<'group:add-node'>) => void;
+    onGroupAddNode: ({ data: groupData, childId, }: CallbackArgs<ExtensionEventType.GROUP_ADD_NODE>) => void;
     removeNodeFromGroup: ({ data: node, model, }: CallbackArgs<'node:delete'>) => void;
     onSelectionDrag: () => void;
     onNodeDrag: ({ data: node }: CallbackArgs<'node:drag'>) => void;
@@ -57,7 +58,7 @@ export declare class PoolElements {
      * @param isSelected
      */
     onNodeSelect: ({ data: node, isMultiple, isSelected, }: Omit<CallbackArgs<'node:click'>, 'e' | 'position'>) => void;
-    onNodeMove: ({ deltaX, deltaY, data, }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => void;
+    onNodeMove: ({ data, }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => void;
     onGraphRendered: ({ data }: CallbackArgs<'graph:rendered'>) => void;
     removeChildrenInGroupNodeData<T extends LogicFlow.NodeData | LogicFlow.NodeConfig>(nodeData: T): T;
     /**

package/lib/pool/index.js

@@ -39,11 +39,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PoolElements = exports.LaneNode = exports.PoolNode = void 0;
 var core_1 = require("@logicflow/core");
 var lodash_es_1 = require("lodash-es");
+var events_1 = require("../constant/events");
 var PoolModel_1 = require("./PoolModel");
 var PoolView_1 = require("./PoolView");
 var LaneModel_1 = require("./LaneModel");
 var LaneView_1 = require("./LaneView");
 var utils_1 = require("./utils");
+var utils_2 = require("../dynamic-group/utils");
 exports.PoolNode = {
     type: 'pool',
     view: PoolView_1.PoolView,
@@ -205,12 +207,8 @@ var PoolElements = /** @class */ (function () {
             }
         };
         this.onNodeMove = function (_a) {
-            var deltaX = _a.deltaX, deltaY = _a.deltaY, data = _a.data;
-            var id = data.id, x = data.x, y = data.y, properties = data.properties;
-            if (!properties) {
-                return;
-            }
-            var width = properties.width, height = properties.height;
+            var data = _a.data;
+            var id = data.id;
             var groupId = _this.nodeLaneMap.get(id);
             if (!groupId) {
                 return;
@@ -221,13 +219,11 @@ var PoolElements = /** @class */ (function () {
             }
             // 当父节点isRestrict=true & autoResize=true
             // 子节点在父节点中移动时，父节点会自动调整大小
-            // step1: 计算出当前child的bounds
-            var newX = x + deltaX / 2;
-            var newY = y + deltaY / 2;
-            var minX = newX - width / 2;
-            var minY = newY - height / 2;
-            var maxX = newX + width / 2;
-            var maxY = newY + height / 2;
+            var childModel = _this.lf.getNodeModelById(id);
+            if (!childModel) {
+                return;
+            }
+            var _b = childModel.getBounds(), minX = _b.minX, minY = _b.minY, maxX = _b.maxX, maxY = _b.maxY;
             // step2：比较当前child.bounds与parent.bounds的差异，比如child.minX<parent.minX，那么parent.minX=child.minX
             var hasChange = false;
             var groupBounds = groupModel.getBounds();
@@ -259,6 +255,7 @@ var PoolElements = /** @class */ (function () {
             groupModel.moveTo(newGroupX, newGroupY);
             groupModel.width = newGroupWidth;
             groupModel.height = newGroupHeight;
+            groupModel.updateExpandedSize(newGroupWidth, newGroupHeight);
         };
         this.onGraphRendered = function (_a) {
             var data = _a.data;
@@ -396,35 +393,22 @@ var PoolElements = /** @class */ (function () {
      * @param newHeight
      */
     PoolElements.prototype.checkGroupBoundsWithChildren = function (groupModel, deltaX, deltaY, newWidth, newHeight) {
-        if (groupModel.children) {
-            var children = groupModel.children, x = groupModel.x, y = groupModel.y;
-            // 根据deltaX和deltaY计算出当前model的bounds
-            var newX = x + deltaX / 2;
-            var newY = y + deltaY / 2;
-            var groupMinX = newX - newWidth / 2;
-            var groupMinY = newY - newHeight / 2;
-            var groupMaxX = newX + newWidth / 2;
-            var groupMaxY = newY + newHeight / 2;
-            var childrenArray = Array.from(children);
-            for (var i = 0; i < childrenArray.length; i++) {
-                var childId = childrenArray[i];
-                var child = this.lf.getNodeModelById(childId);
-                if (!child) {
-                    continue;
-                }
-                var childBounds = child.getBounds();
-                var minX = childBounds.minX, minY = childBounds.minY, maxX = childBounds.maxX, maxY = childBounds.maxY;
-                // parent:resize后的bounds不能小于child:bounds，否则阻止其resize
-                var canResize = groupMinX <= minX &&
-                    groupMinY <= minY &&
-                    groupMaxX >= maxX &&
-                    groupMaxY >= maxY;
-                if (!canResize) {
-                    return false;
-                }
-            }
+        var _this = this;
+        var childrenBounds = (0, utils_2.getChildrenBounds)(groupModel, function (id) {
+            return _this.lf.getNodeModelById(id);
+        });
+        if (!childrenBounds) {
+            return true;
         }
-        return true;
+        var newX = groupModel.x + deltaX / 2;
+        var newY = groupModel.y + deltaY / 2;
+        var groupBounds = {
+            minX: newX - newWidth / 2,
+            minY: newY - newHeight / 2,
+            maxX: newX + newWidth / 2,
+            maxY: newY + newHeight / 2,
+        };
+        return (0, utils_2.isGroupBoundsContainsChildren)(groupBounds, childrenBounds);
     };
     PoolElements.prototype.init = function () {
         var _this = this;
@@ -455,21 +439,21 @@ var PoolElements = /** @class */ (function () {
             return true;
         });
         graphModel.addNodeResizeRules(function (model, deltaX, deltaY, width, height) {
-            if (model.isGroup && model.isRestrict) {
+            if (model.isGroup) {
                 return _this.checkGroupBoundsWithChildren(model, deltaX, deltaY, width, height);
             }
             return true;
         });
         graphModel.dynamicGroup = this;
-        lf.on('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop);
-        lf.on('selection:drop', this.onSelectionDrop);
-        lf.on('node:delete', this.removeNodeFromGroup);
-        lf.on('node:drag,node:dnd-drag', this.onNodeDrag);
-        lf.on('selection:drag', this.onSelectionDrag);
-        lf.on('node:click', this.onNodeSelect);
-        lf.on('node:mousemove', this.onNodeMove);
-        lf.on('graph:rendered', this.onGraphRendered);
-        lf.on('group:add-node', this.onGroupAddNode);
+        lf.on(events_1.NODE_ADD_DROP_DND_EVENTS, this.onNodeAddOrDrop);
+        lf.on(core_1.EventType.SELECTION_DROP, this.onSelectionDrop);
+        lf.on(core_1.EventType.NODE_DELETE, this.removeNodeFromGroup);
+        lf.on(events_1.NODE_DRAG_EVENTS, this.onNodeDrag);
+        lf.on(core_1.EventType.SELECTION_DRAG, this.onSelectionDrag);
+        lf.on(core_1.EventType.NODE_CLICK, this.onNodeSelect);
+        lf.on(core_1.EventType.NODE_MOUSEMOVE, this.onNodeMove);
+        lf.on(core_1.EventType.GRAPH_RENDERED, this.onGraphRendered);
+        lf.on(events_1.ExtensionEventType.GROUP_ADD_NODE, this.onGroupAddNode);
         lf.addElements = function (_a, distance) {
             var selectedNodes = _a.nodes, selectedEdges = _a.edges;
             if (distance === void 0) { distance = 40; }
@@ -510,15 +494,15 @@ var PoolElements = /** @class */ (function () {
     PoolElements.prototype.render = function () { };
     PoolElements.prototype.destroy = function () {
         // 销毁监听的事件，并移除渲染的 dom 内容
-        this.lf.off('node:add,node:drop,node:dnd-add', this.onNodeAddOrDrop);
-        this.lf.off('selection:drop', this.onSelectionDrop);
-        this.lf.off('node:delete', this.removeNodeFromGroup);
-        this.lf.off('node:drag,node:dnd-drag', this.onNodeDrag);
-        this.lf.off('selection:drag', this.onSelectionDrag);
-        this.lf.off('node:click', this.onNodeSelect);
-        this.lf.off('node:mousemove', this.onNodeMove);
-        this.lf.off('graph:rendered', this.onGraphRendered);
-        this.lf.off('group:add-node', this.onGroupAddNode);
+        this.lf.off(events_1.NODE_ADD_DROP_DND_EVENTS, this.onNodeAddOrDrop);
+        this.lf.off(core_1.EventType.SELECTION_DROP, this.onSelectionDrop);
+        this.lf.off(core_1.EventType.NODE_DELETE, this.removeNodeFromGroup);
+        this.lf.off(events_1.NODE_DRAG_EVENTS, this.onNodeDrag);
+        this.lf.off(core_1.EventType.SELECTION_DRAG, this.onSelectionDrag);
+        this.lf.off(core_1.EventType.NODE_CLICK, this.onNodeSelect);
+        this.lf.off(core_1.EventType.NODE_MOUSEMOVE, this.onNodeMove);
+        this.lf.off(core_1.EventType.GRAPH_RENDERED, this.onGraphRendered);
+        this.lf.off(events_1.ExtensionEventType.GROUP_ADD_NODE, this.onGroupAddNode);
     };
     PoolElements.pluginName = 'PoolElements';
     return PoolElements;