@knotx/plugins-connection-line 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -76,14 +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, _createNodeAndEdge_dec, _containerRender_dec, _registerCreator_dec, _getConnectHandleAttributes_dec, _selected_dec, _interaction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
+var _destroy_dec, _init_dec, _onTransform_dec, _onIsDragging_dec, _createEdges_dec, _createNodeAndEdge_dec, _containerRender_dec, _registerCreator_dec, _getConnectHandleAttributes_dec, _isDragging_dec, _selected_dec, _edgeScroll_dec, _transform_dec, _interaction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
 const DEFAULT_CONFIG = {
   allowCreateNodeOnBlankArea: true,
   edgeType: "bezier",
   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()], _interaction_dec = [decorators.inject.interaction()], _selected_dec = [decorators.inject.selection.selected()], _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) {
+class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.inject.getNode()], _dispatchNodeOperation_dec = [decorators.inject.dispatchNodeOperation()], _dispatchEdgeOperation_dec = [decorators.inject.dispatchEdgeOperation()], _interaction_dec = [decorators.inject.interaction()], _transform_dec = [decorators.inject.canvas.transform()], _edgeScroll_dec = [decorators.inject.canvas.edgeScroll()], _selected_dec = [decorators.inject.selection.selected()], _isDragging_dec = [decorators.register("isDragging")], _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()], _onIsDragging_dec = [decorators.subscribe.connectionLine.isDragging()], _onTransform_dec = [decorators.subscribe.canvas.transform()], _init_dec = [decorators.OnInit], _destroy_dec = [decorators.OnDestroy], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -92,16 +92,19 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __publicField(this, "dispatchEdgeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
     __publicField(this, "interaction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __publicField(this, "selected", __runInitializers(_init, 24, this, [])), __runInitializers(_init, 27, this);
-    __publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 28, this, ({ nodeId, type, index = 0, className = "" }) => {
+    __publicField(this, "transform", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "edgeScroll", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "selected", __runInitializers(_init, 32, this, [])), __runInitializers(_init, 35, this);
+    __publicField(this, "isDragging", __runInitializers(_init, 36, this, false)), __runInitializers(_init, 39, this);
+    __publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 40, this, ({ nodeId, type, index = 0, className = "" }) => {
       return {
         "className": `${className} ${this.classNames.connector} ${this.classNames[type]}`,
-        "data-plugin-id": this.pluginId,
+        [`data-${this.pluginId}`]: "",
         "data-node-id": nodeId,
         "data-connector-id": String(index),
         "data-connector-type": type
       };
-    })), __runInitializers(_init, 31, this);
+    })), __runInitializers(_init, 43, this);
     __publicField(this, "classNames", {
       connector: core.bem("connection-line", "connector"),
       source: core.bem("connection-line", "connector", "source"),
@@ -112,6 +115,8 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     __publicField(this, "connectionLines", /* @__PURE__ */ new Map());
     // 拖拽起始缩放比例
     __publicField(this, "startScale", 1);
+    // 记录拖拽开始时画布的位置
+    __publicField(this, "startTransformPosition", { x: 0, y: 0 });
     // 用于存储当前触发拖拽事件的DOM元素对应的节点ID
     __publicField(this, "currentDragNodeId", null);
     __publicField(this, "dragInteractable");
@@ -120,7 +125,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     // 新节点创建器列表
     __publicField(this, "creators$", new rxjs.BehaviorSubject([]));
     __publicField(this, "config", DEFAULT_CONFIG);
-    __publicField(this, "registerCreator", __runInitializers(_init, 32, this, (creator) => {
+    __publicField(this, "registerCreator", __runInitializers(_init, 44, this, (creator) => {
       const creators = this.creators$.value;
       creators.push(creator);
       this.creators$.next(creators);
@@ -132,15 +137,14 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
           this.creators$.next(currentCreators);
         }
       };
-    })), __runInitializers(_init, 35, this);
+    })), __runInitializers(_init, 47, this);
   }
   containerRender() {
     const size = this.getContainerSize();
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
-      {
+      __spreadValues({
         className: core.bem("connection-line", "container"),
-        "data-plugin-id": this.pluginId,
         style: {
           position: "absolute",
           left: 0,
@@ -150,7 +154,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
           overflow: "visible",
           pointerEvents: "none"
         }
-      }
+      }, { [`data-${this.pluginId}`]: "" })
     );
   }
   /**
@@ -160,7 +164,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     return 1;
   }
   getContainerElement() {
-    return document.querySelector(`.${core.bem("connection-line", "container")}[data-plugin-id="${this.pluginId}"]`);
+    return document.querySelector(`.${core.bem("connection-line", "container")}[data-${this.pluginId}]`);
   }
   /**
    * 获取需要为其创建连接线的源节点ID列表
@@ -233,13 +237,21 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     if (!currentDragConnectionLine) {
       return;
     }
-    currentDragConnectionLine.currentPosition.x += dx / this.startScale;
-    currentDragConnectionLine.currentPosition.y += dy / this.startScale;
+    const transformDeltaX = this.transform.positionX - this.startTransformPosition.x;
+    const transformDeltaY = this.transform.positionY - this.startTransformPosition.y;
+    const scaledDx = dx / this.transform.scale;
+    const scaledDy = dy / this.transform.scale;
+    currentDragConnectionLine.currentPosition.x += scaledDx - transformDeltaX / this.transform.scale;
+    currentDragConnectionLine.currentPosition.y += scaledDy - transformDeltaY / this.transform.scale;
     this.connectionLines.forEach((state) => {
       state.currentPosition.x = currentDragConnectionLine.currentPosition.x;
       state.currentPosition.y = currentDragConnectionLine.currentPosition.y;
       this.updateConnectionLine(state);
     });
+    this.startTransformPosition = {
+      x: this.transform.positionX,
+      y: this.transform.positionY
+    };
   }
   /**
    * 清除所有临时连接线
@@ -315,11 +327,18 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
       }))
     }];
   }
+  onIsDragging(isDragging) {
+    var _a2;
+    (_a2 = this.edgeScroll) == null ? void 0 : _a2.setConfig({ enabled: isDragging });
+  }
+  onTransform() {
+    this.updateAllConnectionLines(0, 0);
+  }
   init(config) {
     this.config = lodashEs.merge(DEFAULT_CONFIG, config);
-    this.dragInteractable = interact__default(`.${this.classNames.source}[data-plugin-id="${this.pluginId}"]`).draggable({
+    this.dragInteractable = interact__default(`.${this.classNames.source}[data-${this.pluginId}]`).draggable({
       inertia: false,
-      autoScroll: true,
+      autoScroll: false,
       listeners: {
         start: (event) => {
           var _a2;
@@ -333,7 +352,11 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
           const x = (rect.left + rect.right) / 2;
           const y = (rect.top + rect.bottom) / 2;
           const { left: containerLeft, top: containerTop, width: containerWidth } = ((_a2 = this.getContainerElement()) == null ? void 0 : _a2.getBoundingClientRect()) || { left: 0, top: 0, width: 1 };
-          this.startScale = containerWidth / this.getContainerSize();
+          this.startScale = this.transform.scale || containerWidth / this.getContainerSize();
+          this.startTransformPosition = {
+            x: this.transform.positionX,
+            y: this.transform.positionY
+          };
           const startPosition = {
             x: (x - containerLeft) / this.startScale,
             y: (y - containerTop) / this.startScale
@@ -346,7 +369,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
             if (sourceNodeId !== currentNodeId) {
               const connectHandleType = element.getAttribute("data-connector-type");
               const connectHandleId = element.getAttribute("data-connector-id");
-              const connector = document.querySelector(`[data-plugin-id="${this.pluginId}"][data-node-id="${sourceNodeId}"][data-connector-type="${connectHandleType}"][data-connector-id="${connectHandleId}"]`);
+              const connector = document.querySelector(`[data-${this.pluginId}][data-node-id="${sourceNodeId}"][data-connector-type="${connectHandleType}"][data-connector-id="${connectHandleId}"]`);
               if (connector) {
                 const connectorRect = connector.getBoundingClientRect();
                 const connectorX = (connectorRect.left + connectorRect.right) / 2;
@@ -360,6 +383,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
             const state = this.createConnectionLine(sourceNodeId, nodeStartPosition);
             this.connectionLines.set(sourceNodeId, state);
             this.interaction.start(this.pluginId, "connect", core.InteractionPriority.EntityConnectDrag);
+            this.isDragging = true;
           });
         },
         move: (event) => {
@@ -371,10 +395,13 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
           this.clearAllConnectionLines();
           this.currentDragNodeId = null;
           this.interaction.end(this.pluginId, "connect");
+          this.isDragging = false;
         }
       }
     });
-    this.dropInteractable = interact__default(`.${this.classNames.target}[data-plugin-id="${this.pluginId}"]`).dropzone({
+    interact__default.dynamicDrop(true);
+    this.dropInteractable = interact__default(`.${this.classNames.target}[data-${this.pluginId}]`).dropzone({
+      autoScroll: { enabled: false },
       ondragenter: (event) => {
         event.target.classList.add(this.classNames.active);
       },
@@ -400,6 +427,7 @@ class ConnectionLine extends (_a = core.BasePlugin, _getNode_dec = [decorators.i
     });
     if (this.config.allowCreateNodeOnBlankArea) {
       this.blankAreaDropInteractable = interact__default(`.${core.bem("canvas", "wrapper")}`).dropzone({
+        autoScroll: { enabled: false },
         ondrop: (event) => {
           const element = event.target;
           const isNode = !!element.closest(`[data-node-id]`);
@@ -426,13 +454,18 @@ _init = __decoratorStart(_a);
 __decorateElement(_init, 1, "containerRender", _containerRender_dec, ConnectionLine);
 __decorateElement(_init, 1, "createNodeAndEdge", _createNodeAndEdge_dec, ConnectionLine);
 __decorateElement(_init, 1, "createEdges", _createEdges_dec, ConnectionLine);
+__decorateElement(_init, 1, "onIsDragging", _onIsDragging_dec, ConnectionLine);
+__decorateElement(_init, 1, "onTransform", _onTransform_dec, ConnectionLine);
 __decorateElement(_init, 1, "init", _init_dec, ConnectionLine);
 __decorateElement(_init, 1, "destroy", _destroy_dec, ConnectionLine);
 __decorateElement(_init, 5, "getNode", _getNode_dec, ConnectionLine);
 __decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, ConnectionLine);
 __decorateElement(_init, 5, "dispatchEdgeOperation", _dispatchEdgeOperation_dec, ConnectionLine);
 __decorateElement(_init, 5, "interaction", _interaction_dec, ConnectionLine);
+__decorateElement(_init, 5, "transform", _transform_dec, ConnectionLine);
+__decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, ConnectionLine);
 __decorateElement(_init, 5, "selected", _selected_dec, ConnectionLine);
+__decorateElement(_init, 5, "isDragging", _isDragging_dec, ConnectionLine);
 __decorateElement(_init, 5, "getConnectHandleAttributes", _getConnectHandleAttributes_dec, ConnectionLine);
 __decorateElement(_init, 5, "registerCreator", _registerCreator_dec, ConnectionLine);
 __decoratorMetadata(_init, ConnectionLine);

package/dist/index.d.cts

@@ -28,6 +28,7 @@ interface ConnectionLineConfig {
 declare module '@knotx/core' {
     interface PluginData {
         connectionLine: {
+            isDragging: boolean;
             /**
              * 注册新节点创建器
              * @param creator 新节点创建器
@@ -70,11 +71,15 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     dispatchNodeOperation: Engine['dispatchNodeOperation'];
     dispatchEdgeOperation: Engine['dispatchEdgeOperation'];
     interaction: Engine['interaction'];
+    transform: PluginData['canvas']['transform'];
+    edgeScroll: PluginData['canvas']['edgeScroll'];
     selected: PluginData['selection']['selected'];
+    isDragging: boolean;
     getConnectHandleAttributes: PluginData['connectionLine']['getConnectHandleAttributes'];
     private classNames;
     private connectionLines;
     private startScale;
+    private startTransformPosition;
     private currentDragNodeId;
     private dragInteractable?;
     private dropInteractable?;
@@ -120,6 +125,8 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
      * 批量创建新的边
      */
     createEdges(sourceNodeIds: string[], targetNodeId: string): EdgeOperation[];
+    onIsDragging(isDragging: boolean): void;
+    onTransform(): void;
     init(config: ConnectionLineConfig): void;
     destroy(): void;
 }

package/dist/index.d.mts

@@ -28,6 +28,7 @@ interface ConnectionLineConfig {
 declare module '@knotx/core' {
     interface PluginData {
         connectionLine: {
+            isDragging: boolean;
             /**
              * 注册新节点创建器
              * @param creator 新节点创建器
@@ -70,11 +71,15 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     dispatchNodeOperation: Engine['dispatchNodeOperation'];
     dispatchEdgeOperation: Engine['dispatchEdgeOperation'];
     interaction: Engine['interaction'];
+    transform: PluginData['canvas']['transform'];
+    edgeScroll: PluginData['canvas']['edgeScroll'];
     selected: PluginData['selection']['selected'];
+    isDragging: boolean;
     getConnectHandleAttributes: PluginData['connectionLine']['getConnectHandleAttributes'];
     private classNames;
     private connectionLines;
     private startScale;
+    private startTransformPosition;
     private currentDragNodeId;
     private dragInteractable?;
     private dropInteractable?;
@@ -120,6 +125,8 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
      * 批量创建新的边
      */
     createEdges(sourceNodeIds: string[], targetNodeId: string): EdgeOperation[];
+    onIsDragging(isDragging: boolean): void;
+    onTransform(): void;
     init(config: ConnectionLineConfig): void;
     destroy(): void;
 }

package/dist/index.d.ts

@@ -28,6 +28,7 @@ interface ConnectionLineConfig {
 declare module '@knotx/core' {
     interface PluginData {
         connectionLine: {
+            isDragging: boolean;
             /**
              * 注册新节点创建器
              * @param creator 新节点创建器
@@ -70,11 +71,15 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
     dispatchNodeOperation: Engine['dispatchNodeOperation'];
     dispatchEdgeOperation: Engine['dispatchEdgeOperation'];
     interaction: Engine['interaction'];
+    transform: PluginData['canvas']['transform'];
+    edgeScroll: PluginData['canvas']['edgeScroll'];
     selected: PluginData['selection']['selected'];
+    isDragging: boolean;
     getConnectHandleAttributes: PluginData['connectionLine']['getConnectHandleAttributes'];
     private classNames;
     private connectionLines;
     private startScale;
+    private startTransformPosition;
     private currentDragNodeId;
     private dragInteractable?;
     private dropInteractable?;
@@ -120,6 +125,8 @@ declare class ConnectionLine extends BasePlugin<'connectionLine', ConnectionLine
      * 批量创建新的边
      */
     createEdges(sourceNodeIds: string[], targetNodeId: string): EdgeOperation[];
+    onIsDragging(isDragging: boolean): void;
+    onTransform(): void;
     init(config: ConnectionLineConfig): void;
     destroy(): void;
 }

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx } from '@knotx/jsx/jsx-runtime';
 import { bem, Layer, generateId, InteractionPriority, BasePlugin } from '@knotx/core';
-import { inject, register, layer, edgeOperator, OnInit, OnDestroy } from '@knotx/decorators';
+import { inject, register, layer, edgeOperator, subscribe, OnInit, OnDestroy } from '@knotx/decorators';
 import interact from 'interactjs';
 import { merge } from 'lodash-es';
 import { BehaviorSubject } from 'rxjs';
@@ -70,14 +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, _createNodeAndEdge_dec, _containerRender_dec, _registerCreator_dec, _getConnectHandleAttributes_dec, _selected_dec, _interaction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
+var _destroy_dec, _init_dec, _onTransform_dec, _onIsDragging_dec, _createEdges_dec, _createNodeAndEdge_dec, _containerRender_dec, _registerCreator_dec, _getConnectHandleAttributes_dec, _isDragging_dec, _selected_dec, _edgeScroll_dec, _transform_dec, _interaction_dec, _dispatchEdgeOperation_dec, _dispatchNodeOperation_dec, _getNode_dec, _a, _init;
 const DEFAULT_CONFIG = {
   allowCreateNodeOnBlankArea: true,
   edgeType: "bezier",
   connectionLineClassName: bem("connection-line", "line"),
   allowMultiDrag: true
 };
-class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _dispatchEdgeOperation_dec = [inject.dispatchEdgeOperation()], _interaction_dec = [inject.interaction()], _selected_dec = [inject.selection.selected()], _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) {
+class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()], _dispatchNodeOperation_dec = [inject.dispatchNodeOperation()], _dispatchEdgeOperation_dec = [inject.dispatchEdgeOperation()], _interaction_dec = [inject.interaction()], _transform_dec = [inject.canvas.transform()], _edgeScroll_dec = [inject.canvas.edgeScroll()], _selected_dec = [inject.selection.selected()], _isDragging_dec = [register("isDragging")], _getConnectHandleAttributes_dec = [register("getConnectHandleAttributes")], _registerCreator_dec = [register("registerCreator")], _containerRender_dec = [layer(Layer.Nodes, 10)], _createNodeAndEdge_dec = [edgeOperator()], _createEdges_dec = [edgeOperator()], _onIsDragging_dec = [subscribe.connectionLine.isDragging()], _onTransform_dec = [subscribe.canvas.transform()], _init_dec = [OnInit], _destroy_dec = [OnDestroy], _a) {
   constructor() {
     super(...arguments);
     __runInitializers(_init, 5, this);
@@ -86,16 +86,19 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __publicField(this, "dispatchEdgeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
     __publicField(this, "interaction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __publicField(this, "selected", __runInitializers(_init, 24, this, [])), __runInitializers(_init, 27, this);
-    __publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 28, this, ({ nodeId, type, index = 0, className = "" }) => {
+    __publicField(this, "transform", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __publicField(this, "edgeScroll", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "selected", __runInitializers(_init, 32, this, [])), __runInitializers(_init, 35, this);
+    __publicField(this, "isDragging", __runInitializers(_init, 36, this, false)), __runInitializers(_init, 39, this);
+    __publicField(this, "getConnectHandleAttributes", __runInitializers(_init, 40, this, ({ nodeId, type, index = 0, className = "" }) => {
       return {
         "className": `${className} ${this.classNames.connector} ${this.classNames[type]}`,
-        "data-plugin-id": this.pluginId,
+        [`data-${this.pluginId}`]: "",
         "data-node-id": nodeId,
         "data-connector-id": String(index),
         "data-connector-type": type
       };
-    })), __runInitializers(_init, 31, this);
+    })), __runInitializers(_init, 43, this);
     __publicField(this, "classNames", {
       connector: bem("connection-line", "connector"),
       source: bem("connection-line", "connector", "source"),
@@ -106,6 +109,8 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     __publicField(this, "connectionLines", /* @__PURE__ */ new Map());
     // 拖拽起始缩放比例
     __publicField(this, "startScale", 1);
+    // 记录拖拽开始时画布的位置
+    __publicField(this, "startTransformPosition", { x: 0, y: 0 });
     // 用于存储当前触发拖拽事件的DOM元素对应的节点ID
     __publicField(this, "currentDragNodeId", null);
     __publicField(this, "dragInteractable");
@@ -114,7 +119,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     // 新节点创建器列表
     __publicField(this, "creators$", new BehaviorSubject([]));
     __publicField(this, "config", DEFAULT_CONFIG);
-    __publicField(this, "registerCreator", __runInitializers(_init, 32, this, (creator) => {
+    __publicField(this, "registerCreator", __runInitializers(_init, 44, this, (creator) => {
       const creators = this.creators$.value;
       creators.push(creator);
       this.creators$.next(creators);
@@ -126,15 +131,14 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
           this.creators$.next(currentCreators);
         }
       };
-    })), __runInitializers(_init, 35, this);
+    })), __runInitializers(_init, 47, this);
   }
   containerRender() {
     const size = this.getContainerSize();
     return /* @__PURE__ */ jsx(
       "div",
-      {
+      __spreadValues({
         className: bem("connection-line", "container"),
-        "data-plugin-id": this.pluginId,
         style: {
           position: "absolute",
           left: 0,
@@ -144,7 +148,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
           overflow: "visible",
           pointerEvents: "none"
         }
-      }
+      }, { [`data-${this.pluginId}`]: "" })
     );
   }
   /**
@@ -154,7 +158,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     return 1;
   }
   getContainerElement() {
-    return document.querySelector(`.${bem("connection-line", "container")}[data-plugin-id="${this.pluginId}"]`);
+    return document.querySelector(`.${bem("connection-line", "container")}[data-${this.pluginId}]`);
   }
   /**
    * 获取需要为其创建连接线的源节点ID列表
@@ -227,13 +231,21 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     if (!currentDragConnectionLine) {
       return;
     }
-    currentDragConnectionLine.currentPosition.x += dx / this.startScale;
-    currentDragConnectionLine.currentPosition.y += dy / this.startScale;
+    const transformDeltaX = this.transform.positionX - this.startTransformPosition.x;
+    const transformDeltaY = this.transform.positionY - this.startTransformPosition.y;
+    const scaledDx = dx / this.transform.scale;
+    const scaledDy = dy / this.transform.scale;
+    currentDragConnectionLine.currentPosition.x += scaledDx - transformDeltaX / this.transform.scale;
+    currentDragConnectionLine.currentPosition.y += scaledDy - transformDeltaY / this.transform.scale;
     this.connectionLines.forEach((state) => {
       state.currentPosition.x = currentDragConnectionLine.currentPosition.x;
       state.currentPosition.y = currentDragConnectionLine.currentPosition.y;
       this.updateConnectionLine(state);
     });
+    this.startTransformPosition = {
+      x: this.transform.positionX,
+      y: this.transform.positionY
+    };
   }
   /**
    * 清除所有临时连接线
@@ -309,11 +321,18 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
       }))
     }];
   }
+  onIsDragging(isDragging) {
+    var _a2;
+    (_a2 = this.edgeScroll) == null ? void 0 : _a2.setConfig({ enabled: isDragging });
+  }
+  onTransform() {
+    this.updateAllConnectionLines(0, 0);
+  }
   init(config) {
     this.config = merge(DEFAULT_CONFIG, config);
-    this.dragInteractable = interact(`.${this.classNames.source}[data-plugin-id="${this.pluginId}"]`).draggable({
+    this.dragInteractable = interact(`.${this.classNames.source}[data-${this.pluginId}]`).draggable({
       inertia: false,
-      autoScroll: true,
+      autoScroll: false,
       listeners: {
         start: (event) => {
           var _a2;
@@ -327,7 +346,11 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
           const x = (rect.left + rect.right) / 2;
           const y = (rect.top + rect.bottom) / 2;
           const { left: containerLeft, top: containerTop, width: containerWidth } = ((_a2 = this.getContainerElement()) == null ? void 0 : _a2.getBoundingClientRect()) || { left: 0, top: 0, width: 1 };
-          this.startScale = containerWidth / this.getContainerSize();
+          this.startScale = this.transform.scale || containerWidth / this.getContainerSize();
+          this.startTransformPosition = {
+            x: this.transform.positionX,
+            y: this.transform.positionY
+          };
           const startPosition = {
             x: (x - containerLeft) / this.startScale,
             y: (y - containerTop) / this.startScale
@@ -340,7 +363,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
             if (sourceNodeId !== currentNodeId) {
               const connectHandleType = element.getAttribute("data-connector-type");
               const connectHandleId = element.getAttribute("data-connector-id");
-              const connector = document.querySelector(`[data-plugin-id="${this.pluginId}"][data-node-id="${sourceNodeId}"][data-connector-type="${connectHandleType}"][data-connector-id="${connectHandleId}"]`);
+              const connector = document.querySelector(`[data-${this.pluginId}][data-node-id="${sourceNodeId}"][data-connector-type="${connectHandleType}"][data-connector-id="${connectHandleId}"]`);
               if (connector) {
                 const connectorRect = connector.getBoundingClientRect();
                 const connectorX = (connectorRect.left + connectorRect.right) / 2;
@@ -354,6 +377,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
             const state = this.createConnectionLine(sourceNodeId, nodeStartPosition);
             this.connectionLines.set(sourceNodeId, state);
             this.interaction.start(this.pluginId, "connect", InteractionPriority.EntityConnectDrag);
+            this.isDragging = true;
           });
         },
         move: (event) => {
@@ -365,10 +389,13 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
           this.clearAllConnectionLines();
           this.currentDragNodeId = null;
           this.interaction.end(this.pluginId, "connect");
+          this.isDragging = false;
         }
       }
     });
-    this.dropInteractable = interact(`.${this.classNames.target}[data-plugin-id="${this.pluginId}"]`).dropzone({
+    interact.dynamicDrop(true);
+    this.dropInteractable = interact(`.${this.classNames.target}[data-${this.pluginId}]`).dropzone({
+      autoScroll: { enabled: false },
       ondragenter: (event) => {
         event.target.classList.add(this.classNames.active);
       },
@@ -394,6 +421,7 @@ class ConnectionLine extends (_a = BasePlugin, _getNode_dec = [inject.getNode()]
     });
     if (this.config.allowCreateNodeOnBlankArea) {
       this.blankAreaDropInteractable = interact(`.${bem("canvas", "wrapper")}`).dropzone({
+        autoScroll: { enabled: false },
         ondrop: (event) => {
           const element = event.target;
           const isNode = !!element.closest(`[data-node-id]`);
@@ -420,13 +448,18 @@ _init = __decoratorStart(_a);
 __decorateElement(_init, 1, "containerRender", _containerRender_dec, ConnectionLine);
 __decorateElement(_init, 1, "createNodeAndEdge", _createNodeAndEdge_dec, ConnectionLine);
 __decorateElement(_init, 1, "createEdges", _createEdges_dec, ConnectionLine);
+__decorateElement(_init, 1, "onIsDragging", _onIsDragging_dec, ConnectionLine);
+__decorateElement(_init, 1, "onTransform", _onTransform_dec, ConnectionLine);
 __decorateElement(_init, 1, "init", _init_dec, ConnectionLine);
 __decorateElement(_init, 1, "destroy", _destroy_dec, ConnectionLine);
 __decorateElement(_init, 5, "getNode", _getNode_dec, ConnectionLine);
 __decorateElement(_init, 5, "dispatchNodeOperation", _dispatchNodeOperation_dec, ConnectionLine);
 __decorateElement(_init, 5, "dispatchEdgeOperation", _dispatchEdgeOperation_dec, ConnectionLine);
 __decorateElement(_init, 5, "interaction", _interaction_dec, ConnectionLine);
+__decorateElement(_init, 5, "transform", _transform_dec, ConnectionLine);
+__decorateElement(_init, 5, "edgeScroll", _edgeScroll_dec, ConnectionLine);
 __decorateElement(_init, 5, "selected", _selected_dec, ConnectionLine);
+__decorateElement(_init, 5, "isDragging", _isDragging_dec, ConnectionLine);
 __decorateElement(_init, 5, "getConnectHandleAttributes", _getConnectHandleAttributes_dec, ConnectionLine);
 __decorateElement(_init, 5, "registerCreator", _registerCreator_dec, ConnectionLine);
 __decoratorMetadata(_init, ConnectionLine);

package/package.json

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