feat: add WorkflowLineAddButton and WorkflowLineNodePanel components for enhanced workflow editing

2026-06-28 20:22:18 +08:00
parent 47660c9f1d
commit eaffca5bad
5 changed files with 203 additions and 0 deletions
@@ -8,6 +8,8 @@ import {
  type WorkflowNodeEntity,
  type WorkflowJSON,
 } from "@flowgram.ai/free-layout-editor"
+import { createFreeLinesPlugin } from "@flowgram.ai/free-lines-plugin"
+import { createFreeNodePanelPlugin } from "@flowgram.ai/free-node-panel-plugin"
 import { createFreeSnapPlugin } from "@flowgram.ai/free-snap-plugin"
 import { createMinimapPlugin } from "@flowgram.ai/minimap-plugin"

@@ -15,6 +17,8 @@ import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"

 import { FlowgramNodeRenderer } from "./flowgram-node-renderer"
 import { buildFlowgramNodeRegistries } from "./flowgram-node-registries"
+import { WorkflowLineAddButton } from "./workflow-line-add-button"
+import { WorkflowLineNodePanel } from "./workflow-line-node-panel"
 import {
  normalizeConditionPortsForFlowgram,
  syncConditionBranchTargetsFromEdges,
@@ -84,6 +88,17 @@ export function useFlowgramEditorProps({
          }
        },
        plugins: () => [
+          createFreeLinesPlugin({
+            renderInsideLine: WorkflowLineAddButton,
+          }),
+          createFreeNodePanelPlugin({
+            renderer: (props) => (
+              <WorkflowLineNodePanel
+                {...props}
+                nodeSpecs={nodeSpecs}
+              />
+            ),
+          }),
          createMinimapPlugin({
            disableLayer: true,
          }),
@@ -0,0 +1,68 @@
+"use client"
+
+import { useCallback } from "react"
+
+import type { LineRenderProps } from "@flowgram.ai/free-lines-plugin"
+import { WorkflowNodePanelService } from "@flowgram.ai/free-node-panel-plugin"
+import { PlusIcon } from "lucide-react"
+import { usePlayground, useService } from "@flowgram.ai/free-layout-editor"
+
+export function WorkflowLineAddButton({
+  line,
+  selected,
+  hovered,
+  color,
+}: LineRenderProps) {
+  const playground = usePlayground()
+  const nodePanelService = useService<WorkflowNodePanelService>(WorkflowNodePanelService)
+  const { fromPort, toPort } = line
+  const visible = !line.disposed && !playground.config.readonly && (selected || hovered)
+
+  const openNodePanel = useCallback(() => {
+    if (!fromPort || !toPort) {
+      return
+    }
+    void nodePanelService.call({
+      panelPosition: {
+        x: line.center.labelX,
+        y: line.center.labelY,
+      },
+      fromPort,
+      toPort,
+      panelProps: {
+        fromPort,
+      },
+      enableBuildLine: true,
+      enableAutoOffset: true,
+      afterAddNode: (node) => {
+        if (node && !line.disposed) {
+          line.dispose()
+        }
+      },
+    })
+  }, [fromPort, line, nodePanelService, toPort])
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <button
+      type="button"
+      className="absolute flex size-6 items-center justify-center rounded-full border border-white bg-white text-[#2575FC] shadow-sm transition-transform hover:scale-105"
+      style={{
+        transform: `translate(-50%, -50%) translate(${line.center.labelX}px, ${line.center.labelY}px)`,
+        color,
+        pointerEvents: "all",
+      }}
+      aria-label="添加节点"
+      data-line-id={line.id}
+      onClick={(event) => {
+        event.stopPropagation()
+        openNodePanel()
+      }}
+    >
+      <PlusIcon className="size-3.5" strokeWidth={2.4} />
+    </button>
+  )
+}
@@ -0,0 +1,94 @@
+"use client"
+
+import { useEffect, useMemo, useRef } from "react"
+
+import type { NodePanelRenderProps } from "@flowgram.ai/free-node-panel-plugin"
+import { useClientContext } from "@flowgram.ai/free-layout-editor"
+
+import type { AIWorkflowDefinition, AIWorkflowNodeSpec } from "@/lib/api/admin"
+import { WorkflowNodeIcon } from "./workflow-node-icon"
+import { createWorkflowNodeFromSpec } from "./workflow-utils"
+
+export function WorkflowLineNodePanel({
+  position,
+  onSelect,
+  onClose,
+  nodeSpecs,
+}: NodePanelRenderProps & {
+  nodeSpecs: AIWorkflowNodeSpec[]
+}) {
+  const context = useClientContext()
+  const panelRef = useRef<HTMLDivElement>(null)
+  const insertableNodeSpecs = useMemo(
+    () => nodeSpecs.filter((spec) => spec.type !== "start" && spec.type !== "end"),
+    [nodeSpecs]
+  )
+
+  useEffect(() => {
+    const closeOnPointerDown = (event: PointerEvent) => {
+      const target = event.target
+      if (target instanceof Node && panelRef.current?.contains(target)) {
+        return
+      }
+      onClose()
+    }
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        onClose()
+      }
+    }
+    window.addEventListener("pointerdown", closeOnPointerDown)
+    window.addEventListener("keydown", closeOnEscape)
+    return () => {
+      window.removeEventListener("pointerdown", closeOnPointerDown)
+      window.removeEventListener("keydown", closeOnEscape)
+    }
+  }, [onClose])
+
+  return (
+    <div
+      ref={panelRef}
+      className="absolute z-[9999] w-60 overflow-hidden rounded-lg border border-slate-200 bg-white py-1.5 shadow-[0_14px_35px_rgba(15,23,42,0.16)]"
+      style={{
+        left: position.x + 16,
+        top: position.y - 8,
+      }}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <div className="border-b border-slate-100 px-3 pb-2 pt-1 text-xs font-medium text-slate-500">
+        插入节点
+      </div>
+      <div className="max-h-80 overflow-y-auto p-1.5">
+        {insertableNodeSpecs.map((spec) => (
+          <button
+            key={spec.type}
+            type="button"
+            className="flex w-full items-start gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors hover:bg-slate-50"
+            onClick={(event) => {
+              event.stopPropagation()
+              const definition = context.document.toJSON() as AIWorkflowDefinition
+              const nodeJSON = createWorkflowNodeFromSpec(spec, definition.nodes ?? [], position)
+              onSelect({
+                nodeType: spec.type,
+                nodeJSON,
+                selectEvent: event,
+              })
+            }}
+          >
+            <WorkflowNodeIcon icon={spec.icon} size="sm" className="mt-0.5" />
+            <span className="min-w-0">
+              <span className="block truncate font-medium text-slate-900">
+                {spec.title || spec.type}
+              </span>
+              {spec.description ? (
+                <span className="line-clamp-2 text-xs text-slate-500">
+                  {spec.description}
+                </span>
+              ) : null}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}