@logicflow/extension 1.1.0-alpha.2 → 1.1.0-alpha.3

package/cjs/materials/group/GroupNode.js

@@ -12,6 +12,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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;
@@ -34,27 +45,31 @@ var __spread = (this && this.__spread) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@logicflow/core");
+var NodeResize_1 = require("../../NodeResize");
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.isGroup = true;
-        _this.children = new Set();
-        _this.isRestrict = true; // 其子节点是否被禁止通过拖拽移出分组。 默认false，允许拖拽移除分组。
         return _this;
     }
-    GroupNodeModel.prototype.setAttributes = function () {
+    GroupNodeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        var children = [];
+        if (Array.isArray(data.children)) {
+            children = data.children;
+        }
+        // 初始化组的子节点
+        this.children = new Set(children);
         this.width = 500;
         this.height = 200;
-        this.strokeWidth = 1;
-        this.zIndex = 0;
+        // todo: 参考bpmn.js, 分组和未加入分组的节点重合时，未加入分组的节点在分组之下。方便标识。
+        this.zIndex = -1;
         this.radius = 0;
-    };
-    /**
-     * 设置是否允许子节点被拖动移除分组
-     */
-    GroupNodeModel.prototype.setIsRestrict = function (isRestrict) {
-        this.isRestrict = isRestrict;
+        this.text.editable = false;
+        this.text.draggable = false;
+        this.isRestrict = false;
+        this.resizable = false;
     };
     GroupNodeModel.prototype.isInRange = function (_a) {
         var x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
@@ -63,28 +78,40 @@ var GroupNodeModel = /** @class */ (function (_super) {
             && y1 >= (this.y - this.height / 2)
             && y2 <= (this.y + this.height / 2);
     };
-    // todo: 更好的方式定义分组的样式
     GroupNodeModel.prototype.setAllowAppendChild = function (isAllow) {
-        if (isAllow) {
-            this.stroke = 'red';
-        }
-        else {
-            this.stroke = 'rgb(24, 125, 255)';
-        }
+        this.setProperty('groupAddable', isAllow);
     };
+    /**
+     * 添加分组子节点
+     * @param id 节点id
+     */
     GroupNodeModel.prototype.addChild = function (id) {
         this.children.add(id);
     };
+    /**
+     * 删除分组子节点
+     * @param id 节点id
+     */
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
     };
+    GroupNodeModel.prototype.getAddableOutlineStyle = function () {
+        return {
+            stroke: '#FEB663',
+            strokeWidth: 2,
+            strokeDasharray: '4 4',
+            fill: 'transparent',
+        };
+    };
     GroupNodeModel.prototype.getData = function () {
         var data = _super.prototype.getData.call(this);
         data.children = __spread(this.children);
+        var properties = data.properties;
+        delete properties.groupAddable;
         return data;
     };
     return GroupNodeModel;
-}(core_1.RectNodeModel));
+}(NodeResize_1.RectResize.model));
 var GroupNode = /** @class */ (function (_super) {
     __extends(GroupNode, _super);
     function GroupNode() {
@@ -94,8 +121,27 @@ var GroupNode = /** @class */ (function (_super) {
      * 重新toFront，阻止其置顶
      */
     GroupNode.prototype.toFront = function () { };
+    GroupNode.prototype.getControlGroup = function () {
+        return this.props.model.resizable ? _super.prototype.getControlGroup.call(this) : null;
+    };
+    GroupNode.prototype.getAddedableShape = 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;
+        var strokeWidth = this.props.model.getNodeStyle().strokeWidth;
+        var style = this.props.model.getAddableOutlineStyle();
+        var newWidth = width + strokeWidth + 8;
+        var newHeight = height + strokeWidth + 8;
+        return core_1.h('rect', __assign(__assign({}, style), { width: newWidth, height: newHeight, x: x - newWidth / 2, y: y - newHeight / 2, rx: radius, ry: radius }));
+    };
+    GroupNode.prototype.getResizeShape = function () {
+        return core_1.h('g', {}, [
+            this.getAddedableShape(),
+            _super.prototype.getResizeShape.call(this),
+        ]);
+    };
     return GroupNode;
-}(core_1.RectNode));
+}(NodeResize_1.RectResize.view));
 exports.default = {
     type: 'group',
     view: GroupNode,

package/cjs/materials/group/index.js

@@ -20,13 +20,26 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Group = void 0;
+exports.GroupNode = exports.Group = void 0;
 var GroupNode_1 = require("./GroupNode");
+exports.GroupNode = GroupNode_1.default;
 var Group = /** @class */ (function () {
     function Group(_a) {
         var _this = this;
         var lf = _a.lf;
         this.nodeGroupMap = new Map();
+        this.graphRendered = function (data) {
+            // 如果节点
+            if (data && data.nodes) {
+                data.nodes.forEach(function (node) {
+                    if (node.children) {
+                        node.children.forEach(function (nodeId) {
+                            _this.nodeGroupMap.set(nodeId, node.id);
+                        });
+                    }
+                });
+            }
+        };
         this.appendNodeToGrop = function (_a) {
             var data = _a.data;
             // 如果这个节点之前已经在group中了，则将其从之前的group中移除
@@ -48,14 +61,19 @@ var Group = /** @class */ (function () {
         };
         this.setActiveGroup = function (_a) {
             var data = _a.data;
-            if (_this.activeGroup) {
-                _this.activeGroup.setAllowAppendChild(false);
-                _this.activeGroup = undefined;
-            }
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            _this.activeGroup = _this.getGroup(bounds);
-            if (_this.activeGroup && _this.activeGroup.id !== data.id) {
-                _this.activeGroup.setAllowAppendChild(true);
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            if (nodeModel.isGroup)
+                return;
+            var bounds = nodeModel.getBounds();
+            var newGroup = _this.getGroup(bounds);
+            if (newGroup || newGroup !== _this.activeGroup) {
+                if (_this.activeGroup) {
+                    _this.activeGroup.setAllowAppendChild(false);
+                }
+                if (newGroup) {
+                    _this.activeGroup = newGroup;
+                    _this.activeGroup.setAllowAppendChild(true);
+                }
             }
         };
         lf.register(GroupNode_1.default);
@@ -82,6 +100,7 @@ var Group = /** @class */ (function () {
         lf.on('node:drop', this.appendNodeToGrop);
         lf.on('node:dnd-move', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
+        lf.on('graph:rendered', this.graphRendered);
     }
     Group.prototype.getGroups = function () {
         var groups = [];

package/cjs/style/index.css

@@ -22,8 +22,9 @@
   background: #efefef;
 }
 .lf-control-item.disabled {
-  filter: opacity(0.6);
-  cursor: not-allowed;
+  filter: opacity(0.5);
+  /* cursor: not-allowed; */
+  pointer-events: none;
 }
 .lf-control-item.disabled:hover {
   background: #fff;

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

@@ -1,13 +1,11 @@
-import { RectNode, RectNodeModel } from '@logicflow/core';
-declare class GroupNodeModel extends RectNodeModel {
+import { h } from '@logicflow/core';
+import { RectResize } from '../../NodeResize';
+declare class GroupNodeModel extends RectResize.model {
     readonly isGroup = true;
-    children: Set<unknown>;
+    children: Set<string>;
     isRestrict: boolean;
-    setAttributes(): void;
-    /**
-     * 设置是否允许子节点被拖动移除分组
-     */
-    setIsRestrict(isRestrict: any): void;
+    resizable: boolean;
+    initNodeData(data: any): void;
     isInRange({ x1, y1, x2, y2 }: {
         x1: any;
         y1: any;
@@ -15,15 +13,32 @@ declare class GroupNodeModel extends RectNodeModel {
         y2: any;
     }): boolean;
     setAllowAppendChild(isAllow: any): void;
+    /**
+     * 添加分组子节点
+     * @param id 节点id
+     */
     addChild(id: any): void;
+    /**
+     * 删除分组子节点
+     * @param id 节点id
+     */
     removeChild(id: any): void;
+    getAddableOutlineStyle(): {
+        stroke: string;
+        strokeWidth: number;
+        strokeDasharray: string;
+        fill: string;
+    };
     getData(): import("@logicflow/core").NodeData;
 }
-declare class GroupNode extends RectNode {
+declare class GroupNode extends RectResize.view {
     /**
      * 重新toFront，阻止其置顶
      */
     toFront(): void;
+    getControlGroup(): h.JSX.Element;
+    getAddedableShape(): import("preact").VNode<any>;
+    getResizeShape(): import("preact").VNode<any>;
 }
 declare const _default: {
     type: string;

package/es/materials/group/GroupNode.js

@@ -11,6 +11,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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;
@@ -31,28 +42,32 @@ var __spread = (this && this.__spread) || function () {
     for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
     return ar;
 };
-import { RectNode, RectNodeModel } from '@logicflow/core';
+import { h } from '@logicflow/core';
+import { RectResize } from '../../NodeResize';
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.isGroup = true;
-        _this.children = new Set();
-        _this.isRestrict = true; // 其子节点是否被禁止通过拖拽移出分组。 默认false，允许拖拽移除分组。
         return _this;
     }
-    GroupNodeModel.prototype.setAttributes = function () {
+    GroupNodeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        var children = [];
+        if (Array.isArray(data.children)) {
+            children = data.children;
+        }
+        // 初始化组的子节点
+        this.children = new Set(children);
         this.width = 500;
         this.height = 200;
-        this.strokeWidth = 1;
-        this.zIndex = 0;
+        // todo: 参考bpmn.js, 分组和未加入分组的节点重合时，未加入分组的节点在分组之下。方便标识。
+        this.zIndex = -1;
         this.radius = 0;
-    };
-    /**
-     * 设置是否允许子节点被拖动移除分组
-     */
-    GroupNodeModel.prototype.setIsRestrict = function (isRestrict) {
-        this.isRestrict = isRestrict;
+        this.text.editable = false;
+        this.text.draggable = false;
+        this.isRestrict = false;
+        this.resizable = false;
     };
     GroupNodeModel.prototype.isInRange = function (_a) {
         var x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
@@ -61,28 +76,40 @@ var GroupNodeModel = /** @class */ (function (_super) {
             && y1 >= (this.y - this.height / 2)
             && y2 <= (this.y + this.height / 2);
     };
-    // todo: 更好的方式定义分组的样式
     GroupNodeModel.prototype.setAllowAppendChild = function (isAllow) {
-        if (isAllow) {
-            this.stroke = 'red';
-        }
-        else {
-            this.stroke = 'rgb(24, 125, 255)';
-        }
+        this.setProperty('groupAddable', isAllow);
     };
+    /**
+     * 添加分组子节点
+     * @param id 节点id
+     */
     GroupNodeModel.prototype.addChild = function (id) {
         this.children.add(id);
     };
+    /**
+     * 删除分组子节点
+     * @param id 节点id
+     */
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
     };
+    GroupNodeModel.prototype.getAddableOutlineStyle = function () {
+        return {
+            stroke: '#FEB663',
+            strokeWidth: 2,
+            strokeDasharray: '4 4',
+            fill: 'transparent',
+        };
+    };
     GroupNodeModel.prototype.getData = function () {
         var data = _super.prototype.getData.call(this);
         data.children = __spread(this.children);
+        var properties = data.properties;
+        delete properties.groupAddable;
         return data;
     };
     return GroupNodeModel;
-}(RectNodeModel));
+}(RectResize.model));
 var GroupNode = /** @class */ (function (_super) {
     __extends(GroupNode, _super);
     function GroupNode() {
@@ -92,8 +119,27 @@ var GroupNode = /** @class */ (function (_super) {
      * 重新toFront，阻止其置顶
      */
     GroupNode.prototype.toFront = function () { };
+    GroupNode.prototype.getControlGroup = function () {
+        return this.props.model.resizable ? _super.prototype.getControlGroup.call(this) : null;
+    };
+    GroupNode.prototype.getAddedableShape = 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;
+        var strokeWidth = this.props.model.getNodeStyle().strokeWidth;
+        var style = this.props.model.getAddableOutlineStyle();
+        var newWidth = width + strokeWidth + 8;
+        var newHeight = height + strokeWidth + 8;
+        return h('rect', __assign(__assign({}, style), { width: newWidth, height: newHeight, x: x - newWidth / 2, y: y - newHeight / 2, rx: radius, ry: radius }));
+    };
+    GroupNode.prototype.getResizeShape = function () {
+        return h('g', {}, [
+            this.getAddedableShape(),
+            _super.prototype.getResizeShape.call(this),
+        ]);
+    };
     return GroupNode;
-}(RectNode));
+}(RectResize.view));
 export default {
     type: 'group',
     view: GroupNode,

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

@@ -1,4 +1,5 @@
 import LogicFlow, { BaseNodeModel } from '@logicflow/core';
+import GroupNode from './GroupNode';
 declare type BaseNodeId = string;
 declare type GroupId = string;
 declare type Bounds = {
@@ -15,6 +16,7 @@ declare class Group {
     constructor({ lf }: {
         lf: any;
     });
+    graphRendered: (data: any) => void;
     appendNodeToGrop: ({ data }: {
         data: any;
     }) => void;
@@ -27,4 +29,4 @@ declare class Group {
      */
     getGroup(bounds: Bounds): BaseNodeModel | undefined;
 }
-export { Group };
+export { Group, GroupNode, };

package/es/materials/group/index.js

@@ -24,6 +24,18 @@ var Group = /** @class */ (function () {
         var _this = this;
         var lf = _a.lf;
         this.nodeGroupMap = new Map();
+        this.graphRendered = function (data) {
+            // 如果节点
+            if (data && data.nodes) {
+                data.nodes.forEach(function (node) {
+                    if (node.children) {
+                        node.children.forEach(function (nodeId) {
+                            _this.nodeGroupMap.set(nodeId, node.id);
+                        });
+                    }
+                });
+            }
+        };
         this.appendNodeToGrop = function (_a) {
             var data = _a.data;
             // 如果这个节点之前已经在group中了，则将其从之前的group中移除
@@ -45,14 +57,19 @@ var Group = /** @class */ (function () {
         };
         this.setActiveGroup = function (_a) {
             var data = _a.data;
-            if (_this.activeGroup) {
-                _this.activeGroup.setAllowAppendChild(false);
-                _this.activeGroup = undefined;
-            }
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            _this.activeGroup = _this.getGroup(bounds);
-            if (_this.activeGroup && _this.activeGroup.id !== data.id) {
-                _this.activeGroup.setAllowAppendChild(true);
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            if (nodeModel.isGroup)
+                return;
+            var bounds = nodeModel.getBounds();
+            var newGroup = _this.getGroup(bounds);
+            if (newGroup || newGroup !== _this.activeGroup) {
+                if (_this.activeGroup) {
+                    _this.activeGroup.setAllowAppendChild(false);
+                }
+                if (newGroup) {
+                    _this.activeGroup = newGroup;
+                    _this.activeGroup.setAllowAppendChild(true);
+                }
             }
         };
         lf.register(GroupNode);
@@ -79,6 +96,7 @@ var Group = /** @class */ (function () {
         lf.on('node:drop', this.appendNodeToGrop);
         lf.on('node:dnd-move', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
+        lf.on('graph:rendered', this.graphRendered);
     }
     Group.prototype.getGroups = function () {
         var groups = [];
@@ -103,4 +121,4 @@ var Group = /** @class */ (function () {
     Group.pluginName = 'group';
     return Group;
 }());
-export { Group };
+export { Group, GroupNode, };

package/es/style/index.css

@@ -22,8 +22,9 @@
   background: #efefef;
 }
 .lf-control-item.disabled {
-  filter: opacity(0.6);
-  cursor: not-allowed;
+  filter: opacity(0.5);
+  /* cursor: not-allowed; */
+  pointer-events: none;
 }
 .lf-control-item.disabled:hover {
   background: #fff;