@logicflow/extension 2.0.10 → 2.0.11

package/es/dynamic-group/model.js

@@ -114,10 +114,6 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     };
     DynamicGroupNodeModel.prototype.setAttributes = function () {
         _super.prototype.setAttributes.call(this);
-        // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
-        if (this.isCollapsed) {
-            this.toggleCollapse(true);
-        }
     };
     DynamicGroupNodeModel.prototype.getData = function () {
         var _this = this;
@@ -342,8 +338,8 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
      * TODO: 如何重写该方法呢？
      * @param _nodeData
      */
+    // eslint-disable-next-line
     DynamicGroupNodeModel.prototype.isAllowAppendIn = function (_nodeData) {
-        console.info('_nodeData', _nodeData);
         // TODO: 此处使用 this.properties.groupAddable 还是 this.groupAddable
         // this.groupAddable 是否存在更新不及时的问题
         return true;

package/es/dynamic-group/node.d.ts

@@ -1,11 +1,18 @@
-import { GraphModel, h, RectNode } from '@logicflow/core';
+import LogicFlow, { GraphModel, h, RectNode, CallbackArgs } from '@logicflow/core';
 import { DynamicGroupNodeModel } from './model';
+import Position = LogicFlow.Position;
 export interface IDynamicGroupNodeProps {
     model: DynamicGroupNodeModel;
     graphModel: GraphModel;
 }
 export declare class DynamicGroupNode<P extends IDynamicGroupNodeProps = IDynamicGroupNodeProps> extends RectNode<P> {
+    childrenPositionMap: Map<string, Position>;
+    onNodeRotate: ({ model, }: Omit<CallbackArgs<'node:rotate'>, 'e' | 'position'>) => void;
+    onNodeResize: ({ deltaX, deltaY, index, model, preData, }: Omit<CallbackArgs<'node:resize'>, 'e' | 'position'>) => void;
+    onNodeMouseMove: ({ deltaX, deltaY, data, }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => void;
+    graphRendered: () => void;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     /**
      * 获取分组内的节点
      * @param groupModel

package/es/dynamic-group/node.js

@@ -24,24 +24,44 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 { h, RectNode, handleResize, } from '@logicflow/core';
 import { forEach } from 'lodash-es';
 import { rotatePointAroundCenter } from '../tools/label/utils';
 var DynamicGroupNode = /** @class */ (function (_super) {
     __extends(DynamicGroupNode, _super);
     function DynamicGroupNode() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DynamicGroupNode.prototype.componentDidMount = function () {
-        var _this = this;
-        _super.prototype.componentDidMount.call(this);
-        var _a = this.props, curGroup = _a.model, graphModel = _a.graphModel;
-        var eventCenter = graphModel.eventCenter;
-        var childrenPositionMap = new Map();
-        // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
-        eventCenter.on('node:rotate', function (_a) {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.childrenPositionMap = new Map();
+        _this.onNodeRotate = function (_a) {
             var model = _a.model;
-            var _b = _this.props.model, transformWithContainer = _b.transformWithContainer, isRestrict = _b.isRestrict;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformWithContainer = curGroup.transformWithContainer, isRestrict = curGroup.isRestrict;
+            var childrenPositionMap = _this.childrenPositionMap;
             if (!transformWithContainer || isRestrict) {
                 // isRestrict限制模式下，当前model resize时不能小于占地面积
                 // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
@@ -75,11 +95,11 @@ var DynamicGroupNode = /** @class */ (function (_super) {
                     }
                 });
             }
-        });
-        // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
-        eventCenter.on('node:resize', function (_a) {
+        };
+        _this.onNodeResize = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, model = _a.model, preData = _a.preData;
-            var _b = _this.props.model, transformWithContainer = _b.transformWithContainer, isRestrict = _b.isRestrict;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformWithContainer = curGroup.transformWithContainer, isRestrict = curGroup.isRestrict;
             if (!transformWithContainer || isRestrict) {
                 // isRestrict限制模式下，当前model resize时不能小于占地面积
                 // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
@@ -110,16 +130,61 @@ var DynamicGroupNode = /** @class */ (function (_super) {
                     }
                 });
             }
-        });
-        // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
-        eventCenter.on('node:mousemove', function (_a) {
+        };
+        _this.onNodeMouseMove = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY, data = _a.data;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformModel = graphModel.transformModel;
+            var SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y;
             if (data.id === curGroup.id) {
-                var _b = _this.props, curGroup_1 = _b.model, graphModel_1 = _b.graphModel;
-                var nodeIds = _this.getNodesInGroup(curGroup_1, graphModel_1);
-                graphModel_1.moveNodes(nodeIds, deltaX, deltaY, true);
+                var nodeIds = _this.getNodesInGroup(curGroup, graphModel);
+                // https://github.com/didi/LogicFlow/issues/1914
+                // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
+                // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
+                // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
+                // 因此这里需要增加SCALE的处理
+                graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true);
             }
-        });
+        };
+        _this.graphRendered = function () {
+            var model = _this.props.model;
+            // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
+            if (model.isCollapsed) {
+                // https://github.com/didi/LogicFlow/issues/1918
+                // 当lf.render({nodes:[{分组节点}, {普通节点}]})时，由于是顺序遍历
+                // 会先触发分组Group节点的new Model => toggleCollapse()
+                // => 此时在graphModel.elementsModelMap找不到它的children，因为还没初始化，因此无法正确折叠子元素
+                // --------------------
+                // 当lf.render({nodes:[{普通节点}, {分组节点}]})时，
+                // 会先触发普通节点的new Model => graphModel.elementsModelMap.set(id, new Model())
+                // 然后再触发分组Group节点的new Model => toggleCollapse() =>
+                // 此时在graphModel.elementsModelMap能找到它的children了，因此可以正确折叠子元素
+                // --------------------
+                // 因此将整个初始化判断是否【主动触发一次折叠操作】放在"graph:rendered"全部渲染完成后再执行
+                model.toggleCollapse(true);
+            }
+        };
+        return _this;
+    }
+    DynamicGroupNode.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        var eventCenter = this.props.graphModel.eventCenter;
+        // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
+        eventCenter.on('node:rotate', this.onNodeRotate);
+        // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
+        eventCenter.on('node:resize', this.onNodeResize);
+        // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
+        eventCenter.on('node:mousemove', this.onNodeMouseMove);
+        // 全部渲染完成后，判断是否【主动触发一次折叠操作】
+        eventCenter.on('graph:rendered', this.graphRendered);
+    };
+    DynamicGroupNode.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        var eventCenter = this.props.graphModel.eventCenter;
+        eventCenter.off('node:rotate', this.onNodeRotate);
+        eventCenter.off('node:resize', this.onNodeResize);
+        eventCenter.off('node:mousemove', this.onNodeMouseMove);
+        eventCenter.off('graph:rendered', this.graphRendered);
     };
     /**
      * 获取分组内的节点

package/lib/dynamic-group/model.js

@@ -117,10 +117,6 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     };
     DynamicGroupNodeModel.prototype.setAttributes = function () {
         _super.prototype.setAttributes.call(this);
-        // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
-        if (this.isCollapsed) {
-            this.toggleCollapse(true);
-        }
     };
     DynamicGroupNodeModel.prototype.getData = function () {
         var _this = this;
@@ -345,8 +341,8 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
      * TODO: 如何重写该方法呢？
      * @param _nodeData
      */
+    // eslint-disable-next-line
     DynamicGroupNodeModel.prototype.isAllowAppendIn = function (_nodeData) {
-        console.info('_nodeData', _nodeData);
         // TODO: 此处使用 this.properties.groupAddable 还是 this.groupAddable
         // this.groupAddable 是否存在更新不及时的问题
         return true;

package/lib/dynamic-group/node.d.ts

@@ -1,11 +1,18 @@
-import { GraphModel, h, RectNode } from '@logicflow/core';
+import LogicFlow, { GraphModel, h, RectNode, CallbackArgs } from '@logicflow/core';
 import { DynamicGroupNodeModel } from './model';
+import Position = LogicFlow.Position;
 export interface IDynamicGroupNodeProps {
     model: DynamicGroupNodeModel;
     graphModel: GraphModel;
 }
 export declare class DynamicGroupNode<P extends IDynamicGroupNodeProps = IDynamicGroupNodeProps> extends RectNode<P> {
+    childrenPositionMap: Map<string, Position>;
+    onNodeRotate: ({ model, }: Omit<CallbackArgs<'node:rotate'>, 'e' | 'position'>) => void;
+    onNodeResize: ({ deltaX, deltaY, index, model, preData, }: Omit<CallbackArgs<'node:resize'>, 'e' | 'position'>) => void;
+    onNodeMouseMove: ({ deltaX, deltaY, data, }: Omit<CallbackArgs<'node:mousemove'>, 'e' | 'position'>) => void;
+    graphRendered: () => void;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     /**
      * 获取分组内的节点
      * @param groupModel

package/lib/dynamic-group/node.js

@@ -25,6 +25,31 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DynamicGroupNode = void 0;
 var core_1 = require("@logicflow/core");
@@ -33,18 +58,13 @@ var utils_1 = require("../tools/label/utils");
 var DynamicGroupNode = /** @class */ (function (_super) {
     __extends(DynamicGroupNode, _super);
     function DynamicGroupNode() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DynamicGroupNode.prototype.componentDidMount = function () {
-        var _this = this;
-        _super.prototype.componentDidMount.call(this);
-        var _a = this.props, curGroup = _a.model, graphModel = _a.graphModel;
-        var eventCenter = graphModel.eventCenter;
-        var childrenPositionMap = new Map();
-        // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
-        eventCenter.on('node:rotate', function (_a) {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.childrenPositionMap = new Map();
+        _this.onNodeRotate = function (_a) {
             var model = _a.model;
-            var _b = _this.props.model, transformWithContainer = _b.transformWithContainer, isRestrict = _b.isRestrict;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformWithContainer = curGroup.transformWithContainer, isRestrict = curGroup.isRestrict;
+            var childrenPositionMap = _this.childrenPositionMap;
             if (!transformWithContainer || isRestrict) {
                 // isRestrict限制模式下，当前model resize时不能小于占地面积
                 // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
@@ -78,11 +98,11 @@ var DynamicGroupNode = /** @class */ (function (_super) {
                     }
                 });
             }
-        });
-        // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
-        eventCenter.on('node:resize', function (_a) {
+        };
+        _this.onNodeResize = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, model = _a.model, preData = _a.preData;
-            var _b = _this.props.model, transformWithContainer = _b.transformWithContainer, isRestrict = _b.isRestrict;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformWithContainer = curGroup.transformWithContainer, isRestrict = curGroup.isRestrict;
             if (!transformWithContainer || isRestrict) {
                 // isRestrict限制模式下，当前model resize时不能小于占地面积
                 // 由于parent:resize=>child:resize计算复杂，需要根据child:resize的判定结果来递归判断parent能否resize
@@ -113,16 +133,61 @@ var DynamicGroupNode = /** @class */ (function (_super) {
                     }
                 });
             }
-        });
-        // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
-        eventCenter.on('node:mousemove', function (_a) {
+        };
+        _this.onNodeMouseMove = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY, data = _a.data;
+            var _b = _this.props, curGroup = _b.model, graphModel = _b.graphModel;
+            var transformModel = graphModel.transformModel;
+            var SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y;
             if (data.id === curGroup.id) {
-                var _b = _this.props, curGroup_1 = _b.model, graphModel_1 = _b.graphModel;
-                var nodeIds = _this.getNodesInGroup(curGroup_1, graphModel_1);
-                graphModel_1.moveNodes(nodeIds, deltaX, deltaY, true);
+                var nodeIds = _this.getNodesInGroup(curGroup, graphModel);
+                // https://github.com/didi/LogicFlow/issues/1914
+                // 当调用lf.fitView()时，会改变整体的SCALE_X和SCALE_Y
+                // 由于group的mousemove是在drag.ts的this.onDragging()处理的，在onDragging()里面进行SCALE的处理
+                // 而"node:mousemove"emit出来跟onDragging()是同时的，也就是emit出来的数据是没有经过SCALE处理的坐标
+                // 因此这里需要增加SCALE的处理
+                graphModel.moveNodes(nodeIds, deltaX / SCALE_X, deltaY / SCALE_Y, true);
             }
-        });
+        };
+        _this.graphRendered = function () {
+            var model = _this.props.model;
+            // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
+            if (model.isCollapsed) {
+                // https://github.com/didi/LogicFlow/issues/1918
+                // 当lf.render({nodes:[{分组节点}, {普通节点}]})时，由于是顺序遍历
+                // 会先触发分组Group节点的new Model => toggleCollapse()
+                // => 此时在graphModel.elementsModelMap找不到它的children，因为还没初始化，因此无法正确折叠子元素
+                // --------------------
+                // 当lf.render({nodes:[{普通节点}, {分组节点}]})时，
+                // 会先触发普通节点的new Model => graphModel.elementsModelMap.set(id, new Model())
+                // 然后再触发分组Group节点的new Model => toggleCollapse() =>
+                // 此时在graphModel.elementsModelMap能找到它的children了，因此可以正确折叠子元素
+                // --------------------
+                // 因此将整个初始化判断是否【主动触发一次折叠操作】放在"graph:rendered"全部渲染完成后再执行
+                model.toggleCollapse(true);
+            }
+        };
+        return _this;
+    }
+    DynamicGroupNode.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        var eventCenter = this.props.graphModel.eventCenter;
+        // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
+        eventCenter.on('node:rotate', this.onNodeRotate);
+        // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
+        eventCenter.on('node:resize', this.onNodeResize);
+        // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
+        eventCenter.on('node:mousemove', this.onNodeMouseMove);
+        // 全部渲染完成后，判断是否【主动触发一次折叠操作】
+        eventCenter.on('graph:rendered', this.graphRendered);
+    };
+    DynamicGroupNode.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
+        var eventCenter = this.props.graphModel.eventCenter;
+        eventCenter.off('node:rotate', this.onNodeRotate);
+        eventCenter.off('node:resize', this.onNodeResize);
+        eventCenter.off('node:mousemove', this.onNodeMouseMove);
+        eventCenter.off('graph:rendered', this.graphRendered);
     };
     /**
      * 获取分组内的节点

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.0.6"
+    "@logicflow/core": "2.0.7"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -31,7 +31,7 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.0.6"
+    "@logicflow/core": "2.0.7"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/dynamic-group/model.ts

@@ -159,11 +159,6 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
 
   setAttributes() {
     super.setAttributes()
-
-    // 初始化时，如果 this.isCollapsed 为 true，则主动触发一次折叠操作
-    if (this.isCollapsed) {
-      this.toggleCollapse(true)
-    }
   }
 
   getData(): NodeData {
@@ -445,8 +440,8 @@ export class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
    * TODO: 如何重写该方法呢？
    * @param _nodeData
    */
+  // eslint-disable-next-line
   isAllowAppendIn(_nodeData: NodeData) {
-    console.info('_nodeData', _nodeData)
     // TODO: 此处使用 this.properties.groupAddable 还是 this.groupAddable
     // this.groupAddable 是否存在更新不及时的问题
     return true