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

package/dist/esm/index.js

@@ -0,0 +1,614 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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/create-plugin.ts
+import { definePluginCreator } from "@flowgram.ai/core";
+
+// src/service.ts
+import { inject, injectable } from "inversify";
+import { DisposableCollection } from "@flowgram.ai/utils";
+import {
+  WorkflowDocument,
+  WorkflowDragService,
+  WorkflowLinesManager as WorkflowLinesManager2
+} from "@flowgram.ai/free-layout-core";
+import { WorkflowSelectService } from "@flowgram.ai/free-layout-core";
+import { HistoryService as HistoryService2 } from "@flowgram.ai/free-history-plugin";
+import { PlaygroundConfigEntity } from "@flowgram.ai/core";
+
+// src/utils/wait-node-render.ts
+import { delay } from "@flowgram.ai/free-layout-core";
+var waitNodeRender = async () => {
+  await delay(20);
+};
+
+// src/utils/update-sub-nodes-position.ts
+import { FreeOperationType } from "@flowgram.ai/free-history-plugin";
+import { TransformData } from "@flowgram.ai/core";
+
+// src/utils/get-port-box.ts
+import { Rectangle } from "@flowgram.ai/utils";
+import { FlowNodeTransformData } from "@flowgram.ai/document";
+
+// src/utils/is-container.ts
+var isContainer = (node) => node?.getNodeMeta().isContainer ?? false;
+
+// src/utils/get-port-box.ts
+var getPortBox = (port, offset = { x: 0, y: 0 }) => {
+  const node = port.node;
+  if (isContainer(node)) {
+    const { point } = port;
+    if (port.portType === "input") {
+      return new Rectangle(point.x + offset.x, point.y - 50 + offset.y, 300, 100);
+    }
+    return new Rectangle(point.x - 300, point.y - 50, 300, 100);
+  }
+  const box = node.getData(FlowNodeTransformData).bounds;
+  return box;
+};
+
+// src/utils/update-sub-nodes-position.ts
+var updateSubSequentNodesPosition = (params) => {
+  const {
+    node,
+    subsequentNodes,
+    fromPort,
+    toPort,
+    containerNode,
+    offset,
+    historyService,
+    dragService
+  } = params;
+  if (!offset || !toPort) {
+    return;
+  }
+  const subsequentNodesPositions = subsequentNodes.map((node2) => {
+    const nodeTrans2 = node2.getData(TransformData);
+    return {
+      x: nodeTrans2.position.x,
+      y: nodeTrans2.position.y
+    };
+  });
+  historyService.pushOperation({
+    type: 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 = getPortBox(fromPort);
+  const toBox = getPortBox(toPort, offset);
+  const nodeTrans = node.getData(TransformData);
+  let nodePos = {
+    x: (fromBox.center.x + toBox.center.x) / 2,
+    y: (fromBox.y + toBox.y) / 2
+  };
+  if (containerNode) {
+    nodePos = dragService.adjustSubNodePosition(
+      node.flowNodeType,
+      containerNode,
+      nodePos
+    );
+  }
+  historyService.pushOperation({
+    type: FreeOperationType.dragNodes,
+    value: {
+      ids: [node.id],
+      value: [nodePos],
+      oldValue: [
+        {
+          x: nodeTrans.position.x,
+          y: nodeTrans.position.y
+        }
+      ]
+    }
+  });
+};
+
+// src/utils/sub-position-offset.ts
+import { Rectangle as Rectangle3 } from "@flowgram.ai/utils";
+import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/document";
+
+// src/utils/rect-distance.ts
+import { Rectangle as Rectangle2 } from "@flowgram.ai/utils";
+var 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 (Rectangle2.intersects(rectA, rectB)) {
+    return {
+      x: -distanceX,
+      y: -distanceY
+    };
+  }
+  return {
+    x: distanceX,
+    y: distanceY
+  };
+};
+
+// src/utils/greater-or-less.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/utils/sub-position-offset.ts
+var subPositionOffset = (params) => {
+  const { node, fromPort, toPort, padding } = params;
+  const fromBox = getPortBox(fromPort);
+  const toBox = getPortBox(toPort);
+  const nodeTrans = node.getData(FlowNodeTransformData2);
+  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 = 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: Rectangle3.intersects(fromBox, toBox, "horizontal"),
+    horizontal: Rectangle3.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
+  };
+};
+
+// src/utils/get-sub-nodes.ts
+var getSubsequentNodes = (params) => {
+  const { node, linesManager } = params;
+  if (isContainer(node)) {
+    return [];
+  }
+  const brothers = node.parent?.blocks ?? [];
+  const linkedBrothers = /* @__PURE__ */ new Set();
+  const linesMap = /* @__PURE__ */ new Map();
+  linesManager.getAllLines().forEach((line) => {
+    if (!linesMap.has(line.from.id)) {
+      linesMap.set(line.from.id, []);
+    }
+    if (!line.to?.id || isContainer(line.to)) {
+      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;
+};
+
+// src/utils/sub-nodes-auto-offset.ts
+var subNodesAutoOffset = (params) => {
+  const {
+    node,
+    fromPort,
+    toPort,
+    linesManager,
+    historyService,
+    dragService,
+    containerNode,
+    padding = {
+      x: 100,
+      y: 100
+    }
+  } = params;
+  const subOffset = subPositionOffset({
+    node,
+    fromPort,
+    toPort,
+    padding
+  });
+  const subsequentNodes = getSubsequentNodes({
+    node: toPort.node,
+    linesManager
+  });
+  updateSubSequentNodesPosition({
+    node,
+    subsequentNodes,
+    fromPort,
+    toPort,
+    containerNode,
+    offset: subOffset,
+    historyService,
+    dragService
+  });
+};
+
+// src/utils/get-container-node.ts
+var getContainerNode = (params) => {
+  const { fromPort, containerNode } = params;
+  if (containerNode) {
+    return containerNode;
+  }
+  const fromNode = fromPort?.node;
+  const fromContainer = fromNode?.parent;
+  if (isContainer(fromNode)) {
+    return fromNode;
+  }
+  return fromContainer;
+};
+
+// src/utils/build-line.ts
+import {
+  WorkflowNodePortsData
+} from "@flowgram.ai/free-layout-core";
+var buildLine = (params) => {
+  const { fromPort, node, toPort, linesManager } = params;
+  const portsData = node.getData(WorkflowNodePortsData);
+  if (!portsData) {
+    return;
+  }
+  const shouldBuildFromLine = portsData.inputPorts?.length > 0;
+  if (fromPort && shouldBuildFromLine) {
+    const toTargetPort = portsData.inputPorts[0];
+    linesManager.createLine({
+      from: fromPort.node.id,
+      fromPort: fromPort.portID,
+      to: node.id,
+      toPort: toTargetPort.portID
+    });
+  }
+  const shouldBuildToLine = portsData.outputPorts?.length > 0;
+  if (toPort && shouldBuildToLine) {
+    const fromTargetPort = portsData.outputPorts[0];
+    linesManager.createLine({
+      from: node.id,
+      fromPort: fromTargetPort.portID,
+      to: toPort.node.id,
+      toPort: toPort.portID
+    });
+  }
+};
+
+// src/utils/adjust-node-position.ts
+var adjustNodePosition = (params) => {
+  const { nodeType, position, fromPort, toPort, containerNode, document, dragService } = params;
+  const register = 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 dragService.adjustSubNodePosition(nodeType, containerNode, adjustedPosition);
+};
+
+// src/utils/index.ts
+var WorkflowNodePanelUtils = {
+  adjustNodePosition,
+  buildLine,
+  getPortBox,
+  getSubsequentNodes,
+  getContainerNode,
+  rectDistance,
+  subNodesAutoOffset,
+  subPositionOffset,
+  updateSubSequentNodesPosition,
+  waitNodeRender
+};
+
+// src/service.ts
+var WorkflowNodePanelService = class {
+  constructor() {
+    this.toDispose = new 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: WorkflowNodePanelUtils.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 singleSelectNodePanel(params) {
+    return new Promise((resolve) => {
+      this.callNodePanel({
+        ...params,
+        enableMultiAdd: false,
+        onSelect: async (panelParams) => {
+          resolve(panelParams);
+        },
+        onClose: () => {
+          resolve(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 = WorkflowNodePanelUtils.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 }) : WorkflowNodePanelUtils.adjustNodePosition({
+      nodeType,
+      position: enableSelectPosition ? selectPosition : panelPosition,
+      fromPort,
+      toPort,
+      containerNode,
+      document: this.document,
+      dragService: this.dragService
+    });
+    const node = this.document.createWorkflowNodeByType(
+      nodeType,
+      nodePosition,
+      nodeJSON ?? {},
+      containerNode?.id
+    );
+    if (!node) {
+      return;
+    }
+    if (enableAutoOffset && fromPort && toPort) {
+      WorkflowNodePanelUtils.subNodesAutoOffset({
+        node,
+        fromPort,
+        toPort,
+        padding: autoOffsetPadding,
+        containerNode,
+        historyService: this.historyService,
+        dragService: this.dragService,
+        linesManager: this.linesManager
+      });
+    }
+    if (!enableBuildLine && !enableDragNode) {
+      return node;
+    }
+    await WorkflowNodePanelUtils.waitNodeRender();
+    if (enableBuildLine) {
+      WorkflowNodePanelUtils.buildLine({
+        fromPort,
+        node,
+        toPort,
+        linesManager: this.linesManager
+      });
+    }
+    if (enableDragNode) {
+      this.selectService.selectNode(node);
+      this.dragService.startDragSelectedNodes(selectEvent);
+    }
+    return node;
+  }
+};
+__decorateClass([
+  inject(WorkflowDocument)
+], WorkflowNodePanelService.prototype, "document", 2);
+__decorateClass([
+  inject(WorkflowDragService)
+], WorkflowNodePanelService.prototype, "dragService", 2);
+__decorateClass([
+  inject(WorkflowSelectService)
+], WorkflowNodePanelService.prototype, "selectService", 2);
+__decorateClass([
+  inject(WorkflowLinesManager2)
+], WorkflowNodePanelService.prototype, "linesManager", 2);
+__decorateClass([
+  inject(PlaygroundConfigEntity)
+], WorkflowNodePanelService.prototype, "playgroundConfig", 2);
+__decorateClass([
+  inject(HistoryService2)
+], WorkflowNodePanelService.prototype, "historyService", 2);
+WorkflowNodePanelService = __decorateClass([
+  injectable()
+], WorkflowNodePanelService);
+
+// src/layer.tsx
+import React from "react";
+import { inject as inject2 } from "inversify";
+import { domUtils } from "@flowgram.ai/utils";
+import { nanoid } from "@flowgram.ai/free-layout-core";
+import { Layer } from "@flowgram.ai/core";
+var WorkflowNodePanelLayer = class extends Layer {
+  constructor() {
+    super();
+    this.node = 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__ */ React.createElement(React.Fragment, null, Array.from(this.renderList.keys()).map((taskId) => {
+      const renderProps = this.renderList.get(taskId);
+      return /* @__PURE__ */ React.createElement(NodePanelRender, { key: taskId, ...renderProps });
+    }));
+  }
+  async call(params) {
+    const taskId = nanoid();
+    const { onSelect, onClose, enableMultiAdd = false, panelProps = {} } = 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,
+        panelProps,
+        onSelect: handleSelect,
+        onClose: handleClose
+      };
+      this.renderList.set(taskId, renderProps);
+      this.render();
+    });
+  }
+};
+WorkflowNodePanelLayer.type = "WorkflowNodePanelLayer";
+__decorateClass([
+  inject2(WorkflowNodePanelService)
+], WorkflowNodePanelLayer.prototype, "service", 2);
+
+// src/create-plugin.ts
+var createFreeNodePanelPlugin = 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();
+  }
+});
+export {
+  WorkflowNodePanelService,
+  WorkflowNodePanelUtils,
+  createFreeNodePanelPlugin
+};
+//# sourceMappingURL=index.js.map