@knotx/plugins-connection-line 0.4.1 → 0.4.3
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/dist/index.cjs +9 -9
- package/dist/index.js +9 -9
- package/package.json +12 -12
package/dist/index.cjs
CHANGED
|
@@ -99,7 +99,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
|
|
|
99
99
|
__publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 40, this, ({ nodeId, type, index = 0, className = "" }) => {
|
|
100
100
|
return {
|
|
101
101
|
"className": `${className} ${this.classNames.connector} ${this.classNames[type]}`,
|
|
102
|
-
|
|
102
|
+
[`data-${this.pluginId}`]: "",
|
|
103
103
|
"data-node-id": nodeId,
|
|
104
104
|
"data-connector-id": String(index),
|
|
105
105
|
"data-connector-type": type
|
|
@@ -143,9 +143,8 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
|
|
|
143
143
|
const size = this.getContainerSize();
|
|
144
144
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
145
145
|
"div",
|
|
146
|
-
{
|
|
146
|
+
__spreadValues({
|
|
147
147
|
className: core.bem("connection-line", "container"),
|
|
148
|
-
"data-plugin-id": this.pluginId,
|
|
149
148
|
style: {
|
|
150
149
|
position: "absolute",
|
|
151
150
|
left: 0,
|
|
@@ -155,7 +154,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
|
|
|
155
154
|
overflow: "visible",
|
|
156
155
|
pointerEvents: "none"
|
|
157
156
|
}
|
|
158
|
-
}
|
|
157
|
+
}, { [`data-${this.pluginId}`]: "" })
|
|
159
158
|
);
|
|
160
159
|
}
|
|
161
160
|
/**
|
|
@@ -165,7 +164,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
|
|
|
165
164
|
return 1;
|
|
166
165
|
}
|
|
167
166
|
getContainerElement() {
|
|
168
|
-
return document.querySelector(`.${core.bem("connection-line", "container")}[data
|
|
167
|
+
return document.querySelector(`.${core.bem("connection-line", "container")}[data-${this.pluginId}]`);
|
|
169
168
|
}
|
|
170
169
|
/**
|
|
171
170
|
* 获取需要为其创建连接线的源节点ID列表
|
|
@@ -329,14 +328,15 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
|
|
|
329
328
|
}];
|
|
330
329
|
}
|
|
331
330
|
onIsDragging(isDragging) {
|
|
332
|
-
|
|
331
|
+
var _a2;
|
|
332
|
+
(_a2 = this.edgeScroll) == null ? void 0 : _a2.setConfig({ enabled: isDragging });
|
|
333
333
|
}
|
|
334
334
|
onTransform() {
|
|
335
335
|
this.updateAllConnectionLines(0, 0);
|
|
336
336
|
}
|
|
337
337
|
init(config) {
|
|
338
338
|
this.config = lodashEs.merge(DEFAULT_CONFIG, config);
|
|
339
|
-
this.dragInteractable = interact__default(`.${this.classNames.source}[data
|
|
339
|
+
this.dragInteractable = interact__default(`.${this.classNames.source}[data-${this.pluginId}]`).draggable({
|
|
340
340
|
inertia: false,
|
|
341
341
|
autoScroll: false,
|
|
342
342
|
listeners: {
|
|
@@ -369,7 +369,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
|
|
|
369
369
|
if (sourceNodeId !== currentNodeId) {
|
|
370
370
|
const connectHandleType = element.getAttribute("data-connector-type");
|
|
371
371
|
const connectHandleId = element.getAttribute("data-connector-id");
|
|
372
|
-
const connector = document.querySelector(`[data
|
|
372
|
+
const connector = document.querySelector(`[data-${this.pluginId}][data-node-id="${sourceNodeId}"][data-connector-type="${connectHandleType}"][data-connector-id="${connectHandleId}"]`);
|
|
373
373
|
if (connector) {
|
|
374
374
|
const connectorRect = connector.getBoundingClientRect();
|
|
375
375
|
const connectorX = (connectorRect.left + connectorRect.right) / 2;
|
|
@@ -400,7 +400,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
|
|
|
400
400
|
}
|
|
401
401
|
});
|
|
402
402
|
interact__default.dynamicDrop(true);
|
|
403
|
-
this.dropInteractable = interact__default(`.${this.classNames.target}[data
|
|
403
|
+
this.dropInteractable = interact__default(`.${this.classNames.target}[data-${this.pluginId}]`).dropzone({
|
|
404
404
|
autoScroll: { enabled: false },
|
|
405
405
|
ondragenter: (event) => {
|
|
406
406
|
event.target.classList.add(this.classNames.active);
|
package/dist/index.js
CHANGED
|
@@ -93,7 +93,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
|
|
|
93
93
|
__publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 40, this, ({ nodeId, type, index = 0, className = "" }) => {
|
|
94
94
|
return {
|
|
95
95
|
"className": `${className} ${this.classNames.connector} ${this.classNames[type]}`,
|
|
96
|
-
|
|
96
|
+
[`data-${this.pluginId}`]: "",
|
|
97
97
|
"data-node-id": nodeId,
|
|
98
98
|
"data-connector-id": String(index),
|
|
99
99
|
"data-connector-type": type
|
|
@@ -137,9 +137,8 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
|
|
|
137
137
|
const size = this.getContainerSize();
|
|
138
138
|
return /* @__PURE__ */ jsx(
|
|
139
139
|
"div",
|
|
140
|
-
{
|
|
140
|
+
__spreadValues({
|
|
141
141
|
className: bem("connection-line", "container"),
|
|
142
|
-
"data-plugin-id": this.pluginId,
|
|
143
142
|
style: {
|
|
144
143
|
position: "absolute",
|
|
145
144
|
left: 0,
|
|
@@ -149,7 +148,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
|
|
|
149
148
|
overflow: "visible",
|
|
150
149
|
pointerEvents: "none"
|
|
151
150
|
}
|
|
152
|
-
}
|
|
151
|
+
}, { [`data-${this.pluginId}`]: "" })
|
|
153
152
|
);
|
|
154
153
|
}
|
|
155
154
|
/**
|
|
@@ -159,7 +158,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
|
|
|
159
158
|
return 1;
|
|
160
159
|
}
|
|
161
160
|
getContainerElement() {
|
|
162
|
-
return document.querySelector(`.${bem("connection-line", "container")}[data
|
|
161
|
+
return document.querySelector(`.${bem("connection-line", "container")}[data-${this.pluginId}]`);
|
|
163
162
|
}
|
|
164
163
|
/**
|
|
165
164
|
* 获取需要为其创建连接线的源节点ID列表
|
|
@@ -323,14 +322,15 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
|
|
|
323
322
|
}];
|
|
324
323
|
}
|
|
325
324
|
onIsDragging(isDragging) {
|
|
326
|
-
|
|
325
|
+
var _a2;
|
|
326
|
+
(_a2 = this.edgeScroll) == null ? void 0 : _a2.setConfig({ enabled: isDragging });
|
|
327
327
|
}
|
|
328
328
|
onTransform() {
|
|
329
329
|
this.updateAllConnectionLines(0, 0);
|
|
330
330
|
}
|
|
331
331
|
init(config) {
|
|
332
332
|
this.config = merge(DEFAULT_CONFIG, config);
|
|
333
|
-
this.dragInteractable = interact(`.${this.classNames.source}[data
|
|
333
|
+
this.dragInteractable = interact(`.${this.classNames.source}[data-${this.pluginId}]`).draggable({
|
|
334
334
|
inertia: false,
|
|
335
335
|
autoScroll: false,
|
|
336
336
|
listeners: {
|
|
@@ -363,7 +363,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
|
|
|
363
363
|
if (sourceNodeId !== currentNodeId) {
|
|
364
364
|
const connectHandleType = element.getAttribute("data-connector-type");
|
|
365
365
|
const connectHandleId = element.getAttribute("data-connector-id");
|
|
366
|
-
const connector = document.querySelector(`[data
|
|
366
|
+
const connector = document.querySelector(`[data-${this.pluginId}][data-node-id="${sourceNodeId}"][data-connector-type="${connectHandleType}"][data-connector-id="${connectHandleId}"]`);
|
|
367
367
|
if (connector) {
|
|
368
368
|
const connectorRect = connector.getBoundingClientRect();
|
|
369
369
|
const connectorX = (connectorRect.left + connectorRect.right) / 2;
|
|
@@ -394,7 +394,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
|
|
|
394
394
|
}
|
|
395
395
|
});
|
|
396
396
|
interact.dynamicDrop(true);
|
|
397
|
-
this.dropInteractable = interact(`.${this.classNames.target}[data
|
|
397
|
+
this.dropInteractable = interact(`.${this.classNames.target}[data-${this.pluginId}]`).dropzone({
|
|
398
398
|
autoScroll: { enabled: false },
|
|
399
399
|
ondragenter: (event) => {
|
|
400
400
|
event.target.classList.add(this.classNames.active);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@knotx/plugins-connection-line",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Connectionline Plugin for Knotx",
|
|
5
5
|
"author": "boenfu",
|
|
6
6
|
"license": "MIT",
|
|
@@ -33,15 +33,15 @@
|
|
|
33
33
|
"@interactjs/modifiers": "^1.10.27",
|
|
34
34
|
"@interactjs/types": "^1.10.27",
|
|
35
35
|
"interactjs": "^1.10.27",
|
|
36
|
-
"@knotx/jsx": "0.4.
|
|
37
|
-
"@knotx/plugins-canvas": "0.4.
|
|
38
|
-
"@knotx/plugins-selection": "0.4.
|
|
36
|
+
"@knotx/jsx": "0.4.3",
|
|
37
|
+
"@knotx/plugins-canvas": "0.4.3",
|
|
38
|
+
"@knotx/plugins-selection": "0.4.3"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"lodash-es": "^4.17.21",
|
|
42
42
|
"rxjs": "^7.8.1",
|
|
43
|
-
"@knotx/core": "0.4.
|
|
44
|
-
"@knotx/decorators": "0.4.
|
|
43
|
+
"@knotx/core": "0.4.3",
|
|
44
|
+
"@knotx/decorators": "0.4.3"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@interactjs/actions": "^1.10.27",
|
|
@@ -50,12 +50,12 @@
|
|
|
50
50
|
"@interactjs/types": "^1.10.27",
|
|
51
51
|
"@types/lodash-es": "^4.17.12",
|
|
52
52
|
"interactjs": "^1.10.27",
|
|
53
|
-
"@knotx/build-config": "0.4.
|
|
54
|
-
"@knotx/eslint-config": "0.4.
|
|
55
|
-
"@knotx/jsx": "0.4.
|
|
56
|
-
"@knotx/plugins-canvas": "0.4.
|
|
57
|
-
"@knotx/plugins-selection": "0.4.
|
|
58
|
-
"@knotx/typescript-config": "0.4.
|
|
53
|
+
"@knotx/build-config": "0.4.3",
|
|
54
|
+
"@knotx/eslint-config": "0.4.3",
|
|
55
|
+
"@knotx/jsx": "0.4.3",
|
|
56
|
+
"@knotx/plugins-canvas": "0.4.3",
|
|
57
|
+
"@knotx/plugins-selection": "0.4.3",
|
|
58
|
+
"@knotx/typescript-config": "0.4.3"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"build": "unbuild",
|