@logicflow/extension 2.2.4-alpha.0 → 2.3.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,6 +14,12 @@ export declare const dynamicGroup: {
14
14
  view: typeof DynamicGroupNode;
15
15
  model: typeof DynamicGroupNodeModel;
16
16
  };
17
+ export type SensorOutlineOptions = {
18
+ /** 拖拽感应外框描边颜色,默认 '#feb663' */
19
+ stroke?: string;
20
+ /** 拖拽感应外框线宽,默认 2 */
21
+ strokeWidth?: number;
22
+ };
17
23
  export declare class DynamicGroup {
18
24
  static pluginName: string;
19
25
  private lf;
@@ -27,6 +33,8 @@ export declare class DynamicGroup {
27
33
  * 默认 true,与 v1.1 以来行为一致;为 false 时仅删除分组,成员保留并解除归属。
28
34
  */
29
35
  cascadeDeleteChildren: boolean;
36
+ /** 拖拽节点进入分组时的感应外框样式 */
37
+ sensorOutline?: SensorOutlineOptions;
30
38
  topGroupZIndex: number;
31
39
  activeGroup?: DynamicGroupNodeModel;
32
40
  nodeGroupMap: Map<string, string>;
@@ -78,6 +86,8 @@ export declare class DynamicGroup {
78
86
  onNodeAdd: ({ data: node }: CallbackArgs<'node:add'>) => void;
79
87
  onNodeDndAdd: ({ data: node }: CallbackArgs<'node:dnd-add'>) => void;
80
88
  onNodeDrop: ({ data: node }: CallbackArgs<'node:drop'>) => void;
89
+ onNodeMouseUp: () => void;
90
+ clearDragTargetHighlight(): void;
81
91
  detachNodeFromGroup: (groupId: string, nodeId: string) => void;
82
92
  releaseGroupMembers: (groupModel: DynamicGroupNodeModel) => void;
83
93
  removeChildFromOtherGroups: (childId: string, ownerGroupId: string) => void;
@@ -151,6 +161,8 @@ export declare namespace DynamicGroup {
151
161
  disallowEdgeConnectToGroup: boolean;
152
162
  /** 删除分组时是否级联删除成员;默认 true */
153
163
  cascadeDeleteChildren: boolean;
164
+ /** 拖拽节点进入分组时的感应外框样式 */
165
+ sensorOutline: SensorOutlineOptions;
154
166
  }>;
155
167
  }
156
168
  export default DynamicGroup;
@@ -120,6 +120,7 @@ var DynamicGroup = /** @class */ (function () {
120
120
  }
121
121
  };
122
122
  this.onSelectionDrop = function () {
123
+ _this.clearDragTargetHighlight();
123
124
  var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
124
125
  selectedNodes.forEach(function (node) {
125
126
  _this.addNodeToGroup(node);
@@ -133,11 +134,16 @@ var DynamicGroup = /** @class */ (function () {
133
134
  var node = _a.data;
134
135
  _this.syncGroupChildren(node);
135
136
  _this.addNodeToGroup(node);
137
+ _this.clearDragTargetHighlight();
136
138
  };
137
139
  this.onNodeDrop = function (_a) {
138
140
  var node = _a.data;
141
+ _this.clearDragTargetHighlight();
139
142
  _this.addNodeToGroup(node);
140
143
  };
144
+ this.onNodeMouseUp = function () {
145
+ _this.clearDragTargetHighlight();
146
+ };
141
147
  this.detachNodeFromGroup = function (groupId, nodeId) {
142
148
  var group = _this.lf.getNodeModelById(groupId);
143
149
  if (!group)
@@ -215,7 +221,6 @@ var DynamicGroup = /** @class */ (function () {
215
221
  if (targetGroup.isAllowAppendIn(node)) {
216
222
  targetGroup.addChild(node.id);
217
223
  // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中,与直接调用 addChild 的行为保持一致
218
- targetGroup.setAllowAppendChild(false);
219
224
  }
220
225
  else {
221
226
  // 抛出不允许插入的事件
@@ -230,7 +235,6 @@ var DynamicGroup = /** @class */ (function () {
230
235
  _this.detachNodeFromGroup(preGroupId, node.id);
231
236
  targetGroup.addChild(node.id);
232
237
  // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中,与直接调用 addChild 的行为保持一致
233
- targetGroup.setAllowAppendChild(false);
234
238
  }
235
239
  else {
236
240
  var preGroup = _this.lf.getNodeModelById(preGroupId);
@@ -564,6 +568,12 @@ var DynamicGroup = /** @class */ (function () {
564
568
  });
565
569
  this.topGroupZIndex = max;
566
570
  };
571
+ DynamicGroup.prototype.clearDragTargetHighlight = function () {
572
+ if (this.activeGroup) {
573
+ this.activeGroup.setAllowAppendChild(false);
574
+ this.activeGroup = undefined;
575
+ }
576
+ };
567
577
  DynamicGroup.prototype.removeChildrenInGroupNodeData = function (nodeData) {
568
578
  var _a;
569
579
  var newNodeData = cloneDeep(nodeData);
@@ -733,6 +743,7 @@ var DynamicGroup = /** @class */ (function () {
733
743
  lf.on(EventType.NODE_ADD, this.onNodeAdd);
734
744
  lf.on(EventType.NODE_DND_ADD, this.onNodeDndAdd);
735
745
  lf.on(EventType.NODE_DROP, this.onNodeDrop);
746
+ lf.on(EventType.NODE_MOUSEUP, this.onNodeMouseUp);
736
747
  lf.on(EventType.SELECTION_DROP, this.onSelectionDrop);
737
748
  lf.on(EventType.NODE_DELETE, this.removeNodeFromGroup);
738
749
  lf.on(EventType.EDGE_DELETE, this.onEdgeDelete);
@@ -790,6 +801,7 @@ var DynamicGroup = /** @class */ (function () {
790
801
  this.lf.off(EventType.NODE_ADD, this.onNodeAdd);
791
802
  this.lf.off(EventType.NODE_DND_ADD, this.onNodeDndAdd);
792
803
  this.lf.off(EventType.NODE_DROP, this.onNodeDrop);
804
+ this.lf.off(EventType.NODE_MOUSEUP, this.onNodeMouseUp);
793
805
  this.lf.off(EventType.SELECTION_DROP, this.onSelectionDrop);
794
806
  this.lf.off(EventType.NODE_DELETE, this.removeNodeFromGroup);
795
807
  this.lf.off(EventType.EDGE_DELETE, this.onEdgeDelete);
@@ -191,4 +191,8 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
191
191
  fill: string;
192
192
  };
193
193
  }
194
+ export declare const DEFAULT_SENSOR_OUTLINE: {
195
+ stroke: string;
196
+ strokeWidth: number;
197
+ };
194
198
  export default DynamicGroupNodeModel;
@@ -562,9 +562,12 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
562
562
  * 设置分组节点 drop 区域的样式
563
563
  */
564
564
  DynamicGroupNodeModel.prototype.getAddableOutlineStyle = function () {
565
+ var _a;
566
+ var plugin = this.graphModel.dynamicGroup;
567
+ var _b = (_a = plugin === null || plugin === void 0 ? void 0 : plugin.sensorOutline) !== null && _a !== void 0 ? _a : {}, stroke = _b.stroke, strokeWidth = _b.strokeWidth;
565
568
  return {
566
- stroke: '#feb663',
567
- strokeWidth: 2,
569
+ stroke: stroke !== null && stroke !== void 0 ? stroke : DEFAULT_SENSOR_OUTLINE.stroke,
570
+ strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : DEFAULT_SENSOR_OUTLINE.strokeWidth,
568
571
  strokeDasharray: '4 4',
569
572
  fill: 'transparent',
570
573
  };
@@ -581,4 +584,8 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
581
584
  return DynamicGroupNodeModel;
582
585
  }(RectNodeModel));
583
586
  export { DynamicGroupNodeModel };
587
+ export var DEFAULT_SENSOR_OUTLINE = {
588
+ stroke: '#feb663',
589
+ strokeWidth: 2,
590
+ };
584
591
  export default DynamicGroupNodeModel;
@@ -14,6 +14,12 @@ export declare const dynamicGroup: {
14
14
  view: typeof DynamicGroupNode;
15
15
  model: typeof DynamicGroupNodeModel;
16
16
  };
17
+ export type SensorOutlineOptions = {
18
+ /** 拖拽感应外框描边颜色,默认 '#feb663' */
19
+ stroke?: string;
20
+ /** 拖拽感应外框线宽,默认 2 */
21
+ strokeWidth?: number;
22
+ };
17
23
  export declare class DynamicGroup {
18
24
  static pluginName: string;
19
25
  private lf;
@@ -27,6 +33,8 @@ export declare class DynamicGroup {
27
33
  * 默认 true,与 v1.1 以来行为一致;为 false 时仅删除分组,成员保留并解除归属。
28
34
  */
29
35
  cascadeDeleteChildren: boolean;
36
+ /** 拖拽节点进入分组时的感应外框样式 */
37
+ sensorOutline?: SensorOutlineOptions;
30
38
  topGroupZIndex: number;
31
39
  activeGroup?: DynamicGroupNodeModel;
32
40
  nodeGroupMap: Map<string, string>;
@@ -78,6 +86,8 @@ export declare class DynamicGroup {
78
86
  onNodeAdd: ({ data: node }: CallbackArgs<'node:add'>) => void;
79
87
  onNodeDndAdd: ({ data: node }: CallbackArgs<'node:dnd-add'>) => void;
80
88
  onNodeDrop: ({ data: node }: CallbackArgs<'node:drop'>) => void;
89
+ onNodeMouseUp: () => void;
90
+ clearDragTargetHighlight(): void;
81
91
  detachNodeFromGroup: (groupId: string, nodeId: string) => void;
82
92
  releaseGroupMembers: (groupModel: DynamicGroupNodeModel) => void;
83
93
  removeChildFromOtherGroups: (childId: string, ownerGroupId: string) => void;
@@ -151,6 +161,8 @@ export declare namespace DynamicGroup {
151
161
  disallowEdgeConnectToGroup: boolean;
152
162
  /** 删除分组时是否级联删除成员;默认 true */
153
163
  cascadeDeleteChildren: boolean;
164
+ /** 拖拽节点进入分组时的感应外框样式 */
165
+ sensorOutline: SensorOutlineOptions;
154
166
  }>;
155
167
  }
156
168
  export default DynamicGroup;
@@ -137,6 +137,7 @@ var DynamicGroup = /** @class */ (function () {
137
137
  }
138
138
  };
139
139
  this.onSelectionDrop = function () {
140
+ _this.clearDragTargetHighlight();
140
141
  var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
141
142
  selectedNodes.forEach(function (node) {
142
143
  _this.addNodeToGroup(node);
@@ -150,11 +151,16 @@ var DynamicGroup = /** @class */ (function () {
150
151
  var node = _a.data;
151
152
  _this.syncGroupChildren(node);
152
153
  _this.addNodeToGroup(node);
154
+ _this.clearDragTargetHighlight();
153
155
  };
154
156
  this.onNodeDrop = function (_a) {
155
157
  var node = _a.data;
158
+ _this.clearDragTargetHighlight();
156
159
  _this.addNodeToGroup(node);
157
160
  };
161
+ this.onNodeMouseUp = function () {
162
+ _this.clearDragTargetHighlight();
163
+ };
158
164
  this.detachNodeFromGroup = function (groupId, nodeId) {
159
165
  var group = _this.lf.getNodeModelById(groupId);
160
166
  if (!group)
@@ -232,7 +238,6 @@ var DynamicGroup = /** @class */ (function () {
232
238
  if (targetGroup.isAllowAppendIn(node)) {
233
239
  targetGroup.addChild(node.id);
234
240
  // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中,与直接调用 addChild 的行为保持一致
235
- targetGroup.setAllowAppendChild(false);
236
241
  }
237
242
  else {
238
243
  // 抛出不允许插入的事件
@@ -247,7 +252,6 @@ var DynamicGroup = /** @class */ (function () {
247
252
  _this.detachNodeFromGroup(preGroupId, node.id);
248
253
  targetGroup.addChild(node.id);
249
254
  // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中,与直接调用 addChild 的行为保持一致
250
- targetGroup.setAllowAppendChild(false);
251
255
  }
252
256
  else {
253
257
  var preGroup = _this.lf.getNodeModelById(preGroupId);
@@ -581,6 +585,12 @@ var DynamicGroup = /** @class */ (function () {
581
585
  });
582
586
  this.topGroupZIndex = max;
583
587
  };
588
+ DynamicGroup.prototype.clearDragTargetHighlight = function () {
589
+ if (this.activeGroup) {
590
+ this.activeGroup.setAllowAppendChild(false);
591
+ this.activeGroup = undefined;
592
+ }
593
+ };
584
594
  DynamicGroup.prototype.removeChildrenInGroupNodeData = function (nodeData) {
585
595
  var _a;
586
596
  var newNodeData = (0, lodash_es_1.cloneDeep)(nodeData);
@@ -750,6 +760,7 @@ var DynamicGroup = /** @class */ (function () {
750
760
  lf.on(core_1.EventType.NODE_ADD, this.onNodeAdd);
751
761
  lf.on(core_1.EventType.NODE_DND_ADD, this.onNodeDndAdd);
752
762
  lf.on(core_1.EventType.NODE_DROP, this.onNodeDrop);
763
+ lf.on(core_1.EventType.NODE_MOUSEUP, this.onNodeMouseUp);
753
764
  lf.on(core_1.EventType.SELECTION_DROP, this.onSelectionDrop);
754
765
  lf.on(core_1.EventType.NODE_DELETE, this.removeNodeFromGroup);
755
766
  lf.on(core_1.EventType.EDGE_DELETE, this.onEdgeDelete);
@@ -807,6 +818,7 @@ var DynamicGroup = /** @class */ (function () {
807
818
  this.lf.off(core_1.EventType.NODE_ADD, this.onNodeAdd);
808
819
  this.lf.off(core_1.EventType.NODE_DND_ADD, this.onNodeDndAdd);
809
820
  this.lf.off(core_1.EventType.NODE_DROP, this.onNodeDrop);
821
+ this.lf.off(core_1.EventType.NODE_MOUSEUP, this.onNodeMouseUp);
810
822
  this.lf.off(core_1.EventType.SELECTION_DROP, this.onSelectionDrop);
811
823
  this.lf.off(core_1.EventType.NODE_DELETE, this.removeNodeFromGroup);
812
824
  this.lf.off(core_1.EventType.EDGE_DELETE, this.onEdgeDelete);
@@ -191,4 +191,8 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
191
191
  fill: string;
192
192
  };
193
193
  }
194
+ export declare const DEFAULT_SENSOR_OUTLINE: {
195
+ stroke: string;
196
+ strokeWidth: number;
197
+ };
194
198
  export default DynamicGroupNodeModel;
@@ -57,7 +57,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
57
57
  return to.concat(ar || Array.prototype.slice.call(from));
58
58
  };
59
59
  Object.defineProperty(exports, "__esModule", { value: true });
60
- exports.DynamicGroupNodeModel = void 0;
60
+ exports.DEFAULT_SENSOR_OUTLINE = exports.DynamicGroupNodeModel = void 0;
61
61
  var core_1 = require("@logicflow/core");
62
62
  var lodash_es_1 = require("lodash-es");
63
63
  var events_1 = require("../constant/events");
@@ -565,9 +565,12 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
565
565
  * 设置分组节点 drop 区域的样式
566
566
  */
567
567
  DynamicGroupNodeModel.prototype.getAddableOutlineStyle = function () {
568
+ var _a;
569
+ var plugin = this.graphModel.dynamicGroup;
570
+ var _b = (_a = plugin === null || plugin === void 0 ? void 0 : plugin.sensorOutline) !== null && _a !== void 0 ? _a : {}, stroke = _b.stroke, strokeWidth = _b.strokeWidth;
568
571
  return {
569
- stroke: '#feb663',
570
- strokeWidth: 2,
572
+ stroke: stroke !== null && stroke !== void 0 ? stroke : exports.DEFAULT_SENSOR_OUTLINE.stroke,
573
+ strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : exports.DEFAULT_SENSOR_OUTLINE.strokeWidth,
571
574
  strokeDasharray: '4 4',
572
575
  fill: 'transparent',
573
576
  };
@@ -584,4 +587,8 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
584
587
  return DynamicGroupNodeModel;
585
588
  }(core_1.RectNodeModel));
586
589
  exports.DynamicGroupNodeModel = DynamicGroupNodeModel;
590
+ exports.DEFAULT_SENSOR_OUTLINE = {
591
+ stroke: '#feb663',
592
+ strokeWidth: 2,
593
+ };
587
594
  exports.default = DynamicGroupNodeModel;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@logicflow/extension",
3
- "version": "2.2.4-alpha.0",
3
+ "version": "2.3.0-alpha.0",
4
4
  "description": "LogicFlow Extensions",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -20,7 +20,7 @@
20
20
  "author": "Logicflow-Team",
21
21
  "license": "Apache-2.0",
22
22
  "peerDependencies": {
23
- "@logicflow/core": "2.2.2"
23
+ "@logicflow/core": "2.2.3-alpha.0"
24
24
  },
25
25
  "dependencies": {
26
26
  "@antv/hierarchy": "^0.6.11",
@@ -37,7 +37,7 @@
37
37
  "postcss-url": "^10.1.3",
38
38
  "postcss-import": "^16.1.0",
39
39
  "rollup-plugin-postcss": "^4.0.2",
40
- "@logicflow/core": "2.2.2"
40
+ "@logicflow/core": "2.2.3-alpha.0"
41
41
  },
42
42
  "files": [
43
43
  "dist",