@knotx/plugins-group 0.0.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/LICENSE +21 -0
- package/dist/index.cjs +501 -0
- package/dist/index.d.cts +117 -0
- package/dist/index.d.mts +117 -0
- package/dist/index.d.ts +117 -0
- package/dist/index.mjs +499 -0
- package/package.json +50 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 格桑
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,501 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const jsxRuntime = require('@knotx/jsx/jsx-runtime');
|
|
4
|
+
const core = require('@knotx/core');
|
|
5
|
+
const data = require('@knotx/data');
|
|
6
|
+
const decorators = require('@knotx/decorators');
|
|
7
|
+
const rxjs = require('rxjs');
|
|
8
|
+
require('@knotx/plugins-base-render');
|
|
9
|
+
|
|
10
|
+
var __create = Object.create;
|
|
11
|
+
var __defProp = Object.defineProperty;
|
|
12
|
+
var __defProps = Object.defineProperties;
|
|
13
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
14
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
15
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
16
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
17
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
18
|
+
var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
|
|
19
|
+
var __typeError = (msg) => {
|
|
20
|
+
throw TypeError(msg);
|
|
21
|
+
};
|
|
22
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
23
|
+
var __spreadValues = (a, b) => {
|
|
24
|
+
for (var prop in b || (b = {}))
|
|
25
|
+
if (__hasOwnProp.call(b, prop))
|
|
26
|
+
__defNormalProp(a, prop, b[prop]);
|
|
27
|
+
if (__getOwnPropSymbols)
|
|
28
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
29
|
+
if (__propIsEnum.call(b, prop))
|
|
30
|
+
__defNormalProp(a, prop, b[prop]);
|
|
31
|
+
}
|
|
32
|
+
return a;
|
|
33
|
+
};
|
|
34
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
35
|
+
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
36
|
+
var __decoratorStart = (base) => {
|
|
37
|
+
var _a2;
|
|
38
|
+
return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
|
|
39
|
+
};
|
|
40
|
+
var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
|
|
41
|
+
var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
|
|
42
|
+
var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
|
|
43
|
+
var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
|
|
44
|
+
var __runInitializers = (array, flags, self, value) => {
|
|
45
|
+
for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
|
|
46
|
+
return value;
|
|
47
|
+
};
|
|
48
|
+
var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
49
|
+
var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
|
|
50
|
+
var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
|
|
51
|
+
var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
|
|
52
|
+
var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
|
|
53
|
+
return __privateGet(this, extra);
|
|
54
|
+
}, set [name](x) {
|
|
55
|
+
return __privateSet(this, extra, x);
|
|
56
|
+
} }, name));
|
|
57
|
+
k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
|
|
58
|
+
for (var i = decorators.length - 1; i >= 0; i--) {
|
|
59
|
+
ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
|
|
60
|
+
if (k) {
|
|
61
|
+
ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
|
|
62
|
+
if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
|
|
63
|
+
if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
|
|
64
|
+
}
|
|
65
|
+
it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
|
|
66
|
+
if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
|
|
67
|
+
else if (typeof it !== "object" || it === null) __typeError("Object expected");
|
|
68
|
+
else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
|
|
69
|
+
}
|
|
70
|
+
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
|
|
71
|
+
};
|
|
72
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
73
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
74
|
+
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
|
|
75
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
76
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
77
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
78
|
+
var _moveGroup_dec, _removeNodesFromGroup_dec, _addNodesToGroup_dec, _deleteGroup_dec, _dissolveGroup_dec, _createGroup_dec, _renderGroup_dec, _destroy_dec, _init_dec, _registerNodeLevelGetter_dec, _addNodePipe_dec, _dispatchNodeOperation_dec, _getNodeDraft_dec, _getNode_dec, _a, _init;
|
|
79
|
+
const _Group = class _Group extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getNode()], _getNodeDraft_dec = [decorators.inject.getNodeDraft()], _dispatchNodeOperation_dec = [decorators.inject.dispatchNodeOperation()], _addNodePipe_dec = [decorators.inject.addNodePipe()], _registerNodeLevelGetter_dec = [decorators.inject.baseRender.registerNodeLevelGetter()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _renderGroup_dec = [decorators.nodeType("group")], _createGroup_dec = [decorators.register("createGroup")], _dissolveGroup_dec = [decorators.register("dissolveGroup")], _deleteGroup_dec = [decorators.register("deleteGroup")], _addNodesToGroup_dec = [decorators.register("addNodesToGroup")], _removeNodesFromGroup_dec = [decorators.register("removeNodesFromGroup")], _moveGroup_dec = [decorators.register("moveGroup")], _a) {
|
|
80
|
+
constructor() {
|
|
81
|
+
super(...arguments);
|
|
82
|
+
__runInitializers(_init, 5, this);
|
|
83
|
+
__publicField(this, "name", "group");
|
|
84
|
+
__publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
|
|
85
|
+
__publicField(this, "getNodeDraft", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
|
|
86
|
+
__publicField(this, "dispatchNodeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
|
|
87
|
+
__publicField(this, "addNodePipe", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
|
|
88
|
+
__publicField(this, "registerNodeLevelGetter", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
|
|
89
|
+
__publicField(this, "dualRelation", new data.DualRelation());
|
|
90
|
+
__publicField(this, "subscriptions", []);
|
|
91
|
+
__publicField(this, "createGroup", __runInitializers(_init, 28, this, ({ id: groupId, nodeIds, config, data = {} }) => {
|
|
92
|
+
const { autoBounds = true, padding = _Group.DEFAULT_GROUP_PADDING, style = _Group.DEFAULT_GROUP_STYLE } = config || {};
|
|
93
|
+
const groupNode = {
|
|
94
|
+
id: groupId,
|
|
95
|
+
type: "group",
|
|
96
|
+
position: {
|
|
97
|
+
x: 0,
|
|
98
|
+
y: 0
|
|
99
|
+
},
|
|
100
|
+
data,
|
|
101
|
+
groupConfig: {
|
|
102
|
+
autoBounds,
|
|
103
|
+
padding,
|
|
104
|
+
style
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
const bounds = this.calculateBounds(groupNode, {
|
|
108
|
+
getChildren: () => nodeIds
|
|
109
|
+
});
|
|
110
|
+
groupNode.position = {
|
|
111
|
+
x: (bounds == null ? void 0 : bounds.x) || 0,
|
|
112
|
+
y: (bounds == null ? void 0 : bounds.y) || 0
|
|
113
|
+
};
|
|
114
|
+
groupNode.measured = {
|
|
115
|
+
width: (bounds == null ? void 0 : bounds.width) || 0,
|
|
116
|
+
height: (bounds == null ? void 0 : bounds.height) || 0
|
|
117
|
+
};
|
|
118
|
+
this.dispatchNodeOperation({
|
|
119
|
+
type: "batch",
|
|
120
|
+
operations: [
|
|
121
|
+
{
|
|
122
|
+
type: "add",
|
|
123
|
+
data: groupNode
|
|
124
|
+
},
|
|
125
|
+
...nodeIds.map((id) => ({
|
|
126
|
+
type: "update",
|
|
127
|
+
id,
|
|
128
|
+
data: {
|
|
129
|
+
group: groupId
|
|
130
|
+
}
|
|
131
|
+
}))
|
|
132
|
+
]
|
|
133
|
+
});
|
|
134
|
+
return groupId;
|
|
135
|
+
})), __runInitializers(_init, 31, this);
|
|
136
|
+
__publicField(this, "dissolveGroup", __runInitializers(_init, 32, this, (groupId) => {
|
|
137
|
+
this.dispatchNodeOperation({
|
|
138
|
+
type: "batch",
|
|
139
|
+
operations: [
|
|
140
|
+
{
|
|
141
|
+
type: "remove",
|
|
142
|
+
id: groupId
|
|
143
|
+
},
|
|
144
|
+
...Array.from(this.dualRelation.getChildren(groupId)).map((id) => ({
|
|
145
|
+
type: "update",
|
|
146
|
+
id,
|
|
147
|
+
data: {
|
|
148
|
+
group: void 0
|
|
149
|
+
}
|
|
150
|
+
}))
|
|
151
|
+
]
|
|
152
|
+
});
|
|
153
|
+
return true;
|
|
154
|
+
})), __runInitializers(_init, 35, this);
|
|
155
|
+
__publicField(this, "deleteGroup", __runInitializers(_init, 36, this, (groupId, recursive = false) => {
|
|
156
|
+
const children = Array.from(recursive ? this.dualRelation.getDescendants(groupId) : this.dualRelation.getChildren(groupId));
|
|
157
|
+
if (children.length === 0) {
|
|
158
|
+
this.dispatchNodeOperation({
|
|
159
|
+
type: "remove",
|
|
160
|
+
id: groupId
|
|
161
|
+
});
|
|
162
|
+
return true;
|
|
163
|
+
}
|
|
164
|
+
this.dispatchNodeOperation({
|
|
165
|
+
type: "batch",
|
|
166
|
+
operations: [
|
|
167
|
+
{
|
|
168
|
+
type: "remove",
|
|
169
|
+
id: groupId
|
|
170
|
+
},
|
|
171
|
+
...children.map((id) => ({
|
|
172
|
+
type: "remove",
|
|
173
|
+
id
|
|
174
|
+
}))
|
|
175
|
+
]
|
|
176
|
+
});
|
|
177
|
+
return true;
|
|
178
|
+
})), __runInitializers(_init, 39, this);
|
|
179
|
+
__publicField(this, "addNodesToGroup", __runInitializers(_init, 40, this, (groupId, nodeIds) => {
|
|
180
|
+
const groupNode = this.getNode(groupId);
|
|
181
|
+
if (!groupNode || groupNode.type !== "group") {
|
|
182
|
+
return false;
|
|
183
|
+
}
|
|
184
|
+
const validNodeIds = nodeIds.filter((id) => {
|
|
185
|
+
const node = this.getNode(id);
|
|
186
|
+
return node && node.group !== groupId;
|
|
187
|
+
});
|
|
188
|
+
if (validNodeIds.length === 0) {
|
|
189
|
+
return true;
|
|
190
|
+
}
|
|
191
|
+
this.dispatchNodeOperation({
|
|
192
|
+
type: "batch",
|
|
193
|
+
operations: validNodeIds.map((id) => ({
|
|
194
|
+
type: "update",
|
|
195
|
+
id,
|
|
196
|
+
data: {
|
|
197
|
+
group: groupId
|
|
198
|
+
}
|
|
199
|
+
}))
|
|
200
|
+
});
|
|
201
|
+
return true;
|
|
202
|
+
})), __runInitializers(_init, 43, this);
|
|
203
|
+
__publicField(this, "removeNodesFromGroup", __runInitializers(_init, 44, this, (groupId, nodeIds) => {
|
|
204
|
+
const groupNode = this.getNode(groupId);
|
|
205
|
+
if (!groupNode || groupNode.type !== "group") {
|
|
206
|
+
return false;
|
|
207
|
+
}
|
|
208
|
+
const validNodeIds = nodeIds.filter((id) => {
|
|
209
|
+
const node = this.getNode(id);
|
|
210
|
+
return node && node.group === groupId;
|
|
211
|
+
});
|
|
212
|
+
if (validNodeIds.length === 0) {
|
|
213
|
+
return true;
|
|
214
|
+
}
|
|
215
|
+
this.dispatchNodeOperation({
|
|
216
|
+
type: "batch",
|
|
217
|
+
operations: validNodeIds.map((id) => ({
|
|
218
|
+
type: "update",
|
|
219
|
+
id,
|
|
220
|
+
data: {
|
|
221
|
+
group: void 0
|
|
222
|
+
}
|
|
223
|
+
}))
|
|
224
|
+
});
|
|
225
|
+
return true;
|
|
226
|
+
})), __runInitializers(_init, 47, this);
|
|
227
|
+
__publicField(this, "moveGroup", __runInitializers(_init, 48, this, (groupId, position, isDelta = false) => {
|
|
228
|
+
const operation = this.buildMoveGroupOperation(groupId, position, isDelta);
|
|
229
|
+
if (operation.type === "batch" && operation.operations.length === 0) {
|
|
230
|
+
return false;
|
|
231
|
+
}
|
|
232
|
+
this.dispatchNodeOperation(operation);
|
|
233
|
+
return true;
|
|
234
|
+
})), __runInitializers(_init, 51, this);
|
|
235
|
+
}
|
|
236
|
+
init() {
|
|
237
|
+
this.subscriptions.push(
|
|
238
|
+
this.dualRelation.version.pipe(rxjs.skip(1)).subscribe((version) => {
|
|
239
|
+
console.warn("dualRelation version changed", version, this.dualRelation.changeHistory);
|
|
240
|
+
})
|
|
241
|
+
);
|
|
242
|
+
this.subscriptions.push({
|
|
243
|
+
unsubscribe: this.registerNodeLevelGetter((node) => {
|
|
244
|
+
return this.dualRelation.getNodeLevel(node.id);
|
|
245
|
+
})
|
|
246
|
+
});
|
|
247
|
+
this.addNodePipe({
|
|
248
|
+
transform: () => rxjs.pipe(
|
|
249
|
+
// 组关系维护检测
|
|
250
|
+
rxjs.tap((operation) => {
|
|
251
|
+
if (core.isDraftOperation(operation)) {
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
const checkRelation = (operation2) => {
|
|
255
|
+
switch (operation2.type) {
|
|
256
|
+
case "batch":
|
|
257
|
+
for (const op of operation2.operations) {
|
|
258
|
+
checkRelation(op);
|
|
259
|
+
}
|
|
260
|
+
break;
|
|
261
|
+
case "add":
|
|
262
|
+
if (operation2.data.group) {
|
|
263
|
+
this.dualRelation.add(operation2.data.group, operation2.data.id);
|
|
264
|
+
}
|
|
265
|
+
break;
|
|
266
|
+
case "update": {
|
|
267
|
+
const currentNode = this.getNode(operation2.id);
|
|
268
|
+
if (!("group" in operation2.data) || operation2.data.group === (currentNode == null ? void 0 : currentNode.group)) {
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
if (currentNode == null ? void 0 : currentNode.group) {
|
|
272
|
+
this.dualRelation.removeChild(currentNode.id);
|
|
273
|
+
}
|
|
274
|
+
if (operation2.data.group) {
|
|
275
|
+
this.dualRelation.add(operation2.data.group, operation2.id);
|
|
276
|
+
}
|
|
277
|
+
break;
|
|
278
|
+
}
|
|
279
|
+
case "remove":
|
|
280
|
+
this.dualRelation.removeParent(operation2.id);
|
|
281
|
+
this.dualRelation.removeChild(operation2.id);
|
|
282
|
+
break;
|
|
283
|
+
}
|
|
284
|
+
};
|
|
285
|
+
this.dualRelation.batch(() => {
|
|
286
|
+
checkRelation(operation);
|
|
287
|
+
});
|
|
288
|
+
}),
|
|
289
|
+
rxjs.map((operation) => {
|
|
290
|
+
if (core.isInitOperation(operation)) {
|
|
291
|
+
const groupNodesMap = /* @__PURE__ */ new Map();
|
|
292
|
+
operation.operations.forEach((op) => {
|
|
293
|
+
if (op.type !== "add" || !op.data.group) {
|
|
294
|
+
return;
|
|
295
|
+
}
|
|
296
|
+
groupNodesMap.set(op.data.id, op.data);
|
|
297
|
+
});
|
|
298
|
+
return __spreadProps(__spreadValues({}, operation), { operations: operation.operations.map((op) => {
|
|
299
|
+
if (op.type !== "add" || op.data.type !== "group") {
|
|
300
|
+
return op;
|
|
301
|
+
}
|
|
302
|
+
const bounds = this.calculateBounds(op.data, {
|
|
303
|
+
getNode: (id) => groupNodesMap.get(id)
|
|
304
|
+
});
|
|
305
|
+
return __spreadProps(__spreadValues({}, op), {
|
|
306
|
+
data: __spreadProps(__spreadValues({}, op.data), {
|
|
307
|
+
position: {
|
|
308
|
+
x: (bounds == null ? void 0 : bounds.x) || 0,
|
|
309
|
+
y: (bounds == null ? void 0 : bounds.y) || 0
|
|
310
|
+
},
|
|
311
|
+
measured: {
|
|
312
|
+
width: (bounds == null ? void 0 : bounds.width) || 0,
|
|
313
|
+
height: (bounds == null ? void 0 : bounds.height) || 0
|
|
314
|
+
}
|
|
315
|
+
})
|
|
316
|
+
});
|
|
317
|
+
}) });
|
|
318
|
+
}
|
|
319
|
+
const isDraft = core.isDraftOperation(operation);
|
|
320
|
+
if (isDraft && operation.type === "draftOperation") {
|
|
321
|
+
switch (operation.operation.type) {
|
|
322
|
+
case "update": {
|
|
323
|
+
if (!operation.operation.data.position) {
|
|
324
|
+
return operation;
|
|
325
|
+
}
|
|
326
|
+
const groupMoveOperation = this.buildMoveGroupOperation(operation.operation.id, operation.operation.data.position);
|
|
327
|
+
if (!groupMoveOperation.operations.length) {
|
|
328
|
+
return operation;
|
|
329
|
+
}
|
|
330
|
+
return {
|
|
331
|
+
type: "draftOperation",
|
|
332
|
+
draftId: operation.draftId,
|
|
333
|
+
operation: groupMoveOperation
|
|
334
|
+
};
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
return operation;
|
|
339
|
+
})
|
|
340
|
+
)
|
|
341
|
+
});
|
|
342
|
+
}
|
|
343
|
+
destroy() {
|
|
344
|
+
this.subscriptions.forEach((subscription) => subscription.unsubscribe());
|
|
345
|
+
}
|
|
346
|
+
renderGroup({ node: groupNode }) {
|
|
347
|
+
const getNode = (id) => this.getNodeDraft(id) || this.getNode(id);
|
|
348
|
+
const bounds = this.calculateBounds(groupNode, { getNode });
|
|
349
|
+
if (!bounds)
|
|
350
|
+
return null;
|
|
351
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
352
|
+
"div",
|
|
353
|
+
{
|
|
354
|
+
className: _Group.GROUP_WRAPPER_CLASSNAME,
|
|
355
|
+
style: __spreadProps(__spreadValues({
|
|
356
|
+
width: `${bounds.width}px`,
|
|
357
|
+
height: `${bounds.height}px`
|
|
358
|
+
}, groupNode.groupConfig ? groupNode.groupConfig.style : _Group.DEFAULT_GROUP_STYLE), {
|
|
359
|
+
pointerEvents: "all"
|
|
360
|
+
})
|
|
361
|
+
},
|
|
362
|
+
groupNode.id
|
|
363
|
+
);
|
|
364
|
+
}
|
|
365
|
+
calculateBounds(node, {
|
|
366
|
+
getChildren = (nodeId) => Array.from(this.dualRelation.getChildren(nodeId)),
|
|
367
|
+
getNode = this.getNode
|
|
368
|
+
} = {}) {
|
|
369
|
+
var _a2, _b, _c;
|
|
370
|
+
const { padding = 0, autoBounds } = (_a2 = node.groupConfig) != null ? _a2 : {
|
|
371
|
+
padding: _Group.DEFAULT_GROUP_PADDING,
|
|
372
|
+
autoBounds: true
|
|
373
|
+
};
|
|
374
|
+
if (!autoBounds && node.position && node.measured) {
|
|
375
|
+
return {
|
|
376
|
+
x: node.position.x - padding,
|
|
377
|
+
y: node.position.y - padding,
|
|
378
|
+
width: node.measured.width + padding * 2,
|
|
379
|
+
height: node.measured.height + padding * 2
|
|
380
|
+
};
|
|
381
|
+
}
|
|
382
|
+
const nodeIds = getChildren(node.id);
|
|
383
|
+
if (!nodeIds.length)
|
|
384
|
+
return null;
|
|
385
|
+
let minX = Infinity;
|
|
386
|
+
let minY = Infinity;
|
|
387
|
+
let maxX = -Infinity;
|
|
388
|
+
let maxY = -Infinity;
|
|
389
|
+
let hasValidNode = false;
|
|
390
|
+
for (const nodeId of nodeIds) {
|
|
391
|
+
const node2 = getNode(nodeId);
|
|
392
|
+
if (!node2)
|
|
393
|
+
continue;
|
|
394
|
+
hasValidNode = true;
|
|
395
|
+
const { x, y } = node2.position;
|
|
396
|
+
const width = ((_b = node2.measured) == null ? void 0 : _b.width) || 0;
|
|
397
|
+
const height = ((_c = node2.measured) == null ? void 0 : _c.height) || 0;
|
|
398
|
+
minX = Math.min(minX, x);
|
|
399
|
+
minY = Math.min(minY, y);
|
|
400
|
+
maxX = Math.max(maxX, x + width);
|
|
401
|
+
maxY = Math.max(maxY, y + height);
|
|
402
|
+
}
|
|
403
|
+
if (!hasValidNode)
|
|
404
|
+
return null;
|
|
405
|
+
return {
|
|
406
|
+
x: minX - padding,
|
|
407
|
+
y: minY - padding,
|
|
408
|
+
width: maxX - minX + padding * 2,
|
|
409
|
+
height: maxY - minY + padding * 2
|
|
410
|
+
};
|
|
411
|
+
}
|
|
412
|
+
buildMoveGroupOperation(groupId, position, isDelta = false) {
|
|
413
|
+
const groupNode = this.getNode(groupId);
|
|
414
|
+
if (!groupNode || groupNode.type !== "group") {
|
|
415
|
+
return {
|
|
416
|
+
type: "batch",
|
|
417
|
+
operations: []
|
|
418
|
+
};
|
|
419
|
+
}
|
|
420
|
+
const children = Array.from(this.dualRelation.getDescendants(groupId));
|
|
421
|
+
if (children.length === 0) {
|
|
422
|
+
return {
|
|
423
|
+
type: "batch",
|
|
424
|
+
operations: []
|
|
425
|
+
};
|
|
426
|
+
}
|
|
427
|
+
const currentPosition = groupNode.position;
|
|
428
|
+
let dx = 0;
|
|
429
|
+
let dy = 0;
|
|
430
|
+
if (isDelta) {
|
|
431
|
+
dx = position.x;
|
|
432
|
+
dy = position.y;
|
|
433
|
+
} else {
|
|
434
|
+
dx = position.x - currentPosition.x;
|
|
435
|
+
dy = position.y - currentPosition.y;
|
|
436
|
+
}
|
|
437
|
+
if (dx === 0 && dy === 0) {
|
|
438
|
+
return {
|
|
439
|
+
type: "batch",
|
|
440
|
+
operations: []
|
|
441
|
+
};
|
|
442
|
+
}
|
|
443
|
+
return {
|
|
444
|
+
type: "batch",
|
|
445
|
+
operations: [
|
|
446
|
+
{
|
|
447
|
+
type: "update",
|
|
448
|
+
id: groupId,
|
|
449
|
+
data: {
|
|
450
|
+
position: {
|
|
451
|
+
x: isDelta ? currentPosition.x + position.x : position.x,
|
|
452
|
+
y: isDelta ? currentPosition.y + position.y : position.y
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
},
|
|
456
|
+
...children.map((id) => {
|
|
457
|
+
var _a2;
|
|
458
|
+
const nodePosition = ((_a2 = this.getNode(id)) == null ? void 0 : _a2.position) || { x: 0, y: 0 };
|
|
459
|
+
return {
|
|
460
|
+
type: "update",
|
|
461
|
+
id,
|
|
462
|
+
data: {
|
|
463
|
+
position: {
|
|
464
|
+
x: nodePosition.x + dx,
|
|
465
|
+
y: nodePosition.y + dy
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
};
|
|
469
|
+
})
|
|
470
|
+
]
|
|
471
|
+
};
|
|
472
|
+
}
|
|
473
|
+
};
|
|
474
|
+
_init = __decoratorStart(_a);
|
|
475
|
+
__decorateElement(_init, 1, "init", _init_dec, _Group);
|
|
476
|
+
__decorateElement(_init, 1, "destroy", _destroy_dec, _Group);
|
|
477
|
+
__decorateElement(_init, 1, "renderGroup", _renderGroup_dec, _Group);
|
|
478
|
+
__decorateElement(_init, 5, "getNode", _getNode_dec, _Group);
|
|
479
|
+
__decorateElement(_init, 5, "getNodeDraft", _getNodeDraft_dec, _Group);
|
|
480
|
+
__decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, _Group);
|
|
481
|
+
__decorateElement(_init, 5, "addNodePipe", _addNodePipe_dec, _Group);
|
|
482
|
+
__decorateElement(_init, 5, "registerNodeLevelGetter", _registerNodeLevelGetter_dec, _Group);
|
|
483
|
+
__decorateElement(_init, 5, "createGroup", _createGroup_dec, _Group);
|
|
484
|
+
__decorateElement(_init, 5, "dissolveGroup", _dissolveGroup_dec, _Group);
|
|
485
|
+
__decorateElement(_init, 5, "deleteGroup", _deleteGroup_dec, _Group);
|
|
486
|
+
__decorateElement(_init, 5, "addNodesToGroup", _addNodesToGroup_dec, _Group);
|
|
487
|
+
__decorateElement(_init, 5, "removeNodesFromGroup", _removeNodesFromGroup_dec, _Group);
|
|
488
|
+
__decorateElement(_init, 5, "moveGroup", _moveGroup_dec, _Group);
|
|
489
|
+
__decoratorMetadata(_init, _Group);
|
|
490
|
+
__publicField(_Group, "GROUP_WRAPPER_CLASSNAME", core.bem("group", "wrapper"));
|
|
491
|
+
__publicField(_Group, "DEFAULT_GROUP_PADDING", 10);
|
|
492
|
+
__publicField(_Group, "DEFAULT_GROUP_STYLE", {
|
|
493
|
+
backgroundColor: "rgba(0, 100, 255, 0.05)",
|
|
494
|
+
borderColor: "rgba(0, 100, 255, 0.3)",
|
|
495
|
+
borderWidth: 1,
|
|
496
|
+
borderStyle: "solid",
|
|
497
|
+
borderRadius: 4
|
|
498
|
+
});
|
|
499
|
+
let Group = _Group;
|
|
500
|
+
|
|
501
|
+
exports.Group = Group;
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { NodePosition, BasePlugin, NodeData } from '@knotx/core';
|
|
2
|
+
|
|
3
|
+
interface GroupStyle {
|
|
4
|
+
backgroundColor?: string;
|
|
5
|
+
borderColor?: string;
|
|
6
|
+
borderWidth?: number;
|
|
7
|
+
borderStyle?: string;
|
|
8
|
+
borderRadius?: number;
|
|
9
|
+
}
|
|
10
|
+
interface GroupConfig {
|
|
11
|
+
autoBounds?: boolean;
|
|
12
|
+
padding?: number;
|
|
13
|
+
style?: GroupStyle;
|
|
14
|
+
}
|
|
15
|
+
interface GroupAPI {
|
|
16
|
+
/**
|
|
17
|
+
* 创建组
|
|
18
|
+
* @param params 创建组参数
|
|
19
|
+
* @returns 组 ID
|
|
20
|
+
*/
|
|
21
|
+
createGroup: (params: {
|
|
22
|
+
id: string;
|
|
23
|
+
nodeIds: string[];
|
|
24
|
+
config?: GroupConfig;
|
|
25
|
+
data?: Record<string, any>;
|
|
26
|
+
}) => string;
|
|
27
|
+
/**
|
|
28
|
+
* 解散组
|
|
29
|
+
* @param groupId 组 ID
|
|
30
|
+
* @param recursive 是否递归解散组
|
|
31
|
+
* @returns 是否成功解散组
|
|
32
|
+
*/
|
|
33
|
+
dissolveGroup: (groupId: string, recursive?: boolean) => boolean;
|
|
34
|
+
/**
|
|
35
|
+
* 删除组
|
|
36
|
+
* @param groupId 组 ID
|
|
37
|
+
* @returns 是否成功删除组
|
|
38
|
+
*/
|
|
39
|
+
deleteGroup: (groupId: string) => boolean;
|
|
40
|
+
/**
|
|
41
|
+
* 添加节点到组
|
|
42
|
+
* @param groupId 组 ID
|
|
43
|
+
* @param nodeIds 节点 ID 列表
|
|
44
|
+
* @returns 是否成功添加节点到组
|
|
45
|
+
*/
|
|
46
|
+
addNodesToGroup: (groupId: string, nodeIds: string[]) => boolean;
|
|
47
|
+
/**
|
|
48
|
+
* 从组中移除节点
|
|
49
|
+
* @param groupId 组 ID
|
|
50
|
+
* @param nodeIds 节点 ID 列表
|
|
51
|
+
* @returns 是否成功从组中移除节点
|
|
52
|
+
*/
|
|
53
|
+
removeNodesFromGroup: (groupId: string, nodeIds: string[]) => boolean;
|
|
54
|
+
/**
|
|
55
|
+
* 移动组
|
|
56
|
+
* @param groupId 组 ID
|
|
57
|
+
* @param position 组位置
|
|
58
|
+
* @param isDelta 是否是增量移动
|
|
59
|
+
* @returns 是否成功移动组
|
|
60
|
+
*/
|
|
61
|
+
moveGroup: (groupId: string, position: NodePosition, isDelta?: boolean) => boolean;
|
|
62
|
+
}
|
|
63
|
+
declare module '@knotx/core' {
|
|
64
|
+
interface PluginData {
|
|
65
|
+
group: GroupAPI;
|
|
66
|
+
}
|
|
67
|
+
interface NodeData {
|
|
68
|
+
/**
|
|
69
|
+
* 所处的组
|
|
70
|
+
*/
|
|
71
|
+
group?: string;
|
|
72
|
+
/**
|
|
73
|
+
* type='group' 时,当前组配置
|
|
74
|
+
*/
|
|
75
|
+
groupConfig?: GroupConfig;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
interface GroupBounds {
|
|
79
|
+
x: number;
|
|
80
|
+
y: number;
|
|
81
|
+
width: number;
|
|
82
|
+
height: number;
|
|
83
|
+
}
|
|
84
|
+
declare class Group extends BasePlugin<'group'> {
|
|
85
|
+
name: "group";
|
|
86
|
+
private getNode;
|
|
87
|
+
private getNodeDraft;
|
|
88
|
+
private dispatchNodeOperation;
|
|
89
|
+
private addNodePipe;
|
|
90
|
+
private registerNodeLevelGetter;
|
|
91
|
+
private dualRelation;
|
|
92
|
+
private subscriptions;
|
|
93
|
+
init(): void;
|
|
94
|
+
destroy(): void;
|
|
95
|
+
renderGroup({ node: groupNode }: {
|
|
96
|
+
node: NodeData;
|
|
97
|
+
}): JSX.Element | null;
|
|
98
|
+
private calculateBounds;
|
|
99
|
+
createGroup: GroupAPI['createGroup'];
|
|
100
|
+
dissolveGroup: GroupAPI['dissolveGroup'];
|
|
101
|
+
deleteGroup: GroupAPI['deleteGroup'];
|
|
102
|
+
addNodesToGroup: GroupAPI['addNodesToGroup'];
|
|
103
|
+
removeNodesFromGroup: GroupAPI['removeNodesFromGroup'];
|
|
104
|
+
moveGroup: GroupAPI['moveGroup'];
|
|
105
|
+
private buildMoveGroupOperation;
|
|
106
|
+
static GROUP_WRAPPER_CLASSNAME: string;
|
|
107
|
+
static DEFAULT_GROUP_PADDING: number;
|
|
108
|
+
static DEFAULT_GROUP_STYLE: {
|
|
109
|
+
backgroundColor: string;
|
|
110
|
+
borderColor: string;
|
|
111
|
+
borderWidth: number;
|
|
112
|
+
borderStyle: string;
|
|
113
|
+
borderRadius: number;
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
export { Group, type GroupAPI, type GroupBounds, type GroupConfig, type GroupStyle };
|