@knotx/plugins-connection-line 0.0.7 → 0.0.9

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.
Files changed (6) hide show
  1. package/dist/index.cjs +17 -18
  2. package/dist/index.d.cts +6 -7
  3. package/dist/index.d.mts +6 -7
  4. package/dist/index.d.ts +6 -7
  5. package/dist/index.mjs +17 -18
  6. package/package.json +10 -9
package/dist/index.cjs CHANGED
@@ -6,7 +6,6 @@ const decorators = require('@knotx/decorators');
6
6
  const interact = require('interactjs');
7
7
  const lodashEs = require('lodash-es');
8
8
  const rxjs = require('rxjs');
9
- require('@knotx/plugins-selection');
10
9
 
11
10
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
12
11
 
@@ -77,17 +76,17 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
77
76
  var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
78
77
  var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
79
78
  var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
80
- var _destroy_dec, _init_dec, _createNodesAndEdges_dec, _createEdges_dec, _createEdge_dec, _createNodeAndEdge_dec, _containerRender_dec, _registerNewNodeCreator_dec, _registerValidator_dec, _options_dec, _getConnectHandleAttributes_dec, _selectedNodeIds_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
81
- const DEFAULT_OPTIONS = {
79
+ var _destroy_dec, _init_dec, _createNodesAndEdges_dec, _createEdges_dec, _createEdge_dec, _createNodeAndEdge_dec, _containerRender_dec, _registerNewNodeCreator_dec, _registerValidator_dec, _config_dec, _getConnectHandleAttributes_dec, _selectedNodeIds_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
80
+ const DEFAULT_CONFIG = {
82
81
  allowCreateNodeOnBlankArea: true,
83
82
  newNodeType: "default",
84
83
  edgeType: "bezier",
85
84
  connectionLineClassName: "knotx-connection-line",
86
85
  allowMultiDrag: true
87
86
  };
88
- class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getNode()], _dispatchNodeOperation_dec = [decorators.inject.dispatchNodeOperation()], _dispatchEdgeOperation_dec = [decorators.inject.dispatchEdgeOperation()], _startInteraction_dec = [decorators.inject.startInteraction()], _endInteraction_dec = [decorators.inject.endInteraction()], _canInteract_dec = [decorators.inject.canInteract()], _selectedNodeIds_dec = [decorators.inject("selection", "selectedNodeIds")], _getConnectHandleAttributes_dec = [decorators.register("getConnectHandleAttributes")], _options_dec = [decorators.register("options")], _registerValidator_dec = [decorators.register("registerValidator")], _registerNewNodeCreator_dec = [decorators.register("registerNewNodeCreator")], _containerRender_dec = [decorators.layer(core.Layer.Nodes, 10)], _createNodeAndEdge_dec = [decorators.edgeOperator()], _createEdge_dec = [decorators.edgeOperator()], _createEdges_dec = [decorators.edgeOperator()], _createNodesAndEdges_dec = [decorators.edgeOperator()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
89
- constructor(options = {}) {
90
- super();
87
+ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getNode()], _dispatchNodeOperation_dec = [decorators.inject.dispatchNodeOperation()], _dispatchEdgeOperation_dec = [decorators.inject.dispatchEdgeOperation()], _startInteraction_dec = [decorators.inject.startInteraction()], _endInteraction_dec = [decorators.inject.endInteraction()], _canInteract_dec = [decorators.inject.canInteract()], _selectedNodeIds_dec = [decorators.inject("selection", "selectedNodeIds")], _getConnectHandleAttributes_dec = [decorators.register("getConnectHandleAttributes")], _config_dec = [decorators.register("config")], _registerValidator_dec = [decorators.register("registerValidator")], _registerNewNodeCreator_dec = [decorators.register("registerNewNodeCreator")], _containerRender_dec = [decorators.layer(core.Layer.Nodes, 10)], _createNodeAndEdge_dec = [decorators.edgeOperator()], _createEdge_dec = [decorators.edgeOperator()], _createEdges_dec = [decorators.edgeOperator()], _createNodesAndEdges_dec = [decorators.edgeOperator()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
88
+ constructor() {
89
+ super(...arguments);
91
90
  __runInitializers(_init, 5, this);
92
91
  __publicField(this, "name", "connectionLine");
93
92
  __publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
@@ -127,7 +126,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
127
126
  __publicField(this, "validators$", new rxjs.BehaviorSubject([]));
128
127
  // 新节点创建器列表
129
128
  __publicField(this, "creators$", new rxjs.BehaviorSubject([]));
130
- __publicField(this, "options", __runInitializers(_init, 40, this, DEFAULT_OPTIONS)), __runInitializers(_init, 43, this);
129
+ __publicField(this, "config", __runInitializers(_init, 40, this, DEFAULT_CONFIG)), __runInitializers(_init, 43, this);
131
130
  __publicField(this, "registerValidator", __runInitializers(_init, 44, this, (validator) => {
132
131
  const validators = this.validators$.value;
133
132
  validators.push(validator);
@@ -154,7 +153,6 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
154
153
  }
155
154
  };
156
155
  })), __runInitializers(_init, 51, this);
157
- this.options = lodashEs.merge(DEFAULT_OPTIONS, options);
158
156
  }
159
157
  containerRender() {
160
158
  const size = this.getContainerSize();
@@ -214,7 +212,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
214
212
  * 根据当前拖拽的节点和选中的节点决定
215
213
  */
216
214
  getSourceNodeIdsForDrag(currentNodeId) {
217
- if (!this.options.allowMultiDrag || !this.selectedNodeIds.includes(currentNodeId)) {
215
+ if (!this.config.allowMultiDrag || !this.selectedNodeIds.includes(currentNodeId)) {
218
216
  return [currentNodeId];
219
217
  }
220
218
  return [...this.selectedNodeIds];
@@ -224,7 +222,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
224
222
  */
225
223
  createConnectionLine(sourceNodeId, startPosition) {
226
224
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
227
- svg.setAttribute("class", `${this.options.connectionLineClassName || "knotx-connection-line"} line-${sourceNodeId}`);
225
+ svg.setAttribute("class", `${this.config.connectionLineClassName || "knotx-connection-line"} line-${sourceNodeId}`);
228
226
  svg.style.position = "absolute";
229
227
  svg.style.top = "0";
230
228
  svg.style.left = "0";
@@ -297,7 +295,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
297
295
  const newNodeId = core.generateId();
298
296
  const newNode = {
299
297
  id: newNodeId,
300
- type: this.options.newNodeType,
298
+ type: this.config.newNodeType,
301
299
  position,
302
300
  data: {}
303
301
  };
@@ -305,7 +303,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
305
303
  id: core.generateId(),
306
304
  source: sourceNodeId,
307
305
  target: newNodeId,
308
- type: this.options.edgeType
306
+ type: this.config.edgeType
309
307
  }));
310
308
  const createResult = this.creators$.value.reduce((result, creator) => {
311
309
  var _a2;
@@ -333,7 +331,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
333
331
  id: core.generateId(),
334
332
  source: sourceNodeId,
335
333
  target: targetNodeId,
336
- type: this.options.edgeType
334
+ type: this.config.edgeType
337
335
  }
338
336
  }];
339
337
  }
@@ -349,7 +347,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
349
347
  id: core.generateId(),
350
348
  source: sourceNodeId,
351
349
  target: targetNodeId,
352
- type: this.options.edgeType
350
+ type: this.config.edgeType
353
351
  }
354
352
  }))
355
353
  }];
@@ -360,7 +358,8 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
360
358
  }
361
359
  return this.createNodeAndEdge(sourceNodeIds, position);
362
360
  }
363
- init() {
361
+ init(config) {
362
+ this.config = lodashEs.merge(DEFAULT_CONFIG, config);
364
363
  this.dragInteractable = interact__default(`.${this.classNames.source}[data-plugin-id="${this.pluginId}"]`).draggable({
365
364
  inertia: false,
366
365
  autoScroll: true,
@@ -447,12 +446,12 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
447
446
  event.target.classList.remove(this.classNames.active);
448
447
  }
449
448
  });
450
- if (this.options.allowCreateNodeOnBlankArea) {
449
+ if (this.config.allowCreateNodeOnBlankArea) {
451
450
  this.blankAreaDropInteractable = interact__default(`.${core.bem("canvas", "wrapper")}`).dropzone({
452
451
  ondrop: (event) => {
453
452
  const element = event.target;
454
453
  const isNode = !!element.closest(`[data-node-id]`);
455
- if (!isNode && this.connectionLines.size > 0 && this.options.allowCreateNodeOnBlankArea) {
454
+ if (!isNode && this.connectionLines.size > 0 && this.config.allowCreateNodeOnBlankArea) {
456
455
  const sourceNodeIds = Array.from(this.connectionLines.keys());
457
456
  const firstLine = this.connectionLines.values().next().value;
458
457
  if (firstLine) {
@@ -488,7 +487,7 @@ __decorateElement(_init, 5, "endInteraction", _endInteraction_dec, ConnectionLin
488
487
  __decorateElement(_init, 5, "canInteract", _canInteract_dec, ConnectionLine);
489
488
  __decorateElement(_init, 5, "selectedNodeIds", _selectedNodeIds_dec, ConnectionLine);
490
489
  __decorateElement(_init, 5, "getConnectHandleAttributes", _getConnectHandleAttributes_dec, ConnectionLine);
491
- __decorateElement(_init, 5, "options", _options_dec, ConnectionLine);
490
+ __decorateElement(_init, 5, "config", _config_dec, ConnectionLine);
492
491
  __decorateElement(_init, 5, "registerValidator", _registerValidator_dec, ConnectionLine);
493
492
  __decorateElement(_init, 5, "registerNewNodeCreator", _registerNewNodeCreator_dec, ConnectionLine);
494
493
  __decoratorMetadata(_init, ConnectionLine);
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { NodeData, EdgeData, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
2
2
 
3
- interface ConnectionLineOptions {
3
+ interface ConnectionLineConfig {
4
4
  /**
5
5
  * 是否允许连接到画布空白处并创建新节点
6
6
  * @default false
@@ -38,7 +38,7 @@ type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
38
38
  declare module '@knotx/core' {
39
39
  interface PluginData {
40
40
  connectionLine: {
41
- options: ConnectionLineOptions;
41
+ config: ConnectionLineConfig;
42
42
  registerValidator: (validator: ConnectionValidator) => () => void;
43
43
  registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
44
44
  node: NodeData;
@@ -59,7 +59,7 @@ declare module '@knotx/core' {
59
59
  * 连接线插件
60
60
  * 允许从指定DOM元素拖拽出连接线，连接到其他节点
61
61
  */
62
- declare class ConnectionLine extends BasePlugin<'connectionLine'> {
62
+ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLineConfig> {
63
63
  name: "connectionLine";
64
64
  getNode: (id: string) => NodeData | undefined;
65
65
  dispatchNodeOperation: (operation: NodeOperation) => void;
@@ -85,8 +85,7 @@ declare class ConnectionLine extends BasePlugin<'connectionLine'> {
85
85
  private blankAreaDropInteractable?;
86
86
  private validators$;
87
87
  private creators$;
88
- constructor(options?: ConnectionLineOptions);
89
- options: ConnectionLineOptions;
88
+ private config;
90
89
  registerValidator: (validator: ConnectionValidator) => () => void;
91
90
  registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
92
91
  node: NodeData;
@@ -145,8 +144,8 @@ declare class ConnectionLine extends BasePlugin<'connectionLine'> {
145
144
  x: number;
146
145
  y: number;
147
146
  }): EdgeOperation[];
148
- init(): void;
147
+ init(config: ConnectionLineConfig): void;
149
148
  destroy(): void;
150
149
  }
151
150
 
152
- export { ConnectionLine, type ConnectionLineOptions, type ConnectionValidateContext, type ConnectionValidator };
151
+ export { ConnectionLine, type ConnectionLineConfig, type ConnectionValidateContext, type ConnectionValidator };
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { NodeData, EdgeData, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
2
2
 
3
- interface ConnectionLineOptions {
3
+ interface ConnectionLineConfig {
4
4
  /**
5
5
  * 是否允许连接到画布空白处并创建新节点
6
6
  * @default false
@@ -38,7 +38,7 @@ type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
38
38
  declare module '@knotx/core' {
39
39
  interface PluginData {
40
40
  connectionLine: {
41
- options: ConnectionLineOptions;
41
+ config: ConnectionLineConfig;
42
42
  registerValidator: (validator: ConnectionValidator) => () => void;
43
43
  registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
44
44
  node: NodeData;
@@ -59,7 +59,7 @@ declare module '@knotx/core' {
59
59
  * 连接线插件
60
60
  * 允许从指定DOM元素拖拽出连接线，连接到其他节点
61
61
  */
62
- declare class ConnectionLine extends BasePlugin<'connectionLine'> {
62
+ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLineConfig> {
63
63
  name: "connectionLine";
64
64
  getNode: (id: string) => NodeData | undefined;
65
65
  dispatchNodeOperation: (operation: NodeOperation) => void;
@@ -85,8 +85,7 @@ declare class ConnectionLine extends BasePlugin<'connectionLine'> {
85
85
  private blankAreaDropInteractable?;
86
86
  private validators$;
87
87
  private creators$;
88
- constructor(options?: ConnectionLineOptions);
89
- options: ConnectionLineOptions;
88
+ private config;
90
89
  registerValidator: (validator: ConnectionValidator) => () => void;
91
90
  registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
92
91
  node: NodeData;
@@ -145,8 +144,8 @@ declare class ConnectionLine extends BasePlugin<'connectionLine'> {
145
144
  x: number;
146
145
  y: number;
147
146
  }): EdgeOperation[];
148
- init(): void;
147
+ init(config: ConnectionLineConfig): void;
149
148
  destroy(): void;
150
149
  }
151
150
 
152
- export { ConnectionLine, type ConnectionLineOptions, type ConnectionValidateContext, type ConnectionValidator };
151
+ export { ConnectionLine, type ConnectionLineConfig, type ConnectionValidateContext, type ConnectionValidator };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { NodeData, EdgeData, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
2
2
 
3
- interface ConnectionLineOptions {
3
+ interface ConnectionLineConfig {
4
4
  /**
5
5
  * 是否允许连接到画布空白处并创建新节点
6
6
  * @default false
@@ -38,7 +38,7 @@ type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
38
38
  declare module '@knotx/core' {
39
39
  interface PluginData {
40
40
  connectionLine: {
41
- options: ConnectionLineOptions;
41
+ config: ConnectionLineConfig;
42
42
  registerValidator: (validator: ConnectionValidator) => () => void;
43
43
  registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
44
44
  node: NodeData;
@@ -59,7 +59,7 @@ declare module '@knotx/core' {
59
59
  * 连接线插件
60
60
  * 允许从指定DOM元素拖拽出连接线，连接到其他节点
61
61
  */
62
- declare class ConnectionLine extends BasePlugin<'connectionLine'> {
62
+ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLineConfig> {
63
63
  name: "connectionLine";
64
64
  getNode: (id: string) => NodeData | undefined;
65
65
  dispatchNodeOperation: (operation: NodeOperation) => void;
@@ -85,8 +85,7 @@ declare class ConnectionLine extends BasePlugin<'connectionLine'> {
85
85
  private blankAreaDropInteractable?;
86
86
  private validators$;
87
87
  private creators$;
88
- constructor(options?: ConnectionLineOptions);
89
- options: ConnectionLineOptions;
88
+ private config;
90
89
  registerValidator: (validator: ConnectionValidator) => () => void;
91
90
  registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
92
91
  node: NodeData;
@@ -145,8 +144,8 @@ declare class ConnectionLine extends BasePlugin<'connectionLine'> {
145
144
  x: number;
146
145
  y: number;
147
146
  }): EdgeOperation[];
148
- init(): void;
147
+ init(config: ConnectionLineConfig): void;
149
148
  destroy(): void;
150
149
  }
151
150
 
152
- export { ConnectionLine, type ConnectionLineOptions, type ConnectionValidateContext, type ConnectionValidator };
151
+ export { ConnectionLine, type ConnectionLineConfig, type ConnectionValidateContext, type ConnectionValidator };
package/dist/index.mjs CHANGED
@@ -4,7 +4,6 @@ import { inject, register, layer, edgeOperator, OnInit, OnDestroy } from '@knotx
4
4
  import interact from 'interactjs';
5
5
  import { merge } from 'lodash-es';
6
6
  import { BehaviorSubject } from 'rxjs';
7
- import '@knotx/plugins-selection';
8
7
 
9
8
  var __create = Object.create;
10
9
  var __defProp = Object.defineProperty;
@@ -71,17 +70,17 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
71
70
  var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
72
71
  var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
73
72
  var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
74
- var _destroy_dec, _init_dec, _createNodesAndEdges_dec, _createEdges_dec, _createEdge_dec, _createNodeAndEdge_dec, _containerRender_dec, _registerNewNodeCreator_dec, _registerValidator_dec, _options_dec, _getConnectHandleAttributes_dec, _selectedNodeIds_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
75
- const DEFAULT_OPTIONS = {
73
+ var _destroy_dec, _init_dec, _createNodesAndEdges_dec, _createEdges_dec, _createEdge_dec, _createNodeAndEdge_dec, _containerRender_dec, _registerNewNodeCreator_dec, _registerValidator_dec, _config_dec, _getConnectHandleAttributes_dec, _selectedNodeIds_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
74
+ const DEFAULT_CONFIG = {
76
75
  allowCreateNodeOnBlankArea: true,
77
76
  newNodeType: "default",
78
77
  edgeType: "bezier",
79
78
  connectionLineClassName: "knotx-connection-line",
80
79
  allowMultiDrag: true
81
80
  };
82
- class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _dispatchEdgeOperation_dec = [inject.dispatchEdgeOperation()], _startInteraction_dec = [inject.startInteraction()], _endInteraction_dec = [inject.endInteraction()], _canInteract_dec = [inject.canInteract()], _selectedNodeIds_dec = [inject("selection", "selectedNodeIds")], _getConnectHandleAttributes_dec = [register("getConnectHandleAttributes")], _options_dec = [register("options")], _registerValidator_dec = [register("registerValidator")], _registerNewNodeCreator_dec = [register("registerNewNodeCreator")], _containerRender_dec = [layer(Layer.Nodes, 10)], _createNodeAndEdge_dec = [edgeOperator()], _createEdge_dec = [edgeOperator()], _createEdges_dec = [edgeOperator()], _createNodesAndEdges_dec = [edgeOperator()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
83
- constructor(options = {}) {
84
- super();
81
+ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _dispatchEdgeOperation_dec = [inject.dispatchEdgeOperation()], _startInteraction_dec = [inject.startInteraction()], _endInteraction_dec = [inject.endInteraction()], _canInteract_dec = [inject.canInteract()], _selectedNodeIds_dec = [inject("selection", "selectedNodeIds")], _getConnectHandleAttributes_dec = [register("getConnectHandleAttributes")], _config_dec = [register("config")], _registerValidator_dec = [register("registerValidator")], _registerNewNodeCreator_dec = [register("registerNewNodeCreator")], _containerRender_dec = [layer(Layer.Nodes, 10)], _createNodeAndEdge_dec = [edgeOperator()], _createEdge_dec = [edgeOperator()], _createEdges_dec = [edgeOperator()], _createNodesAndEdges_dec = [edgeOperator()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
82
+ constructor() {
83
+ super(...arguments);
85
84
  __runInitializers(_init, 5, this);
86
85
  __publicField(this, "name", "connectionLine");
87
86
  __publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
@@ -121,7 +120,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
121
120
  __publicField(this, "validators$", new BehaviorSubject([]));
122
121
  // 新节点创建器列表
123
122
  __publicField(this, "creators$", new BehaviorSubject([]));
124
- __publicField(this, "options", __runInitializers(_init, 40, this, DEFAULT_OPTIONS)), __runInitializers(_init, 43, this);
123
+ __publicField(this, "config", __runInitializers(_init, 40, this, DEFAULT_CONFIG)), __runInitializers(_init, 43, this);
125
124
  __publicField(this, "registerValidator", __runInitializers(_init, 44, this, (validator) => {
126
125
  const validators = this.validators$.value;
127
126
  validators.push(validator);
@@ -148,7 +147,6 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
148
147
  }
149
148
  };
150
149
  })), __runInitializers(_init, 51, this);
151
- this.options = merge(DEFAULT_OPTIONS, options);
152
150
  }
153
151
  containerRender() {
154
152
  const size = this.getContainerSize();
@@ -208,7 +206,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
208
206
  * 根据当前拖拽的节点和选中的节点决定
209
207
  */
210
208
  getSourceNodeIdsForDrag(currentNodeId) {
211
- if (!this.options.allowMultiDrag || !this.selectedNodeIds.includes(currentNodeId)) {
209
+ if (!this.config.allowMultiDrag || !this.selectedNodeIds.includes(currentNodeId)) {
212
210
  return [currentNodeId];
213
211
  }
214
212
  return [...this.selectedNodeIds];
@@ -218,7 +216,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
218
216
  */
219
217
  createConnectionLine(sourceNodeId, startPosition) {
220
218
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
221
- svg.setAttribute("class", `${this.options.connectionLineClassName || "knotx-connection-line"} line-${sourceNodeId}`);
219
+ svg.setAttribute("class", `${this.config.connectionLineClassName || "knotx-connection-line"} line-${sourceNodeId}`);
222
220
  svg.style.position = "absolute";
223
221
  svg.style.top = "0";
224
222
  svg.style.left = "0";
@@ -291,7 +289,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
291
289
  const newNodeId = generateId();
292
290
  const newNode = {
293
291
  id: newNodeId,
294
- type: this.options.newNodeType,
292
+ type: this.config.newNodeType,
295
293
  position,
296
294
  data: {}
297
295
  };
@@ -299,7 +297,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
299
297
  id: generateId(),
300
298
  source: sourceNodeId,
301
299
  target: newNodeId,
302
- type: this.options.edgeType
300
+ type: this.config.edgeType
303
301
  }));
304
302
  const createResult = this.creators$.value.reduce((result, creator) => {
305
303
  var _a2;
@@ -327,7 +325,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
327
325
  id: generateId(),
328
326
  source: sourceNodeId,
329
327
  target: targetNodeId,
330
- type: this.options.edgeType
328
+ type: this.config.edgeType
331
329
  }
332
330
  }];
333
331
  }
@@ -343,7 +341,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
343
341
  id: generateId(),
344
342
  source: sourceNodeId,
345
343
  target: targetNodeId,
346
- type: this.options.edgeType
344
+ type: this.config.edgeType
347
345
  }
348
346
  }))
349
347
  }];
@@ -354,7 +352,8 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
354
352
  }
355
353
  return this.createNodeAndEdge(sourceNodeIds, position);
356
354
  }
357
- init() {
355
+ init(config) {
356
+ this.config = merge(DEFAULT_CONFIG, config);
358
357
  this.dragInteractable = interact(`.${this.classNames.source}[data-plugin-id="${this.pluginId}"]`).draggable({
359
358
  inertia: false,
360
359
  autoScroll: true,
@@ -441,12 +440,12 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
441
440
  event.target.classList.remove(this.classNames.active);
442
441
  }
443
442
  });
444
- if (this.options.allowCreateNodeOnBlankArea) {
443
+ if (this.config.allowCreateNodeOnBlankArea) {
445
444
  this.blankAreaDropInteractable = interact(`.${bem("canvas", "wrapper")}`).dropzone({
446
445
  ondrop: (event) => {
447
446
  const element = event.target;
448
447
  const isNode = !!element.closest(`[data-node-id]`);
449
- if (!isNode && this.connectionLines.size > 0 && this.options.allowCreateNodeOnBlankArea) {
448
+ if (!isNode && this.connectionLines.size > 0 && this.config.allowCreateNodeOnBlankArea) {
450
449
  const sourceNodeIds = Array.from(this.connectionLines.keys());
451
450
  const firstLine = this.connectionLines.values().next().value;
452
451
  if (firstLine) {
@@ -482,7 +481,7 @@ __decorateElement(_init, 5, "endInteraction", _endInteraction_dec, ConnectionLin
482
481
  __decorateElement(_init, 5, "canInteract", _canInteract_dec, ConnectionLine);
483
482
  __decorateElement(_init, 5, "selectedNodeIds", _selectedNodeIds_dec, ConnectionLine);
484
483
  __decorateElement(_init, 5, "getConnectHandleAttributes", _getConnectHandleAttributes_dec, ConnectionLine);
485
- __decorateElement(_init, 5, "options", _options_dec, ConnectionLine);
484
+ __decorateElement(_init, 5, "config", _config_dec, ConnectionLine);
486
485
  __decorateElement(_init, 5, "registerValidator", _registerValidator_dec, ConnectionLine);
487
486
  __decorateElement(_init, 5, "registerNewNodeCreator", _registerNewNodeCreator_dec, ConnectionLine);
488
487
  __decoratorMetadata(_init, ConnectionLine);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@knotx/plugins-connection-line",
3
3
  "type": "module",
4
- "version": "0.0.7",
4
+ "version": "0.0.9",
5
5
  "description": "Connectionline Plugin for Knotx",
6
6
  "author": "boenfu",
7
7
  "license": "MIT",
@@ -33,14 +33,14 @@
33
33
  "@interactjs/core": "^1.10.27",
34
34
  "@interactjs/modifiers": "^1.10.27",
35
35
  "@interactjs/types": "^1.10.27",
36
- "interactjs": "^1.10.27"
36
+ "interactjs": "^1.10.27",
37
+ "@knotx/plugins-selection": "0.0.9"
37
38
  },
38
39
  "dependencies": {
39
40
  "lodash-es": "^4.17.21",
40
41
  "rxjs": "^7.8.1",
41
- "@knotx/core": "0.0.5",
42
- "@knotx/decorators": "0.0.5",
43
- "@knotx/plugins-selection": "0.0.7"
42
+ "@knotx/core": "0.0.7",
43
+ "@knotx/decorators": "0.0.7"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@interactjs/actions": "^1.10.27",
@@ -49,10 +49,11 @@
49
49
  "@interactjs/types": "^1.10.27",
50
50
  "@types/lodash-es": "^4.17.12",
51
51
  "interactjs": "^1.10.27",
52
- "@knotx/build-config": "0.0.5",
53
- "@knotx/eslint-config": "0.0.5",
54
- "@knotx/jsx": "0.0.5",
55
- "@knotx/typescript-config": "0.0.5"
52
+ "@knotx/build-config": "0.0.7",
53
+ "@knotx/eslint-config": "0.0.7",
54
+ "@knotx/jsx": "0.0.7",
55
+ "@knotx/plugins-selection": "0.0.9",
56
+ "@knotx/typescript-config": "0.0.7"
56
57
  },
57
58
  "scripts": {
58
59
  "build": "unbuild --failOnWarn=false",