@knotx/plugins-connection-line 0.2.13 → 0.2.15

package/dist/index.cjs

@@ -76,15 +76,14 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _destroy_dec, _init_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;
+var _destroy_dec, _init_dec, _createEdges_dec, _createNodeAndEdge_dec, _containerRender_dec, _registerCreator_dec, _getConnectHandleAttributes_dec, _selectedNodeIds_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
 const DEFAULT_CONFIG = {
   allowCreateNodeOnBlankArea: true,
-  newNodeType: "default",
   edgeType: "bezier",
-  connectionLineClassName: "knotx-connection-line",
+  connectionLineClassName: core.bem("connection-line", "line"),
   allowMultiDrag: true
 };
-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()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
+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")], _registerCreator_dec = [decorators.register("registerCreator")], _containerRender_dec = [decorators.layer(core.Layer.Nodes, 10)], _createNodeAndEdge_dec = [decorators.edgeOperator()], _createEdges_dec = [decorators.edgeOperator()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -96,12 +95,12 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     __publicField(this, "endInteraction", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
     __publicField(this, "canInteract", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
     __publicField(this, "selectedNodeIds", __runInitializers(_init, 32, this, [])), __runInitializers(_init, 35, this);
-    __publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 36, this, (nodeId, type, id = 0) => {
+    __publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 36, this, ({ nodeId, type, index = 0, className = "" }) => {
       return {
-        "className": `${this.classNames.connector} ${this.classNames[type]}`,
+        "className": `${className} ${this.classNames.connector} ${this.classNames[type]}`,
         "data-plugin-id": this.pluginId,
         "data-node-id": nodeId,
-        "data-connector-id": String(id),
+        "data-connector-id": String(index),
         "data-connector-type": type
       };
     })), __runInitializers(_init, 39, this);
@@ -117,30 +116,13 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     __publicField(this, "startScale", 1);
     // 用于存储当前触发拖拽事件的DOM元素对应的节点ID
     __publicField(this, "currentDragNodeId", null);
-    // 各种订阅和交互对象
-    __publicField(this, "subscription");
     __publicField(this, "dragInteractable");
     __publicField(this, "dropInteractable");
     __publicField(this, "blankAreaDropInteractable");
-    // 验证器列表
-    __publicField(this, "validators$", new rxjs.BehaviorSubject([]));
     // 新节点创建器列表
     __publicField(this, "creators$", new rxjs.BehaviorSubject([]));
-    __publicField(this, "config", __runInitializers(_init, 40, this, DEFAULT_CONFIG)), __runInitializers(_init, 43, this);
-    __publicField(this, "registerValidator", __runInitializers(_init, 44, this, (validator) => {
-      const validators = this.validators$.value;
-      validators.push(validator);
-      this.validators$.next(validators);
-      return () => {
-        const currentValidators = this.validators$.value;
-        const index = currentValidators.indexOf(validator);
-        if (index > -1) {
-          currentValidators.splice(index, 1);
-          this.validators$.next(currentValidators);
-        }
-      };
-    })), __runInitializers(_init, 47, this);
-    __publicField(this, "registerNewNodeCreator", __runInitializers(_init, 48, this, (creator) => {
+    __publicField(this, "config", DEFAULT_CONFIG);
+    __publicField(this, "registerCreator", __runInitializers(_init, 40, this, (creator) => {
       const creators = this.creators$.value;
       creators.push(creator);
       this.creators$.next(creators);
@@ -152,7 +134,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
           this.creators$.next(currentCreators);
         }
       };
-    })), __runInitializers(_init, 51, this);
+    })), __runInitializers(_init, 43, this);
   }
   containerRender() {
     const size = this.getContainerSize();
@@ -179,31 +161,6 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
   getContainerSize() {
     return 1;
   }
-  /**
-   * 应用所有验证器，检查连接是否有效
-   */
-  validateConnection(sourceNodeId, targetNodeId) {
-    const sourceNode = this.getNode(sourceNodeId);
-    if (!sourceNode)
-      return false;
-    let targetNode;
-    if (targetNodeId) {
-      targetNode = this.getNode(targetNodeId);
-      if (!targetNode)
-        return false;
-    }
-    const context = {
-      sourceNodeId,
-      sourceNode,
-      targetNodeId,
-      targetNode,
-      isValid: true
-    };
-    return this.validators$.value.reduce(
-      (isValid, validator) => isValid && validator(context),
-      true
-    );
-  }
   getContainerElement() {
     return document.querySelector(`.${core.bem("connection-line", "container")}[data-plugin-id="${this.pluginId}"]`);
   }
@@ -222,7 +179,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
    */
   createConnectionLine(sourceNodeId, startPosition) {
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("class", `${this.config.connectionLineClassName || "knotx-connection-line"} line-${sourceNodeId}`);
+    svg.setAttribute("class", `${this.config.connectionLineClassName} line-${sourceNodeId}`);
     svg.style.position = "absolute";
     svg.style.top = "0";
     svg.style.left = "0";
@@ -298,7 +255,6 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     const newNodeId = core.generateId();
     const newNode = {
       id: newNodeId,
-      type: this.config.newNodeType,
       position,
       data: {}
     };
@@ -310,14 +266,21 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     }));
     const createResult = this.creators$.value.reduce((result, creator) => {
       var _a2;
-      return (_a2 = creator(sourceNodeIds, newNode, newEdges)) != null ? _a2 : result;
-    }, { node: newNode, edges: newEdges });
+      return (_a2 = creator({
+        sourceNodeIds,
+        targetNodeId: void 0,
+        targetPosition: position
+      })) != null ? _a2 : result;
+    }, {
+      nodes: [newNode],
+      edges: newEdges
+    });
     if (createResult === false) {
       return [];
     }
     this.dispatchNodeOperation({
-      type: "add",
-      data: createResult.node
+      type: "batch",
+      operations: createResult.nodes.map((node) => ({ type: "add", data: node }))
     });
     return [{
       type: "batch",
@@ -327,31 +290,26 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
       }))
     }];
   }
-  createEdge(sourceNodeId, targetNodeId) {
-    return [{
-      type: "add",
-      data: {
-        id: core.generateId(),
-        source: sourceNodeId,
-        target: targetNodeId,
-        type: this.config.edgeType
-      }
-    }];
-  }
   createEdges(sourceNodeIds, targetNodeId) {
     if (sourceNodeIds.length === 0 || !targetNodeId) {
       return [];
     }
+    const createResult = this.creators$.value.reduce((result, creator) => {
+      var _a2;
+      return (_a2 = creator({
+        sourceNodeIds,
+        targetNodeId,
+        targetPosition: void 0
+      })) != null ? _a2 : result;
+    }, { edges: [] });
+    if (createResult === false || createResult.edges.length === 0) {
+      return [];
+    }
     return [{
       type: "batch",
-      operations: sourceNodeIds.map((sourceNodeId) => ({
+      operations: createResult.edges.map((edge) => ({
         type: "add",
-        data: {
-          id: core.generateId(),
-          source: sourceNodeId,
-          target: targetNodeId,
-          type: this.config.edgeType
-        }
+        data: edge
       }))
     }];
   }
@@ -434,12 +392,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
         const sourceNodeIds = Array.from(this.connectionLines.keys()).filter((id) => id !== targetNodeId);
         if (sourceNodeIds.length === 0)
           return;
-        const validSourceNodeIds = sourceNodeIds.filter(
-          (sourceNodeId) => this.validateConnection(sourceNodeId, targetNodeId)
-        );
-        if (validSourceNodeIds.length > 0) {
-          this.createEdges(validSourceNodeIds, targetNodeId);
-        }
+        this.createEdges(sourceNodeIds, targetNodeId);
         event.target.classList.remove(this.classNames.active);
       }
     });
@@ -460,18 +413,16 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     }
   }
   destroy() {
-    var _a2, _b, _c, _d;
+    var _a2, _b, _c;
     (_a2 = this.dragInteractable) == null ? void 0 : _a2.unset();
     (_b = this.dropInteractable) == null ? void 0 : _b.unset();
     (_c = this.blankAreaDropInteractable) == null ? void 0 : _c.unset();
     this.clearAllConnectionLines();
-    (_d = this.subscription) == null ? void 0 : _d.unsubscribe();
   }
 }
 _init = __decoratorStart(_a);
 __decorateElement(_init, 1, "containerRender", _containerRender_dec, ConnectionLine);
 __decorateElement(_init, 1, "createNodeAndEdge", _createNodeAndEdge_dec, ConnectionLine);
-__decorateElement(_init, 1, "createEdge", _createEdge_dec, ConnectionLine);
 __decorateElement(_init, 1, "createEdges", _createEdges_dec, ConnectionLine);
 __decorateElement(_init, 1, "init", _init_dec, ConnectionLine);
 __decorateElement(_init, 1, "destroy", _destroy_dec, ConnectionLine);
@@ -483,9 +434,7 @@ __decorateElement(_init, 5, "endInteraction", _endInteraction_dec, ConnectionLin
 __decorateElement(_init, 5, "canInteract", _canInteract_dec, ConnectionLine);
 __decorateElement(_init, 5, "selectedNodeIds", _selectedNodeIds_dec, ConnectionLine);
 __decorateElement(_init, 5, "getConnectHandleAttributes", _getConnectHandleAttributes_dec, ConnectionLine);
-__decorateElement(_init, 5, "config", _config_dec, ConnectionLine);
-__decorateElement(_init, 5, "registerValidator", _registerValidator_dec, ConnectionLine);
-__decorateElement(_init, 5, "registerNewNodeCreator", _registerNewNodeCreator_dec, ConnectionLine);
+__decorateElement(_init, 5, "registerCreator", _registerCreator_dec, ConnectionLine);
 __decoratorMetadata(_init, ConnectionLine);
 
 exports.ConnectionLine = ConnectionLine;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { Node, Edge, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
+import { Node, Edge, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority, PluginData } from '@knotx/core';
 
 interface ConnectionLineConfig {
     /**
@@ -6,11 +6,6 @@ interface ConnectionLineConfig {
      * @default false
      */
     allowCreateNodeOnBlankArea?: boolean;
-    /**
-     * 当连接到画布空白处时创建的节点类型
-     * @default 'default'
-     */
-    newNodeType?: string;
     /**
      * 新创建的边的类型
      * @default 'bezier'
@@ -18,7 +13,6 @@ interface ConnectionLineConfig {
     edgeType?: string;
     /**
      * 临时连接线的类名
-     * @default 'knotx-connection-line'
      */
     connectionLineClassName?: string;
     /**
@@ -27,23 +21,25 @@ interface ConnectionLineConfig {
      */
     allowMultiDrag?: boolean;
 }
-interface ConnectionValidateContext {
-    sourceNodeId: string;
-    sourceNode: Node;
-    targetNodeId?: string;
-    targetNode?: Node;
-    isValid: boolean;
-}
-type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
 declare module '@knotx/core' {
     interface PluginData {
         connectionLine: {
-            config: ConnectionLineConfig;
-            registerValidator: (validator: ConnectionValidator) => () => void;
-            registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: Node, edges: Edge[]) => ({
-                node: Node;
+            /**
+             * 注册新节点创建器
+             * @param creator 新节点创建器
+             * @returns 取消注册的函数, 如果创建器返回 false, 则不会创建节点和边, 如果返回 undefined, 则使用默认的创建逻辑
+             */
+            registerCreator: (creator: (params: {
+                sourceNodeIds: string[];
+                targetNodeId: string | undefined;
+                targetPosition: {
+                    x: number;
+                    y: number;
+                } | undefined;
+            }) => ({
+                nodes: Node[];
                 edges: Edge[];
-            }) | false) => () => void;
+            }) | undefined | false) => () => void;
             /**
              * 获取连接点的属性
              * @param nodeId 节点ID
@@ -51,7 +47,12 @@ declare module '@knotx/core' {
              * @param index 连接点索引，多个连接点时使用
              * @returns 连接点属性对象
              */
-            getConnectHandleAttributes: (nodeId: string, type: 'source' | 'target', index?: number) => Record<string, string>;
+            getConnectHandleAttributes: (params: {
+                nodeId: string;
+                type: 'source' | 'target';
+                index?: number;
+                className?: string;
+            }) => Record<string, string>;
         };
     }
 }
@@ -68,38 +69,22 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     endInteraction: (pluginId: string, type: string) => void;
     canInteract: (pluginId: string, type: string, autoStartPriority?: InteractionPriority) => boolean;
     selectedNodeIds: string[];
-    getConnectHandleAttributes: (nodeId: string, type: "source" | "target", id?: number) => {
-        className: string;
-        'data-plugin-id': string;
-        'data-node-id': string;
-        'data-connector-id': string;
-        'data-connector-type': "source" | "target";
-    };
+    getConnectHandleAttributes: PluginData['connectionLine']['getConnectHandleAttributes'];
     private classNames;
     private connectionLines;
     private startScale;
     private currentDragNodeId;
-    private subscription?;
     private dragInteractable?;
     private dropInteractable?;
     private blankAreaDropInteractable?;
-    private validators$;
     private creators$;
     config: ConnectionLineConfig;
-    registerValidator: (validator: ConnectionValidator) => () => void;
-    registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: Node, edges: Edge[]) => ({
-        node: Node;
-        edges: Edge[];
-    }) | false) => () => void;
+    registerCreator: PluginData['connectionLine']['registerCreator'];
     containerRender(): JSX.Element;
     /**
      * 获取容器大小
      */
     private getContainerSize;
-    /**
-     * 应用所有验证器，检查连接是否有效
-     */
-    private validateConnection;
     private getContainerElement;
     /**
      * 获取需要为其创建连接线的源节点ID列表
@@ -129,10 +114,6 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
         x: number;
         y: number;
     }): EdgeOperation[];
-    /**
-     * 创建新的边
-     */
-    createEdge(sourceNodeId: string, targetNodeId: string): EdgeOperation[];
     /**
      * 批量创建新的边
      */
@@ -141,4 +122,4 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     destroy(): void;
 }
 
-export { ConnectionLine, type ConnectionLineConfig, type ConnectionValidateContext, type ConnectionValidator };
+export { ConnectionLine, type ConnectionLineConfig };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { Node, Edge, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
+import { Node, Edge, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority, PluginData } from '@knotx/core';
 
 interface ConnectionLineConfig {
     /**
@@ -6,11 +6,6 @@ interface ConnectionLineConfig {
      * @default false
      */
     allowCreateNodeOnBlankArea?: boolean;
-    /**
-     * 当连接到画布空白处时创建的节点类型
-     * @default 'default'
-     */
-    newNodeType?: string;
     /**
      * 新创建的边的类型
      * @default 'bezier'
@@ -18,7 +13,6 @@ interface ConnectionLineConfig {
     edgeType?: string;
     /**
      * 临时连接线的类名
-     * @default 'knotx-connection-line'
      */
     connectionLineClassName?: string;
     /**
@@ -27,23 +21,25 @@ interface ConnectionLineConfig {
      */
     allowMultiDrag?: boolean;
 }
-interface ConnectionValidateContext {
-    sourceNodeId: string;
-    sourceNode: Node;
-    targetNodeId?: string;
-    targetNode?: Node;
-    isValid: boolean;
-}
-type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
 declare module '@knotx/core' {
     interface PluginData {
         connectionLine: {
-            config: ConnectionLineConfig;
-            registerValidator: (validator: ConnectionValidator) => () => void;
-            registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: Node, edges: Edge[]) => ({
-                node: Node;
+            /**
+             * 注册新节点创建器
+             * @param creator 新节点创建器
+             * @returns 取消注册的函数, 如果创建器返回 false, 则不会创建节点和边, 如果返回 undefined, 则使用默认的创建逻辑
+             */
+            registerCreator: (creator: (params: {
+                sourceNodeIds: string[];
+                targetNodeId: string | undefined;
+                targetPosition: {
+                    x: number;
+                    y: number;
+                } | undefined;
+            }) => ({
+                nodes: Node[];
                 edges: Edge[];
-            }) | false) => () => void;
+            }) | undefined | false) => () => void;
             /**
              * 获取连接点的属性
              * @param nodeId 节点ID
@@ -51,7 +47,12 @@ declare module '@knotx/core' {
              * @param index 连接点索引，多个连接点时使用
              * @returns 连接点属性对象
              */
-            getConnectHandleAttributes: (nodeId: string, type: 'source' | 'target', index?: number) => Record<string, string>;
+            getConnectHandleAttributes: (params: {
+                nodeId: string;
+                type: 'source' | 'target';
+                index?: number;
+                className?: string;
+            }) => Record<string, string>;
         };
     }
 }
@@ -68,38 +69,22 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     endInteraction: (pluginId: string, type: string) => void;
     canInteract: (pluginId: string, type: string, autoStartPriority?: InteractionPriority) => boolean;
     selectedNodeIds: string[];
-    getConnectHandleAttributes: (nodeId: string, type: "source" | "target", id?: number) => {
-        className: string;
-        'data-plugin-id': string;
-        'data-node-id': string;
-        'data-connector-id': string;
-        'data-connector-type': "source" | "target";
-    };
+    getConnectHandleAttributes: PluginData['connectionLine']['getConnectHandleAttributes'];
     private classNames;
     private connectionLines;
     private startScale;
     private currentDragNodeId;
-    private subscription?;
     private dragInteractable?;
     private dropInteractable?;
     private blankAreaDropInteractable?;
-    private validators$;
     private creators$;
     config: ConnectionLineConfig;
-    registerValidator: (validator: ConnectionValidator) => () => void;
-    registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: Node, edges: Edge[]) => ({
-        node: Node;
-        edges: Edge[];
-    }) | false) => () => void;
+    registerCreator: PluginData['connectionLine']['registerCreator'];
     containerRender(): JSX.Element;
     /**
      * 获取容器大小
      */
     private getContainerSize;
-    /**
-     * 应用所有验证器，检查连接是否有效
-     */
-    private validateConnection;
     private getContainerElement;
     /**
      * 获取需要为其创建连接线的源节点ID列表
@@ -129,10 +114,6 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
         x: number;
         y: number;
     }): EdgeOperation[];
-    /**
-     * 创建新的边
-     */
-    createEdge(sourceNodeId: string, targetNodeId: string): EdgeOperation[];
     /**
      * 批量创建新的边
      */
@@ -141,4 +122,4 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     destroy(): void;
 }
 
-export { ConnectionLine, type ConnectionLineConfig, type ConnectionValidateContext, type ConnectionValidator };
+export { ConnectionLine, type ConnectionLineConfig };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Node, Edge, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
+import { Node, Edge, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority, PluginData } from '@knotx/core';
 
 interface ConnectionLineConfig {
     /**
@@ -6,11 +6,6 @@ interface ConnectionLineConfig {
      * @default false
      */
     allowCreateNodeOnBlankArea?: boolean;
-    /**
-     * 当连接到画布空白处时创建的节点类型
-     * @default 'default'
-     */
-    newNodeType?: string;
     /**
      * 新创建的边的类型
      * @default 'bezier'
@@ -18,7 +13,6 @@ interface ConnectionLineConfig {
     edgeType?: string;
     /**
      * 临时连接线的类名
-     * @default 'knotx-connection-line'
      */
     connectionLineClassName?: string;
     /**
@@ -27,23 +21,25 @@ interface ConnectionLineConfig {
      */
     allowMultiDrag?: boolean;
 }
-interface ConnectionValidateContext {
-    sourceNodeId: string;
-    sourceNode: Node;
-    targetNodeId?: string;
-    targetNode?: Node;
-    isValid: boolean;
-}
-type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
 declare module '@knotx/core' {
     interface PluginData {
         connectionLine: {
-            config: ConnectionLineConfig;
-            registerValidator: (validator: ConnectionValidator) => () => void;
-            registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: Node, edges: Edge[]) => ({
-                node: Node;
+            /**
+             * 注册新节点创建器
+             * @param creator 新节点创建器
+             * @returns 取消注册的函数, 如果创建器返回 false, 则不会创建节点和边, 如果返回 undefined, 则使用默认的创建逻辑
+             */
+            registerCreator: (creator: (params: {
+                sourceNodeIds: string[];
+                targetNodeId: string | undefined;
+                targetPosition: {
+                    x: number;
+                    y: number;
+                } | undefined;
+            }) => ({
+                nodes: Node[];
                 edges: Edge[];
-            }) | false) => () => void;
+            }) | undefined | false) => () => void;
             /**
              * 获取连接点的属性
              * @param nodeId 节点ID
@@ -51,7 +47,12 @@ declare module '@knotx/core' {
              * @param index 连接点索引，多个连接点时使用
              * @returns 连接点属性对象
              */
-            getConnectHandleAttributes: (nodeId: string, type: 'source' | 'target', index?: number) => Record<string, string>;
+            getConnectHandleAttributes: (params: {
+                nodeId: string;
+                type: 'source' | 'target';
+                index?: number;
+                className?: string;
+            }) => Record<string, string>;
         };
     }
 }
@@ -68,38 +69,22 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     endInteraction: (pluginId: string, type: string) => void;
     canInteract: (pluginId: string, type: string, autoStartPriority?: InteractionPriority) => boolean;
     selectedNodeIds: string[];
-    getConnectHandleAttributes: (nodeId: string, type: "source" | "target", id?: number) => {
-        className: string;
-        'data-plugin-id': string;
-        'data-node-id': string;
-        'data-connector-id': string;
-        'data-connector-type': "source" | "target";
-    };
+    getConnectHandleAttributes: PluginData['connectionLine']['getConnectHandleAttributes'];
     private classNames;
     private connectionLines;
     private startScale;
     private currentDragNodeId;
-    private subscription?;
     private dragInteractable?;
     private dropInteractable?;
     private blankAreaDropInteractable?;
-    private validators$;
     private creators$;
     config: ConnectionLineConfig;
-    registerValidator: (validator: ConnectionValidator) => () => void;
-    registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: Node, edges: Edge[]) => ({
-        node: Node;
-        edges: Edge[];
-    }) | false) => () => void;
+    registerCreator: PluginData['connectionLine']['registerCreator'];
     containerRender(): JSX.Element;
     /**
      * 获取容器大小
      */
     private getContainerSize;
-    /**
-     * 应用所有验证器，检查连接是否有效
-     */
-    private validateConnection;
     private getContainerElement;
     /**
      * 获取需要为其创建连接线的源节点ID列表
@@ -129,10 +114,6 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
         x: number;
         y: number;
     }): EdgeOperation[];
-    /**
-     * 创建新的边
-     */
-    createEdge(sourceNodeId: string, targetNodeId: string): EdgeOperation[];
     /**
      * 批量创建新的边
      */
@@ -141,4 +122,4 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     destroy(): void;
 }
 
-export { ConnectionLine, type ConnectionLineConfig, type ConnectionValidateContext, type ConnectionValidator };
+export { ConnectionLine, type ConnectionLineConfig };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx } from '@knotx/jsx/jsx-runtime';
-import { Layer, bem, generateId, InteractionPriority, BasePlugin } from '@knotx/core';
+import { bem, Layer, generateId, InteractionPriority, BasePlugin } from '@knotx/core';
 import { inject, register, layer, edgeOperator, OnInit, OnDestroy } from '@knotx/decorators';
 import interact from 'interactjs';
 import { merge } from 'lodash-es';
@@ -70,15 +70,14 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _destroy_dec, _init_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;
+var _destroy_dec, _init_dec, _createEdges_dec, _createNodeAndEdge_dec, _containerRender_dec, _registerCreator_dec, _getConnectHandleAttributes_dec, _selectedNodeIds_dec, _canInteract_dec, _endInteraction_dec, _startInteraction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
 const DEFAULT_CONFIG = {
   allowCreateNodeOnBlankArea: true,
-  newNodeType: "default",
   edgeType: "bezier",
-  connectionLineClassName: "knotx-connection-line",
+  connectionLineClassName: bem("connection-line", "line"),
   allowMultiDrag: true
 };
-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()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
+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")], _registerCreator_dec = [register("registerCreator")], _containerRender_dec = [layer(Layer.Nodes, 10)], _createNodeAndEdge_dec = [edgeOperator()], _createEdges_dec = [edgeOperator()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -90,12 +89,12 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     __publicField(this, "endInteraction", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
     __publicField(this, "canInteract", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
     __publicField(this, "selectedNodeIds", __runInitializers(_init, 32, this, [])), __runInitializers(_init, 35, this);
-    __publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 36, this, (nodeId, type, id = 0) => {
+    __publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 36, this, ({ nodeId, type, index = 0, className = "" }) => {
       return {
-        "className": `${this.classNames.connector} ${this.classNames[type]}`,
+        "className": `${className} ${this.classNames.connector} ${this.classNames[type]}`,
         "data-plugin-id": this.pluginId,
         "data-node-id": nodeId,
-        "data-connector-id": String(id),
+        "data-connector-id": String(index),
         "data-connector-type": type
       };
     })), __runInitializers(_init, 39, this);
@@ -111,30 +110,13 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     __publicField(this, "startScale", 1);
     // 用于存储当前触发拖拽事件的DOM元素对应的节点ID
     __publicField(this, "currentDragNodeId", null);
-    // 各种订阅和交互对象
-    __publicField(this, "subscription");
     __publicField(this, "dragInteractable");
     __publicField(this, "dropInteractable");
     __publicField(this, "blankAreaDropInteractable");
-    // 验证器列表
-    __publicField(this, "validators$", new BehaviorSubject([]));
     // 新节点创建器列表
     __publicField(this, "creators$", new BehaviorSubject([]));
-    __publicField(this, "config", __runInitializers(_init, 40, this, DEFAULT_CONFIG)), __runInitializers(_init, 43, this);
-    __publicField(this, "registerValidator", __runInitializers(_init, 44, this, (validator) => {
-      const validators = this.validators$.value;
-      validators.push(validator);
-      this.validators$.next(validators);
-      return () => {
-        const currentValidators = this.validators$.value;
-        const index = currentValidators.indexOf(validator);
-        if (index > -1) {
-          currentValidators.splice(index, 1);
-          this.validators$.next(currentValidators);
-        }
-      };
-    })), __runInitializers(_init, 47, this);
-    __publicField(this, "registerNewNodeCreator", __runInitializers(_init, 48, this, (creator) => {
+    __publicField(this, "config", DEFAULT_CONFIG);
+    __publicField(this, "registerCreator", __runInitializers(_init, 40, this, (creator) => {
       const creators = this.creators$.value;
       creators.push(creator);
       this.creators$.next(creators);
@@ -146,7 +128,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
           this.creators$.next(currentCreators);
         }
       };
-    })), __runInitializers(_init, 51, this);
+    })), __runInitializers(_init, 43, this);
   }
   containerRender() {
     const size = this.getContainerSize();
@@ -173,31 +155,6 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
   getContainerSize() {
     return 1;
   }
-  /**
-   * 应用所有验证器，检查连接是否有效
-   */
-  validateConnection(sourceNodeId, targetNodeId) {
-    const sourceNode = this.getNode(sourceNodeId);
-    if (!sourceNode)
-      return false;
-    let targetNode;
-    if (targetNodeId) {
-      targetNode = this.getNode(targetNodeId);
-      if (!targetNode)
-        return false;
-    }
-    const context = {
-      sourceNodeId,
-      sourceNode,
-      targetNodeId,
-      targetNode,
-      isValid: true
-    };
-    return this.validators$.value.reduce(
-      (isValid, validator) => isValid && validator(context),
-      true
-    );
-  }
   getContainerElement() {
     return document.querySelector(`.${bem("connection-line", "container")}[data-plugin-id="${this.pluginId}"]`);
   }
@@ -216,7 +173,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
    */
   createConnectionLine(sourceNodeId, startPosition) {
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("class", `${this.config.connectionLineClassName || "knotx-connection-line"} line-${sourceNodeId}`);
+    svg.setAttribute("class", `${this.config.connectionLineClassName} line-${sourceNodeId}`);
     svg.style.position = "absolute";
     svg.style.top = "0";
     svg.style.left = "0";
@@ -292,7 +249,6 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     const newNodeId = generateId();
     const newNode = {
       id: newNodeId,
-      type: this.config.newNodeType,
       position,
       data: {}
     };
@@ -304,14 +260,21 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     }));
     const createResult = this.creators$.value.reduce((result, creator) => {
       var _a2;
-      return (_a2 = creator(sourceNodeIds, newNode, newEdges)) != null ? _a2 : result;
-    }, { node: newNode, edges: newEdges });
+      return (_a2 = creator({
+        sourceNodeIds,
+        targetNodeId: void 0,
+        targetPosition: position
+      })) != null ? _a2 : result;
+    }, {
+      nodes: [newNode],
+      edges: newEdges
+    });
     if (createResult === false) {
       return [];
     }
     this.dispatchNodeOperation({
-      type: "add",
-      data: createResult.node
+      type: "batch",
+      operations: createResult.nodes.map((node) => ({ type: "add", data: node }))
     });
     return [{
       type: "batch",
@@ -321,31 +284,26 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
       }))
     }];
   }
-  createEdge(sourceNodeId, targetNodeId) {
-    return [{
-      type: "add",
-      data: {
-        id: generateId(),
-        source: sourceNodeId,
-        target: targetNodeId,
-        type: this.config.edgeType
-      }
-    }];
-  }
   createEdges(sourceNodeIds, targetNodeId) {
     if (sourceNodeIds.length === 0 || !targetNodeId) {
       return [];
     }
+    const createResult = this.creators$.value.reduce((result, creator) => {
+      var _a2;
+      return (_a2 = creator({
+        sourceNodeIds,
+        targetNodeId,
+        targetPosition: void 0
+      })) != null ? _a2 : result;
+    }, { edges: [] });
+    if (createResult === false || createResult.edges.length === 0) {
+      return [];
+    }
     return [{
       type: "batch",
-      operations: sourceNodeIds.map((sourceNodeId) => ({
+      operations: createResult.edges.map((edge) => ({
         type: "add",
-        data: {
-          id: generateId(),
-          source: sourceNodeId,
-          target: targetNodeId,
-          type: this.config.edgeType
-        }
+        data: edge
       }))
     }];
   }
@@ -428,12 +386,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
         const sourceNodeIds = Array.from(this.connectionLines.keys()).filter((id) => id !== targetNodeId);
         if (sourceNodeIds.length === 0)
           return;
-        const validSourceNodeIds = sourceNodeIds.filter(
-          (sourceNodeId) => this.validateConnection(sourceNodeId, targetNodeId)
-        );
-        if (validSourceNodeIds.length > 0) {
-          this.createEdges(validSourceNodeIds, targetNodeId);
-        }
+        this.createEdges(sourceNodeIds, targetNodeId);
         event.target.classList.remove(this.classNames.active);
       }
     });
@@ -454,18 +407,16 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     }
   }
   destroy() {
-    var _a2, _b, _c, _d;
+    var _a2, _b, _c;
     (_a2 = this.dragInteractable) == null ? void 0 : _a2.unset();
     (_b = this.dropInteractable) == null ? void 0 : _b.unset();
     (_c = this.blankAreaDropInteractable) == null ? void 0 : _c.unset();
     this.clearAllConnectionLines();
-    (_d = this.subscription) == null ? void 0 : _d.unsubscribe();
   }
 }
 _init = __decoratorStart(_a);
 __decorateElement(_init, 1, "containerRender", _containerRender_dec, ConnectionLine);
 __decorateElement(_init, 1, "createNodeAndEdge", _createNodeAndEdge_dec, ConnectionLine);
-__decorateElement(_init, 1, "createEdge", _createEdge_dec, ConnectionLine);
 __decorateElement(_init, 1, "createEdges", _createEdges_dec, ConnectionLine);
 __decorateElement(_init, 1, "init", _init_dec, ConnectionLine);
 __decorateElement(_init, 1, "destroy", _destroy_dec, ConnectionLine);
@@ -477,9 +428,7 @@ __decorateElement(_init, 5, "endInteraction", _endInteraction_dec, ConnectionLin
 __decorateElement(_init, 5, "canInteract", _canInteract_dec, ConnectionLine);
 __decorateElement(_init, 5, "selectedNodeIds", _selectedNodeIds_dec, ConnectionLine);
 __decorateElement(_init, 5, "getConnectHandleAttributes", _getConnectHandleAttributes_dec, ConnectionLine);
-__decorateElement(_init, 5, "config", _config_dec, ConnectionLine);
-__decorateElement(_init, 5, "registerValidator", _registerValidator_dec, ConnectionLine);
-__decorateElement(_init, 5, "registerNewNodeCreator", _registerNewNodeCreator_dec, ConnectionLine);
+__decorateElement(_init, 5, "registerCreator", _registerCreator_dec, ConnectionLine);
 __decoratorMetadata(_init, ConnectionLine);
 
 export { ConnectionLine };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/plugins-connection-line",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Connectionline Plugin for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -33,14 +33,14 @@
     "@interactjs/modifiers": "^1.10.27",
     "@interactjs/types": "^1.10.27",
     "interactjs": "^1.10.27",
-    "@knotx/jsx": "0.2.11",
-    "@knotx/plugins-selection": "0.2.13"
+    "@knotx/jsx": "0.2.13",
+    "@knotx/plugins-selection": "0.2.15"
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.2.12",
-    "@knotx/decorators": "0.2.13"
+    "@knotx/core": "0.2.14",
+    "@knotx/decorators": "0.2.15"
   },
   "devDependencies": {
     "@interactjs/actions": "^1.10.27",
@@ -49,11 +49,11 @@
     "@interactjs/types": "^1.10.27",
     "@types/lodash-es": "^4.17.12",
     "interactjs": "^1.10.27",
-    "@knotx/build-config": "0.2.11",
-    "@knotx/eslint-config": "0.2.11",
-    "@knotx/jsx": "0.2.11",
-    "@knotx/plugins-selection": "0.2.13",
-    "@knotx/typescript-config": "0.2.11"
+    "@knotx/build-config": "0.2.13",
+    "@knotx/eslint-config": "0.2.13",
+    "@knotx/jsx": "0.2.13",
+    "@knotx/plugins-selection": "0.2.15",
+    "@knotx/typescript-config": "0.2.13"
   },
   "scripts": {
     "build": "unbuild",