@flowgram.ai/free-layout-core 0.1.0-alpha.10

package/dist/esm/index.js

@@ -0,0 +1,3471 @@
+import {
+  URLParams
+} from "./chunk-IKQUOAWQ.js";
+import "./chunk-KNYZRMIO.js";
+import "./chunk-NU6G5HF4.js";
+import "./chunk-TQLT57GW.js";
+import "./chunk-CGOMTQ3G.js";
+import {
+  WorkflowContentChangeType
+} from "./chunk-242F2JCI.js";
+import {
+  LineColors,
+  LineType
+} from "./chunk-CTGO4RKX.js";
+import "./chunk-DDJTYHXN.js";
+import {
+  WorkflowOperationBaseService
+} from "./chunk-O4WKIIW2.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/workflow-commands.ts
+var WorkflowCommands = /* @__PURE__ */ ((WorkflowCommands2) => {
+  WorkflowCommands2["DELETE_NODES"] = "DELETE_NODES";
+  WorkflowCommands2["COPY_NODES"] = "COPY_NODES";
+  WorkflowCommands2["PASTE_NODES"] = "PASTE_NODES";
+  WorkflowCommands2["ZOOM_IN"] = "ZOOM_IN";
+  WorkflowCommands2["ZOOM_OUT"] = "ZOOM_OUT";
+  WorkflowCommands2["UNDO"] = "UNDO";
+  WorkflowCommands2["REDO"] = "REDO";
+  return WorkflowCommands2;
+})(WorkflowCommands || {});
+
+// src/hooks/index.ts
+import {
+  useConfigEntity,
+  useService as useService3,
+  usePlayground as usePlayground2,
+  useListenEvents as useListenEvents2,
+  usePlaygroundContainer,
+  usePlaygroundContext,
+  useEntities,
+  useEntityFromContext as useEntityFromContext3,
+  useEntityDataFromContext,
+  useRefresh as useRefresh2,
+  usePlaygroundLatest
+} from "@flowgram.ai/core";
+
+// src/hooks/use-node-render.tsx
+import { useCallback, useEffect as useEffect2, useRef, useState, useContext, useMemo } from "react";
+import { useObserve } from "@flowgram.ai/reactive";
+import { getNodeForm } from "@flowgram.ai/node";
+import { FlowNodeRenderData as FlowNodeRenderData3 } from "@flowgram.ai/document";
+import {
+  MouseTouchEvent as MouseTouchEvent2,
+  PlaygroundEntityContext,
+  useListenEvents,
+  useService
+} from "@flowgram.ai/core";
+
+// src/service/workflow-select-service.ts
+import { inject, injectable } from "inversify";
+import {
+  Playground,
+  SelectionService,
+  TransformData as TransformData4
+} from "@flowgram.ai/core";
+import { Rectangle as Rectangle6, SizeSchema } from "@flowgram.ai/utils";
+
+// src/utils/index.ts
+import { bindConfigEntity } from "@flowgram.ai/core";
+import { delay } from "@flowgram.ai/utils";
+
+// src/utils/nanoid.ts
+import { nanoid as nanoidOrigin } from "nanoid";
+function nanoid(n) {
+  return nanoidOrigin(n);
+}
+
+// src/utils/compose.ts
+import { compose, composeAsync } from "@flowgram.ai/utils";
+
+// src/utils/fit-view.ts
+import { TransformData } from "@flowgram.ai/core";
+import { Rectangle } from "@flowgram.ai/utils";
+var fitView = (doc, playgroundConfig, easing = true) => {
+  const bounds = Rectangle.enlarge(
+    doc.getAllNodes().map((node) => node.getData(TransformData).bounds)
+  );
+  return playgroundConfig.fitView(bounds, easing, 30);
+};
+
+// src/utils/get-anti-overlap-position.ts
+import { TransformData as TransformData2 } from "@flowgram.ai/core";
+function getAntiOverlapPosition(doc, position, containerNode) {
+  let { x, y } = position;
+  const nodes = containerNode ? containerNode.collapsedChildren : doc.getAllNodes();
+  const positions = nodes.map((n) => {
+    const transform = n.getData(TransformData2);
+    return { x: transform.position.x, y: transform.position.y };
+  }).sort((a, b) => a.y - b.y);
+  const minDistance = 3;
+  for (const pos of positions) {
+    const { x: posX, y: posY } = pos;
+    if (y - posY < -minDistance) {
+      break;
+    }
+    const deltaX = Math.abs(x - posX);
+    const deltaY = Math.abs(y - posY);
+    if (deltaX <= minDistance && deltaY <= minDistance) {
+      x += 30;
+      y += 30;
+    }
+  }
+  return { x, y };
+}
+
+// src/utils/statics.ts
+import { Rectangle as Rectangle2 } from "@flowgram.ai/utils";
+var getPortEntityId = (node, portType, portID = "") => `port_${portType}_${node.id}_${portID}`;
+var WORKFLOW_LINE_ENTITY = "WorkflowLineEntity";
+function domReactToBounds(react) {
+  return new Rectangle2(react.x, react.y, react.width, react.height);
+}
+
+// src/entities/workflow-node-entity.ts
+import { FlowNodeEntity } from "@flowgram.ai/document";
+var WorkflowNodeEntity = FlowNodeEntity;
+
+// src/entities/workflow-line-entity.ts
+import { isEqual as isEqual2 } from "lodash-es";
+import { domUtils } from "@flowgram.ai/utils";
+import { Entity as Entity2 } from "@flowgram.ai/core";
+
+// src/entity-datas/workflow-node-ports-data.ts
+import { isEqual } from "lodash-es";
+import { FlowNodeRenderData } from "@flowgram.ai/document";
+import { EntityData, SizeData } from "@flowgram.ai/core";
+
+// src/entities/workflow-port-entity.ts
+import { Rectangle as Rectangle3, Emitter } from "@flowgram.ai/utils";
+import { FlowNodeTransformData } from "@flowgram.ai/document";
+import {
+  Entity,
+  PlaygroundConfigEntity,
+  TransformData as TransformData3
+} from "@flowgram.ai/core";
+var PORT_SIZE = 24;
+var WorkflowPortEntity = class extends Entity {
+  // relativePosition
+  constructor(opts) {
+    super(opts);
+    this.portID = "";
+    this._disabled = false;
+    this._hasError = false;
+    this._onErrorChangedEmitter = new Emitter();
+    this.onErrorChanged = this._onErrorChangedEmitter.event;
+    this.portID = opts.portID || "";
+    this.portType = opts.type;
+    this._disabled = opts.disabled ?? false;
+    this.node = opts.node;
+    this.updateTargetElement(opts.targetElement);
+    this.toDispose.push(this.node.getData(TransformData3).onDataChange(() => this.fireChange()));
+    this.toDispose.push(this.node.onDispose(this.dispose.bind(this)));
+  }
+  static getPortEntityId(node, portType, portID = "") {
+    return getPortEntityId(node, portType, portID);
+  }
+  // 获取连线是否为错误态
+  get hasError() {
+    return this._hasError;
+  }
+  // 设置连线的错误态，外部应使用 validate 进行更新
+  set hasError(hasError) {
+    this._hasError = hasError;
+    this._onErrorChangedEmitter.fire();
+  }
+  validate() {
+    const anyLineHasError = this.allLines.some((line) => {
+      if (line.disposed || line.isHidden) {
+        return false;
+      }
+      line.validateSelf();
+      return line.hasError;
+    });
+    const isPortHasError = this.node.document.isErrorPort(this);
+    this.hasError = anyLineHasError || isPortHasError;
+  }
+  isErrorPort() {
+    return this.node.document.isErrorPort(this);
+  }
+  get point() {
+    const { targetElement } = this;
+    const { bounds } = this.node.getData(FlowNodeTransformData);
+    if (targetElement) {
+      const pos = domReactToBounds(targetElement.getBoundingClientRect()).center;
+      return this.entityManager.getEntity(PlaygroundConfigEntity).getPosFromMouseEvent({
+        clientX: pos.x,
+        clientY: pos.y
+      });
+    }
+    if (this.portType === "input") {
+      return bounds.leftCenter;
+    }
+    return bounds.rightCenter;
+  }
+  /**
+   * 点的区域
+   */
+  get bounds() {
+    const { point } = this;
+    const halfSize = PORT_SIZE / 2;
+    return new Rectangle3(point.x - halfSize, point.y - halfSize, PORT_SIZE, PORT_SIZE);
+  }
+  isHovered(x, y) {
+    return this.bounds.contains(x, y);
+  }
+  /**
+   * 相对节点左上角的位置
+   */
+  get relativePosition() {
+    const { point } = this;
+    const { bounds } = this.node.getData(FlowNodeTransformData);
+    return {
+      x: point.x - bounds.x,
+      y: point.y - bounds.y
+    };
+  }
+  updateTargetElement(el) {
+    if (el !== this.targetElement) {
+      this.targetElement = el;
+      this.fireChange();
+    }
+  }
+  /**
+   * 是否被禁用
+   */
+  get disabled() {
+    const document2 = this.node.document;
+    if (typeof document2.options.isDisabledPort === "function") {
+      return document2.options.isDisabledPort(this);
+    }
+    if (this._disabled) {
+      return true;
+    }
+    const meta = this.node.getNodeMeta();
+    if (this.portType === "input") {
+      return !!meta.inputDisable;
+    }
+    return !!meta.outputDisable;
+  }
+  /**
+   * 当前点位上连接的线条
+   * @deprecated use `availableLines` instead
+   */
+  get lines() {
+    return this.allLines.filter((line) => !line.isDrawing);
+  }
+  /**
+   * 当前有效的线条，不包含正在画的线条和隐藏的线条（这个出现在线条重连会先把原来的线条隐藏）
+   */
+  get availableLines() {
+    return this.allLines.filter((line) => !line.isDrawing && !line.isHidden);
+  }
+  /**
+   * 当前点位上连接的线条（包含 isDrawing === true 的线条）
+   */
+  get allLines() {
+    const lines = [];
+    const allLines = this.entityManager.getEntities({
+      type: WORKFLOW_LINE_ENTITY
+    });
+    allLines.forEach((line) => {
+      if (line.toPort === this || line.fromPort === this) {
+        lines.push(line);
+      }
+    });
+    return lines;
+  }
+  dispose() {
+    this.lines.forEach((l) => l.dispose());
+    super.dispose();
+  }
+};
+WorkflowPortEntity.type = "WorkflowPortEntity";
+
+// src/entity-datas/workflow-node-ports-data.ts
+var WorkflowNodePortsData = class extends EntityData {
+  constructor(entity) {
+    super(entity);
+    /** 静态的 ports 数据 */
+    this._staticPorts = [];
+    /** 存储 port 实体的 id，用于判断 port 是否存在 */
+    this._portIDSet = /* @__PURE__ */ new Set();
+    this.entity = entity;
+    const meta = entity.getNodeMeta();
+    const defaultPorts = meta.useDynamicPort ? [] : [{ type: "input" }, { type: "output" }];
+    this._staticPorts = meta.defaultPorts?.slice() || defaultPorts;
+    this.updatePorts(this._staticPorts);
+    if (meta.useDynamicPort) {
+      this.toDispose.push(
+        // 只需要监听节点的大小，因为算的是相对位置
+        entity.getData(SizeData).onDataChange(() => {
+          if (entity.getData(SizeData).width && entity.getData(SizeData).height) {
+            this.updateDynamicPorts();
+          }
+        })
+      );
+    }
+    this.onDispose(() => {
+      this.allPorts.forEach((port) => port.dispose());
+    });
+  }
+  getDefaultData() {
+    return {};
+  }
+  /**
+   * 更新静态的 ports 数据
+   */
+  updateStaticPorts(ports) {
+    const meta = this.entity.getNodeMeta();
+    this._staticPorts = ports;
+    if (meta.useDynamicPort) {
+      this.updateDynamicPorts();
+    } else {
+      this.updatePorts(this._staticPorts);
+    }
+  }
+  /**
+   * 动态计算点位，通过 dom 的 data-port-key
+   */
+  updateDynamicPorts() {
+    const domNode = this.entity.getData(FlowNodeRenderData).node;
+    const elements = domNode.querySelectorAll("[data-port-id]");
+    const staticPorts = this._staticPorts;
+    const dynamicPorts = [];
+    if (elements.length > 0) {
+      dynamicPorts.push(
+        ...Array.from(elements).map((element) => ({
+          portID: element.getAttribute("data-port-id"),
+          type: element.getAttribute("data-port-type"),
+          targetElement: element
+        }))
+      );
+    }
+    this.updatePorts(staticPorts.concat(dynamicPorts));
+  }
+  /**
+   * 根据 key 获取 port 实体
+   */
+  getPortEntityByKey(portType, portKey) {
+    const entity = this.getOrCreatePortEntity({
+      type: portType,
+      portID: portKey
+    });
+    return entity;
+  }
+  /**
+   * 更新 ports 数据
+   */
+  updatePorts(ports) {
+    if (!isEqual(this._prePorts, ports)) {
+      const portKeys = ports.map((port) => this.getPortId(port.type, port.portID));
+      this._portIDSet.forEach((portId) => {
+        if (!portKeys.includes(portId)) {
+          this.getPortEntity(portId)?.dispose();
+        }
+      });
+      ports.forEach((port) => this.updatePortEntity(port));
+      this._prePorts = ports;
+      this.fireChange();
+    }
+    this.allPorts.forEach((port) => {
+      port.allLines.forEach((line) => {
+        line.validate();
+      });
+      port.validate();
+    });
+  }
+  /**
+   * 获取所有 port entities
+   */
+  get allPorts() {
+    return Array.from(this._portIDSet).map((portId) => this.getPortEntity(portId)).filter(Boolean);
+  }
+  /**
+   * 获取输入点位
+   */
+  get inputPorts() {
+    return this.allPorts.filter((port) => port.portType === "input");
+  }
+  /**
+   * 获取输出点位
+   */
+  get outputPorts() {
+    return this.allPorts.filter((port) => port.portType === "output");
+  }
+  /**
+   * 获取输入点位置
+   */
+  get inputPoints() {
+    return this.inputPorts.map((port) => port.point);
+  }
+  /**
+   * 获取输出点位置
+   */
+  get outputPoints() {
+    return this.inputPorts.map((port) => port.point);
+  }
+  /**
+   * 根据 key 获取 输入点位置
+   */
+  getInputPoint(key) {
+    return this.getPortEntityByKey("input", key).point;
+  }
+  /**
+   * 根据 key 获取输出点位置
+   */
+  getOutputPoint(key) {
+    return this.getPortEntityByKey("output", key).point;
+  }
+  /**
+   * 获取 port 实体
+   */
+  getPortEntity(portId) {
+    if (!this._portIDSet.has(portId)) {
+      return void 0;
+    }
+    return this.entity.entityManager.getEntityById(portId);
+  }
+  /**
+   * 拼接 port 实体的 id
+   */
+  getPortId(portType, portKey = "") {
+    return getPortEntityId(this.entity, portType, portKey);
+  }
+  /**
+   * 创建 port 实体
+   */
+  createPortEntity(portInfo) {
+    const id = this.getPortId(portInfo.type, portInfo.portID);
+    let portEntity = this.entity.entityManager.getEntityById(id);
+    if (!portEntity) {
+      portEntity = this.entity.entityManager.createEntity(WorkflowPortEntity, {
+        id,
+        node: this.entity,
+        ...portInfo
+      });
+    }
+    portEntity.onDispose(() => {
+      this._portIDSet.delete(id);
+    });
+    this._portIDSet.add(id);
+    return portEntity;
+  }
+  /**
+   * 获取或创建 port 实体
+   */
+  getOrCreatePortEntity(portInfo) {
+    const id = this.getPortId(portInfo.type, portInfo.portID);
+    return this.getPortEntity(id) ?? this.createPortEntity(portInfo);
+  }
+  /**
+   * 更新 port 实体
+   */
+  updatePortEntity(portInfo) {
+    const portEntity = this.getOrCreatePortEntity(portInfo);
+    if (portInfo.targetElement) {
+      portEntity.updateTargetElement(portInfo.targetElement);
+    }
+    return portEntity;
+  }
+};
+WorkflowNodePortsData.type = "WorkflowNodePortsData";
+
+// src/entity-datas/workflow-node-lines-data.ts
+import { Disposable } from "@flowgram.ai/utils";
+import { EntityData as EntityData2 } from "@flowgram.ai/core";
+var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends EntityData2 {
+  getDefaultData() {
+    return {
+      inputLines: [],
+      outputLines: []
+    };
+  }
+  constructor(entity) {
+    super(entity);
+    this.entity = entity;
+    this.entity.preDispose.push(
+      Disposable.create(() => {
+        this.inputLines.slice().forEach((line) => line.dispose());
+        this.outputLines.slice().forEach((line) => line.dispose());
+      })
+    );
+  }
+  /**
+   * 输入线条
+   */
+  get inputLines() {
+    return this.data.inputLines;
+  }
+  /**
+   * 输出线条
+   */
+  get outputLines() {
+    return this.data.outputLines;
+  }
+  /**
+   * 输入节点
+   */
+  get inputNodes() {
+    return this.inputLines.map((l) => l.from).filter(Boolean);
+  }
+  /**
+   * 所有输入节点
+   */
+  get allInputNodes() {
+    const nodeSet = /* @__PURE__ */ new Set();
+    const handleNode = (node) => {
+      if (nodeSet.has(node)) {
+        return;
+      }
+      nodeSet.add(node);
+      const { inputNodes } = node.getData(_WorkflowNodeLinesData);
+      if (!inputNodes || !inputNodes.length) {
+        return;
+      }
+      inputNodes.forEach((inputNode) => {
+        if (inputNode?.parent === node || node?.parent === inputNode) {
+          return;
+        }
+        handleNode(inputNode);
+      });
+    };
+    handleNode(this.entity);
+    nodeSet.delete(this.entity);
+    return Array.from(nodeSet);
+  }
+  /**
+   * 输出节点
+   */
+  get outputNodes() {
+    return this.outputLines.map((l) => l.to).filter(Boolean);
+  }
+  /**
+   * 输入输出节点
+   */
+  get allOutputNodes() {
+    const nodeSet = /* @__PURE__ */ new Set();
+    const handleNode = (node) => {
+      if (nodeSet.has(node)) {
+        return;
+      }
+      nodeSet.add(node);
+      const { outputNodes } = node.getData(_WorkflowNodeLinesData);
+      if (!outputNodes || !outputNodes.length) {
+        return;
+      }
+      outputNodes.forEach((outputNode) => {
+        if (outputNode?.parent === node || node?.parent === outputNode) {
+          return;
+        }
+        handleNode(outputNode);
+      });
+    };
+    handleNode(this.entity);
+    nodeSet.delete(this.entity);
+    return Array.from(nodeSet);
+  }
+  addLine(line) {
+    if (line.from === this.entity) {
+      this.outputLines.push(line);
+    } else {
+      this.inputLines.push(line);
+    }
+    this.fireChange();
+  }
+  removeLine(line) {
+    const { inputLines, outputLines } = this;
+    const inputIndex = inputLines.indexOf(line);
+    const outputIndex = outputLines.indexOf(line);
+    if (inputIndex !== -1) {
+      inputLines.splice(inputIndex, 1);
+      this.fireChange();
+    }
+    if (outputIndex !== -1) {
+      outputLines.splice(outputIndex, 1);
+      this.fireChange();
+    }
+  }
+};
+_WorkflowNodeLinesData.type = "WorkflowNodeLinesData";
+var WorkflowNodeLinesData = _WorkflowNodeLinesData;
+
+// src/entity-datas/workflow-line-render-data.ts
+import { Rectangle as Rectangle4 } from "@flowgram.ai/utils";
+import { EntityData as EntityData3 } from "@flowgram.ai/core";
+var WorkflowLineRenderData = class extends EntityData3 {
+  constructor(entity) {
+    super(entity);
+    this.syncContributions();
+  }
+  getDefaultData() {
+    return {
+      version: "",
+      contributions: /* @__PURE__ */ new Map(),
+      position: {
+        from: { x: 0, y: 0 },
+        to: { x: 0, y: 0 }
+      }
+    };
+  }
+  get renderVersion() {
+    return this.data.version;
+  }
+  get position() {
+    return this.data.position;
+  }
+  get path() {
+    return this.currentLine?.path ?? "";
+  }
+  calcDistance(pos) {
+    return this.currentLine?.calcDistance(pos) ?? Number.MAX_SAFE_INTEGER;
+  }
+  get bounds() {
+    return this.currentLine?.bounds ?? new Rectangle4();
+  }
+  /**
+   * 更新数据
+   * WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
+   */
+  update() {
+    this.syncContributions();
+    const oldVersion = this.data.version;
+    this.updatePosition();
+    const newVersion = this.data.version;
+    if (oldVersion === newVersion) {
+      return;
+    }
+    this.data.version = newVersion;
+    this.currentLine?.update({
+      fromPos: this.data.position.from,
+      toPos: this.data.position.to
+    });
+  }
+  get lineType() {
+    return this.entity.renderType ?? this.entity.linesManager.lineType;
+  }
+  /**
+   * 更新版本
+   * WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
+   */
+  updatePosition() {
+    this.data.position.from = this.entity.from.getData(WorkflowNodePortsData).getOutputPoint(this.entity.info.fromPort);
+    this.data.position.to = this.entity.info.drawingTo ?? this.entity.to?.getData(WorkflowNodePortsData)?.getInputPoint(this.entity.info.toPort) ?? {
+      x: this.data.position.from.x,
+      y: this.data.position.from.y
+    };
+    this.data.version = [
+      this.lineType,
+      this.data.position.from.x,
+      this.data.position.from.y,
+      this.data.position.to.x,
+      this.data.position.to.y
+    ].join("-");
+  }
+  get currentLine() {
+    return this.data.contributions.get(this.lineType);
+  }
+  syncContributions() {
+    if (this.entity.linesManager.contributionFactories.length === this.data.contributions.size) {
+      return;
+    }
+    this.entity.linesManager.contributionFactories.forEach((factory) => {
+      this.registerContribution(factory);
+    });
+  }
+  registerContribution(contributionFactory) {
+    if (this.data.contributions.has(contributionFactory.type)) {
+      return;
+    }
+    const contribution = new contributionFactory(this.entity);
+    this.data.contributions.set(contributionFactory.type, contribution);
+  }
+};
+WorkflowLineRenderData.type = "WorkflowLineRenderData";
+
+// src/entities/workflow-line-entity.ts
+var LINE_HOVER_DISTANCE = 8;
+var POINT_RADIUS = 10;
+var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
+  constructor(opts) {
+    super(opts);
+    this._processing = false;
+    this._hasError = false;
+    this.stackIndex = 0;
+    /**
+     * 线条数据
+     */
+    this.info = {
+      from: ""
+    };
+    this.document = opts.document;
+    this.linesManager = opts.linesManager;
+    this.initInfo({
+      from: opts.from,
+      to: opts.to,
+      drawingTo: opts.drawingTo,
+      fromPort: opts.fromPort,
+      toPort: opts.toPort
+    });
+    if (opts.drawingTo) {
+      this.isDrawing = true;
+    }
+  }
+  /**
+   * 转成线条 id
+   * @param info
+   */
+  static portInfoToLineId(info) {
+    const { from, to, fromPort, toPort } = info;
+    return `${from}_${fromPort || ""}-${to || ""}_${toPort || ""}`;
+  }
+  /**
+   * 获取线条的前置节点
+   */
+  get from() {
+    return this._from;
+  }
+  /**
+   * 获取线条的后置节点
+   */
+  get to() {
+    return this._to;
+  }
+  get isHidden() {
+    return this.highlightColor === this.linesManager.lineColor.hidden;
+  }
+  get inContainer() {
+    const nodeInContainer = (node) => !!node?.parent && node.parent.flowNodeType !== "root";
+    return nodeInContainer(this.from) || nodeInContainer(this.to);
+  }
+  /**
+   * 获取是否 testrun processing
+   */
+  get processing() {
+    return this._processing;
+  }
+  /**
+   * 设置 testrun processing 状态
+   */
+  set processing(status) {
+    if (this._processing !== status) {
+      this._processing = status;
+      this.fireChange();
+    }
+  }
+  // 获取连线是否为错误态
+  get hasError() {
+    return this._hasError;
+  }
+  // 设置连线的错误态
+  set hasError(hasError) {
+    if (this._hasError !== hasError) {
+      this._hasError = hasError;
+      this.fireChange();
+    }
+    if (this._node) {
+      this._node.dataset.hasError = this.hasError ? "true" : "false";
+    }
+  }
+  /**
+   * 设置线条的后置节点
+   */
+  setToPort(toPort) {
+    if (!this.isDrawing) {
+      throw new Error("[setToPort] only support drawing line.");
+    }
+    if (this.toPort === toPort) {
+      return;
+    }
+    if (toPort && toPort.portType === "input" && this.linesManager.canAddLine(this.fromPort, toPort, true)) {
+      const { node, portID } = toPort;
+      this._to = node;
+      this.info.drawingTo = void 0;
+      this.info.isDefaultLine = false;
+      this.info.to = node.id;
+      this.info.toPort = portID;
+    } else {
+      this._to = void 0;
+      this.info.to = void 0;
+      this.info.toPort = "";
+    }
+    this.fireChange();
+  }
+  /**
+   * 设置线条画线时的目标位置
+   */
+  set drawingTo(pos) {
+    const oldDrawingTo = this.info.drawingTo;
+    if (!pos) {
+      this.info.drawingTo = void 0;
+      this.fireChange();
+      return;
+    }
+    if (!oldDrawingTo || pos.x !== oldDrawingTo.x || pos.y !== oldDrawingTo.y) {
+      this.info.to = void 0;
+      this.info.isDefaultLine = false;
+      this.info.drawingTo = pos;
+      this.fireChange();
+    }
+  }
+  /**
+   * 获取线条正在画线的位置
+   */
+  get drawingTo() {
+    return this.info.drawingTo;
+  }
+  get highlightColor() {
+    return this.info.highlightColor || "";
+  }
+  set highlightColor(color) {
+    if (this.info.highlightColor !== color) {
+      this.info.highlightColor = color;
+      this.fireChange();
+    }
+  }
+  /**
+   * 获取线条的边框位置大小
+   */
+  get bounds() {
+    return this.getData(WorkflowLineRenderData).bounds;
+  }
+  /**
+   * 获取点和线最接近的距离
+   */
+  getHoverDist(pos) {
+    return this.getData(WorkflowLineRenderData).calcDistance(pos);
+  }
+  get fromPort() {
+    return this.from.getData(WorkflowNodePortsData).getPortEntityByKey("output", this.info.fromPort);
+  }
+  get toPort() {
+    if (!this.to) {
+      return void 0;
+    }
+    return this.to.getData(WorkflowNodePortsData).getPortEntityByKey("input", this.info.toPort);
+  }
+  /**
+   * 获取线条真实的输入输出节点坐标
+   */
+  get position() {
+    return this.getData(WorkflowLineRenderData).position;
+  }
+  /** 是否反转箭头 */
+  get reverse() {
+    return this.linesManager.isReverseLine(this);
+  }
+  /** 是否隐藏箭头 */
+  get hideArrow() {
+    return this.linesManager.isHideArrowLine(this);
+  }
+  /** 是否流动 */
+  get flowing() {
+    return this.linesManager.isFlowingLine(this);
+  }
+  /** 是否禁用 */
+  get disabled() {
+    return this.linesManager.isDisabledLine(this);
+  }
+  /** 是否竖向 */
+  get vertical() {
+    return this.linesManager.isVerticalLine(this);
+  }
+  /** 获取线条渲染器类型 */
+  get renderType() {
+    return this.linesManager.setLineRenderType(this);
+  }
+  /** 获取线条样式 */
+  get className() {
+    return this.linesManager.setLineClassName(this) ?? "";
+  }
+  get color() {
+    return this.linesManager.getLineColor(this);
+  }
+  /**
+   * 初始化线条
+   * @param info 线条信息
+   */
+  initInfo(info) {
+    if (!isEqual2(info, this.info)) {
+      this.info = info;
+      this._from = this.document.getNode(info.from);
+      this._to = info.to ? this.document.getNode(info.to) : void 0;
+      this.fireChange();
+    }
+  }
+  // 校验连线是否为错误态
+  validate() {
+    const { fromPort, toPort } = this;
+    this.validateSelf();
+    fromPort?.validate();
+    toPort?.validate();
+  }
+  validateSelf() {
+    const { fromPort, toPort } = this;
+    if (fromPort) {
+      this.hasError = this.linesManager.isErrorLine(fromPort, toPort);
+    }
+  }
+  is(line) {
+    if (line instanceof _WorkflowLineEntity) {
+      return this === line;
+    }
+    return _WorkflowLineEntity.portInfoToLineId(line) === this.id;
+  }
+  canRemove(newLineInfo) {
+    return this.linesManager.canRemove(this, newLineInfo);
+  }
+  get node() {
+    if (this._node) return this._node;
+    this._node = domUtils.createDivWithClass("gedit-flow-activity-line");
+    this._node.dataset.testid = "sdk.workflow.canvas.line";
+    this._node.dataset.lineId = this.id;
+    this._node.dataset.fromNodeId = this.from.id;
+    this._node.dataset.fromPortId = this.fromPort?.id ?? "";
+    this._node.dataset.toNodeId = this.to?.id ?? "";
+    this._node.dataset.toPortId = this.toPort?.id ?? "";
+    this._node.dataset.hasError = this.hasError ? "true" : "false";
+    return this._node;
+  }
+  toJSON() {
+    const json = {
+      sourceNodeID: this.info.from,
+      targetNodeID: this.info.to,
+      sourcePortID: this.info.fromPort,
+      targetPortID: this.info.toPort
+    };
+    if (!json.sourcePortID) {
+      delete json.sourcePortID;
+    }
+    if (!json.targetPortID) {
+      delete json.targetPortID;
+    }
+    return json;
+  }
+  /** 触发线条渲染 */
+  fireRender() {
+    this.fireChange();
+  }
+};
+_WorkflowLineEntity.type = WORKFLOW_LINE_ENTITY;
+var WorkflowLineEntity = _WorkflowLineEntity;
+
+// src/service/workflow-select-service.ts
+var WorkflowSelectService = class {
+  get onSelectionChanged() {
+    return this.selectionService.onSelectionChanged;
+  }
+  get selection() {
+    return this.selectionService.selection;
+  }
+  set selection(entities) {
+    this.selectionService.selection = entities;
+  }
+  /**
+   * 当前激活的节点只能有一个
+   */
+  get activatedNode() {
+    const { selectedNodes } = this;
+    if (selectedNodes.length !== 1) {
+      return void 0;
+    }
+    return selectedNodes[0];
+  }
+  isSelected(id) {
+    return this.selectionService.selection.some((s) => s.id === id);
+  }
+  isActivated(id) {
+    return this.activatedNode?.id === id;
+  }
+  /**
+   * 选中的节点
+   */
+  get selectedNodes() {
+    return this.selectionService.selection.filter(
+      (n) => n instanceof WorkflowNodeEntity
+    );
+  }
+  /**
+   * 选中
+   * @param node
+   */
+  selectNode(node) {
+    this.selectionService.selection = [node];
+  }
+  toggleSelect(node) {
+    if (this.selectionService.selection.includes(node)) {
+      this.selectionService.selection = this.selectionService.selection.filter((n) => n !== node);
+    } else {
+      this.selectionService.selection = this.selectionService.selection.concat(node);
+    }
+  }
+  select(node) {
+    this.selectionService.selection = [node];
+  }
+  clear() {
+    this.selectionService.selection = [];
+  }
+  /**
+   *  选中并滚动到节点
+   * @param node
+   */
+  async selectNodeAndScrollToView(node, fitView2) {
+    this.selectNodeAndFocus(node);
+    const DELAY_TIME = 30;
+    await delay(DELAY_TIME);
+    const scrollConfig = {
+      entities: [node]
+    };
+    if (fitView2) {
+      const bounds = Rectangle6.enlarge([node.getData(TransformData4).bounds]).pad(
+        30,
+        30
+      );
+      const viewport = this.playground.config.getViewport(false);
+      const zoom = SizeSchema.fixSize(bounds, viewport);
+      scrollConfig.zoom = zoom;
+      scrollConfig.scrollToCenter = true;
+      scrollConfig.easing = true;
+    }
+    return this.playground.config.scrollToView(scrollConfig);
+  }
+  selectNodeAndFocus(node) {
+    this.select(node);
+    this.playground.node.focus();
+  }
+};
+__decorateClass([
+  inject(SelectionService)
+], WorkflowSelectService.prototype, "selectionService", 2);
+__decorateClass([
+  inject(Playground)
+], WorkflowSelectService.prototype, "playground", 2);
+WorkflowSelectService = __decorateClass([
+  injectable()
+], WorkflowSelectService);
+
+// src/service/workflow-hover-service.ts
+import { inject as inject2, injectable as injectable2 } from "inversify";
+import { Emitter as Emitter2 } from "@flowgram.ai/utils";
+import { EntityManager } from "@flowgram.ai/core";
+var WorkflowHoverService = class {
+  constructor() {
+    this.onHoveredChangeEmitter = new Emitter2();
+    this.onUpdateHoverPositionEmitter = new Emitter2();
+    this.onHoveredChange = this.onHoveredChangeEmitter.event;
+    this.onUpdateHoverPosition = this.onUpdateHoverPositionEmitter.event;
+    // 当前鼠标 hover 位置
+    this.hoveredPos = { x: 0, y: 0 };
+    /**
+     * 当前 hovered 的 节点或者线条或者点
+     * 1: nodeId / lineId  （节点 / 线条）
+     * 2: nodeId:portKey  （节点连接点）
+     */
+    this.hoveredKey = "";
+  }
+  /**
+   * 更新 hover 的内容
+   * @param hoveredKey hovered key
+   */
+  updateHoveredKey(hoveredKey) {
+    if (this.hoveredKey !== hoveredKey) {
+      this.hoveredKey = hoveredKey;
+      this.onHoveredChangeEmitter.fire(hoveredKey);
+    }
+  }
+  updateHoverPosition(position, target) {
+    this.hoveredPos = position;
+    this.onUpdateHoverPositionEmitter.fire({
+      position,
+      target
+    });
+  }
+  /**
+   * 清空 hover 内容
+   */
+  clearHovered() {
+    this.updateHoveredKey("");
+  }
+  /**
+   *  判断是否 hover
+   * @param nodeId hoveredKey
+   * @returns 是否 hover
+   */
+  isHovered(nodeId) {
+    return nodeId === this.hoveredKey;
+  }
+  isSomeHovered() {
+    return !!this.hoveredKey;
+  }
+  /**
+   * 获取被 hover 的节点或线条
+   */
+  get hoveredNode() {
+    return this.entityManager.getEntityById(this.hoveredKey);
+  }
+};
+__decorateClass([
+  inject2(EntityManager)
+], WorkflowHoverService.prototype, "entityManager", 2);
+WorkflowHoverService = __decorateClass([
+  injectable2()
+], WorkflowHoverService);
+
+// src/service/workflow-drag-service.ts
+import { nanoid as nanoid3 } from "nanoid";
+import { inject as inject6, injectable as injectable6, postConstruct as postConstruct2 } from "inversify";
+import {
+  domUtils as domUtils2,
+  PromiseDeferred,
+  Emitter as Emitter5,
+  DisposableCollection as DisposableCollection2,
+  Rectangle as Rectangle8,
+  delay as delay2
+} from "@flowgram.ai/utils";
+import {
+  FlowNodeTransformData as FlowNodeTransformData6,
+  FlowOperationBaseService
+} from "@flowgram.ai/document";
+import { FlowNodeBaseType as FlowNodeBaseType2 } from "@flowgram.ai/document";
+import {
+  CommandService,
+  MouseTouchEvent,
+  PlaygroundConfigEntity as PlaygroundConfigEntity5,
+  PlaygroundDrag,
+  TransformData as TransformData8
+} from "@flowgram.ai/core";
+
+// src/workflow-lines-manager.ts
+import { last } from "lodash-es";
+import { inject as inject3, injectable as injectable3 } from "inversify";
+import { DisposableCollection, Emitter as Emitter3 } from "@flowgram.ai/utils";
+import { FlowNodeRenderData as FlowNodeRenderData2, FlowNodeTransformData as FlowNodeTransformData3 } from "@flowgram.ai/document";
+import { EntityManager as EntityManager2, PlaygroundConfigEntity as PlaygroundConfigEntity2 } from "@flowgram.ai/core";
+
+// src/workflow-document-option.ts
+import { FlowNodeErrorData } from "@flowgram.ai/form-core";
+import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/document";
+import { TransformData as TransformData5 } from "@flowgram.ai/core";
+
+// src/utils/flow-node-form-data.ts
+import { FlowNodeFormData } from "@flowgram.ai/form-core";
+function getFlowNodeFormData(node) {
+  return node.getData(FlowNodeFormData);
+}
+function toFormJSON(node) {
+  const formData = node.getData(FlowNodeFormData);
+  if (!formData || !node.getNodeRegistry().formMeta) return void 0;
+  return formData.toJSON();
+}
+function initFormDataFromJSON(node, json, isFirstCreate) {
+  const formData = node.getData(FlowNodeFormData);
+  const registry = node.getNodeRegistry();
+  const { formMeta } = registry;
+  if (formData && formMeta) {
+    if (isFirstCreate) {
+      formData.createForm(formMeta, json.data);
+      formData.onDataChange(() => {
+        node.document.fireContentChange({
+          type: "NODE_DATA_CHANGE" /* NODE_DATA_CHANGE */,
+          toJSON: () => formData.toJSON(),
+          entity: node
+        });
+      });
+    } else {
+      formData.updateFormValues(json.data);
+    }
+  }
+}
+
+// src/workflow-document-option.ts
+var WorkflowDocumentOptions = Symbol("WorkflowDocumentOptions");
+var WorkflowDocumentOptionsDefault = {
+  cursors: {
+    grab: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC40ODczIDIuNjIzNzhDOS45MDczMSAyLjYyMzc4IDkuNDM3MTMgMy4wOTM5NiA5LjQzNzEzIDMuNjczOTZWNS4xNDM3NkM5LjM5NDI4IDQuNDAyNzQgOC43Nzk3OCAzLjgxNTA0IDguMDI4MDIgMy44MTUwNEM3LjI0ODQ4IDMuODE1MDQgNi42MTY1MyA0LjQ0Njk5IDYuNjE2NTMgNS4yMjY1M1YxMS44Mjg5TDUuNjc0MTggMTEuMDA0OUM1LjE1NDg3IDEwLjU1MDkgNC40MDk1IDEwLjQ2MzYgMy43OTkzOCAxMC43ODU1TDMuNjk2OTQgMTAuODM5NkMzLjA2MjE3IDExLjE3NDUgMi45MjI2IDEyLjAyMjggMy40MTY2MiAxMi41NDM0TDcuMzM5NTkgMTYuNjc3NVYxNy4zMjU5QzcuMzM5NTkgMTcuNzg2MiA3LjcxMjY5IDE4LjE1OTMgOC4xNzI5MiAxOC4xNTkzSDEzLjgwODRDMTQuMjY4NyAxOC4xNTkzIDE0LjY0MTcgMTcuNzg2MiAxNC42NDE3IDE3LjMyNTlWMTYuNzkzNUMxNS44MDk0IDE1LjY0ODUgMTYuNDY3MyAxNC4wODE5IDE2LjQ2NzMgMTIuNDQ2NVYxMS40OTY3TDE2LjQ2NzEgNi42MzY4NUMxNi40NjcxIDUuOTU2MyAxNS45MTU0IDUuNDA0NjEgMTUuMjM0OCA1LjQwNDYxQzE0LjU1NDMgNS40MDQ2MSAxNC4wMDI2IDUuOTU2MyAxNC4wMDI2IDYuNjM2ODVMMTQuMDAyMSA1LjA0NzI4QzE0LjAwMjEgNC4zNjY3MyAxMy40NTA0IDMuODE1MDQgMTIuNzY5OCAzLjgxNTA0QzEyLjA4OTMgMy44MTUwNCAxMS41Mzc2IDQuMzY2NzMgMTEuNTM3NiA1LjA0NzI4TDExLjUzNzUgMy42NzM5NUMxMS41Mzc1IDMuMDkzOTYgMTEuMDY3MyAyLjYyMzc4IDEwLjQ4NzMgMi42MjM3OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3NCAxLjM3NDAyQzExLjM2MTIgMS4zNzQwMiAxMi4xMjExIDEuODYxMTggMTIuNTEwNSAyLjU3ODY4QzEyLjU5NTggMi41Njk4MyAxMi42ODIzIDIuNTY1MjggMTIuNzcgMi41NjUyOEMxMy44Mjc4IDIuNTY1MjggMTQuNzMxMSAzLjIyNzAxIDE1LjA4ODUgNC4xNTkxMUMxNS4xMzcgNC4xNTYyOSAxNS4xODU4IDQuMTU0ODYgMTUuMjM1IDQuMTU0ODZDMTYuNjA1OSA0LjE1NDg2IDE3LjcxNzIgNS4yNjYxOSAxNy43MTcyIDYuNjM3MDlMMTcuNzE3NCAxMi40NDY3QzE3LjcxNzQgMTQuMjM1NSAxNy4wNjQ0IDE1Ljk1NTkgMTUuODkxOSAxNy4yOTA0VjE3LjMyNjJDMTUuODkxOSAxOC40NzY4IDE0Ljk1OTEgMTkuNDA5NSAxMy44MDg1IDE5LjQwOTVIOC4xNzMwNkM3LjAyMjQ3IDE5LjQwOTUgNi4wODk3MyAxOC40NzY4IDYuMDg5NzMgMTcuMzI2MlYxNy4xNzY0TDIuNTEwMDMgMTMuNDA0MUMxLjQ0NTk5IDEyLjI4MjggMS43NDY2IDEwLjQ1NTUgMy4xMTM3OSA5LjczNDI0TDMuMjE2MjQgOS42ODAxOUMzLjg5MTY4IDkuMzIzODMgNC42NjE4NSA5LjI1NDAxIDUuMzY2NjYgOS40NTE5OFY1LjIyNjc4QzUuMzY2NjYgMy43NTY4NyA2LjU1ODI2IDIuNTY1MjggOC4wMjgxNiAyLjU2NTI4QzguMTcyOTMgMi41NjUyOCA4LjMxNDk5IDIuNTc2ODQgOC40NTM0NyAyLjU5OTA3QzguODM5NDMgMS44NzA0MiA5LjYwNTQ2IDEuMzc0MDIgMTAuNDg3NCAxLjM3NDAyWk0xMi40NDc2IDMuODU3ODdWOS40NzY0NkMxMi40NDc2IDkuNzI4NTIgMTIuMjQzMyA5LjkzMjg1IDExLjk5MTMgOS45MzI4NUMxMS43MzkyIDkuOTMyODUgMTEuNTM0OSA5LjcyODUyIDExLjUzNDkgOS40NzY0NlYzLjc5NjU1QzExLjUzNDkgMy43Nzk1NiAxMS41MzU4IDMuNzYyNzcgMTEuNTM3NiAzLjc0NjI2VjMuNjc0MkMxMS41Mzc2IDMuNDMyODIgMTEuNDU2MiAzLjIxMDQ2IDExLjMxOTMgMy4wMzMwOUMxMS4xMjcyIDIuNzg0MjggMTAuODI2MSAyLjYyNDAyIDEwLjQ4NzQgMi42MjQwMkMxMC4xMjM4IDIuNjI0MDIgOS44MDMzMiAyLjgwODg2IDkuNjE0ODMgMy4wODk3QzkuNTAyNjkgMy4yNTY3OSA5LjQzNzI2IDMuNDU3ODUgOS40MzcyNiAzLjY3NDJWMy43ODU3M0M5LjQzNzM1IDMuNzg5MzMgOS40MzczOSAzLjc5Mjk0IDkuNDM3MzkgMy43OTY1NVY5LjkwMTdDOS40MzczOSAxMC4xNTM3IDkuMjMzMDYgMTAuMzU4MSA4Ljk4MTAxIDEwLjM1ODFDOC43Mjg5NSAxMC4zNTgxIDguNTI0NjIgMTAuMTUzNyA4LjUyNDYyIDkuOTAxN1YzLjkwNTA3QzguNDE3NzMgMy44NjQ5IDguMzA0NjggMy44MzczMiA4LjE4NzI2IDMuODI0MTVDOC4xMzUwNCAzLjgxODI5IDguMDgxOTUgMy44MTUyOCA4LjAyODE2IDMuODE1MjhDNy4yNDg2MSAzLjgxNTI4IDYuNjE2NjYgNC40NDcyMyA2LjYxNjY2IDUuMjI2NzhWMTEuODI5Mkw1LjY3NDMxIDExLjAwNTJDNS41Nzg2OCAxMC45MjE2IDUuNDc1MzcgMTAuODUwNCA1LjM2NjY2IDEwLjc5MTlDNC44ODUwNiAxMC41MzI5IDQuMjk3MjggMTAuNTIzMSAzLjc5OTUyIDEwLjc4NThMMy42OTcwNyAxMC44Mzk4QzMuMDYyMzEgMTEuMTc0NyAyLjkyMjczIDEyLjAyMzEgMy40MTY3NSAxMi41NDM3TDcuMzM5NzMgMTYuNjc3N1YxNy4zMjYyQzcuMzM5NzMgMTcuNzg2NCA3LjcxMjgyIDE4LjE1OTUgOC4xNzMwNiAxOC4xNTk1SDEzLjgwODVDMTQuMjY4OCAxOC4xNTk1IDE0LjY0MTkgMTcuNzg2NCAxNC42NDE5IDE3LjMyNjJWMTYuNzkzOEMxNS43Mzc5IDE1LjcxOSAxNi4zODQ3IDE0LjI3MjggMTYuNDYgMTIuNzQ3QzE2LjQ2NDEgMTIuNjY0MSAxNi40NjY1IDEyLjU4MDkgMTYuNDY3MiAxMi40OTc1TDE2LjQ2NzQgMTIuNDQ2N0wxNi40NjcyIDYuNjM3MDlDMTYuNDY3MiA1Ljk2MjMgMTUuOTI0OCA1LjQxNDE5IDE1LjI1MjIgNS40MDQ5N0wxNS4yMzUgNS40MDQ4NkMxNS4xMjQ2IDUuNDA0ODYgMTUuMDE3NyA1LjQxOTM2IDE0LjkxNTkgNS40NDY1NlY5LjYwMjI2QzE0LjkxNTkgOS44NTQzMSAxNC43MTE2IDEwLjA1ODYgMTQuNDU5NSAxMC4wNTg2QzE0LjIwNzUgMTAuMDU4NiAxNC4wMDMxIDkuODU0MzEgMTQuMDAzMSA5LjYwMjI2VjYuNjA1MTRDMTQuMDAyOSA2LjYxNTc2IDE0LjAwMjcgNi42MjY0MSAxNC4wMDI3IDYuNjM3MDlWOS4yNzcwNUwxNC4wMDIyIDUuMDQ3NTJDMTQuMDAyMiA0Ljg2OTEzIDEzLjk2NDMgNC42OTk2IDEzLjg5NjEgNC41NDY1M0MxMy43MDY0IDQuMTIwNzIgMTMuMjgyMiAzLjgyMjM1IDEyLjc4NzYgMy44MTU0MUwxMi43NyAzLjgxNTI4QzEyLjY1ODQgMy44MTUyOCAxMi41NTA0IDMuODMwMSAxMi40NDc2IDMuODU3ODdaIiBmaWxsPSIjMUQxQzIzIi8+Cjwvc3ZnPg=="), auto',
+    grabbing: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjYxODE3IDUuNTk4NzVDNi42MTgxNyA0LjgxOTIgNy4yNTAxMiA0LjE4NzI2IDguMDI5NjcgNC4xODcyNkM4Ljc3ODczIDQuMTg3MjYgOS4zOTE1MiA0Ljc3MDc1IDkuNDM4MjkgNS41MDgwMUM5LjQ1OTkyIDQuOTQ3MSA5LjkyMTQ3IDQuNDk5MDIgMTAuNDg3NyA0LjQ5OTAyQzExLjA2NzcgNC40OTkwMiAxMS41Mzc4IDQuOTY5MiAxMS41Mzc4IDUuNTQ5MTlWOC43NjI0NkwxMS41Mzc5IDYuNzExNUMxMS41Mzc5IDYuMDMwOTUgMTIuMDg5NiA1LjQ3OTI2IDEyLjc3MDIgNS40NzkyNkMxMy40NTA3IDUuNDc5MjYgMTQuMDAyNCA2LjAzMDk1IDE0LjAwMjQgNi43MTE1TDE0LjAwMjQgOC43NjI0NkwxNC4wMDI5IDguMDE5ODNDMTQuMDAyOSA3LjMzOTI5IDE0LjU1NDYgNi43ODc1OSAxNS4yMzUyIDYuNzg3NTlDMTUuOTE1NyA2Ljc4NzU5IDE2LjQ2NzQgNy4zMzkyOCAxNi40Njc0IDguMDE5ODNWMTEuNDk3TDE2LjQ2NzUgMTIuNDQ2N0MxNi40Njc1IDE0LjA4MjEgMTUuODA5NiAxNS42NDg3IDE0LjY0MiAxNi43OTM4VjE3LjMyNjJDMTQuNjQyIDE3Ljc4NjQgMTQuMjY4OSAxOC4xNTk1IDEzLjgwODcgMTguMTU5NUg4LjE3MzE3QzcuNzEyOTMgMTguMTU5NSA3LjMzOTg0IDE3Ljc4NjQgNy4zMzk4NCAxNy4zMjYyVjE1Ljk0MjRMNS4zNDU2MiAxNC43NTM0QzQuNTg5MjQgMTQuMzAyNCA0LjEyNTkxIDEzLjQ4NjcgNC4xMjU4OSAxMi42MDYxTDQuMTI1ODMgOS4yODM4M0M0LjEyNTgyIDguOTU0MjcgNC4zMjAwMyA4LjY1NTY2IDQuNjIxMjkgOC41MjIwNUw2LjYxODE3IDcuNjM2MzRWNS41OTg3NVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3OCAzLjI0OTAyQzExLjI3OTYgMy4yNDkwMiAxMS45Nzc4IDMuNjQ5MDIgMTIuMzkxNyA0LjI1Nzk2QzEyLjUxNTEgNC4yMzkwNiAxMi42NDE2IDQuMjI5MjYgMTIuNzcwMyA0LjIyOTI2QzEzLjcyMjQgNC4yMjkyNiAxNC41NDkzIDQuNzY1MzEgMTQuOTY1NyA1LjU1MjA3QzE1LjA1NDMgNS41NDI1IDE1LjE0NDIgNS41Mzc1OSAxNS4yMzUzIDUuNTM3NTlDMTYuNjA2MiA1LjUzNzU5IDE3LjcxNzYgNi42NDg5MyAxNy43MTc2IDguMDE5ODNMMTcuNzE3NyAxMi40NDY3QzE3LjcxNzcgMTQuMjM1NSAxNy4wNjQ3IDE1Ljk1NTkgMTUuODkyMSAxNy4yOTA0VjE3LjMyNjJDMTUuODkyMSAxOC40NzY4IDE0Ljk1OTQgMTkuNDA5NSAxMy44MDg4IDE5LjQwOTVIOC4xNzMzMkM3LjAyMjczIDE5LjQwOTUgNi4wODk5OCAxOC40NzY4IDYuMDg5OTggMTcuMzI2MlYxNi42NTI0TDQuNzA1NjMgMTUuODI3QzMuNTcxMDYgMTUuMTUwNSAyLjg3NjA3IDEzLjkyNzEgMi44NzYwNCAxMi42MDYxTDIuODc1OTggOS4yODM4NUMyLjg3NTk2IDguNDU5OTYgMy4zNjE0OSA3LjcxMzQ1IDQuMTE0NjIgNy4zNzk0TDUuMzY4MzIgNi44MjMzM1Y1LjU5ODc1QzUuMzY4MzIgNC4xMjg4NSA2LjU1OTkxIDIuOTM3MjYgOC4wMjk4MiAyLjkzNzI2QzguNjA4MzEgMi45MzcyNiA5LjE0MzU1IDMuMTIxNyA5LjU4MDA1IDMuNDM1MDVDOS44NTg1MyAzLjMxNTMyIDEwLjE2NTQgMy4yNDkwMiAxMC40ODc4IDMuMjQ5MDJaTTEyLjQ0NzkgNS41MjE4NlY5LjQ3NTU3QzEyLjQ0NzkgOS43Mjc2MiAxMi4yNDM2IDkuOTMxOTUgMTEuOTkxNiA5LjkzMTk1QzExLjc1NjggOS45MzE5NSAxMS41NjM0IDkuNzU0NjUgMTEuNTM4IDkuNTI2NjNDMTEuNTM2MSA5LjUwOTg3IDExLjUzNTIgOS40OTI4MyAxMS41MzUyIDkuNDc1NTdWNS40NzE1OEMxMS41MTU0IDUuMjAwODMgMTEuMzkzIDQuOTU4NTggMTEuMjA2NiA0Ljc4MzU4QzExLjAxODggNC42MDcxMSAxMC43NjU5IDQuNDk5MDIgMTAuNDg3OCA0LjQ5OTAyQzEwLjQ3NjYgNC40OTkwMiAxMC40NjU0IDQuNDk5MTkgMTAuNDU0MiA0LjQ5OTU0QzkuOTAzNDcgNC41MTY4NCA5LjQ1OTY0IDQuOTU4MjQgOS40Mzg0NCA1LjUwODAxQzkuNDM4MiA1LjUwNDMgOS40Mzc5NSA1LjUwMDU4IDkuNDM3NjkgNS40OTY4OFY5LjkwMjQzQzkuNDM3NjkgMTAuMTU0NSA5LjIzMzM2IDEwLjM1ODggOC45ODEzMSAxMC4zNTg4QzguNzI5MjUgMTAuMzU4OCA4LjUyNDkyIDEwLjE1NDUgOC41MjQ5MiA5LjkwMjQzVjQuMjc2NTNDOC4zNzA4NiA0LjIxODgyIDguMjA0MDIgNC4xODcyNiA4LjAyOTgyIDQuMTg3MjZDNy4yNTAyNyA0LjE4NzI2IDYuNjE4MzIgNC44MTkyIDYuNjE4MzIgNS41OTg3NUw2LjYxODI3IDkuOTc1OTlDNi42MTgyNyAxMC4yMjggNi40MTM5NCAxMC40MzI0IDYuMTYxODkgMTAuNDMyNEM1LjkwOTgzIDEwLjQzMjQgNS43MDU1IDEwLjIyOCA1LjcwNTUgOS45NzU5OVY4LjA0MTIyTDQuNjIxNDQgOC41MjIwNUM0LjMyMDE4IDguNjU1NjYgNC4xMjU5NyA4Ljk1NDI3IDQuMTI1OTggOS4yODM4M0w0LjEyNjA0IDEyLjYwNjFDNC4xMjYwNiAxMy40ODY3IDQuNTg5MzkgMTQuMzAyNCA1LjM0NTc2IDE0Ljc1MzRMNy4zMzk5OCAxNS45NDI0VjE3LjMyNjJDNy4zMzk5OCAxNy43ODY0IDcuNzEzMDggMTguMTU5NSA4LjE3MzMyIDE4LjE1OTVIMTMuODA4OEMxNC4yNjkgMTguMTU5NSAxNC42NDIxIDE3Ljc4NjQgMTQuNjQyMSAxNy4zMjYyVjE2Ljc5MzhDMTUuNzM4MSAxNS43MTkgMTYuMzg1IDE0LjI3MjggMTYuNDYwMyAxMi43NDdDMTYuNDY0NiAxMi42NiAxNi40NjcgMTIuNTcyOCAxNi40Njc2IDEyLjQ4NTRMMTYuNDY3NyAxMi40NDY3TDE2LjQ2NzYgOC4wMTk4M0MxNi40Njc2IDcuMzQ1MDQgMTUuOTI1MiA2Ljc5NjkzIDE1LjI1MjUgNi43ODc3MUwxNS4yMzUzIDYuNzg3NTlDMTUuMTI1IDYuNzg3NTkgMTUuMDE4IDYuODAyMSAxNC45MTYyIDYuODI5MzFWOS42MDEzNkMxNC45MTYyIDkuODUzNDIgMTQuNzExOSAxMC4wNTc3IDE0LjQ1OTggMTAuMDU3N0MxNC4yMDc4IDEwLjA1NzcgMTQuMDAzNCA5Ljg1MzQxIDE0LjAwMzQgOS42MDEzNlY3Ljk4OTg1QzE0LjAwMzIgNy45OTk4MiAxNC4wMDMxIDguMDA5ODEgMTQuMDAzMSA4LjAxOTgzTDE0LjAwMzQgOS42MDEzNkwxNC4wMDI1IDYuNzExNUMxNC4wMDI1IDYuNDQ5NzQgMTMuOTIwOSA2LjIwNzA1IDEzLjc4MTggNi4wMDc0OEMxMy41NjIgNS42OTI0MiAxMy4xOTg5IDUuNDg0ODMgMTIuNzg3IDUuNDc5MzdMMTIuNzcwMyA1LjQ3OTI2QzEyLjY1ODggNS40NzkyNiAxMi41NTA3IDUuNDk0MDggMTIuNDQ3OSA1LjUyMTg2WiIgZmlsbD0iIzFEMUMyMyIvPgo8L3N2Zz4="), auto'
+  },
+  fromNodeJSON(node, json, isFirstCreate) {
+    initFormDataFromJSON(node, json, isFirstCreate);
+    return;
+  },
+  toNodeJSON(node) {
+    const nodeError = node.getData(FlowNodeErrorData)?.getError();
+    if (nodeError) {
+      throw nodeError;
+    }
+    const transform = node.getData(TransformData5);
+    let formJSON = toFormJSON(node);
+    const metaData = {};
+    const nodeMeta = node.getNodeMeta();
+    const subCanvas = nodeMeta.subCanvas?.(node);
+    if (subCanvas?.isCanvas === false) {
+      const canvasNodeTransform = subCanvas.canvasNode.getData(FlowNodeTransformData2);
+      const { x, y } = canvasNodeTransform.transform.position;
+      metaData.canvasPosition = { x, y };
+    }
+    const json = {
+      id: node.id,
+      type: node.flowNodeType,
+      meta: {
+        position: { x: transform.position.x, y: transform.position.y },
+        ...metaData
+      },
+      data: formJSON
+    };
+    return json;
+  }
+};
+
+// src/workflow-lines-manager.ts
+var WorkflowLinesManager = class {
+  constructor() {
+    this.toDispose = new DisposableCollection();
+    // 线条类型
+    this._lineType = 0 /* BEZIER */;
+    this.onAvailableLinesChangeEmitter = new Emitter3();
+    this.onForceUpdateEmitter = new Emitter3();
+    /**
+     * 有效的线条被添加或者删除时候触发，未连上的线条不算
+     */
+    this.onAvailableLinesChange = this.onAvailableLinesChangeEmitter.event;
+    /**
+     * 强制渲染 lines
+     */
+    this.onForceUpdate = this.onForceUpdateEmitter.event;
+    this.contributionFactories = [];
+    /**
+     * 是否在调整线条
+     */
+    this.isDrawing = false;
+  }
+  init(doc) {
+    this.document = doc;
+  }
+  forceUpdate() {
+    this.onForceUpdateEmitter.fire();
+  }
+  get lineType() {
+    return this._lineType;
+  }
+  get lineColor() {
+    const color = {
+      default: "var(--g-workflow-line-color-default,#4d53e8)" /* DEFUALT */,
+      error: "var(--g-workflow-line-color-error,red)" /* ERROR */,
+      hidden: "var(--g-workflow-line-color-hidden,transparent)" /* HIDDEN */,
+      drawing: "var(--g-workflow-line-color-drawing, #5DD6E3)" /* DRAWING */,
+      hovered: "var(--g-workflow-line-color-hover,#37d0ff)" /* HOVER */,
+      selected: "var(--g-workflow-line-color-selected,#37d0ff)" /* SELECTED */,
+      flowing: "var(--g-workflow-line-color-flowing,#4d53e8)" /* FLOWING */
+    };
+    if (this.options.lineColor) {
+      Object.assign(color, this.options.lineColor);
+    }
+    return color;
+  }
+  switchLineType(newType) {
+    if (newType === void 0) {
+      if (this._lineType === 0 /* BEZIER */) {
+        newType = 1 /* LINE_CHART */;
+      } else {
+        newType = 0 /* BEZIER */;
+      }
+    }
+    if (newType !== this._lineType) {
+      this._lineType = newType;
+      this.getAllLines().forEach((line) => {
+        line.getData(WorkflowLineRenderData).update();
+      });
+      window.requestAnimationFrame(() => {
+        this.entityManager.fireEntityChanged(WorkflowLineEntity.type);
+      });
+    }
+    return this._lineType;
+  }
+  getAllLines() {
+    return this.entityManager.getEntities(WorkflowLineEntity);
+  }
+  hasLine(portInfo) {
+    return !!this.entityManager.getEntityById(
+      WorkflowLineEntity.portInfoToLineId(portInfo)
+    );
+  }
+  getLine(portInfo) {
+    return this.entityManager.getEntityById(
+      WorkflowLineEntity.portInfoToLineId(portInfo)
+    );
+  }
+  replaceLine(oldPortInfo, newPortInfo) {
+    const oldLine = this.getLine(oldPortInfo);
+    if (oldLine) {
+      oldLine.dispose();
+    }
+    return this.createLine(newPortInfo);
+  }
+  createLine(options) {
+    const { from, to, drawingTo, fromPort, toPort } = options;
+    const available = Boolean(from && to);
+    const key = options.key || WorkflowLineEntity.portInfoToLineId(options);
+    let line = this.entityManager.getEntityById(key);
+    if (line) {
+      line.highlightColor = "";
+      line.validate();
+      return line;
+    }
+    const fromNode = this.entityManager.getEntityById(from)?.getData(WorkflowNodeLinesData);
+    const toNode = to ? this.entityManager.getEntityById(to).getData(WorkflowNodeLinesData) : void 0;
+    if (!fromNode) {
+      return;
+    }
+    this.isDrawing = Boolean(drawingTo);
+    line = this.entityManager.createEntity(WorkflowLineEntity, {
+      id: key,
+      document: this.document,
+      linesManager: this,
+      from,
+      fromPort,
+      toPort,
+      to,
+      drawingTo
+    });
+    this.registerData(line);
+    fromNode.addLine(line);
+    toNode?.addLine(line);
+    line.onDispose(() => {
+      if (drawingTo) {
+        this.isDrawing = false;
+      }
+      fromNode.removeLine(line);
+      toNode?.removeLine(line);
+      line.validate();
+    });
+    line.onDispose(() => {
+      if (available) {
+        this.onAvailableLinesChangeEmitter.fire({
+          type: "DELETE_LINE" /* DELETE_LINE */,
+          toJSON: () => line.toJSON(),
+          entity: line
+        });
+      }
+    });
+    if (available) {
+      this.onAvailableLinesChangeEmitter.fire({
+        type: "ADD_LINE" /* ADD_LINE */,
+        toJSON: () => line.toJSON(),
+        entity: line
+      });
+    }
+    line.validate();
+    return line;
+  }
+  /**
+   * 获取线条中距离鼠标位置最近的线条和距离
+   * @param mousePos 鼠标位置
+   * @param minDistance 最小检测距离
+   * @returns 距离鼠标位置最近的线条 以及距离
+   */
+  getCloseInLineFromMousePos(mousePos, minDistance = LINE_HOVER_DISTANCE) {
+    let targetLine, targetLineDist;
+    this.getAllLines().forEach((line) => {
+      const dist = line.getHoverDist(mousePos);
+      if (dist <= minDistance && (!targetLineDist || targetLineDist >= dist)) {
+        targetLineDist = dist;
+        targetLine = line;
+      }
+    });
+    return targetLine;
+  }
+  dispose() {
+    this.toDispose.dispose();
+  }
+  get disposed() {
+    return this.toDispose.disposed;
+  }
+  isErrorLine(fromPort, toPort) {
+    if (this.options.isErrorLine) {
+      return this.options.isErrorLine(fromPort, toPort, this);
+    }
+    return false;
+  }
+  isReverseLine(line) {
+    if (this.options.isReverseLine) {
+      return this.options.isReverseLine(line);
+    }
+    return false;
+  }
+  isHideArrowLine(line) {
+    if (this.options.isHideArrowLine) {
+      return this.options.isHideArrowLine(line);
+    }
+    return false;
+  }
+  isFlowingLine(line) {
+    if (this.options.isFlowingLine) {
+      return this.options.isFlowingLine(line);
+    }
+    return false;
+  }
+  isDisabledLine(line) {
+    if (this.options.isDisabledLine) {
+      return this.options.isDisabledLine(line);
+    }
+    return false;
+  }
+  isVerticalLine(line) {
+    if (this.options.isVerticalLine) {
+      return this.options.isVerticalLine(line);
+    }
+    return false;
+  }
+  setLineRenderType(line) {
+    if (this.options.setLineRenderType) {
+      return this.options.setLineRenderType(line);
+    }
+    return void 0;
+  }
+  setLineClassName(line) {
+    if (this.options.setLineClassName) {
+      return this.options.setLineClassName(line);
+    }
+    return void 0;
+  }
+  getLineColor(line) {
+    if (line.isHidden) {
+      return this.lineColor.hidden;
+    }
+    if (line.hasError) {
+      return this.lineColor.error;
+    }
+    if (line.highlightColor) {
+      return line.highlightColor;
+    }
+    if (line.drawingTo) {
+      return this.lineColor.drawing;
+    }
+    if (this.hoverService.isHovered(line.id)) {
+      return this.lineColor.hovered;
+    }
+    if (this.selectService.isSelected(line.id)) {
+      return this.lineColor.selected;
+    }
+    if (this.isFlowingLine(line)) {
+      return this.lineColor.flowing;
+    }
+    return this.lineColor.default;
+  }
+  canAddLine(fromPort, toPort, silent) {
+    if (fromPort === toPort || fromPort.node === toPort.node || fromPort.portType !== "output" || toPort.portType !== "input" || toPort.disabled) {
+      return false;
+    }
+    if (this.options.canAddLine) {
+      return this.options.canAddLine(fromPort, toPort, this, silent);
+    }
+    return fromPort.node !== toPort.node;
+  }
+  toJSON() {
+    return this.getAllLines().filter((l) => !l.isDrawing).map((l) => l.toJSON());
+  }
+  getPortById(portId) {
+    return this.entityManager.getEntityById(portId);
+  }
+  canRemove(line, newLineInfo, silent) {
+    if (this.options && this.options.canDeleteLine && !this.options.canDeleteLine(line, newLineInfo, silent)) {
+      return false;
+    }
+    return true;
+  }
+  canReset(fromPort, oldToPort, newToPort) {
+    if (this.options && this.options.canResetLine && !this.options.canResetLine(fromPort, oldToPort, newToPort, this)) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * 根据鼠标位置找到 port
+   * @param pos
+   */
+  getPortFromMousePos(pos) {
+    const allNodes = this.getSortedNodes().reverse();
+    const allPorts = allNodes.map((node) => node.getData(WorkflowNodePortsData).allPorts).flat();
+    const targetPort = allPorts.find((port) => port.isHovered(pos.x, pos.y));
+    if (targetPort) {
+      const containNodes = this.getContainNodesFromMousePos(pos);
+      const targetNode = last(containNodes);
+      if (targetNode && targetNode !== targetPort.node) {
+        return;
+      }
+    }
+    return targetPort;
+  }
+  /**
+   * 根据鼠标位置找到 node
+   * @param pos - 鼠标位置
+   */
+  getNodeFromMousePos(pos) {
+    const { selection } = this.selectService;
+    const containNodes = this.getContainNodesFromMousePos(pos);
+    if (selection?.length) {
+      const filteredNodes = containNodes.filter(
+        (node) => selection.some((_node) => node.id === _node.id)
+      );
+      if (filteredNodes?.length) {
+        return last(filteredNodes);
+      }
+    }
+    return last(containNodes);
+  }
+  registerContribution(factory) {
+    this.contributionFactories.push(factory);
+    return this;
+  }
+  registerData(line) {
+    line.addData(WorkflowLineRenderData);
+  }
+  getSortedNodes() {
+    return this.document.getAllNodes().sort((a, b) => this.getNodeIndex(a) - this.getNodeIndex(b));
+  }
+  /** 获取鼠标坐标位置的所有节点（stackIndex 从小到大排序） */
+  getContainNodesFromMousePos(pos) {
+    const allNodes = this.getSortedNodes();
+    const zoom = this.entityManager.getEntity(PlaygroundConfigEntity2)?.config?.zoom || 1;
+    const containNodes = allNodes.map((node) => {
+      const { bounds } = node.getData(FlowNodeTransformData3);
+      if (bounds.clone().pad(4 / zoom).contains(pos.x, pos.y)) {
+        return node;
+      }
+    }).filter(Boolean);
+    return containNodes;
+  }
+  getNodeIndex(node) {
+    const nodeRenderData = node.getData(FlowNodeRenderData2);
+    return nodeRenderData.stackIndex;
+  }
+};
+__decorateClass([
+  inject3(WorkflowHoverService)
+], WorkflowLinesManager.prototype, "hoverService", 2);
+__decorateClass([
+  inject3(WorkflowSelectService)
+], WorkflowLinesManager.prototype, "selectService", 2);
+__decorateClass([
+  inject3(EntityManager2)
+], WorkflowLinesManager.prototype, "entityManager", 2);
+__decorateClass([
+  inject3(WorkflowDocumentOptions)
+], WorkflowLinesManager.prototype, "options", 2);
+WorkflowLinesManager = __decorateClass([
+  injectable3()
+], WorkflowLinesManager);
+
+// src/workflow-document.ts
+import { customAlphabet } from "nanoid";
+import { inject as inject5, injectable as injectable5, optional, postConstruct } from "inversify";
+import { Emitter as Emitter4 } from "@flowgram.ai/utils";
+import { NodeEngineContext } from "@flowgram.ai/form-core";
+import {
+  FlowDocument,
+  FlowNodeBaseType,
+  FlowNodeTransformData as FlowNodeTransformData5
+} from "@flowgram.ai/document";
+import {
+  injectPlaygroundContext,
+  PlaygroundConfigEntity as PlaygroundConfigEntity4,
+  PositionData,
+  TransformData as TransformData7
+} from "@flowgram.ai/core";
+
+// src/layout/free-layout.ts
+import { inject as inject4, injectable as injectable4 } from "inversify";
+import {
+  PaddingSchema,
+  Rectangle as Rectangle7,
+  SizeSchema as SizeSchema2
+} from "@flowgram.ai/utils";
+import {
+  FlowDocumentProvider,
+  FlowNodeTransformData as FlowNodeTransformData4
+} from "@flowgram.ai/document";
+import { PlaygroundConfigEntity as PlaygroundConfigEntity3, TransformData as TransformData6 } from "@flowgram.ai/core";
+var FREE_LAYOUT_KEY = "free-layout";
+var FreeLayout = class {
+  constructor() {
+    this.name = FREE_LAYOUT_KEY;
+  }
+  get document() {
+    return this.documentProvider();
+  }
+  /**
+   * 更新布局
+   */
+  update() {
+    if (this.document.root.getData(FlowNodeTransformData4)?.localDirty) {
+      this.document.root.clearMemoGlobal();
+    }
+  }
+  syncTransform(node) {
+    const transform = node.getData(FlowNodeTransformData4);
+    if (!transform.localDirty) {
+      return;
+    }
+    node.clearMemoGlobal();
+    node.clearMemoLocal();
+    transform.transform.update({
+      size: transform.data.size
+    });
+    if (!node.parent) {
+      return;
+    }
+    node.parent.clearMemoGlobal();
+    node.parent.clearMemoLocal();
+    const parentTransform = node.parent.getData(FlowNodeTransformData4);
+    parentTransform.transform.fireChange();
+  }
+  /**
+   * 更新所有受影响的上下游节点
+   */
+  updateAffectedTransform(node) {
+    const transformData = node.transform;
+    if (!transformData.localDirty) {
+      return;
+    }
+    const allParents = this.getAllParents(node);
+    const allBlocks = this.getAllBlocks(node).reverse();
+    const affectedNodes = [...allBlocks, ...allParents];
+    affectedNodes.forEach((node2) => {
+      this.fireChange(node2);
+    });
+  }
+  /**
+   * 获取节点的 padding 数据
+   * @param node
+   */
+  getPadding(node) {
+    const { padding } = node.getNodeMeta();
+    const transform = node.getData(FlowNodeTransformData4);
+    if (padding) {
+      return typeof padding === "function" ? padding(transform) : padding;
+    }
+    return PaddingSchema.empty();
+  }
+  /**
+   * 默认滚动到 fitview 区域
+   * @param contentSize
+   */
+  getInitScroll(contentSize) {
+    const bounds = Rectangle7.enlarge(
+      this.document.getAllNodes().map((node) => node.getData(TransformData6).bounds)
+    ).pad(30, 30);
+    const viewport = this.playgroundConfig.getViewport(false);
+    const zoom = SizeSchema2.fixSize(bounds, viewport);
+    return {
+      scrollX: (bounds.x + bounds.width / 2) * zoom - this.playgroundConfig.config.width / 2,
+      scrollY: (bounds.y + bounds.height / 2) * zoom - this.playgroundConfig.config.height / 2
+    };
+  }
+  /**
+   * 获取默认输入点
+   */
+  getDefaultInputPoint(node) {
+    return node.getData(TransformData6).bounds.leftCenter;
+  }
+  /**
+   * 获取默认输出点
+   */
+  getDefaultOutputPoint(node) {
+    return node.getData(TransformData6).bounds.rightCenter;
+  }
+  /**
+   * 水平中心点
+   */
+  getDefaultNodeOrigin() {
+    return { x: 0.5, y: 0 };
+  }
+  getAllParents(node) {
+    const parents = [];
+    let current = node.parent;
+    while (current) {
+      parents.push(current);
+      current = current.parent;
+    }
+    return parents;
+  }
+  getAllBlocks(node) {
+    return node.blocks.reduce(
+      (acc, child) => [...acc, ...this.getAllBlocks(child)],
+      [node]
+    );
+  }
+  fireChange(node) {
+    const transformData = node?.transform;
+    if (!node || !transformData?.localDirty) {
+      return;
+    }
+    node.clearMemoGlobal();
+    node.clearMemoLocal();
+    transformData.transform.fireChange();
+  }
+};
+__decorateClass([
+  inject4(PlaygroundConfigEntity3)
+], FreeLayout.prototype, "playgroundConfig", 2);
+__decorateClass([
+  inject4(FlowDocumentProvider)
+], FreeLayout.prototype, "documentProvider", 2);
+FreeLayout = __decorateClass([
+  injectable4()
+], FreeLayout);
+
+// src/workflow-document.ts
+var nanoid2 = customAlphabet("1234567890", 5);
+var WorkflowDocumentProvider = Symbol("WorkflowDocumentProvider");
+var WorkflowDocument = class extends FlowDocument {
+  constructor() {
+    super(...arguments);
+    this._onContentChangeEmitter = new Emitter4();
+    this.onLoadedEmitter = new Emitter4();
+    this.onContentChange = this._onContentChangeEmitter.event;
+    this._onReloadEmitter = new Emitter4();
+    this.onReload = this._onReloadEmitter.event;
+    /**
+     * 数据加载完成
+     */
+    this.onLoaded = this.onLoadedEmitter.event;
+    this._loading = false;
+    this.options = {};
+  }
+  get loading() {
+    return this._loading;
+  }
+  async fitView(easing) {
+    return fitView(this, this.playgroundConfig, easing).then(() => {
+      this.linesManager.forceUpdate();
+    });
+  }
+  init() {
+    super.init();
+    this.currentLayoutKey = this.options.defaultLayout || FREE_LAYOUT_KEY;
+    this.linesManager.init(this);
+    this.playgroundConfig.getCursors = () => this.options.cursors;
+    this.linesManager.onAvailableLinesChange((e) => this.fireContentChange(e));
+    this.playgroundConfig.onReadonlyOrDisabledChange(({ readonly }) => {
+      if (this.nodeEngineContext) {
+        this.nodeEngineContext.readonly = readonly;
+      }
+    });
+  }
+  async load() {
+    if (this.disposed) return;
+    this._loading = true;
+    await super.load();
+    this._loading = false;
+    this.onLoadedEmitter.fire();
+  }
+  async reload(json, delayTime = 0) {
+    if (this.disposed) return;
+    this._loading = true;
+    this.clear();
+    this.fromJSON(json);
+    await delay(delayTime);
+    this._loading = false;
+    this._onReloadEmitter.fire(this);
+  }
+  /**
+   * 从数据加载
+   * @param json
+   */
+  fromJSON(json, fireRender = true) {
+    if (this.disposed) return;
+    const workflowJSON = {
+      nodes: json.nodes ?? [],
+      edges: json.edges ?? []
+    };
+    this.entityManager.changeEntityLocked = true;
+    this.renderJSON(workflowJSON);
+    this.entityManager.changeEntityLocked = false;
+    this.transformer.loading = false;
+    if (fireRender) {
+      this.fireRender();
+    }
+  }
+  /**
+   * 清空画布
+   */
+  clear() {
+    this.getAllNodes().map((node) => node.dispose());
+    this.linesManager.getAllLines().map((line) => line.dispose());
+    this.getAllPorts().map((port) => port.dispose());
+    this.selectServices.clear();
+  }
+  /**
+   * 创建流程节点
+   * @param json
+   */
+  createWorkflowNode(json, isClone = false, parentId) {
+    const isExistedNode = this.getNode(json.id);
+    const parent = this.getNode(parentId ?? this.root.id) ?? this.root;
+    const node = this.addNode(
+      {
+        ...json,
+        parent
+      },
+      void 0,
+      true
+    );
+    const registry = node.getNodeRegistry();
+    const { formMeta } = registry;
+    const meta = node.getNodeMeta();
+    const formData = getFlowNodeFormData(node);
+    const transform = node.getData(FlowNodeTransformData5);
+    const freeLayout = this.layout;
+    if (!isExistedNode) {
+      transform.onDataChange(() => {
+        freeLayout.syncTransform(node);
+      });
+    }
+    let { position } = meta;
+    if (!position) {
+      position = this.getNodeDefaultPosition(json.type);
+    }
+    node.getData(TransformData7).update({
+      position
+    });
+    if (formMeta && formData && !formData.formModel.initialized) {
+      formData.createForm(formMeta, json.data);
+      formData.onDataChange(() => {
+        this.fireContentChange({
+          type: "NODE_DATA_CHANGE" /* NODE_DATA_CHANGE */,
+          toJSON: () => formData.toJSON(),
+          entity: node
+        });
+      });
+    }
+    const positionData = node.getData(PositionData);
+    if (!isExistedNode) {
+      positionData.onDataChange(() => {
+        this.fireContentChange({
+          type: "MOVE_NODE" /* MOVE_NODE */,
+          toJSON: () => positionData.toJSON(),
+          entity: node
+        });
+      });
+    }
+    const subCanvas = this.getNodeSubCanvas(node);
+    if (!isExistedNode && !subCanvas?.isCanvas) {
+      this.fireContentChange({
+        type: "ADD_NODE" /* ADD_NODE */,
+        entity: node,
+        toJSON: () => this.toNodeJSON(node)
+      });
+      node.onDispose(() => {
+        if (!node.parent || node.parent.flowNodeType === FlowNodeBaseType.ROOT) {
+          return;
+        }
+        const parentTransform = node.parent.getData(FlowNodeTransformData5);
+        parentTransform.fireChange();
+      });
+      let lastDeleteNodeData;
+      node.preDispose.onDispose(() => {
+        lastDeleteNodeData = this.toNodeJSON(node);
+      });
+      node.onDispose(() => {
+        this.fireContentChange({
+          type: "DELETE_NODE" /* DELETE_NODE */,
+          entity: node,
+          toJSON: () => lastDeleteNodeData
+        });
+      });
+    }
+    if (json.blocks) {
+      this.renderJSON(
+        { nodes: json.blocks, edges: json.edges ?? [] },
+        {
+          parent: node,
+          isClone
+        }
+      );
+    }
+    if (subCanvas) {
+      const canvasTransform = subCanvas.canvasNode.getData(TransformData7);
+      canvasTransform.update({
+        position: subCanvas.parentNode.getNodeMeta()?.canvasPosition
+      });
+      if (!isExistedNode) {
+        subCanvas.parentNode.onDispose(() => {
+          subCanvas.canvasNode.dispose();
+        });
+        subCanvas.canvasNode.onDispose(() => {
+          subCanvas.parentNode.dispose();
+        });
+      }
+    }
+    if (!isExistedNode) {
+      this.onNodeCreateEmitter.fire({
+        node,
+        data: json,
+        json
+      });
+    } else {
+      this.onNodeUpdateEmitter.fire({
+        node,
+        data: json,
+        json
+      });
+    }
+    return node;
+  }
+  /**
+   * 添加节点，如果节点已经存在则不会重复创建
+   * @param data
+   * @param addedNodes
+   */
+  addNode(data, addedNodes, ignoreCreateAndUpdateEvent) {
+    const { id, type = "block", originParent, parent, meta, hidden, index } = data;
+    let node = this.getNode(id);
+    let isNew = false;
+    const register = this.getNodeRegistry(type, data.originParent);
+    if (node && node.flowNodeType !== data.type) {
+      node.dispose();
+      node = void 0;
+    }
+    if (!node) {
+      const { dataRegistries } = register;
+      node = this.entityManager.createEntity(WorkflowNodeEntity, {
+        id,
+        document: this,
+        flowNodeType: type,
+        originParent,
+        meta
+      });
+      const datas = dataRegistries ? this.nodeDataRegistries.concat(...dataRegistries) : this.nodeDataRegistries;
+      node.addInitializeData(datas);
+      node.onDispose(() => this.onNodeDisposeEmitter.fire({ node }));
+      this.options.fromNodeJSON?.(node, data, true);
+      isNew = true;
+    } else {
+      this.options.fromNodeJSON?.(node, data, false);
+    }
+    node.initData({
+      originParent,
+      parent,
+      meta,
+      hidden,
+      index
+    });
+    addedNodes?.push(node);
+    if (register.onCreate) {
+      const extendNodes = register.onCreate(node, data);
+      if (extendNodes && addedNodes) {
+        addedNodes.push(...extendNodes);
+      }
+    }
+    if (!ignoreCreateAndUpdateEvent) {
+      if (isNew) {
+        this.onNodeCreateEmitter.fire({
+          node,
+          data,
+          json: data
+        });
+      } else {
+        this.onNodeUpdateEmitter.fire({ node, data, json: data });
+      }
+    }
+    return node;
+  }
+  get layout() {
+    const layout = this.layouts.find((layout2) => layout2.name == this.currentLayoutKey);
+    if (!layout) {
+      throw new Error(`Unknown flow layout: ${this.currentLayoutKey}`);
+    }
+    return layout;
+  }
+  /**
+   * 获取默认的 x y 坐标, 默认为当前画布可视区域中心
+   * @param type
+   * @protected
+   */
+  getNodeDefaultPosition(type) {
+    const { size } = this.getNodeRegistry(type).meta || {};
+    let position = this.playgroundConfig.getViewport(true).center;
+    if (size) {
+      position = {
+        x: position.x,
+        y: position.y - size.height / 2
+      };
+    }
+    return getAntiOverlapPosition(this, position);
+  }
+  /**
+   * 通过类型创建节点, 如果没有提供position 则直接放在画布中间
+   * @param type
+   */
+  createWorkflowNodeByType(type, position, json = {}, parentID) {
+    let id = json.id;
+    if (id === void 0) {
+      do {
+        id = `1${nanoid2()}`;
+      } while (this.entityManager.getEntityById(id));
+    } else {
+      if (this.entityManager.getEntityById(id)) {
+        throw new Error(`[WorkflowDocument.createWorkflowNodeByType] Node Id "${id}" duplicated.`);
+      }
+    }
+    return this.createWorkflowNode(
+      {
+        ...json,
+        id,
+        type,
+        meta: { position, ...json?.meta },
+        // TODO title 和 meta 要从注册数据去拿
+        data: json?.data,
+        blocks: json?.blocks,
+        edges: json?.edges
+      },
+      false,
+      parentID
+    );
+  }
+  getAllNodes() {
+    return this.entityManager.getEntities(WorkflowNodeEntity).filter((n) => n.id !== FlowNodeBaseType.ROOT);
+  }
+  getAllPorts() {
+    return this.entityManager.getEntities(WorkflowPortEntity).filter((p) => p.node.id !== FlowNodeBaseType.ROOT);
+  }
+  /**
+   * 获取画布中的非游离节点
+   * 1. 开始节点
+   * 2. 从开始节点出发能走到的节点
+   * 3. 结束节点
+   * 4. 默认所有子画布内节点为游离节点
+   */
+  getAssociatedNodes() {
+    const allNode = this.getAllNodes();
+    const allLines = this.linesManager.getAllLines().filter((line) => line.from && line.to).map((line) => ({
+      from: line.from.id,
+      to: line.to.id
+    }));
+    const startNodeId = allNode.find((node) => node.isStart).id;
+    const endNodeId = allNode.find((node) => node.isNodeEnd).id;
+    const nodeInContainer = allNode.filter((node) => node.parent?.getNodeMeta().isContainer).map((node) => node.id);
+    const associatedCache = /* @__PURE__ */ new Set([endNodeId, ...nodeInContainer]);
+    const bfs = (nodeId) => {
+      if (associatedCache.has(nodeId)) {
+        return;
+      }
+      associatedCache.add(nodeId);
+      const nextNodes = allLines.reduce((ids, { from, to }) => {
+        if (from === nodeId && !associatedCache.has(to)) {
+          ids.push(to);
+        }
+        return ids;
+      }, []);
+      nextNodes.forEach(bfs);
+    };
+    bfs(startNodeId);
+    const associatedNodes = allNode.filter((node) => associatedCache.has(node.id));
+    return associatedNodes;
+  }
+  /**
+   * 触发渲染
+   */
+  fireRender() {
+    this.entityManager.fireEntityChanged(WorkflowNodeEntity.type);
+    this.entityManager.fireEntityChanged(WorkflowLineEntity.type);
+    this.entityManager.fireEntityChanged(WorkflowPortEntity.type);
+  }
+  fireContentChange(event) {
+    if (this._loading || this.disposed || this.entityManager.changeEntityLocked) {
+      return;
+    }
+    this._onContentChangeEmitter.fire(event);
+  }
+  toNodeJSON(node) {
+    const subCanvas = this.getNodeSubCanvas(node);
+    if (subCanvas?.isCanvas === true) {
+      return this.toNodeJSON(subCanvas.parentNode);
+    }
+    const json = this.toNodeJSONFromOptions(node);
+    const children = this.getNodeChildren(node);
+    const blocks = children.map((child) => this.toNodeJSON(child));
+    const linesMap = /* @__PURE__ */ new Map();
+    children.forEach((child) => {
+      const childLinesData = child.getData(WorkflowNodeLinesData);
+      [...childLinesData.inputLines, ...childLinesData.outputLines].filter(Boolean).forEach((line) => {
+        const lineJSON = this.toLineJSON(line);
+        if (!lineJSON || linesMap.has(line.id)) {
+          return;
+        }
+        linesMap.set(line.id, lineJSON);
+      });
+    });
+    const edges = Array.from(linesMap.values());
+    if (blocks.length > 0) json.blocks = blocks;
+    if (edges.length > 0) json.edges = edges;
+    return json;
+  }
+  /**
+   * 节点转换为JSON， 没有format的过程
+   * @param node
+   * @returns
+   */
+  toNodeJSONFromOptions(node) {
+    if (this.options.toNodeJSON) {
+      return this.options.toNodeJSON(node);
+    }
+    return WorkflowDocumentOptionsDefault.toNodeJSON(node);
+  }
+  copyNode(node, newNodeId, format, position) {
+    let json = this.toNodeJSON(node);
+    if (format) {
+      json = format(json);
+    }
+    position = position || {
+      x: json.meta.position.x + 30,
+      y: json.meta.position.y + 30
+    };
+    return this.createWorkflowNode(
+      {
+        id: newNodeId || `1${nanoid2()}`,
+        type: node.flowNodeType,
+        meta: {
+          ...json.meta,
+          position
+        },
+        data: json.data,
+        blocks: json.blocks,
+        edges: json.edges
+      },
+      true,
+      node.parent?.id
+    );
+  }
+  copyNodeFromJSON(flowNodeType, nodeJSON, newNodeId, position, parentId) {
+    position = position || {
+      x: nodeJSON.meta.position.x + 30,
+      y: nodeJSON.meta.position.y + 30
+    };
+    return this.createWorkflowNode(
+      {
+        id: newNodeId || `1${nanoid2()}`,
+        type: flowNodeType,
+        meta: {
+          ...nodeJSON.meta,
+          position
+        },
+        data: nodeJSON.data,
+        blocks: nodeJSON.blocks,
+        edges: nodeJSON.edges
+      },
+      true,
+      parentId
+    );
+  }
+  canRemove(node, silent) {
+    const meta = node.getNodeMeta();
+    if (meta.deleteDisable) {
+      return false;
+    }
+    if (this.options.canDeleteNode && !this.options.canDeleteNode(node, silent)) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * 判断端口是否为错误态
+   */
+  isErrorPort(port) {
+    if (typeof this.options.isErrorPort === "function") {
+      return this.options.isErrorPort(port);
+    }
+    return false;
+  }
+  /**
+   * 导出数据
+   */
+  toJSON() {
+    const rootJSON = this.toNodeJSON(this.root);
+    return {
+      nodes: rootJSON.blocks ?? [],
+      edges: rootJSON.edges ?? []
+    };
+  }
+  dispose() {
+    super.dispose();
+    this._onReloadEmitter.dispose();
+  }
+  /**
+   * 逐层创建节点和线条
+   */
+  renderJSON(json, options) {
+    const { parent = this.root, isClone = false } = options ?? {};
+    const containerID = this.getNodeSubCanvas(parent)?.canvasNode.id ?? parent.id;
+    const nodes = json.nodes.map(
+      (nodeJSON) => this.createWorkflowNode(nodeJSON, isClone, containerID)
+    );
+    const edges = json.edges.map((edge) => this.createWorkflowLine(edge, containerID)).filter(Boolean);
+    return { nodes, edges };
+  }
+  getNodeSubCanvas(node) {
+    if (!node) return;
+    const nodeMeta = node.getNodeMeta();
+    const subCanvas = nodeMeta.subCanvas?.(node);
+    return subCanvas;
+  }
+  getNodeChildren(node) {
+    if (!node) return [];
+    const subCanvas = this.getNodeSubCanvas(node);
+    const childrenWithCanvas = subCanvas ? subCanvas.canvasNode.collapsedChildren : node.collapsedChildren;
+    const children = childrenWithCanvas.filter((child) => {
+      const childMeta = child.getNodeMeta();
+      return !childMeta.subCanvas?.(node)?.isCanvas;
+    }).filter(Boolean);
+    return children;
+  }
+  toLineJSON(line) {
+    const lineJSON = line.toJSON();
+    if (!line.from || !line.info.from || !line.fromPort || !line.to || !line.info.to || !line.toPort) {
+      return;
+    }
+    const fromSubCanvas = this.getNodeSubCanvas(line.from);
+    const toSubCanvas = this.getNodeSubCanvas(line.to);
+    if (fromSubCanvas && !fromSubCanvas.isCanvas && toSubCanvas && toSubCanvas.isCanvas) {
+      return;
+    }
+    if (line.from === line.to.parent && fromSubCanvas) {
+      return {
+        ...lineJSON,
+        sourceNodeID: fromSubCanvas.parentNode.id
+      };
+    }
+    if (line.to === line.from.parent && toSubCanvas) {
+      return {
+        ...lineJSON,
+        targetNodeID: toSubCanvas.parentNode.id
+      };
+    }
+    return lineJSON;
+  }
+  createWorkflowLine(json, parentId) {
+    const fromNode = this.getNode(json.sourceNodeID);
+    const toNode = this.getNode(json.targetNodeID);
+    if (!fromNode || !toNode) {
+      return;
+    }
+    const lineInfo = {
+      from: json.sourceNodeID,
+      fromPort: json.sourcePortID,
+      to: json.targetNodeID,
+      toPort: json.targetPortID
+    };
+    if (!parentId) {
+      return this.linesManager.createLine(lineInfo);
+    }
+    const canvasNode = this.getNode(parentId);
+    if (!canvasNode) {
+      return this.linesManager.createLine(lineInfo);
+    }
+    const parentSubCanvas = this.getNodeSubCanvas(canvasNode);
+    if (!parentSubCanvas) {
+      return this.linesManager.createLine(lineInfo);
+    }
+    if (lineInfo.from === parentSubCanvas.parentNode.id) {
+      return this.linesManager.createLine({
+        ...lineInfo,
+        from: parentSubCanvas.canvasNode.id
+      });
+    }
+    if (lineInfo.to === parentSubCanvas.parentNode.id) {
+      return this.linesManager.createLine({
+        ...lineInfo,
+        to: parentSubCanvas.canvasNode.id
+      });
+    }
+    return this.linesManager.createLine(lineInfo);
+  }
+};
+__decorateClass([
+  inject5(WorkflowLinesManager)
+], WorkflowDocument.prototype, "linesManager", 2);
+__decorateClass([
+  inject5(PlaygroundConfigEntity4)
+], WorkflowDocument.prototype, "playgroundConfig", 2);
+__decorateClass([
+  injectPlaygroundContext()
+], WorkflowDocument.prototype, "playgroundContext", 2);
+__decorateClass([
+  inject5(WorkflowDocumentOptions)
+], WorkflowDocument.prototype, "options", 2);
+__decorateClass([
+  inject5(NodeEngineContext),
+  optional()
+], WorkflowDocument.prototype, "nodeEngineContext", 2);
+__decorateClass([
+  inject5(WorkflowSelectService)
+], WorkflowDocument.prototype, "selectServices", 2);
+__decorateClass([
+  postConstruct()
+], WorkflowDocument.prototype, "init", 1);
+WorkflowDocument = __decorateClass([
+  injectable5()
+], WorkflowDocument);
+
+// src/service/workflow-drag-service.ts
+var DRAG_TIMEOUT = 100;
+var DRAG_MIN_DELTA = 5;
+function checkDragSuccess(time, e, originLine) {
+  if (!originLine || time > DRAG_TIMEOUT || Math.abs(e.endPos.x - e.startPos.x) >= DRAG_MIN_DELTA || Math.abs(e.endPos.y - e.startPos.y) >= DRAG_MIN_DELTA) {
+    return true;
+  }
+  return false;
+}
+var WorkflowDragService = class {
+  constructor() {
+    this._onDragLineEventEmitter = new Emitter5();
+    this.onDragLineEventChange = this._onDragLineEventEmitter.event;
+    this.isDragging = false;
+    this._nodesDragEmitter = new Emitter5();
+    this.onNodesDrag = this._nodesDragEmitter.event;
+    this._toDispose = new DisposableCollection2();
+    this._droppableTransforms = [];
+    this.posAdjusters = /* @__PURE__ */ new Set();
+    this._onDragLineEndCallbacks = /* @__PURE__ */ new Map();
+  }
+  init() {
+    this._toDispose.pushAll([this._onDragLineEventEmitter, this._nodesDragEmitter]);
+    if (this.options.onDragLineEnd) {
+      this._toDispose.push(this.onDragLineEnd(this.options.onDragLineEnd));
+    }
+  }
+  dispose() {
+    this._toDispose.dispose();
+  }
+  /**
+   * 拖拽选中节点
+   * @param triggerEvent
+   */
+  async startDragSelectedNodes(triggerEvent) {
+    let { selectedNodes } = this.selectService;
+    if (selectedNodes.length === 0 || this.playgroundConfig.readonly || this.playgroundConfig.disabled || this.isDragging) {
+      return Promise.resolve(false);
+    }
+    this.isDragging = true;
+    const sameParent = this.childrenOfContainer(selectedNodes);
+    if (sameParent && sameParent.flowNodeType !== FlowNodeBaseType2.ROOT) {
+      selectedNodes = [sameParent];
+    }
+    let startPosition = this.getNodesPosition(selectedNodes);
+    let startPositions = selectedNodes.map((node) => {
+      const transform = node.getData(TransformData8);
+      return { x: transform.position.x, y: transform.position.y };
+    });
+    let dragSuccess = false;
+    const startTime = Date.now();
+    const dragger = new PlaygroundDrag({
+      onDragStart: (dragEvent) => {
+        this._nodesDragEmitter.fire({
+          type: "onDragStart",
+          nodes: selectedNodes,
+          startPositions,
+          dragEvent,
+          triggerEvent,
+          dragger
+        });
+      },
+      onDrag: (dragEvent) => {
+        if (!dragSuccess && checkDragSuccess(Date.now() - startTime, dragEvent)) {
+          dragSuccess = true;
+        }
+        const offset = this.getDragPosOffset({
+          event: dragEvent,
+          selectedNodes,
+          startPosition
+        });
+        const positions = [];
+        selectedNodes.forEach((node, index) => {
+          const transform = node.getData(TransformData8);
+          const nodeStartPosition = startPositions[index];
+          const newPosition = {
+            x: nodeStartPosition.x + offset.x,
+            y: nodeStartPosition.y + offset.y
+          };
+          transform.update({
+            position: newPosition
+          });
+          this.document.layout.updateAffectedTransform(node);
+          positions.push(newPosition);
+        });
+        this._nodesDragEmitter.fire({
+          type: "onDragging",
+          nodes: selectedNodes,
+          startPositions,
+          positions,
+          dragEvent,
+          triggerEvent,
+          dragger
+        });
+      },
+      onDragEnd: (dragEvent) => {
+        this.isDragging = false;
+        this._nodesDragEmitter.fire({
+          type: "onDragEnd",
+          nodes: selectedNodes,
+          startPositions,
+          dragEvent,
+          triggerEvent,
+          dragger
+        });
+      }
+    });
+    const { clientX, clientY } = MouseTouchEvent.getEventCoord(triggerEvent);
+    return dragger.start(clientX, clientY, this.playgroundConfig)?.then(() => dragSuccess);
+  }
+  /**
+   * 通过拖入卡片添加
+   * @param type
+   * @param event
+   * @param data 节点数据
+   */
+  async dropCard(type, event, data, parent) {
+    const mousePos = this.playgroundConfig.getPosFromMouseEvent(event);
+    if (!this.playgroundConfig.getViewport().contains(mousePos.x, mousePos.y)) {
+      return;
+    }
+    const position = this.adjustSubNodePosition(type, parent, mousePos);
+    const node = await this.document.createWorkflowNodeByType(
+      type,
+      position,
+      data,
+      parent?.id
+    );
+    return node;
+  }
+  /**
+   * 拖拽卡片到画布
+   * 返回创建结果
+   * @param type
+   * @param event
+   */
+  async startDragCard(type, event, data, cloneNode) {
+    let domNode;
+    let startPos = { x: 0, y: 0 };
+    const deferred = new PromiseDeferred();
+    const dragger = new PlaygroundDrag({
+      onDragStart: (e) => {
+        const targetNode = event.currentTarget;
+        domNode = cloneNode ? cloneNode(e) : targetNode.cloneNode(true);
+        const bounds = targetNode.getBoundingClientRect();
+        startPos = { x: bounds.left, y: bounds.top };
+        domUtils2.setStyle(domNode, {
+          zIndex: 1e3,
+          position: "absolute",
+          left: startPos.x,
+          top: startPos.y,
+          boxShadow: "0 6px 8px 0 rgba(28, 31, 35, .2)"
+        });
+        document.body.appendChild(domNode);
+        this.updateDroppableTransforms();
+      },
+      onDrag: (e) => {
+        const deltaX = e.endPos.x - e.startPos.x;
+        const deltaY = e.endPos.y - e.startPos.y;
+        const left = startPos.x + deltaX;
+        const right = startPos.y + deltaY;
+        domNode.style.left = `${left}px`;
+        domNode.style.top = `${right}px`;
+        const { x, y } = this.playgroundConfig.getPosFromMouseEvent(e);
+        const draggingRect = new Rectangle8(x, y, 170, 90);
+        const collisionTransform = this._droppableTransforms.find((transform) => {
+          const { bounds, entity } = transform;
+          const padding = this.document.layout.getPadding(entity);
+          const transformRect = new Rectangle8(
+            bounds.x + padding.left + padding.right,
+            bounds.y,
+            bounds.width,
+            bounds.height
+          );
+          return Rectangle8.intersects(draggingRect, transformRect);
+        });
+        this.updateDropNode(collisionTransform?.entity);
+      },
+      onDragEnd: async (e) => {
+        const dropNode = this._dropNode;
+        const { allowDrop } = this.canDropToNode({
+          dragNodeType: type,
+          dropNodeType: dropNode?.flowNodeType,
+          dropNode
+        });
+        const dragNode = allowDrop ? await this.dropCard(type, e, data, dropNode) : void 0;
+        this.clearDrop();
+        if (dragNode) {
+          domNode.remove();
+          deferred.resolve(dragNode);
+        } else {
+          domNode.style.transition = "all ease .2s";
+          domNode.style.left = `${startPos.x}px`;
+          domNode.style.top = `${startPos.y}px`;
+          const TIMEOUT = 200;
+          await delay2(TIMEOUT);
+          domNode.remove();
+          deferred.resolve();
+        }
+      }
+    });
+    await dragger.start(event.clientX, event.clientY);
+    return deferred.promise;
+  }
+  /**
+   * 如果存在容器节点，且传入鼠标坐标，需要用容器的坐标减去传入的鼠标坐标
+   */
+  adjustSubNodePosition(subNodeType, containerNode, mousePos) {
+    if (!mousePos) {
+      return { x: 0, y: 0 };
+    }
+    if (!subNodeType || !containerNode || containerNode.flowNodeType === FlowNodeBaseType2.ROOT) {
+      return mousePos;
+    }
+    const isParentEmpty = !containerNode.children || containerNode.children.length === 0;
+    const parentPadding = this.document.layout.getPadding(containerNode);
+    const containerWorldTransform = containerNode.transform.transform.worldTransform;
+    if (isParentEmpty) {
+      return {
+        x: 0,
+        y: parentPadding.top
+      };
+    } else {
+      return {
+        x: mousePos.x - containerWorldTransform.tx,
+        y: mousePos.y - containerWorldTransform.ty
+      };
+    }
+  }
+  /**
+   * 注册位置调整
+   */
+  registerPosAdjuster(adjuster) {
+    this.posAdjusters.add(adjuster);
+    return {
+      dispose: () => this.posAdjusters.delete(adjuster)
+    };
+  }
+  /**
+   * 判断是否可以放置节点
+   */
+  canDropToNode(params) {
+    const { canDropToNode } = this.document.options;
+    const { dragNodeType, dropNode } = params;
+    if (canDropToNode) {
+      const result = canDropToNode(params);
+      if (result) {
+        return {
+          allowDrop: true,
+          dropNode
+        };
+      }
+      return {
+        allowDrop: false
+      };
+    }
+    if (!dragNodeType) {
+      return {
+        allowDrop: false,
+        message: "Please select a node to drop"
+      };
+    }
+    return {
+      allowDrop: true,
+      dropNode
+    };
+  }
+  /**
+   * 获取拖拽偏移
+   */
+  getDragPosOffset(params) {
+    const { event, selectedNodes, startPosition } = params;
+    const { finalScale } = this.playgroundConfig;
+    const mouseOffset = {
+      x: (event.endPos.x - event.startPos.x) / finalScale,
+      y: (event.endPos.y - event.startPos.y) / finalScale
+    };
+    const wholePosition = {
+      x: startPosition.x + mouseOffset.x,
+      y: startPosition.y + mouseOffset.y
+    };
+    const adjustedOffsets = Array.from(this.posAdjusters.values()).map(
+      (adjuster) => adjuster({
+        selectedNodes,
+        position: wholePosition
+      })
+    );
+    const offset = adjustedOffsets.reduce(
+      (offset2, adjustOffset) => ({
+        x: offset2.x + adjustOffset.x,
+        y: offset2.y + adjustOffset.y
+      }),
+      mouseOffset
+    );
+    return offset;
+  }
+  updateDroppableTransforms() {
+    this._droppableTransforms = this.document.getRenderDatas(FlowNodeTransformData6, false).filter((transform) => {
+      const { entity } = transform;
+      if (entity.originParent) {
+        return this.nodeSelectable(entity) && this.nodeSelectable(entity.originParent);
+      }
+      return this.nodeSelectable(entity);
+    }).filter((transform) => this.isContainer(transform.entity));
+  }
+  /** 是否容器节点 */
+  isContainer(node) {
+    return node?.getNodeMeta().isContainer ?? false;
+  }
+  /**
+   * 获取节点整体位置
+   */
+  getNodesPosition(nodes) {
+    const selectedBounds = Rectangle8.enlarge(
+      nodes.map((n) => n.getData(FlowNodeTransformData6).bounds)
+    );
+    const position = {
+      x: selectedBounds.x,
+      y: selectedBounds.y
+    };
+    return position;
+  }
+  nodeSelectable(node) {
+    const selectable = node.getNodeMeta().selectable;
+    if (typeof selectable === "function") {
+      return selectable(node);
+    } else {
+      return selectable;
+    }
+  }
+  updateDropNode(node) {
+    if (this._dropNode) {
+      if (this._dropNode.id === node?.id) {
+        return;
+      }
+      this.selectService.clear();
+    }
+    if (node) {
+      this.selectService.selectNode(node);
+    }
+    this._dropNode = node;
+  }
+  clearDrop() {
+    if (this._dropNode) {
+      this.selectService.clear();
+    }
+    this._dropNode = void 0;
+    this._droppableTransforms = [];
+  }
+  setLineColor(line, color) {
+    line.highlightColor = color;
+    this.hoverService.clearHovered();
+  }
+  handleDragOnNode(toNode, fromPort, line, toPort, originLine) {
+    if (toPort && (originLine?.toPort === toPort || toPort.portType === "input" && this.linesManager.canAddLine(fromPort, toPort, true))) {
+      this.hoverService.updateHoveredKey(toPort.id);
+      line.setToPort(toPort);
+      this._onDragLineEventEmitter.fire({
+        type: "onDrag",
+        onDragNodeId: toNode.id
+      });
+      return {
+        hasError: false
+      };
+    } else if (this.isContainer(toNode)) {
+      return {
+        hasError: false
+      };
+    } else {
+      this.setLineColor(line, this.linesManager.lineColor.error);
+      return {
+        hasError: true
+      };
+    }
+  }
+  childrenOfContainer(nodes) {
+    if (nodes.length === 0) {
+      return;
+    }
+    const sourceContainer = nodes[0]?.parent;
+    if (!sourceContainer || sourceContainer.collapsedChildren.length !== nodes.length) {
+      return;
+    }
+    const valid = nodes.every((node) => node?.parent === sourceContainer);
+    if (!valid) {
+      return;
+    }
+    return sourceContainer;
+  }
+  /**
+   * 绘制线条
+   * @param opts
+   * @param event
+   */
+  async startDrawingLine(fromPort, event, originLine) {
+    const isFromInActivePort = !originLine && fromPort.isErrorPort() && fromPort.disabled;
+    if (originLine?.disabled || isFromInActivePort || this.playgroundConfig.readonly || this.playgroundConfig.disabled) {
+      return { dragSuccess: false, newLine: void 0 };
+    }
+    this.selectService.clear();
+    const config = this.playgroundConfig;
+    const deferred = new PromiseDeferred();
+    const preCursor = config.cursor;
+    let line, toPort, toNode, lineErrorReset = false;
+    const startTime = Date.now();
+    let dragSuccess = false;
+    const dragger = new PlaygroundDrag({
+      onDrag: (e) => {
+        if (!line && checkDragSuccess(Date.now() - startTime, e, originLine)) {
+          if (originLine) {
+            originLine.highlightColor = this.linesManager.lineColor.hidden;
+          }
+          dragSuccess = true;
+          line = this.linesManager.createLine({
+            from: fromPort.node.id,
+            fromPort: fromPort.portID,
+            drawingTo: config.getPosFromMouseEvent(event)
+          });
+          if (!line) {
+            return;
+          }
+          config.updateCursor("grab");
+          line.highlightColor = this.linesManager.lineColor.drawing;
+          this.hoverService.updateHoveredKey("");
+        }
+        if (!line) {
+          return;
+        }
+        lineErrorReset = false;
+        const dragPos = config.getPosFromMouseEvent(e);
+        toNode = this.linesManager.getNodeFromMousePos(dragPos);
+        toPort = this.linesManager.getPortFromMousePos(dragPos);
+        if (!toPort) {
+          line.setToPort(void 0);
+        } else if (!this.linesManager.canAddLine(fromPort, toPort, true)) {
+          line.highlightColor = this.linesManager.lineColor.error;
+          lineErrorReset = true;
+          line.setToPort(void 0);
+        } else {
+          line.setToPort(toPort);
+        }
+        this._onDragLineEventEmitter.fire({
+          type: "onDrag"
+        });
+        this.setLineColor(line, this.linesManager.lineColor.drawing);
+        if (toNode && this.canBuildContainerLine(toNode, dragPos)) {
+          toPort = this.getNearestPort(toNode, dragPos);
+          const { hasError } = this.handleDragOnNode(toNode, fromPort, line, toPort, originLine);
+          lineErrorReset = hasError;
+        }
+        if (line.toPort) {
+          line.drawingTo = { x: line.toPort.point.x, y: line.toPort.point.y };
+        } else {
+          line.drawingTo = { x: dragPos.x, y: dragPos.y };
+        }
+        originLine?.validate();
+        line.validate();
+      },
+      // eslint-disable-next-line complexity
+      onDragEnd: async (e) => {
+        const dragPos = config.getPosFromMouseEvent(e);
+        const onDragLineEndCallbacks = Array.from(this._onDragLineEndCallbacks.values());
+        config.updateCursor(preCursor);
+        await Promise.all(
+          onDragLineEndCallbacks.map(
+            (callback) => callback({
+              fromPort,
+              toPort,
+              mousePos: dragPos,
+              line,
+              originLine,
+              event: e
+            })
+          )
+        );
+        line?.dispose();
+        this._onDragLineEventEmitter.fire({
+          type: "onDragEnd"
+        });
+        if (originLine) {
+          originLine.highlightColor = "";
+        }
+        const end = () => {
+          originLine?.validate();
+          deferred.resolve({ dragSuccess });
+        };
+        if (dragSuccess) {
+          if (originLine && originLine.toPort === toPort) {
+            return end();
+          }
+          if (toPort && toPort.portType !== "input") {
+            return end();
+          }
+          const newLineInfo = toPort ? {
+            from: fromPort.node.id,
+            fromPort: fromPort.portID,
+            to: toPort.node.id,
+            toPort: toPort.portID
+          } : void 0;
+          const isReset = originLine && toPort;
+          if (isReset && !this.linesManager.canReset(
+            originLine.fromPort,
+            originLine.toPort,
+            toPort
+          )) {
+            return end();
+          }
+          if (originLine && (!this.linesManager.canRemove(originLine, newLineInfo, false) || lineErrorReset)) {
+            return end();
+          } else {
+            originLine?.dispose();
+          }
+          if (!toPort || !this.linesManager.canAddLine(fromPort, toPort, false)) {
+            return end();
+          }
+          const newLine = this.linesManager.createLine(newLineInfo);
+          if (!newLine) {
+            end();
+          }
+          deferred.resolve({
+            dragSuccess,
+            newLine
+          });
+        } else {
+          end();
+        }
+      }
+    });
+    const { clientX, clientY } = MouseTouchEvent.getEventCoord(event);
+    await dragger.start(clientX, clientY, config);
+    return deferred.promise;
+  }
+  /**
+   * 重新连接线条
+   * @param line
+   * @param e
+   */
+  async resetLine(line, e) {
+    const { fromPort } = line;
+    const { dragSuccess } = await this.startDrawingLine(fromPort, e, line);
+    if (!dragSuccess) {
+      this.selectService.select(line);
+    }
+  }
+  /** 线条拖拽结束 */
+  onDragLineEnd(callback) {
+    const id = nanoid3();
+    this._onDragLineEndCallbacks.set(id, callback);
+    return {
+      dispose: () => {
+        this._onDragLineEndCallbacks.delete(id);
+      }
+    };
+  }
+  /** 能否建立容器连线 */
+  canBuildContainerLine(node, mousePos) {
+    const isContainer = this.isContainer(node);
+    if (!isContainer) {
+      return true;
+    }
+    const { padding, bounds } = node.transform;
+    const contentRect = new Rectangle8(bounds.x, bounds.y, padding.left * 2 / 3, bounds.height);
+    return contentRect.contains(mousePos.x, mousePos.y);
+  }
+  /** 获取最近的 port */
+  getNearestPort(node, mousePos) {
+    const portsData = node.getData(WorkflowNodePortsData);
+    const distanceSortedPorts = portsData.inputPorts.sort((a, b) => {
+      const aDistance = Math.abs(mousePos.y - a.point.y);
+      const bDistance = Math.abs(mousePos.y - b.point.y);
+      return aDistance - bDistance;
+    });
+    return distanceSortedPorts[0];
+  }
+};
+__decorateClass([
+  inject6(PlaygroundConfigEntity5)
+], WorkflowDragService.prototype, "playgroundConfig", 2);
+__decorateClass([
+  inject6(WorkflowHoverService)
+], WorkflowDragService.prototype, "hoverService", 2);
+__decorateClass([
+  inject6(WorkflowDocument)
+], WorkflowDragService.prototype, "document", 2);
+__decorateClass([
+  inject6(WorkflowLinesManager)
+], WorkflowDragService.prototype, "linesManager", 2);
+__decorateClass([
+  inject6(CommandService)
+], WorkflowDragService.prototype, "commandService", 2);
+__decorateClass([
+  inject6(WorkflowSelectService)
+], WorkflowDragService.prototype, "selectService", 2);
+__decorateClass([
+  inject6(FlowOperationBaseService)
+], WorkflowDragService.prototype, "operationService", 2);
+__decorateClass([
+  inject6(WorkflowDocumentOptions)
+], WorkflowDragService.prototype, "options", 2);
+__decorateClass([
+  postConstruct2()
+], WorkflowDragService.prototype, "init", 1);
+WorkflowDragService = __decorateClass([
+  injectable6()
+], WorkflowDragService);
+
+// src/service/workflow-reset-layout-service.ts
+import { inject as inject7, injectable as injectable7, postConstruct as postConstruct3 } from "inversify";
+import { PlaygroundConfigEntity as PlaygroundConfigEntity6 } from "@flowgram.ai/core";
+import { EntityManager as EntityManager3 } from "@flowgram.ai/core";
+import { DisposableCollection as DisposableCollection3, Emitter as Emitter6 } from "@flowgram.ai/utils";
+
+// src/utils/layout-to-positions.ts
+import { FlowNodeTransformData as FlowNodeTransformData7 } from "@flowgram.ai/document";
+import { TransformData as TransformData9, startTween } from "@flowgram.ai/core";
+var layoutToPositions = async (nodes, nodePositionMap) => {
+  const newNodePositionMap = {};
+  nodes.forEach((node) => {
+    const transform = node.getData(TransformData9);
+    const nodeTransform = node.getData(FlowNodeTransformData7);
+    newNodePositionMap[node.id] = {
+      x: transform.position.x,
+      y: transform.position.y + nodeTransform.bounds.height / 2
+    };
+  });
+  return new Promise((resolve) => {
+    startTween({
+      from: { d: 0 },
+      to: { d: 100 },
+      duration: 300,
+      onUpdate: (v) => {
+        nodes.forEach((node) => {
+          const transform = node.getData(TransformData9);
+          const deltaX = (nodePositionMap[node.id].x - transform.position.x) * v.d / 100;
+          const deltaY = (nodePositionMap[node.id].y - transform.bounds.height / 2 - transform.position.y) * v.d / 100;
+          transform.update({
+            position: {
+              x: transform.position.x + deltaX,
+              y: transform.position.y + deltaY
+            }
+          });
+          const document2 = node.document;
+          document2.layout.updateAffectedTransform(node);
+        });
+      },
+      onComplete: () => {
+        resolve(newNodePositionMap);
+      }
+    });
+  });
+};
+
+// src/service/workflow-reset-layout-service.ts
+var WorkflowResetLayoutService = class {
+  constructor() {
+    this._resetLayoutEmitter = new Emitter6();
+    /**
+     * reset layout事件
+     */
+    this.onResetLayout = this._resetLayoutEmitter.event;
+    this._toDispose = new DisposableCollection3();
+  }
+  init() {
+    this._toDispose.push(this._resetLayoutEmitter);
+  }
+  /**
+   * 触发重置布局
+   * @param nodeIds 节点id
+   * @param positionMap 新布局数据
+   * @param oldPositionMap 老布局数据
+   */
+  fireResetLayout(nodeIds, positionMap, oldPositionMap) {
+    this._resetLayoutEmitter.fire({
+      nodeIds,
+      positionMap,
+      oldPositionMap
+    });
+  }
+  /**
+   * 根据数据重新布局
+   * @param positionMap
+   * @returns
+   */
+  async layoutToPositions(nodeIds, positionMap) {
+    const nodes = nodeIds.map((id) => this._entityManager.getEntityById(id)).filter(Boolean);
+    const positions = await layoutToPositions(nodes, positionMap);
+    fitView(this._document, this._config, true);
+    return positions;
+  }
+  /**
+   * 销毁
+   */
+  dispose() {
+    this._toDispose.dispose();
+  }
+};
+__decorateClass([
+  inject7(PlaygroundConfigEntity6)
+], WorkflowResetLayoutService.prototype, "_config", 2);
+__decorateClass([
+  inject7(WorkflowDocument)
+], WorkflowResetLayoutService.prototype, "_document", 2);
+__decorateClass([
+  inject7(EntityManager3)
+], WorkflowResetLayoutService.prototype, "_entityManager", 2);
+__decorateClass([
+  postConstruct3()
+], WorkflowResetLayoutService.prototype, "init", 1);
+WorkflowResetLayoutService = __decorateClass([
+  injectable7()
+], WorkflowResetLayoutService);
+
+// src/service/workflow-operation-base-service.ts
+import { inject as inject8 } from "inversify";
+import { Emitter as Emitter7 } from "@flowgram.ai/utils";
+import { FlowOperationBaseServiceImpl } from "@flowgram.ai/document";
+import { TransformData as TransformData10 } from "@flowgram.ai/core";
+var WorkflowOperationBaseServiceImpl = class extends FlowOperationBaseServiceImpl {
+  constructor() {
+    super(...arguments);
+    this.onNodePostionUpdateEmitter = new Emitter7();
+    this.onNodePostionUpdate = this.onNodePostionUpdateEmitter.event;
+  }
+  updateNodePosition(nodeOrId, position) {
+    const node = this.toNodeEntity(nodeOrId);
+    if (!node) {
+      return;
+    }
+    const transformData = node.getData(TransformData10);
+    const oldPosition = {
+      x: transformData.position.x,
+      y: transformData.position.y
+    };
+    transformData.update({
+      position
+    });
+    this.onNodePostionUpdateEmitter.fire({
+      node,
+      oldPosition,
+      newPosition: position
+    });
+  }
+};
+__decorateClass([
+  inject8(WorkflowDocument)
+], WorkflowOperationBaseServiceImpl.prototype, "document", 2);
+
+// src/hooks/use-playground-readonly-state.ts
+import { useEffect } from "react";
+import { usePlayground, useRefresh } from "@flowgram.ai/core";
+function usePlaygroundReadonlyState(listenChange) {
+  const playground = usePlayground();
+  const refresh = useRefresh();
+  useEffect(() => {
+    let dispose = void 0;
+    if (listenChange) {
+      dispose = playground.config.onReadonlyOrDisabledChange(() => refresh());
+    }
+    return () => dispose?.dispose();
+  }, [listenChange]);
+  return playground.config.readonly;
+}
+
+// src/hooks/use-node-render.tsx
+function checkTargetDraggable(el) {
+  return el && el.tagName !== "INPUT" && el.tagName !== "TEXTAREA" && !el.closest(".flow-canvas-not-draggable");
+}
+function useNodeRender(nodeFromProps) {
+  const node = nodeFromProps || useContext(PlaygroundEntityContext);
+  const renderData = node.getData(FlowNodeRenderData3);
+  const portsData = node.getData(WorkflowNodePortsData);
+  const readonly = usePlaygroundReadonlyState();
+  const dragService = useService(WorkflowDragService);
+  const selectionService = useService(WorkflowSelectService);
+  const isDragging = useRef(false);
+  const [formValueVersion, updateFormValueVersion] = useState(0);
+  const formValueDependRef = useRef(false);
+  formValueDependRef.current = false;
+  const nodeRef = useRef(null);
+  const [linkingNodeId, setLinkingNodeId] = useState("");
+  useEffect2(() => {
+    const disposable = dragService.onDragLineEventChange(({ type, onDragNodeId }) => {
+      if (type === "onDrag") {
+        setLinkingNodeId(onDragNodeId || "");
+      } else {
+        setLinkingNodeId("");
+      }
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+  const startDrag = useCallback(
+    (e) => {
+      MouseTouchEvent2.preventDefault(e);
+      if (!selectionService.isSelected(node.id)) {
+        selectNode(e);
+      }
+      if (!MouseTouchEvent2.isTouchEvent(e)) {
+        if (!checkTargetDraggable(e.target) || !checkTargetDraggable(document.activeElement)) {
+          return;
+        }
+      }
+      isDragging.current = true;
+      dragService.startDragSelectedNodes(e)?.finally(
+        () => setTimeout(() => {
+          isDragging.current = false;
+        })
+      );
+    },
+    [dragService, node]
+  );
+  const selectNode = useCallback(
+    (e) => {
+      if (isDragging.current) {
+        return;
+      }
+      if (e.shiftKey) {
+        selectionService.toggleSelect(node);
+      } else {
+        selectionService.selectNode(node);
+      }
+      if (e.target) {
+        e.target.focus();
+      }
+    },
+    [node]
+  );
+  const deleteNode = useCallback(() => node.dispose(), [node]);
+  useListenEvents(portsData.onDataChange);
+  const isFirefox = navigator?.userAgent?.includes?.("Firefox");
+  const onFocus = useCallback(() => {
+    if (isFirefox) {
+      nodeRef.current?.setAttribute("draggable", "false");
+    }
+  }, []);
+  const onBlur = useCallback(() => {
+    if (isFirefox) {
+      nodeRef.current?.setAttribute("draggable", "true");
+    }
+  }, []);
+  const getExtInfo = useCallback(() => node.getExtInfo(), [node]);
+  const updateExtInfo = useCallback(
+    (data) => {
+      node.updateExtInfo(data);
+    },
+    [node]
+  );
+  const form = useMemo(() => getNodeForm(node), [node]);
+  const formState = useObserve(form?.state);
+  const toggleExpand = useCallback(() => {
+    renderData.toggleExpand();
+  }, [renderData]);
+  const selected = selectionService.isSelected(node.id);
+  const activated = selectionService.isActivated(node.id);
+  const expanded = renderData.expanded;
+  useEffect2(() => {
+    const toDispose = form?.onFormValuesChange(() => {
+      if (formValueDependRef.current) {
+        updateFormValueVersion((v) => v + 1);
+      }
+    });
+    return () => toDispose?.dispose();
+  }, [form]);
+  return useMemo(
+    () => ({
+      id: node.id,
+      type: node.flowNodeType,
+      get data() {
+        if (form) {
+          formValueDependRef.current = true;
+          return form.values;
+        }
+        return getExtInfo();
+      },
+      updateData(values) {
+        if (form) {
+          form.updateFormValues(values);
+        } else {
+          updateExtInfo(values);
+        }
+      },
+      node,
+      selected,
+      activated,
+      expanded,
+      startDrag,
+      get ports() {
+        return portsData.allPorts;
+      },
+      deleteNode,
+      selectNode,
+      readonly,
+      linkingNodeId,
+      nodeRef,
+      onFocus,
+      onBlur,
+      getExtInfo,
+      updateExtInfo,
+      toggleExpand,
+      get form() {
+        if (!form) return void 0;
+        return {
+          ...form,
+          get values() {
+            formValueDependRef.current = true;
+            return form.values;
+          },
+          get state() {
+            return formState;
+          }
+        };
+      }
+    }),
+    [
+      node,
+      selected,
+      activated,
+      expanded,
+      startDrag,
+      deleteNode,
+      selectNode,
+      readonly,
+      linkingNodeId,
+      nodeRef,
+      onFocus,
+      onBlur,
+      getExtInfo,
+      updateExtInfo,
+      toggleExpand,
+      formValueVersion
+    ]
+  );
+}
+
+// src/hooks/use-current-dom-node.ts
+import { FlowNodeRenderData as FlowNodeRenderData4 } from "@flowgram.ai/document";
+import { useEntityFromContext } from "@flowgram.ai/core";
+function useCurrentDomNode() {
+  const entity = useEntityFromContext();
+  const renderData = entity.getData(FlowNodeRenderData4);
+  return renderData.node;
+}
+
+// src/hooks/use-current-entity.ts
+import { useEntityFromContext as useEntityFromContext2 } from "@flowgram.ai/core";
+function useCurrentEntity() {
+  return useEntityFromContext2();
+}
+
+// src/hooks/use-workflow-document.ts
+import { useService as useService2 } from "@flowgram.ai/core";
+function useWorkflowDocument() {
+  return useService2(WorkflowDocument);
+}
+
+// src/constants.ts
+var EditorCursorState = /* @__PURE__ */ ((EditorCursorState2) => {
+  EditorCursorState2["GRAB"] = "GRAB";
+  EditorCursorState2["SELECT"] = "SELECT";
+  return EditorCursorState2;
+})(EditorCursorState || {});
+var InteractiveType = /* @__PURE__ */ ((InteractiveType2) => {
+  InteractiveType2["MOUSE"] = "MOUSE";
+  InteractiveType2["PAD"] = "PAD";
+  return InteractiveType2;
+})(InteractiveType || {});
+
+// src/workflow-document-container-module.ts
+import { ContainerModule } from "inversify";
+import { bindContributions } from "@flowgram.ai/utils";
+import { FlowDocument as FlowDocument2, FlowDocumentContribution } from "@flowgram.ai/document";
+
+// src/workflow-document-contribution.ts
+import { injectable as injectable8, inject as inject9 } from "inversify";
+import {
+  FlowNodeRenderData as FlowNodeRenderData5,
+  FlowNodeTransformData as FlowNodeTransformData8
+} from "@flowgram.ai/document";
+var WorkflowDocumentContribution = class {
+  registerDocument(document2) {
+    document2.registerNodeDatas(
+      FlowNodeTransformData8,
+      FlowNodeRenderData5,
+      WorkflowNodePortsData,
+      WorkflowNodeLinesData
+    );
+    document2.registerLayout(this.freeLayout);
+  }
+};
+__decorateClass([
+  inject9(FreeLayout)
+], WorkflowDocumentContribution.prototype, "freeLayout", 2);
+WorkflowDocumentContribution = __decorateClass([
+  injectable8()
+], WorkflowDocumentContribution);
+
+// src/utils/get-url-params.ts
+function getUrlParams() {
+  return location.search.replace(/^\?/, "").split("&").reduce((res, key) => {
+    const [k, v] = key.split("=");
+    res[k] = v;
+    return res;
+  }, {});
+}
+
+// src/workflow-document-container-module.ts
+var WorkflowDocumentContainerModule = new ContainerModule(
+  (bind, unbind, isBound, rebind) => {
+    bind(WorkflowDocument).toSelf().inSingletonScope();
+    bind(WorkflowLinesManager).toSelf().inSingletonScope();
+    bind(FreeLayout).toSelf().inSingletonScope();
+    bind(WorkflowDragService).toSelf().inSingletonScope();
+    bind(WorkflowSelectService).toSelf().inSingletonScope();
+    bind(WorkflowHoverService).toSelf().inSingletonScope();
+    bind(WorkflowResetLayoutService).toSelf().inSingletonScope();
+    bind(WorkflowOperationBaseService).to(WorkflowOperationBaseServiceImpl).inSingletonScope();
+    bind(URLParams).toDynamicValue(() => getUrlParams()).inSingletonScope();
+    bindContributions(bind, WorkflowDocumentContribution, [FlowDocumentContribution]);
+    bind(WorkflowDocumentOptions).toConstantValue({
+      ...WorkflowDocumentOptionsDefault
+    });
+    rebind(FlowDocument2).toService(WorkflowDocument);
+    bind(WorkflowDocumentProvider).toDynamicValue((ctx) => () => ctx.container.get(WorkflowDocument)).inSingletonScope();
+  }
+);
+
+// src/utils/simple-line.ts
+import { Point, Rectangle as Rectangle9 } from "@flowgram.ai/utils";
+var LINE_PADDING = 12;
+var WorkflowSimpleLineContribution = class {
+  constructor(entity) {
+    this.entity = entity;
+  }
+  get path() {
+    return this.data?.path ?? "";
+  }
+  calcDistance(pos) {
+    if (!this.data) {
+      return Number.MAX_SAFE_INTEGER;
+    }
+    const [start, end] = this.data.points;
+    return Point.getDistance(pos, this.projectPointOnLine(pos, start, end));
+  }
+  get bounds() {
+    if (!this.data) {
+      return new Rectangle9();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : POINT_RADIUS,
+      y: vertical ? POINT_RADIUS : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -POINT_RADIUS,
+      y: vertical ? -POINT_RADIUS : 0
+    };
+    const points = [
+      {
+        x: fromPos.x + sourceOffset.x,
+        y: fromPos.y + sourceOffset.y
+      },
+      {
+        x: toPos.x + targetOffset.x,
+        y: toPos.y + targetOffset.y
+      }
+    ];
+    const bbox = Rectangle9.createRectangleWithTwoPoints(points[0], points[1]);
+    const adjustedPoints = points.map((p) => ({
+      x: p.x - bbox.x + LINE_PADDING,
+      y: p.y - bbox.y + LINE_PADDING
+    }));
+    const path = `M ${adjustedPoints[0].x} ${adjustedPoints[0].y} L ${adjustedPoints[1].x} ${adjustedPoints[1].y}`;
+    this.data = {
+      points,
+      path,
+      bbox
+    };
+  }
+  projectPointOnLine(point, lineStart, lineEnd) {
+    const dx = lineEnd.x - lineStart.x;
+    const dy = lineEnd.y - lineStart.y;
+    if (dx === 0) {
+      return { x: lineStart.x, y: point.y };
+    }
+    if (dy === 0) {
+      return { x: point.x, y: lineStart.y };
+    }
+    const t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / (dx * dx + dy * dy);
+    const clampedT = Math.max(0, Math.min(1, t));
+    return {
+      x: lineStart.x + clampedT * dx,
+      y: lineStart.y + clampedT * dy
+    };
+  }
+};
+WorkflowSimpleLineContribution.type = "WorkflowSimpleLineContribution";
+export {
+  EditorCursorState,
+  InteractiveType,
+  LINE_HOVER_DISTANCE,
+  LineColors,
+  LineType,
+  POINT_RADIUS,
+  PORT_SIZE,
+  URLParams,
+  WORKFLOW_LINE_ENTITY,
+  WorkflowCommands,
+  WorkflowContentChangeType,
+  WorkflowDocument,
+  WorkflowDocumentContainerModule,
+  WorkflowDocumentOptions,
+  WorkflowDocumentOptionsDefault,
+  WorkflowDocumentProvider,
+  WorkflowDragService,
+  WorkflowHoverService,
+  WorkflowLineEntity,
+  WorkflowLineRenderData,
+  WorkflowLinesManager,
+  WorkflowNodeEntity,
+  WorkflowNodeLinesData,
+  WorkflowNodePortsData,
+  WorkflowOperationBaseService,
+  WorkflowOperationBaseServiceImpl,
+  WorkflowPortEntity,
+  WorkflowResetLayoutService,
+  WorkflowSelectService,
+  WorkflowSimpleLineContribution,
+  bindConfigEntity,
+  compose,
+  composeAsync,
+  delay,
+  domReactToBounds,
+  fitView,
+  getAntiOverlapPosition,
+  getPortEntityId,
+  nanoid,
+  useConfigEntity,
+  useCurrentDomNode,
+  useCurrentEntity,
+  useEntities,
+  useEntityDataFromContext,
+  useEntityFromContext3 as useEntityFromContext,
+  useListenEvents2 as useListenEvents,
+  useNodeRender,
+  usePlayground2 as usePlayground,
+  usePlaygroundContainer,
+  usePlaygroundContext,
+  usePlaygroundLatest,
+  usePlaygroundReadonlyState,
+  useRefresh2 as useRefresh,
+  useService3 as useService,
+  useWorkflowDocument
+};
+//# sourceMappingURL=index.js.map