@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.
- package/es/dynamic-group/index.d.ts +12 -0
- package/es/dynamic-group/index.js +14 -2
- package/es/dynamic-group/model.d.ts +4 -0
- package/es/dynamic-group/model.js +9 -2
- package/lib/dynamic-group/index.d.ts +12 -0
- package/lib/dynamic-group/index.js +14 -2
- package/lib/dynamic-group/model.d.ts +4 -0
- package/lib/dynamic-group/model.js +10 -3
- package/package.json +3 -3
|
@@ -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:
|
|
567
|
-
strokeWidth:
|
|
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:
|
|
570
|
-
strokeWidth:
|
|
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.
|
|
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.
|
|
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.
|
|
40
|
+
"@logicflow/core": "2.2.3-alpha.0"
|
|
41
41
|
},
|
|
42
42
|
"files": [
|
|
43
43
|
"dist",
|