@flowgram.ai/free-node-panel-plugin 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,103 @@
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import React from 'react';
+import { WorkflowNodeJSON, WorkflowNodeEntity, WorkflowPortEntity } from '@flowgram.ai/free-layout-core';
+import { PositionSchema } from '@flowgram.ai/utils';
+
+interface NodePanelCallParams {
+    /** 唤起节点面板的位置 */
+    panelPosition: PositionSchema;
+    /** 自定义传给面板组件的props */
+    panelProps?: Record<string, any>;
+    /** 指定父节点 */
+    containerNode?: WorkflowNodeEntity;
+    /** 创建节点后需连接的前序端口 */
+    fromPort?: WorkflowPortEntity;
+    /** 创建节点后需连接的后序端口 */
+    toPort?: WorkflowPortEntity;
+    /** 偏移后续节点默认间距 */
+    autoOffsetPadding?: PositionSchema;
+    /** 自定义节点位置 */
+    customPosition?: (params: {
+        nodeType: string;
+        selectPosition: PositionSchema;
+    }) => PositionSchema;
+    /** 是否可以添加节点 */
+    canAddNode?: (params: {
+        nodeType: string;
+        containerNode?: WorkflowNodeEntity;
+    }) => boolean;
+    /** 创建节点后 */
+    afterAddNode?: (node?: WorkflowNodeEntity) => void;
+    /** 是否创建线条 */
+    enableBuildLine?: boolean;
+    /** 是否使用选中位置作为节点位置 */
+    enableSelectPosition?: boolean;
+    /** 是否偏移后续节点 */
+    enableAutoOffset?: boolean;
+    /** 是否触发节点拖拽 */
+    enableDragNode?: boolean;
+    /** 是否可以添加多个节点 */
+    enableMultiAdd?: boolean;
+}
+type NodePanelResult = {
+    nodeType: string;
+    nodeJSON?: WorkflowNodeJSON;
+    selectEvent: React.MouseEvent;
+} | undefined;
+interface CallNodePanelParams {
+    onSelect: (params?: NodePanelResult) => void;
+    position: PositionSchema;
+    onClose: () => void;
+    enableMultiAdd: boolean;
+    panelProps: Record<string, any>;
+    containerNode?: WorkflowNodeEntity;
+}
+type CallNodePanel = (params: CallNodePanelParams) => Promise<void>;
+interface NodePanelRenderProps extends CallNodePanelParams {
+}
+type NodePanelRender = React.FC<NodePanelRenderProps>;
+interface NodePanelLayerOptions {
+    renderer: NodePanelRender;
+}
+interface NodePanelPluginOptions extends NodePanelLayerOptions {
+}
+
+declare const createFreeNodePanelPlugin: _flowgram_ai_core.PluginCreator<NodePanelPluginOptions>;
+
+/**
+ * 添加节点面板服务
+ */
+declare class WorkflowNodePanelService {
+    private readonly document;
+    private readonly dragService;
+    private readonly selectService;
+    private readonly linesManager;
+    private readonly playgroundConfig;
+    private readonly historyService;
+    private readonly toDispose;
+    private callNodePanel;
+    /** 销毁 */
+    dispose(): void;
+    setCallNodePanel(callNodePanel: CallNodePanel): void;
+    /** 唤起节点面板 */
+    call(callParams: NodePanelCallParams): Promise<WorkflowNodeEntity | WorkflowNodeEntity[] | undefined>;
+    /** 添加节点 */
+    private addNode;
+    /** 建立连线 */
+    private buildLine;
+    /** 调整节点坐标 */
+    private adjustNodePosition;
+    private getContainerNode;
+    /** 获取端口矩形 */
+    private getPortBox;
+    /** 后续节点位置偏移 */
+    private subPositionOffset;
+    /** 矩形间距 */
+    private rectDistance;
+    /** 获取后续节点 */
+    private getSubsequentNodes;
+    /** 更新后续节点位置 */
+    private updateSubSequentNodesPosition;
+}
+
+export { type NodePanelPluginOptions, type NodePanelRender, type NodePanelRenderProps, type NodePanelResult, type NodePanelLayerOptions as NodePanelServiceOptions, WorkflowNodePanelService, createFreeNodePanelPlugin };

package/dist/index.js

@@ -0,0 +1,541 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  WorkflowNodePanelService: () => WorkflowNodePanelService,
+  createFreeNodePanelPlugin: () => createFreeNodePanelPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/create-plugin.ts
+var import_core4 = require("@flowgram.ai/core");
+
+// src/service.ts
+var import_inversify = require("inversify");
+var import_utils = require("@flowgram.ai/utils");
+var import_free_layout_core = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
+var import_free_history_plugin = require("@flowgram.ai/free-history-plugin");
+var import_document = require("@flowgram.ai/document");
+var import_document2 = require("@flowgram.ai/document");
+var import_core = require("@flowgram.ai/core");
+var import_core2 = require("@flowgram.ai/core");
+
+// src/utils.ts
+var isGreaterThan = (a, b) => {
+  if (a === void 0 || b === void 0) {
+    return false;
+  }
+  const EPSILON = 1e-5;
+  return a - b > EPSILON;
+};
+var isLessThan = (a, b) => {
+  if (a === void 0 || b === void 0) {
+    return false;
+  }
+  const EPSILON = 1e-5;
+  return b - a > EPSILON;
+};
+
+// src/service.ts
+var WorkflowNodePanelService = class {
+  constructor() {
+    this.toDispose = new import_utils.DisposableCollection();
+    this.callNodePanel = async () => void 0;
+  }
+  /** 销毁 */
+  dispose() {
+    this.toDispose.dispose();
+  }
+  setCallNodePanel(callNodePanel) {
+    this.callNodePanel = callNodePanel;
+  }
+  /** 唤起节点面板 */
+  async call(callParams) {
+    const {
+      panelPosition,
+      fromPort,
+      enableMultiAdd = false,
+      panelProps = {},
+      containerNode,
+      afterAddNode
+    } = callParams;
+    if (!panelPosition || this.playgroundConfig.readonly) {
+      return;
+    }
+    const nodes = [];
+    return new Promise((resolve) => {
+      this.callNodePanel({
+        position: panelPosition,
+        enableMultiAdd,
+        panelProps,
+        containerNode: this.getContainerNode({
+          fromPort,
+          containerNode
+        }),
+        onSelect: async (panelParams) => {
+          const node = await this.addNode(callParams, panelParams);
+          afterAddNode?.(node);
+          if (!enableMultiAdd) {
+            resolve(node);
+          } else if (node) {
+            nodes.push(node);
+          }
+        },
+        onClose: () => {
+          resolve(enableMultiAdd ? nodes : void 0);
+        }
+      });
+    });
+  }
+  /** 添加节点 */
+  async addNode(callParams, panelParams) {
+    const {
+      panelPosition,
+      fromPort,
+      toPort,
+      canAddNode,
+      autoOffsetPadding = {
+        x: 100,
+        y: 100
+      },
+      enableBuildLine = false,
+      enableSelectPosition = false,
+      enableAutoOffset = false,
+      enableDragNode = false
+    } = callParams;
+    if (!panelPosition || !panelParams) {
+      return;
+    }
+    const { nodeType, selectEvent, nodeJSON } = panelParams;
+    const containerNode = this.getContainerNode({
+      fromPort,
+      containerNode: callParams.containerNode
+    });
+    if (canAddNode) {
+      const canAdd = canAddNode({ nodeType, containerNode });
+      if (!canAdd) {
+        return;
+      }
+    }
+    const selectPosition = this.playgroundConfig.getPosFromMouseEvent(selectEvent);
+    const nodePosition = callParams.customPosition ? callParams.customPosition({ nodeType, selectPosition }) : this.adjustNodePosition({
+      nodeType,
+      position: enableSelectPosition ? selectPosition : panelPosition,
+      fromPort,
+      toPort,
+      containerNode
+    });
+    const node = await this.document.createWorkflowNodeByType(
+      nodeType,
+      nodePosition,
+      nodeJSON ?? {},
+      containerNode?.id
+    );
+    if (!node) {
+      return;
+    }
+    if (enableAutoOffset && fromPort && toPort) {
+      const subOffset = this.subPositionOffset({
+        node,
+        fromPort,
+        toPort,
+        padding: autoOffsetPadding
+      });
+      const subsequentNodes = this.getSubsequentNodes(toPort.node);
+      this.updateSubSequentNodesPosition({
+        node,
+        subsequentNodes,
+        fromPort,
+        toPort,
+        containerNode,
+        offset: subOffset
+      });
+    }
+    if (!enableBuildLine && !enableDragNode) {
+      return node;
+    }
+    await (0, import_utils.delay)(20);
+    if (enableBuildLine) {
+      this.buildLine({
+        fromPort,
+        node,
+        toPort
+      });
+    }
+    if (enableDragNode) {
+      this.selectService.selectNode(node);
+      this.dragService.startDragSelectedNodes(selectEvent);
+    }
+    return node;
+  }
+  /** 建立连线 */
+  buildLine(params) {
+    const { fromPort, node, toPort } = params;
+    const portsData = node.getData(import_free_layout_core.WorkflowNodePortsData);
+    if (!portsData) {
+      return;
+    }
+    const shouldBuildFromLine = portsData.inputPorts?.length > 0;
+    if (fromPort && shouldBuildFromLine) {
+      const toTargetPort = portsData.inputPorts[0];
+      const isSingleInput = portsData.inputPorts.length === 1;
+      this.linesManager.createLine({
+        from: fromPort.node.id,
+        fromPort: fromPort.portID,
+        to: node.id,
+        toPort: isSingleInput ? void 0 : toTargetPort.id
+      });
+    }
+    const shouldBuildToLine = portsData.outputPorts?.length > 0;
+    if (toPort && shouldBuildToLine) {
+      const fromTargetPort = portsData.outputPorts[0];
+      this.linesManager.createLine({
+        from: node.id,
+        fromPort: fromTargetPort.portID,
+        to: toPort.node.id,
+        toPort: toPort.portID
+      });
+    }
+  }
+  /** 调整节点坐标 */
+  adjustNodePosition(params) {
+    const { nodeType, position, fromPort, toPort, containerNode } = params;
+    const register = this.document.getNodeRegistry(nodeType);
+    const size = register?.meta?.size;
+    let adjustedPosition = position;
+    if (!size) {
+      adjustedPosition = position;
+    } else if (fromPort && toPort) {
+      adjustedPosition = {
+        x: position.x,
+        y: position.y - size.height / 2
+      };
+    } else if (fromPort && !toPort) {
+      adjustedPosition = {
+        x: position.x + size.width / 2,
+        y: position.y - size.height / 2
+      };
+    } else if (!fromPort && toPort) {
+      adjustedPosition = {
+        x: position.x - size.width / 2,
+        y: position.y - size.height / 2
+      };
+    } else {
+      adjustedPosition = position;
+    }
+    return this.dragService.adjustSubNodePosition(nodeType, containerNode, adjustedPosition);
+  }
+  getContainerNode(params) {
+    const { fromPort, containerNode } = params;
+    if (containerNode) {
+      return containerNode;
+    }
+    const fromNode = fromPort?.node;
+    const fromContainer = fromNode?.parent;
+    if (fromNode?.flowNodeType === import_document2.FlowNodeBaseType.SUB_CANVAS) {
+      return fromNode;
+    }
+    return fromContainer;
+  }
+  /** 获取端口矩形 */
+  getPortBox(port, offset = { x: 0, y: 0 }) {
+    const node = port.node;
+    if (node.flowNodeType === import_document2.FlowNodeBaseType.SUB_CANVAS) {
+      const { point } = port;
+      if (port.portType === "input") {
+        return new import_utils.Rectangle(point.x + offset.x, point.y - 50 + offset.y, 300, 100);
+      }
+      return new import_utils.Rectangle(point.x - 300, point.y - 50, 300, 100);
+    }
+    const box = node.getData(import_document.FlowNodeTransformData).bounds;
+    return box;
+  }
+  /** 后续节点位置偏移 */
+  subPositionOffset(params) {
+    const { node, fromPort, toPort, padding } = params;
+    const fromBox = this.getPortBox(fromPort);
+    const toBox = this.getPortBox(toPort);
+    const nodeTrans = node.getData(import_document.FlowNodeTransformData);
+    const nodeSize = node.getNodeMeta()?.size ?? {
+      width: nodeTrans.bounds.width,
+      height: nodeTrans.bounds.height
+    };
+    const minDistance = {
+      x: nodeSize.width + padding.x,
+      y: nodeSize.height + padding.y
+    };
+    const boxDistance = this.rectDistance(fromBox, toBox);
+    const neededOffset = {
+      x: isGreaterThan(boxDistance.x, minDistance.x) ? 0 : minDistance.x - boxDistance.x,
+      y: isGreaterThan(boxDistance.y, minDistance.y) ? 0 : minDistance.y - boxDistance.y
+    };
+    if (neededOffset.x === 0 || neededOffset.y === 0) {
+      return;
+    }
+    const intersection = {
+      // 这里没有写反，Rectangle内置的算法是反的
+      vertical: import_utils.Rectangle.intersects(fromBox, toBox, "horizontal"),
+      horizontal: import_utils.Rectangle.intersects(fromBox, toBox, "vertical")
+    };
+    let offsetX = 0;
+    let offsetY = 0;
+    if (!intersection.horizontal) {
+      if (isGreaterThan(toBox.center.y, fromBox.center.y)) {
+        offsetY = neededOffset.y;
+      } else if (isLessThan(toBox.center.y, fromBox.center.y)) {
+        offsetY = -neededOffset.y;
+      }
+    }
+    if (!intersection.vertical) {
+      if (isGreaterThan(toBox.center.x, fromBox.center.x)) {
+        offsetX = neededOffset.x;
+      } else if (isLessThan(toBox.center.x, fromBox.center.x)) {
+        offsetX = -neededOffset.x;
+      }
+    }
+    return {
+      x: offsetX,
+      y: offsetY
+    };
+  }
+  /** 矩形间距 */
+  rectDistance(rectA, rectB) {
+    const distanceX = Math.abs(
+      Math.min(rectA.right, rectB.right) - Math.max(rectA.left, rectB.left)
+    );
+    const distanceY = Math.abs(
+      Math.min(rectA.bottom, rectB.bottom) - Math.max(rectA.top, rectB.top)
+    );
+    if (import_utils.Rectangle.intersects(rectA, rectB)) {
+      return {
+        x: -distanceX,
+        y: -distanceY
+      };
+    }
+    return {
+      x: distanceX,
+      y: distanceY
+    };
+  }
+  /** 获取后续节点 */
+  getSubsequentNodes(node) {
+    if (node.flowNodeType === import_document2.FlowNodeBaseType.SUB_CANVAS) {
+      return [];
+    }
+    const brothers = node.parent?.collapsedChildren ?? [];
+    const linkedBrothers = /* @__PURE__ */ new Set();
+    const linesMap = /* @__PURE__ */ new Map();
+    this.linesManager.getAllLines().forEach((line) => {
+      if (!linesMap.has(line.from.id)) {
+        linesMap.set(line.from.id, []);
+      }
+      if (!line.to?.id || line.to.flowNodeType === import_document2.FlowNodeBaseType.SUB_CANVAS) {
+        return;
+      }
+      linesMap.get(line.from.id)?.push(line.to.id);
+    });
+    const bfs = (nodeId) => {
+      if (linkedBrothers.has(nodeId)) {
+        return;
+      }
+      linkedBrothers.add(nodeId);
+      const nextNodes = linesMap.get(nodeId) ?? [];
+      nextNodes.forEach(bfs);
+    };
+    bfs(node.id);
+    const subsequentNodes = brothers.filter((node2) => linkedBrothers.has(node2.id));
+    return subsequentNodes;
+  }
+  /** 更新后续节点位置 */
+  updateSubSequentNodesPosition(params) {
+    const { node, subsequentNodes, fromPort, toPort, containerNode, offset } = params;
+    if (!offset || !toPort) {
+      return;
+    }
+    const subsequentNodesPositions = subsequentNodes.map((node2) => {
+      const nodeTrans2 = node2.getData(import_core2.TransformData);
+      return {
+        x: nodeTrans2.position.x,
+        y: nodeTrans2.position.y
+      };
+    });
+    this.historyService.pushOperation({
+      type: import_free_history_plugin.FreeOperationType.dragNodes,
+      value: {
+        ids: subsequentNodes.map((node2) => node2.id),
+        value: subsequentNodesPositions.map((position) => ({
+          x: position.x + offset.x,
+          y: position.y + offset.y
+        })),
+        oldValue: subsequentNodesPositions
+      }
+    });
+    const fromBox = this.getPortBox(fromPort);
+    const toBox = this.getPortBox(toPort, offset);
+    const nodeTrans = node.getData(import_core2.TransformData);
+    let nodePos = {
+      x: (fromBox.center.x + toBox.center.x) / 2,
+      y: (fromBox.y + toBox.y) / 2
+    };
+    if (containerNode) {
+      nodePos = this.dragService.adjustSubNodePosition(
+        node.flowNodeType,
+        containerNode,
+        nodePos
+      );
+    }
+    this.historyService.pushOperation({
+      type: import_free_history_plugin.FreeOperationType.dragNodes,
+      value: {
+        ids: [node.id],
+        value: [nodePos],
+        oldValue: [
+          {
+            x: nodeTrans.position.x,
+            y: nodeTrans.position.y
+          }
+        ]
+      }
+    });
+  }
+};
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowDocument)
+], WorkflowNodePanelService.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowDragService)
+], WorkflowNodePanelService.prototype, "dragService", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core2.WorkflowSelectService)
+], WorkflowNodePanelService.prototype, "selectService", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowLinesManager)
+], WorkflowNodePanelService.prototype, "linesManager", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_core.PlaygroundConfigEntity)
+], WorkflowNodePanelService.prototype, "playgroundConfig", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_history_plugin.HistoryService)
+], WorkflowNodePanelService.prototype, "historyService", 2);
+WorkflowNodePanelService = __decorateClass([
+  (0, import_inversify.injectable)()
+], WorkflowNodePanelService);
+
+// src/layer.tsx
+var import_react = __toESM(require("react"));
+var import_inversify2 = require("inversify");
+var import_core3 = require("@flowgram.ai/core");
+var import_free_layout_core3 = require("@flowgram.ai/free-layout-core");
+var import_utils3 = require("@flowgram.ai/utils");
+var WorkflowNodePanelLayer = class extends import_core3.Layer {
+  constructor() {
+    super();
+    this.node = import_utils3.domUtils.createDivWithClass("gedit-playground-layer gedit-node-panel-layer");
+    this.node.style.zIndex = "9999";
+    this.renderList = /* @__PURE__ */ new Map();
+  }
+  onReady() {
+    this.service.setCallNodePanel(this.call.bind(this));
+  }
+  onZoom(zoom) {
+    this.node.style.transform = `scale(${zoom})`;
+  }
+  render() {
+    const NodePanelRender = this.options.renderer;
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, Array.from(this.renderList.keys()).map((taskId) => {
+      const renderProps = this.renderList.get(taskId);
+      return /* @__PURE__ */ import_react.default.createElement(NodePanelRender, { key: taskId, ...renderProps });
+    }));
+  }
+  async call(params) {
+    const taskId = (0, import_free_layout_core3.nanoid)();
+    const { enableMultiAdd, onSelect, onClose } = params;
+    return new Promise((resolve) => {
+      const unmount = () => {
+        this.renderList.delete(taskId);
+        this.render();
+        resolve();
+      };
+      const handleClose = () => {
+        unmount();
+        onClose();
+      };
+      const handleSelect = (params2) => {
+        onSelect(params2);
+        if (!enableMultiAdd) {
+          unmount();
+        }
+      };
+      const renderProps = {
+        ...params,
+        onSelect: handleSelect,
+        onClose: handleClose
+      };
+      this.renderList.set(taskId, renderProps);
+      this.render();
+    });
+  }
+};
+WorkflowNodePanelLayer.type = "WorkflowNodePanelLayer";
+__decorateClass([
+  (0, import_inversify2.inject)(WorkflowNodePanelService)
+], WorkflowNodePanelLayer.prototype, "service", 2);
+
+// src/create-plugin.ts
+var createFreeNodePanelPlugin = (0, import_core4.definePluginCreator)({
+  onBind({ bind }) {
+    bind(WorkflowNodePanelService).toSelf().inSingletonScope();
+  },
+  onInit: (ctx, opts) => {
+    ctx.playground.registerLayer(WorkflowNodePanelLayer, {
+      renderer: opts.renderer
+    });
+  },
+  onDispose: (ctx) => {
+    const nodePanelService = ctx.get(WorkflowNodePanelService);
+    nodePanelService.dispose();
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WorkflowNodePanelService,
+  createFreeNodePanelPlugin
+});
+//# sourceMappingURL=index.js.map