@logicflow/extension 2.2.2 → 2.2.4-alpha.0

package/es/materials/group/GroupNode.js

@@ -51,6 +51,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { h } from '@logicflow/core';
 import { isArray } from 'lodash-es';
+import { ExtensionEventType } from '../../constant/events';
 import { RectResizeModel, RectResizeView } from '../../NodeResize';
 var defaultWidth = 500;
 var defaultHeight = 300;
@@ -297,7 +298,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(ExtensionEventType.GROUP_ADD_NODE, {
+            data: this.getData(),
+        });
     };
     /**
      * 删除分组子节点
@@ -305,7 +308,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(ExtensionEventType.GROUP_REMOVE_NODE, {
             data: this.getData(),
         });
     };

package/es/materials/group/index.js

@@ -52,6 +52,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { forEach, isEmpty, isObject } from 'lodash-es';
 import { EventType, } from '@logicflow/core';
 import GroupNode from './GroupNode';
+import { ExtensionEventType, NODE_ADD_DROP_DND_EVENTS, NODE_DRAG_EVENTS, } from '../../constant/events';
 var DEFAULT_TOP_Z_INDEX = -1000;
 var DEFAULT_BOTTOM_Z_INDEX = -10000;
 var Group = /** @class */ (function () {
@@ -118,7 +119,7 @@ var Group = /** @class */ (function () {
                     return;
                 var isAllowAppendIn = group.isAllowAppendIn(data);
                 if (!isAllowAppendIn) {
-                    _this.lf.emit('group:not-allowed', {
+                    _this.lf.emit(ExtensionEventType.GROUP_NOT_ALLOWED, {
                         group: group.getData(),
                         node: data,
                     });
@@ -304,11 +305,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(NODE_ADD_DROP_DND_EVENTS, this.appendNodeToGroup);
+        lf.on(EventType.NODE_DELETE, this.deleteGroupChild);
+        lf.on(NODE_DRAG_EVENTS, this.setActiveGroup);
+        lf.on(EventType.NODE_CLICK, this.nodeSelected);
+        lf.on(EventType.GRAPH_RENDERED, this.graphRendered);
         // https://github.com/didi/LogicFlow/issues/1346
         // 重写 addElements() 方法，在 addElements() 原有基础上增加对 group 内部所有 nodes 和 edges 的复制功能
         lf.addElements = function (_a, distance) {

package/es/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/es/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/es/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/es/pool/index.js

@@ -36,11 +36,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { EventType, transformNodeData, transformEdgeData, } from '@logicflow/core';
 import { assign, filter, forEach, cloneDeep, has, map } from 'lodash-es';
+import { ExtensionEventType, NODE_ADD_DROP_DND_EVENTS, NODE_DRAG_EVENTS, } from '../constant/events';
 import { PoolModel } from './PoolModel';
 import { PoolView } from './PoolView';
 import { LaneModel } from './LaneModel';
 import { LaneView } from './LaneView';
 import { isAllowMoveTo, isBoundsInLane } from './utils';
+import { getChildrenBounds, isGroupBoundsContainsChildren, } from '../dynamic-group/utils';
 export var PoolNode = {
     type: 'pool',
     view: PoolView,
@@ -202,12 +204,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;
@@ -218,13 +216,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();
@@ -256,6 +252,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;
@@ -393,35 +390,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 = 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 isGroupBoundsContainsChildren(groupBounds, childrenBounds);
     };
     PoolElements.prototype.init = function () {
         var _this = this;
@@ -452,21 +436,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(NODE_ADD_DROP_DND_EVENTS, this.onNodeAddOrDrop);
+        lf.on(EventType.SELECTION_DROP, this.onSelectionDrop);
+        lf.on(EventType.NODE_DELETE, this.removeNodeFromGroup);
+        lf.on(NODE_DRAG_EVENTS, this.onNodeDrag);
+        lf.on(EventType.SELECTION_DRAG, this.onSelectionDrag);
+        lf.on(EventType.NODE_CLICK, this.onNodeSelect);
+        lf.on(EventType.NODE_MOUSEMOVE, this.onNodeMove);
+        lf.on(EventType.GRAPH_RENDERED, this.onGraphRendered);
+        lf.on(ExtensionEventType.GROUP_ADD_NODE, this.onGroupAddNode);
         lf.addElements = function (_a, distance) {
             var selectedNodes = _a.nodes, selectedEdges = _a.edges;
             if (distance === void 0) { distance = 40; }
@@ -507,15 +491,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(NODE_ADD_DROP_DND_EVENTS, this.onNodeAddOrDrop);
+        this.lf.off(EventType.SELECTION_DROP, this.onSelectionDrop);
+        this.lf.off(EventType.NODE_DELETE, this.removeNodeFromGroup);
+        this.lf.off(NODE_DRAG_EVENTS, this.onNodeDrag);
+        this.lf.off(EventType.SELECTION_DRAG, this.onSelectionDrag);
+        this.lf.off(EventType.NODE_CLICK, this.onNodeSelect);
+        this.lf.off(EventType.NODE_MOUSEMOVE, this.onNodeMove);
+        this.lf.off(EventType.GRAPH_RENDERED, this.onGraphRendered);
+        this.lf.off(ExtensionEventType.GROUP_ADD_NODE, this.onGroupAddNode);
     };
     PoolElements.pluginName = 'PoolElements';
     return PoolElements;