@knotx/plugins-connection-line 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 格桑
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,496 @@
+'use strict';
+
+const jsxRuntime = require('@knotx/jsx/jsx-runtime');
+const core = require('@knotx/core');
+const decorators = require('@knotx/decorators');
+const interact = require('interactjs');
+const lodashEs = require('lodash-es');
+const rxjs = require('rxjs');
+require('@knotx/plugins-selection');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const interact__default = /*#__PURE__*/_interopDefaultCompat(interact);
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => {
+  var _a2;
+  return [, , , __create((_a2 = base == null ? void 0 : base[__knownSymbol("metadata")]) != null ? _a2 : null)];
+};
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
+  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
+  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
+  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    if (k) {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
+      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
+    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+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, _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;
+const DEFAULT_OPTIONS = {
+  allowCreateNodeOnBlankArea: true,
+  newNodeType: "default",
+  edgeType: "bezier",
+  connectionLineClassName: "knotx-connection-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")], _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) {
+  constructor(options = {}) {
+    super();
+    __runInitializers(_init, 5, this);
+    __publicField(this, "name", "connectionLine");
+    __publicField(this, "getNode", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __publicField(this, "dispatchNodeOperation", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __publicField(this, "dispatchEdgeOperation", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __publicField(this, "startInteraction", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __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) => {
+      return {
+        "className": `${this.classNames.connector} ${this.classNames[type]}`,
+        "data-plugin-id": this.pluginId,
+        "data-node-id": nodeId,
+        "data-connector-id": String(id),
+        "data-connector-type": type
+      };
+    })), __runInitializers(_init, 39, this);
+    __publicField(this, "classNames", {
+      connector: core.bem("connection-line", "connector"),
+      source: core.bem("connection-line", "connector", "source"),
+      target: core.bem("connection-line", "connector", "target"),
+      active: core.bem("connection-line", "connector", "active")
+    });
+    // 临时连接线的状态集合，支持多条线同时拖拽
+    __publicField(this, "connectionLines", /* @__PURE__ */ new Map());
+    // 拖拽起始缩放比例
+    __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, "options", __runInitializers(_init, 40, this, DEFAULT_OPTIONS)), __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) => {
+      const creators = this.creators$.value;
+      creators.push(creator);
+      this.creators$.next(creators);
+      return () => {
+        const currentCreators = this.creators$.value;
+        const index = currentCreators.indexOf(creator);
+        if (index > -1) {
+          currentCreators.splice(index, 1);
+          this.creators$.next(currentCreators);
+        }
+      };
+    })), __runInitializers(_init, 51, this);
+    this.options = lodashEs.merge(DEFAULT_OPTIONS, options);
+  }
+  containerRender() {
+    const size = this.getContainerSize();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: core.bem("connection-line", "container"),
+        "data-plugin-id": this.pluginId,
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: size,
+          height: size,
+          overflow: "visible",
+          pointerEvents: "none"
+        }
+      }
+    );
+  }
+  /**
+   * 获取容器大小
+   */
+  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}"]`);
+  }
+  /**
+   * 获取需要为其创建连接线的源节点ID列表
+   * 根据当前拖拽的节点和选中的节点决定
+   */
+  getSourceNodeIdsForDrag(currentNodeId) {
+    if (!this.options.allowMultiDrag || !this.selectedNodeIds.includes(currentNodeId)) {
+      return [currentNodeId];
+    }
+    return [...this.selectedNodeIds];
+  }
+  /**
+   * 创建临时连接线
+   */
+  createConnectionLine(sourceNodeId, startPosition) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("class", `${this.options.connectionLineClassName || "knotx-connection-line"} line-${sourceNodeId}`);
+    svg.style.position = "absolute";
+    svg.style.top = "0";
+    svg.style.left = "0";
+    svg.style.overflow = "visible";
+    svg.style.width = "100%";
+    svg.style.height = "100%";
+    svg.style.pointerEvents = "none";
+    svg.setAttribute("data-source-node-id", sourceNodeId);
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", "currentColor");
+    path.setAttribute("stroke-width", `${2 / this.startScale}`);
+    path.setAttribute("stroke-dasharray", "5,5");
+    svg.appendChild(path);
+    const container = this.getContainerElement();
+    if (container)
+      container.appendChild(svg);
+    return {
+      sourceNodeId,
+      tempLine: svg,
+      startPosition: __spreadValues({}, startPosition),
+      currentPosition: __spreadValues({}, startPosition)
+    };
+  }
+  /**
+   * 更新临时连接线的路径
+   */
+  updateConnectionLine(state) {
+    const path = state.tempLine.querySelector("path");
+    if (!path)
+      return;
+    const sourceX = state.startPosition.x;
+    const sourceY = state.startPosition.y;
+    const targetX = state.currentPosition.x;
+    const targetY = state.currentPosition.y;
+    const dx = Math.abs(targetX - sourceX) / 2;
+    const controlPoint1X = sourceX + dx;
+    const controlPoint1Y = sourceY;
+    const controlPoint2X = targetX - dx;
+    const controlPoint2Y = targetY;
+    const pathData = `M ${sourceX} ${sourceY} C ${controlPoint1X} ${controlPoint1Y}, ${controlPoint2X} ${controlPoint2Y}, ${targetX} ${targetY}`;
+    path.setAttribute("d", pathData);
+  }
+  /**
+   * 更新所有连接线的当前位置
+   */
+  updateAllConnectionLines(dx, dy) {
+    const currentDragConnectionLine = this.connectionLines.get(this.currentDragNodeId);
+    if (!currentDragConnectionLine) {
+      return;
+    }
+    currentDragConnectionLine.currentPosition.x += dx / this.startScale;
+    currentDragConnectionLine.currentPosition.y += dy / this.startScale;
+    this.connectionLines.forEach((state) => {
+      state.currentPosition.x = currentDragConnectionLine.currentPosition.x;
+      state.currentPosition.y = currentDragConnectionLine.currentPosition.y;
+      this.updateConnectionLine(state);
+    });
+  }
+  /**
+   * 清除所有临时连接线
+   */
+  clearAllConnectionLines() {
+    this.connectionLines.forEach((state, _nodeId) => {
+      state.tempLine.remove();
+    });
+    this.connectionLines.clear();
+  }
+  createNodeAndEdge(sourceNodeIds, position) {
+    const newNodeId = core.generateId();
+    const newNode = {
+      id: newNodeId,
+      type: this.options.newNodeType,
+      position,
+      data: {}
+    };
+    const newEdges = sourceNodeIds.map((sourceNodeId) => ({
+      id: core.generateId(),
+      source: sourceNodeId,
+      target: newNodeId,
+      type: this.options.edgeType
+    }));
+    const createResult = this.creators$.value.reduce((result, creator) => {
+      var _a2;
+      return (_a2 = creator(sourceNodeIds, newNode, newEdges)) != null ? _a2 : result;
+    }, { node: newNode, edges: newEdges });
+    if (createResult === false) {
+      return [];
+    }
+    this.dispatchNodeOperation({
+      type: "add",
+      data: createResult.node
+    });
+    return [{
+      type: "batch",
+      operations: createResult.edges.map((edge) => ({
+        type: "add",
+        data: edge
+      }))
+    }];
+  }
+  createEdge(sourceNodeId, targetNodeId) {
+    return [{
+      type: "add",
+      data: {
+        id: core.generateId(),
+        source: sourceNodeId,
+        target: targetNodeId,
+        type: this.options.edgeType
+      }
+    }];
+  }
+  createEdges(sourceNodeIds, targetNodeId) {
+    if (sourceNodeIds.length === 0 || !targetNodeId) {
+      return [];
+    }
+    return [{
+      type: "batch",
+      operations: sourceNodeIds.map((sourceNodeId) => ({
+        type: "add",
+        data: {
+          id: core.generateId(),
+          source: sourceNodeId,
+          target: targetNodeId,
+          type: this.options.edgeType
+        }
+      }))
+    }];
+  }
+  createNodesAndEdges(sourceNodeIds, position) {
+    if (sourceNodeIds.length === 0) {
+      return [];
+    }
+    return this.createNodeAndEdge(sourceNodeIds, position);
+  }
+  init() {
+    this.dragInteractable = interact__default(`.${this.classNames.source}[data-plugin-id="${this.pluginId}"]`).draggable({
+      inertia: false,
+      autoScroll: true,
+      listeners: {
+        start: (event) => {
+          var _a2;
+          const element = event.target;
+          const currentNodeId = element.getAttribute("data-node-id");
+          if (!currentNodeId)
+            return;
+          this.currentDragNodeId = currentNodeId;
+          const sourceNodeIds = this.getSourceNodeIdsForDrag(currentNodeId);
+          const rect = element.getBoundingClientRect();
+          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();
+          const startPosition = {
+            x: (x - containerLeft) / this.startScale,
+            y: (y - containerTop) / this.startScale
+          };
+          sourceNodeIds.forEach((sourceNodeId) => {
+            const node = this.getNode(sourceNodeId);
+            if (!node)
+              return;
+            let nodeStartPosition = __spreadValues({}, startPosition);
+            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}"]`);
+              if (connector) {
+                const connectorRect = connector.getBoundingClientRect();
+                const connectorX = (connectorRect.left + connectorRect.right) / 2;
+                const connectorY = (connectorRect.top + connectorRect.bottom) / 2;
+                nodeStartPosition = {
+                  x: (connectorX - containerLeft) / this.startScale,
+                  y: (connectorY - containerTop) / this.startScale
+                };
+              }
+            }
+            const state = this.createConnectionLine(sourceNodeId, nodeStartPosition);
+            this.connectionLines.set(sourceNodeId, state);
+            this.startInteraction(this.pluginId, "connect", core.InteractionPriority.EntityConnectDrag);
+          });
+        },
+        move: (event) => {
+          if (this.connectionLines.size === 0 || !this.currentDragNodeId || !this.canInteract(this.pluginId, "connect"))
+            return;
+          this.updateAllConnectionLines(event.dx, event.dy);
+        },
+        end: () => {
+          this.clearAllConnectionLines();
+          this.currentDragNodeId = null;
+          this.endInteraction(this.pluginId, "connect");
+        }
+      }
+    });
+    this.dropInteractable = interact__default(`.${this.classNames.target}[data-plugin-id="${this.pluginId}"]`).dropzone({
+      ondragenter: (event) => {
+        event.target.classList.add(this.classNames.active);
+      },
+      ondragleave: (event) => {
+        event.target.classList.remove(this.classNames.active);
+      },
+      ondrop: (event) => {
+        if (this.connectionLines.size === 0 || !this.currentDragNodeId)
+          return;
+        const element = event.target;
+        const nodeElement = element.closest(`[data-node-id]`);
+        if (!nodeElement)
+          return;
+        const targetNodeId = nodeElement.getAttribute("data-node-id");
+        if (!targetNodeId)
+          return;
+        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);
+        }
+        event.target.classList.remove(this.classNames.active);
+      }
+    });
+    if (this.options.allowCreateNodeOnBlankArea) {
+      this.blankAreaDropInteractable = interact__default(`.${core.bem("canvas", "wrapper")}`).dropzone({
+        ondrop: (event) => {
+          const element = event.target;
+          const isNode = !!element.closest(`[data-node-id]`);
+          if (!isNode && this.connectionLines.size > 0 && this.options.allowCreateNodeOnBlankArea) {
+            const sourceNodeIds = Array.from(this.connectionLines.keys());
+            const firstLine = this.connectionLines.values().next().value;
+            if (firstLine) {
+              this.createNodesAndEdges(sourceNodeIds, firstLine.currentPosition);
+            }
+          }
+        }
+      });
+    }
+  }
+  destroy() {
+    var _a2, _b, _c, _d;
+    (_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, "createNodesAndEdges", _createNodesAndEdges_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, "startInteraction", _startInteraction_dec, ConnectionLine);
+__decorateElement(_init, 5, "endInteraction", _endInteraction_dec, ConnectionLine);
+__decorateElement(_init, 5, "canInteract", _canInteract_dec, ConnectionLine);
+__decorateElement(_init, 5, "selectedNodeIds", _selectedNodeIds_dec, ConnectionLine);
+__decorateElement(_init, 5, "getConnectHandleAttributes", _getConnectHandleAttributes_dec, ConnectionLine);
+__decorateElement(_init, 5, "options", _options_dec, ConnectionLine);
+__decorateElement(_init, 5, "registerValidator", _registerValidator_dec, ConnectionLine);
+__decorateElement(_init, 5, "registerNewNodeCreator", _registerNewNodeCreator_dec, ConnectionLine);
+__decoratorMetadata(_init, ConnectionLine);
+
+exports.ConnectionLine = ConnectionLine;

package/dist/index.d.cts

@@ -0,0 +1,152 @@
+import { NodeData, EdgeData, BasePlugin, NodeOperation, EdgeOperation, InteractionPriority } from '@knotx/core';
+
+interface ConnectionLineOptions {
+    /**
+     * 是否允许连接到画布空白处并创建新节点
+     * @default false
+     */
+    allowCreateNodeOnBlankArea?: boolean;
+    /**
+     * 当连接到画布空白处时创建的节点类型
+     * @default 'default'
+     */
+    newNodeType?: string;
+    /**
+     * 新创建的边的类型
+     * @default 'bezier'
+     */
+    edgeType?: string;
+    /**
+     * 临时连接线的类名
+     * @default 'knotx-connection-line'
+     */
+    connectionLineClassName?: string;
+    /**
+     * 是否支持从多个选中节点同时拖拽连接线
+     * @default true
+     */
+    allowMultiDrag?: boolean;
+}
+interface ConnectionValidateContext {
+    sourceNodeId: string;
+    sourceNode: NodeData;
+    targetNodeId?: string;
+    targetNode?: NodeData;
+    isValid: boolean;
+}
+type ConnectionValidator = (context: ConnectionValidateContext) => boolean;
+declare module '@knotx/core' {
+    interface PluginData {
+        connectionLine: {
+            options: ConnectionLineOptions;
+            registerValidator: (validator: ConnectionValidator) => () => void;
+            registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
+                node: NodeData;
+                edges: EdgeData[];
+            }) | false) => () => void;
+            /**
+             * 获取连接点的属性
+             * @param nodeId 节点ID
+             * @param type 连接点类型，可选值为 'source' 或 'target'
+             * @param index 连接点索引，多个连接点时使用
+             * @returns 连接点属性对象
+             */
+            getConnectHandleAttributes: (nodeId: string, type: 'source' | 'target', index?: number) => Record<string, string>;
+        };
+    }
+}
+/**
+ * 连接线插件
+ * 允许从指定DOM元素拖拽出连接线，连接到其他节点
+ */
+declare class ConnectionLine extends BasePlugin<'connectionLine'> {
+    name: "connectionLine";
+    getNode: (id: string) => NodeData | undefined;
+    dispatchNodeOperation: (operation: NodeOperation) => void;
+    dispatchEdgeOperation: (operation: EdgeOperation) => void;
+    startInteraction: (pluginId: string, type: string, priority: InteractionPriority) => void;
+    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";
+    };
+    private classNames;
+    private connectionLines;
+    private startScale;
+    private currentDragNodeId;
+    private subscription?;
+    private dragInteractable?;
+    private dropInteractable?;
+    private blankAreaDropInteractable?;
+    private validators$;
+    private creators$;
+    constructor(options?: ConnectionLineOptions);
+    options: ConnectionLineOptions;
+    registerValidator: (validator: ConnectionValidator) => () => void;
+    registerNewNodeCreator: (creator: (sourceNodeIds: string[], node: NodeData, edges: EdgeData[]) => ({
+        node: NodeData;
+        edges: EdgeData[];
+    }) | false) => () => void;
+    containerRender(): JSX.Element;
+    /**
+     * 获取容器大小
+     */
+    private getContainerSize;
+    /**
+     * 应用所有验证器，检查连接是否有效
+     */
+    private validateConnection;
+    private getContainerElement;
+    /**
+     * 获取需要为其创建连接线的源节点ID列表
+     * 根据当前拖拽的节点和选中的节点决定
+     */
+    private getSourceNodeIdsForDrag;
+    /**
+     * 创建临时连接线
+     */
+    private createConnectionLine;
+    /**
+     * 更新临时连接线的路径
+     */
+    private updateConnectionLine;
+    /**
+     * 更新所有连接线的当前位置
+     */
+    private updateAllConnectionLines;
+    /**
+     * 清除所有临时连接线
+     */
+    private clearAllConnectionLines;
+    /**
+     * 创建新节点
+     */
+    createNodeAndEdge(sourceNodeIds: string[], position: {
+        x: number;
+        y: number;
+    }): EdgeOperation[];
+    /**
+     * 创建新的边
+     */
+    createEdge(sourceNodeId: string, targetNodeId: string): EdgeOperation[];
+    /**
+     * 批量创建新的边
+     */
+    createEdges(sourceNodeIds: string[], targetNodeId: string): EdgeOperation[];
+    /**
+     * 批量创建新节点和边
+     */
+    createNodesAndEdges(sourceNodeIds: string[], position: {
+        x: number;
+        y: number;
+    }): EdgeOperation[];
+    init(): void;
+    destroy(): void;
+}
+
+export { ConnectionLine, type ConnectionLineOptions, type ConnectionValidateContext, type ConnectionValidator };