diff --git a/frontend/components/flow/node-context-menu.tsx b/frontend/components/flow/node-context-menu.tsx
new file mode 100644
index 0000000..131ff08
--- /dev/null
+++ b/frontend/components/flow/node-context-menu.tsx
@@ -0,0 +1,198 @@
+import { primitiveRuntimeCapability, runtimeStatusLabel, runtimeStatusTone, type WorkflowCapabilitiesResponse } from "@/lib/workflow/capabilities"
+import { localizeNodeText, type WorkflowLanguage } from "@/lib/workflow/node-i18n"
+import type { WorkflowNodeCatalogItem } from "@/lib/workflow/node-catalog"
+import type { WorkflowPrimitive } from "@/lib/workflow/node-primitives"
+import { getNodeVisualSignature } from "@/lib/workflow/node-visuals"
+import { cn } from "@/lib/utils"
+
+type NodeMenuState = { nodeId: string; x: number; y: number }
+type PrimitiveMenuGroup = {
+ category: string
+ label: string
+ items: WorkflowPrimitive[]
+}
+
+type NodeContextMenuProps = {
+ capabilities: WorkflowCapabilitiesResponse | null | undefined
+ dopNodeMenuItems: WorkflowNodeCatalogItem[]
+ language: WorkflowLanguage
+ menu: NodeMenuState
+ onAddDopNode: (item: WorkflowNodeCatalogItem) => void
+ onAddPrimitive: (item: WorkflowPrimitive, itemIndex: number) => void
+ onDiveIntoNetwork: (nodeId: string) => void
+ onLockInternals: (nodeId: string) => void
+ onSelectComponent: (nodeId: string) => void
+ onShowNodeInfo: () => void
+ onShowParameters: () => void
+ onUnlockInternals: (nodeId: string) => void
+ primitiveMenuGroups: PrimitiveMenuGroup[]
+ wrapperElement: HTMLElement | null
+}
+
+export function NodeContextMenu({
+ capabilities,
+ dopNodeMenuItems,
+ language,
+ menu,
+ onAddDopNode,
+ onAddPrimitive,
+ onDiveIntoNetwork,
+ onLockInternals,
+ onSelectComponent,
+ onShowNodeInfo,
+ onShowParameters,
+ onUnlockInternals,
+ primitiveMenuGroups,
+ wrapperElement,
+}: NodeContextMenuProps) {
+ return (
+
event.stopPropagation()}
+ onClick={(event) => event.stopPropagation()}
+ >
+
+
+
+ DOP Operators
+
+
+ {dopNodeMenuItems.map((item) => {
+ const text = localizeNodeText(item.id, { label: item.label, description: item.description }, language)
+ const visual = getNodeVisualSignature({
+ label: item.label,
+ description: item.description,
+ nodeType: item.kind === "router" ? "condition" : item.kind === "schedule" ? "trigger" : item.kind === "source" ? "http" : "action",
+ category: item.category === "decision" ? "logic" : item.category === "trigger" ? "trigger" : item.category === "source" ? "data" : item.category === "output" ? "action" : "action",
+ icon: item.icon,
+ canonical: { catalogId: item.id, kind: item.kind, capability: item.capability },
+ })
+ return (
+
+ )
+ })}
+
+
+
+ Add Internal Primitive
+ ›
+
+
+ {primitiveMenuGroups.map((group) => (
+
+
+ {group.label}
+ ›
+
+
+ {group.items.map((item, itemIndex) => {
+ const text = localizeNodeText(item.id, { label: item.label, description: item.description }, language)
+ const runtimeCapability = primitiveRuntimeCapability(capabilities, item.id)
+ const visual = getNodeVisualSignature({
+ label: item.label,
+ description: item.description,
+ nodeType: item.nodeType,
+ category: item.nodeCategory,
+ icon: item.icon,
+ primitiveId: item.id,
+ primitiveCategory: item.category,
+ })
+ return (
+
+ )
+ })}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
Help...
+
+ )
+}
diff --git a/frontend/components/flow/workflow-agent-proposal.ts b/frontend/components/flow/workflow-agent-proposal.ts
new file mode 100644
index 0000000..53e1825
--- /dev/null
+++ b/frontend/components/flow/workflow-agent-proposal.ts
@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useState, type Dispatch, type SetStateAction } from "react"
+
+import { useFlowStore } from "@/lib/flow/store"
+import { acceptAgentProposal, type AgentProposal } from "@/lib/workflow/proposal"
+import type { ProposalFocusTarget } from "@/lib/workflow/proposal-focus"
+
+type FitView = (options?: { padding?: number; duration?: number; nodes?: { id: string }[] }) => unknown
+
+export function useWorkflowAgentProposal(options: {
+ clearPendingAgentProposal: () => void
+ clearProposalFocus: () => void
+ fitView: FitView
+ focusProposalTargets: (nodeIds: string[], edgeIds: string[]) => void
+ importWorkflowProject: (project: ReturnType
) => void
+ pendingAgentProposal: AgentProposal | null | undefined
+ setAgentDrawerOpen: Dispatch>
+ showToast: (message: string) => void
+}) {
+ const {
+ clearPendingAgentProposal,
+ clearProposalFocus,
+ fitView,
+ focusProposalTargets,
+ importWorkflowProject,
+ pendingAgentProposal,
+ setAgentDrawerOpen,
+ showToast,
+ } = options
+ const [agentProposal, setAgentProposal] = useState(undefined)
+
+ const acceptProposal = useCallback(
+ (proposal: AgentProposal) => {
+ try {
+ importWorkflowProject(acceptAgentProposal(useFlowStore.getState().workflowProject, proposal))
+ showToast("Agent proposal accepted")
+ setAgentDrawerOpen(false)
+ setAgentProposal(undefined)
+ } catch (error) {
+ showToast(error instanceof Error ? error.message : "Agent proposal failed")
+ }
+ },
+ [importWorkflowProject, setAgentDrawerOpen, showToast],
+ )
+
+ const rejectProposal = useCallback(() => {
+ showToast("Agent proposal rejected")
+ clearProposalFocus()
+ setAgentDrawerOpen(false)
+ setAgentProposal(undefined)
+ }, [clearProposalFocus, setAgentDrawerOpen, showToast])
+
+ const presentAgentProposal = useCallback(
+ (proposal: AgentProposal) => {
+ setAgentProposal(proposal)
+ setAgentDrawerOpen(true)
+ showToast("Demand proposal ready")
+ },
+ [setAgentDrawerOpen, showToast],
+ )
+
+ useEffect(() => {
+ if (!pendingAgentProposal) return
+ presentAgentProposal(pendingAgentProposal)
+ clearPendingAgentProposal()
+ }, [clearPendingAgentProposal, pendingAgentProposal, presentAgentProposal])
+
+ const focusProposalOperation = useCallback(
+ (focus: ProposalFocusTarget) => {
+ focusProposalTargets(focus.nodeIds, focus.edgeIds)
+ if (focus.nodeIds.length > 0) {
+ window.setTimeout(() => void fitView({ nodes: focus.nodeIds.map((id) => ({ id })), padding: 0.35, duration: 280 }), 20)
+ }
+ },
+ [fitView, focusProposalTargets],
+ )
+
+ return { acceptProposal, agentProposal, focusProposalOperation, rejectProposal }
+}
diff --git a/frontend/components/flow/workflow-canvas-geometry.ts b/frontend/components/flow/workflow-canvas-geometry.ts
new file mode 100644
index 0000000..8b38b4e
--- /dev/null
+++ b/frontend/components/flow/workflow-canvas-geometry.ts
@@ -0,0 +1,39 @@
+import type { MouseEvent as ReactMouseEvent } from "react"
+
+export type CanvasPoint = { x: number; y: number }
+
+function distance(a: CanvasPoint, b: CanvasPoint) {
+ return Math.hypot(a.x - b.x, a.y - b.y)
+}
+
+export function edgeIdsAtScreenPoint(point: CanvasPoint, threshold = 10): string[] {
+ const hits: string[] = []
+ const edges = document.querySelectorAll(".react-flow__edge[data-id]")
+
+ edges.forEach((edge) => {
+ const id = edge.dataset.id
+ const path = edge.querySelector("path.react-flow__edge-path, path[id]")
+ if (!id || !path) return
+ const ctm = path.getScreenCTM()
+ if (!ctm) return
+
+ const total = path.getTotalLength()
+ const steps = Math.max(16, Math.ceil(total / 18))
+ for (let i = 0; i <= steps; i++) {
+ const svgPoint = path.getPointAtLength((total * i) / steps)
+ const screenPoint = new DOMPoint(svgPoint.x, svgPoint.y).matrixTransform(ctm)
+ if (distance(point, screenPoint) <= threshold) {
+ hits.push(id)
+ return
+ }
+ }
+ })
+
+ return hits
+}
+
+export function localPoint(element: HTMLElement | null, event: ReactMouseEvent): CanvasPoint {
+ const rect = element?.getBoundingClientRect()
+ if (!rect) return { x: event.clientX, y: event.clientY }
+ return { x: event.clientX - rect.left, y: event.clientY - rect.top }
+}
diff --git a/frontend/components/flow/workflow-canvas-interactions.ts b/frontend/components/flow/workflow-canvas-interactions.ts
new file mode 100644
index 0000000..d6378c5
--- /dev/null
+++ b/frontend/components/flow/workflow-canvas-interactions.ts
@@ -0,0 +1,254 @@
+import {
+ useCallback,
+ type Dispatch,
+ type DragEvent,
+ type MouseEvent as ReactMouseEvent,
+ type RefObject,
+ type SetStateAction,
+} from "react"
+import type { IsValidConnection, Node, OnBeforeDelete, OnNodeDrag } from "@xyflow/react"
+
+import { useFlowStore } from "@/lib/flow/store"
+import type { CanvasSettings } from "@/lib/flow/settings-store"
+import { validateConnection } from "@/lib/flow/graph"
+import type { PaletteItem, WorkflowEdge, WorkflowNode } from "@/lib/flow/types"
+import { edgeIdsAtScreenPoint, localPoint, type CanvasPoint } from "./workflow-canvas-geometry"
+
+type WritableRef = { current: T }
+type ScreenToFlowPosition = (position: CanvasPoint) => CanvasPoint
+type ShowToast = (message: string) => void
+
+export type ShakeState = {
+ lastX: number
+ lastDirection: -1 | 0 | 1
+ turns: number
+ disconnected: boolean
+}
+
+export function usePaletteDrop(options: {
+ addNodeFromPalette: (item: PaletteItem, position: CanvasPoint) => void
+ screenToFlowPosition: ScreenToFlowPosition
+}) {
+ const { addNodeFromPalette, screenToFlowPosition } = options
+ const onDragOver = useCallback((event: DragEvent) => {
+ event.preventDefault()
+ event.dataTransfer.dropEffect = "move"
+ }, [])
+
+ const onDrop = useCallback(
+ (event: DragEvent) => {
+ event.preventDefault()
+ const raw = event.dataTransfer.getData("application/reactflow")
+ if (!raw) return
+ addNodeFromPalette(JSON.parse(raw) as PaletteItem, screenToFlowPosition({ x: event.clientX, y: event.clientY }))
+ },
+ [screenToFlowPosition, addNodeFromPalette],
+ )
+
+ return { onDragOver, onDrop }
+}
+
+export function useScissorCanvasHandlers(options: {
+ cutRef: WritableRef>
+ draggingRef: WritableRef
+ removeEdgesByIds: (ids: string[]) => number
+ setTrail: Dispatch>
+ showToast: ShowToast
+ toolMode: string
+ wrapperRef: RefObject
+}) {
+ const { cutRef, draggingRef, removeEdgesByIds, setTrail, showToast, toolMode, wrapperRef } = options
+ const cutEdgesAtPoint = useCallback(
+ (event: ReactMouseEvent) => {
+ const hits = edgeIdsAtScreenPoint({ x: event.clientX, y: event.clientY })
+ const fresh = hits.filter((id) => !cutRef.current.has(id))
+ if (fresh.length === 0) return
+ fresh.forEach((id) => cutRef.current.add(id))
+ const removed = removeEdgesByIds(fresh)
+ if (removed > 0) showToast(`已剪断 ${removed} 条连接`)
+ },
+ [cutRef, removeEdgesByIds, showToast],
+ )
+
+ const onCanvasMouseDownCapture = useCallback(
+ (event: ReactMouseEvent) => {
+ if (toolMode !== "scissors" || event.button !== 0) return
+ event.preventDefault()
+ event.stopPropagation()
+ draggingRef.current = true
+ cutRef.current = new Set()
+ setTrail([localPoint(wrapperRef.current, event)])
+ cutEdgesAtPoint(event)
+ },
+ [cutEdgesAtPoint, cutRef, draggingRef, setTrail, toolMode, wrapperRef],
+ )
+
+ const onCanvasMouseMoveCapture = useCallback(
+ (event: ReactMouseEvent) => {
+ if (!draggingRef.current) return
+ event.preventDefault()
+ event.stopPropagation()
+ setTrail((trail) => {
+ const next = [...trail, localPoint(wrapperRef.current, event)]
+ return next.length > 80 ? next.slice(-80) : next
+ })
+ cutEdgesAtPoint(event)
+ },
+ [cutEdgesAtPoint, draggingRef, setTrail, wrapperRef],
+ )
+
+ const onCanvasMouseUpCapture = useCallback(
+ (event: ReactMouseEvent) => {
+ if (!draggingRef.current) return
+ event.preventDefault()
+ event.stopPropagation()
+ draggingRef.current = false
+ cutRef.current = new Set()
+ window.setTimeout(() => setTrail([]), 120)
+ },
+ [cutRef, draggingRef, setTrail],
+ )
+
+ return { onCanvasMouseDownCapture, onCanvasMouseMoveCapture, onCanvasMouseUpCapture }
+}
+
+export function useWorkflowNodeDragHandlers(options: {
+ attachToParent: (nodeId: string, parentId: string) => void
+ clearHelperLines: () => void
+ detachFromParent: (nodeId: string) => void
+ disconnectNodeConnections: (nodeId: string) => number
+ getInternalNode: (nodeId: string) => { internals?: { positionAbsolute?: CanvasPoint } } | undefined
+ resizeGroupToFit: (nodeId: string) => void
+ resolveNodeCollisions: (nodeId: string) => void
+ shakeRef: WritableRef>
+ showToast: ShowToast
+}) {
+ const {
+ attachToParent,
+ clearHelperLines,
+ detachFromParent,
+ disconnectNodeConnections,
+ getInternalNode,
+ resizeGroupToFit,
+ resolveNodeCollisions,
+ shakeRef,
+ showToast,
+ } = options
+
+ const onNodeDrag: OnNodeDrag = useCallback(
+ (_event, node) => {
+ const current = shakeRef.current.get(node.id) ?? {
+ lastX: node.position.x,
+ lastDirection: 0,
+ turns: 0,
+ disconnected: false,
+ }
+ const delta = node.position.x - current.lastX
+ if (Math.abs(delta) < 14) {
+ shakeRef.current.set(node.id, { ...current, lastX: node.position.x })
+ return
+ }
+ const direction = delta > 0 ? 1 : -1
+ const turns = current.lastDirection !== 0 && current.lastDirection !== direction ? current.turns + 1 : current.turns
+ const next = { lastX: node.position.x, lastDirection: direction as -1 | 1, turns, disconnected: current.disconnected }
+ if (!next.disconnected && turns >= 4) {
+ const removed = disconnectNodeConnections(node.id)
+ if (removed > 0) {
+ next.disconnected = true
+ showToast(`已断开 ${removed} 条连接`)
+ }
+ }
+ shakeRef.current.set(node.id, next)
+ },
+ [disconnectNodeConnections, shakeRef, showToast],
+ )
+
+ const onNodeDragStop = useCallback(
+ (_event: unknown, node: Node) => {
+ clearHelperLines()
+ shakeRef.current.delete(node.id)
+ if (node.type === "group") {
+ resizeGroupToFit(node.id)
+ return
+ }
+
+ const internal = getInternalNode(node.id)
+ const abs = internal?.internals?.positionAbsolute ?? node.position
+ const width = node.measured?.width ?? 240
+ const height = node.measured?.height ?? 96
+ const center = { x: abs.x + width / 2, y: abs.y + height / 2 }
+ const workflowNode = node as WorkflowNode
+ const targetGroup = useFlowStore.getState().nodes.find((candidate) => {
+ if (candidate.type !== "group" || candidate.data.collapsed || candidate.id === node.id) return false
+ const groupWidth = (candidate.width as number) ?? candidate.measured?.width ?? 320
+ const groupHeight = (candidate.height as number) ?? candidate.measured?.height ?? 220
+ return center.x >= candidate.position.x && center.x <= candidate.position.x + groupWidth && center.y >= candidate.position.y && center.y <= candidate.position.y + groupHeight
+ })
+
+ if (targetGroup && workflowNode.parentId !== targetGroup.id) attachToParent(node.id, targetGroup.id)
+ else if (!targetGroup && workflowNode.parentId) detachFromParent(node.id)
+ else if (targetGroup && workflowNode.parentId === targetGroup.id) resizeGroupToFit(targetGroup.id)
+ resolveNodeCollisions(node.id)
+ },
+ [attachToParent, clearHelperLines, detachFromParent, getInternalNode, resizeGroupToFit, resolveNodeCollisions, shakeRef],
+ )
+
+ return { onNodeDrag, onNodeDragStop }
+}
+
+export function useConnectionGuards(options: {
+ settings: Pick
+ showToast: ShowToast
+}) {
+ const { settings, showToast } = options
+ const isValidConnection: IsValidConnection = useCallback(
+ (connection) => {
+ const res = validateConnection(useFlowStore.getState().edges, {
+ source: connection.source,
+ target: connection.target,
+ sourceHandle: connection.sourceHandle ?? null,
+ targetHandle: connection.targetHandle ?? null,
+ }, {
+ preventCycles: settings.preventCycles,
+ maxSourceConnections: settings.maxSourceConnections,
+ maxTargetConnections: settings.maxTargetConnections,
+ typedHandles: settings.typedHandles,
+ nodes: useFlowStore.getState().nodes,
+ })
+ if (res.ok) return true
+ showToast(res.reason)
+ return false
+ },
+ [settings.maxSourceConnections, settings.maxTargetConnections, settings.preventCycles, settings.typedHandles, showToast],
+ )
+
+ const onBeforeDelete: OnBeforeDelete = useCallback(
+ async ({ nodes, edges }) => {
+ if (!settings.confirmDelete) return { nodes, edges }
+ const count = nodes.length + edges.length
+ if (count === 0) return false
+ return window.confirm(`确认删除 ${nodes.length} 个节点 / ${edges.length} 条连线？`) ? { nodes, edges } : false
+ },
+ [settings.confirmDelete],
+ )
+
+ return { isValidConnection, onBeforeDelete }
+}
+
+export function useCanvasViewportCompaction(options: {
+ compactViewport: boolean
+ nodes: WorkflowNode[]
+ setViewport: (viewport: { x: number; y: number; zoom: number }, options?: { duration?: number }) => void
+}) {
+ const { compactViewport, nodes, setViewport } = options
+ const applyCompactViewport = useCallback(() => {
+ if (!compactViewport || nodes.length === 0) return undefined
+ const leftMost = Math.min(...nodes.map((node) => node.position.x))
+ const topMost = Math.min(...nodes.map((node) => node.position.y))
+ const zoom = 0.62
+ return window.setTimeout(() => {
+ setViewport({ x: 18 - leftMost * zoom, y: 220 - topMost * zoom, zoom }, { duration: 0 })
+ }, 120)
+ }, [compactViewport, nodes, setViewport])
+ return applyCompactViewport
+}
diff --git a/frontend/components/flow/workflow-canvas-surface.tsx b/frontend/components/flow/workflow-canvas-surface.tsx
new file mode 100644
index 0000000..48685df
--- /dev/null
+++ b/frontend/components/flow/workflow-canvas-surface.tsx
@@ -0,0 +1,361 @@
+"use client"
+
+import { useEffect, type DragEvent, type MouseEvent as ReactMouseEvent, type RefObject } from "react"
+import {
+ Background,
+ BackgroundVariant,
+ Controls,
+ MiniMap,
+ ReactFlow,
+ SelectionMode,
+ useStore,
+ type IsValidConnection,
+ type NodeMouseHandler,
+ type OnBeforeDelete,
+ type OnConnect,
+ type OnEdgesChange,
+ type OnNodeDrag,
+ type OnNodesChange,
+} from "@xyflow/react"
+
+import type { CanvasSettings } from "@/lib/flow/settings-store"
+import type { FlowState } from "@/lib/flow/store"
+import type { ToolMode, WorkflowEdge, WorkflowNode } from "@/lib/flow/types"
+import type { WorkflowCapabilitiesResponse } from "@/lib/workflow/capabilities"
+import type { WorkflowNodeCatalogItem } from "@/lib/workflow/node-catalog"
+import type { WorkflowPrimitive } from "@/lib/workflow/node-primitives"
+import type { AgentProposal } from "@/lib/workflow/proposal"
+import type { ProposalFocusTarget } from "@/lib/workflow/proposal-focus"
+import { cn } from "@/lib/utils"
+import { AgentDrawer } from "./agent-drawer"
+import { Collaboration } from "./collaboration"
+import { DrawingLayer } from "./drawing-layer"
+import EditableEdge from "./edges/editable-edge"
+import RoutedEdge from "./edges/routed-edge"
+import WorkflowEdge_ from "./edges/workflow-edge"
+import { HelperLinesRenderer } from "./helper-lines-renderer"
+import { NodeContextMenu } from "./node-context-menu"
+import GroupNode from "./nodes/group-node"
+import MathNode from "./nodes/math-node"
+import NoteNode from "./nodes/note-node"
+import ShapeNode from "./nodes/shape-node"
+import WorkflowNodeComp from "./nodes/workflow-node"
+import type { NodeMenuState } from "./workflow-node-menu-actions"
+import {
+ NetworkBreadcrumb,
+ ScissorTrailOverlay,
+ WorkflowFloatingPanels,
+ WorkflowToast,
+} from "./workflow-editor-overlays"
+import { WorkflowMotionRuntime } from "./workflow-motion-runtime"
+import type { CanvasPoint } from "./workflow-canvas-geometry"
+
+const nodeTypes = {
+ workflow: WorkflowNodeComp,
+ note: NoteNode,
+ group: GroupNode,
+ shape: ShapeNode,
+ math: MathNode,
+}
+
+const edgeTypes = {
+ workflow: WorkflowEdge_,
+ editable: EditableEdge,
+ routed: RoutedEdge,
+}
+
+type PrimitiveMenuGroup = {
+ category: string
+ label: string
+ items: WorkflowPrimitive[]
+}
+
+type WorkflowCanvasSurfaceProps = {
+ acceptProposal: (proposal: AgentProposal) => void
+ addDopNodeFromMenu: (item: WorkflowNodeCatalogItem) => void
+ addPrimitiveFromMenu: (item: WorkflowPrimitive, itemIndex: number) => void
+ agentDrawerOpen: boolean
+ agentProposal: AgentProposal | undefined
+ capabilities: WorkflowCapabilitiesResponse | null | undefined
+ compactViewport: boolean
+ diveIntoNetwork: (nodeId: string) => void
+ dopNodeMenuItems: WorkflowNodeCatalogItem[]
+ edges: WorkflowEdge[]
+ exitCurrentNetwork: () => void
+ focusProposalOperation: (focus: ProposalFocusTarget) => void
+ helperLines: FlowState["helperLines"]
+ inspectorOpen: boolean
+ isDraw: boolean
+ isScissors: boolean
+ isValidConnection: IsValidConnection
+ lockInternals: (nodeId: string) => void
+ networkLocked: boolean
+ networkStack: FlowState["networkStack"]
+ nodeManagementOpen: boolean
+ nodeMenu: NodeMenuState | null
+ nodes: WorkflowNode[]
+ onBeforeDelete: OnBeforeDelete
+ onCanvasMouseDownCapture: (event: ReactMouseEvent) => void
+ onCanvasMouseMoveCapture: (event: ReactMouseEvent) => void
+ onCanvasMouseUpCapture: (event: ReactMouseEvent) => void
+ onConnect: OnConnect
+ onDragOver: (event: DragEvent) => void
+ onDrop: (event: DragEvent) => void
+ onEdgesChange: OnEdgesChange
+ onMouseMove: (event: ReactMouseEvent) => void
+ onNodeContextMenu: NodeMouseHandler
+ onNodeDoubleClick: NodeMouseHandler
+ onNodeDrag: OnNodeDrag
+ onNodeDragStop: OnNodeDrag
+ onNodesChange: OnNodesChange
+ onProfileChange: FlowState["updateWorkflowProfile"]
+ primitiveMenuGroups: PrimitiveMenuGroup[]
+ projectSettingsOpen: boolean
+ rejectProposal: () => void
+ runTraceOpen: boolean
+ scissorTrail: CanvasPoint[]
+ selectComponentFromMenu: (nodeId: string) => void
+ setAgentDrawerOpen: (open: boolean) => void
+ setNodeManagementOpen: (open: boolean) => void
+ settings: CanvasSettings
+ settingsOpen: boolean
+ showNodeInfo: () => void
+ showParameters: () => void
+ takeSnapshot: () => void
+ toast: string | null
+ toolMode: ToolMode
+ unlockInternals: (nodeId: string) => void
+ workflowProfile: FlowState["workflowProject"]["profile"]
+ wrapperRef: RefObject
+ zoom: number
+ setZoom: (zoom: number) => void
+}
+
+function minimapNodeColor(node: { selected?: boolean }) {
+ return node.selected ? "#e8e8e6" : "#3a3d42"
+}
+
+function zoomBucket(zoom: number) {
+ if (zoom < 0.5) return "low"
+ if (zoom > 1.4) return "high"
+ return "mid"
+}
+
+function panOnDragValue(settings: CanvasSettings, interactionLocked: boolean) {
+ return settings.panOnDrag && !interactionLocked ? [1, 2] : false
+}
+
+function flowInteractionProps(settings: CanvasSettings, interactionLocked: boolean) {
+ if (settings.touchMode) {
+ return { panOnDrag: [1, 2] as number[], panOnScroll: true, selectionOnDrag: false }
+ }
+ return {
+ panOnDrag: panOnDragValue(settings, interactionLocked),
+ panOnScroll: settings.panOnScroll && !interactionLocked,
+ selectionOnDrag: settings.selectionOnDrag && !interactionLocked,
+ }
+}
+
+/** Live zoom bridge so nodes can render at different detail levels. */
+function ZoomProvider({ onZoom }: { onZoom: (z: number) => void }) {
+ const zoom = useStore((s) => s.transform[2])
+ useEffect(() => {
+ onZoom(zoom)
+ }, [zoom, onZoom])
+ return null
+}
+
+function OptionalBackground({ visible }: { visible: boolean }) {
+ if (!visible) return null
+ return
+}
+
+function OptionalControls({ visible }: { visible: boolean }) {
+ if (!visible) return null
+ return
+}
+
+function OptionalMiniMap({ visible }: { visible: boolean }) {
+ if (!visible) return null
+ return (
+
+ )
+}
+
+function NodeMenuOverlay({
+ addDopNodeFromMenu,
+ addPrimitiveFromMenu,
+ capabilities,
+ diveIntoNetwork,
+ dopNodeMenuItems,
+ lockInternals,
+ menu,
+ primitiveMenuGroups,
+ selectComponentFromMenu,
+ settings,
+ showNodeInfo,
+ showParameters,
+ unlockInternals,
+ wrapperElement,
+}: {
+ addDopNodeFromMenu: (item: WorkflowNodeCatalogItem) => void
+ addPrimitiveFromMenu: (item: WorkflowPrimitive, itemIndex: number) => void
+ capabilities: WorkflowCapabilitiesResponse | null | undefined
+ diveIntoNetwork: (nodeId: string) => void
+ dopNodeMenuItems: WorkflowNodeCatalogItem[]
+ lockInternals: (nodeId: string) => void
+ menu: NodeMenuState | null
+ primitiveMenuGroups: PrimitiveMenuGroup[]
+ selectComponentFromMenu: (nodeId: string) => void
+ settings: CanvasSettings
+ showNodeInfo: () => void
+ showParameters: () => void
+ unlockInternals: (nodeId: string) => void
+ wrapperElement: HTMLElement | null
+}) {
+ if (!menu) return null
+ return (
+
+ )
+}
+
+function CanvasLayers({
+ helperLines,
+ settings,
+ setZoom,
+}: {
+ helperLines: FlowState["helperLines"]
+ settings: CanvasSettings
+ setZoom: (zoom: number) => void
+}) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export function WorkflowCanvasSurface(props: WorkflowCanvasSurfaceProps) {
+ const interactionLocked = props.isDraw || props.isScissors
+ const flowInteraction = flowInteractionProps(props.settings, interactionLocked)
+ return (
+
+
+
+
+
+
+
+
+
+
+
props.setNodeManagementOpen(false)}
+ onProfileChange={props.onProfileChange}
+ projectSettingsOpen={props.projectSettingsOpen}
+ runTraceOpen={props.runTraceOpen}
+ settingsOpen={props.settingsOpen}
+ workflowProfile={props.workflowProfile}
+ />
+
+ props.setAgentDrawerOpen(false)}
+ />
+
+
+
+
+ /
+ obj
+ {networkStack.map((entry) => (
+
+ /
+ {entry.label}
+
+ ))}
+
+ {locked ? "LOCKED" : "DRAFT"}
+
+ Esc / Backspace
+
+ )
+}
+
+export function WorkflowFloatingPanels({
+ inspectorOpen,
+ nodeManagementOpen,
+ onCloseNodeManagement,
+ onProfileChange,
+ projectSettingsOpen,
+ runTraceOpen,
+ settingsOpen,
+ workflowProfile,
+}: {
+ inspectorOpen: boolean
+ nodeManagementOpen: boolean
+ onCloseNodeManagement: () => void
+ onProfileChange: (profile: WorkflowProfile) => void
+ projectSettingsOpen: boolean
+ runTraceOpen: boolean
+ settingsOpen: boolean
+ workflowProfile: WorkflowProfile
+}) {
+ return (
+ <>
+ {runTraceOpen ? (
+
+
+
+ ) : null}
+
+ {nodeManagementOpen ? : null}
+
+ {projectSettingsOpen ? (
+
+ ) : settingsOpen ? (
+
+
+
+ ) : inspectorOpen ? (
+
+
+
+ ) : null}
+
+ )
+}
+
+export function WorkflowToast({ message }: { message: string | null }) {
+ if (!message) return null
+ return (
+
+ {message}
+
+ )
+}
diff --git a/frontend/components/flow/workflow-editor-selectors.ts b/frontend/components/flow/workflow-editor-selectors.ts
new file mode 100644
index 0000000..abed9de
--- /dev/null
+++ b/frontend/components/flow/workflow-editor-selectors.ts
@@ -0,0 +1,49 @@
+import type { FlowState } from "@/lib/flow/store"
+
+export function selectEditorCanvasState(state: FlowState) {
+ return {
+ addNodeFromPalette: state.addNodeFromPalette,
+ addPrimitiveNode: state.addPrimitiveNode,
+ addWorkflowNodeFromCatalog: state.addWorkflowNodeFromCatalog,
+ applyWorkflowCapabilities: state.applyWorkflowCapabilities,
+ attachToParent: state.attachToParent,
+ autoLayout: state.autoLayout,
+ clearHelperLines: state.clearHelperLines,
+ clearPendingAgentProposal: state.clearPendingAgentProposal,
+ clearProposalFocus: state.clearProposalFocus,
+ copy: state.copy,
+ cut: state.cut,
+ deleteSelected: state.deleteSelected,
+ detachFromParent: state.detachFromParent,
+ disconnectNodeConnections: state.disconnectNodeConnections,
+ duplicate: state.duplicateSelected,
+ edges: state.edges,
+ enterNodeNetwork: state.enterNodeNetwork,
+ exitNodeNetwork: state.exitNodeNetwork,
+ focusProposalTargets: state.focusProposalTargets,
+ groupSelection: state.groupSelection,
+ helperLines: state.helperLines,
+ importWorkflowProject: state.importWorkflowProject,
+ lockNodeInternals: state.lockNodeInternals,
+ networkStack: state.networkStack,
+ nodes: state.nodes,
+ onConnect: state.onConnect,
+ onEdgesChange: state.onEdgesChange,
+ onNodesChange: state.onNodesChange,
+ paste: state.paste,
+ pendingAgentProposal: state.pendingAgentProposal,
+ redo: state.redo,
+ removeEdgesByIds: state.removeEdgesByIds,
+ resizeGroupToFit: state.resizeGroupToFit,
+ resolveNodeCollisions: state.resolveNodeCollisions,
+ save: state.save,
+ selectConnectedComponent: state.selectConnectedComponent,
+ setToolMode: state.setToolMode,
+ takeSnapshot: state.takeSnapshot,
+ toolMode: state.toolMode,
+ undo: state.undo,
+ unlockNodeInternals: state.unlockNodeInternals,
+ updateWorkflowProfile: state.updateWorkflowProfile,
+ workflowProject: state.workflowProject,
+ }
+}
diff --git a/frontend/components/flow/workflow-editor.tsx b/frontend/components/flow/workflow-editor.tsx
index 4d2b608..6d7ed27 100644
--- a/frontend/components/flow/workflow-editor.tsx
+++ b/frontend/components/flow/workflow-editor.tsx
@@ -1,175 +1,94 @@
"use client"
-import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type MouseEvent as ReactMouseEvent } from "react"
-import {
- ReactFlow,
- ReactFlowProvider,
- Background,
- BackgroundVariant,
- Controls,
- MiniMap,
- SelectionMode,
- useReactFlow,
- useStore,
- type IsValidConnection,
- type Node,
- type OnBeforeDelete,
- type OnNodeDrag,
-} from "@xyflow/react"
+import { useCallback, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent } from "react"
+import { ReactFlowProvider, useReactFlow, type NodeMouseHandler } from "@xyflow/react"
import "@xyflow/react/dist/style.css"
import { useFlowStore } from "@/lib/flow/store"
import { useSettingsStore } from "@/lib/flow/settings-store"
-import { validateConnection } from "@/lib/flow/graph"
-import type { PaletteItem, WorkflowNode, WorkflowEdge, ToolMode } from "@/lib/flow/types"
-import { Inspector } from "./inspector"
+import type { WorkflowNode, WorkflowEdge, ToolMode } from "@/lib/flow/types"
import { CommandStrip } from "./command-strip"
import { CommandPalette } from "./command-palette"
-import { HelperLinesRenderer } from "./helper-lines-renderer"
-import { WorkflowMotionRuntime } from "./workflow-motion-runtime"
-import { DrawingLayer } from "./drawing-layer"
-import { Collaboration } from "./collaboration"
-import WorkflowNodeComp from "./nodes/workflow-node"
-import NoteNode from "./nodes/note-node"
-import GroupNode from "./nodes/group-node"
-import ShapeNode from "./nodes/shape-node"
-import MathNode from "./nodes/math-node"
-import WorkflowEdge_ from "./edges/workflow-edge"
-import EditableEdge from "./edges/editable-edge"
-import RoutedEdge from "./edges/routed-edge"
-import { InteractionSettingsPanel } from "./interaction-settings-panel"
-import { ProjectSettingsPanel } from "./project-settings-panel"
-import { RunTracePanel } from "./run-trace-panel"
-import { AgentDrawer } from "./agent-drawer"
-import { NodeManagementPanel } from "./node-management-panel"
-import { acceptAgentProposal, type AgentProposal } from "@/lib/workflow/proposal"
-import type { ProposalFocusTarget } from "@/lib/workflow/proposal-focus"
-import { getWorkflowNodeCatalog, type WorkflowNodeCatalogItem } from "@/lib/workflow/node-catalog"
-import { getWorkflowPrimitives, type WorkflowPrimitive } from "@/lib/workflow/node-primitives"
+import { getWorkflowNodeCatalog } from "@/lib/workflow/node-catalog"
+import { getWorkflowPrimitives } from "@/lib/workflow/node-primitives"
import { groupPrimitivesForNodeMenu } from "@/lib/workflow/node-menu"
-import { localizeNodeText } from "@/lib/workflow/node-i18n"
-import { getNodeVisualSignature } from "@/lib/workflow/node-visuals"
-import { primitiveRuntimeCapability, runtimeStatusLabel, runtimeStatusTone } from "@/lib/workflow/capabilities"
import { useWorkflowCapabilities } from "@/lib/workflow/use-workflow-capabilities"
-import { loadShareStateFromUrl } from "@/lib/flow/share-state"
-import { cn } from "@/lib/utils"
-
-const nodeTypes = {
- workflow: WorkflowNodeComp,
- note: NoteNode,
- group: GroupNode,
- shape: ShapeNode,
- math: MathNode,
-}
-
-const edgeTypes = {
- workflow: WorkflowEdge_,
- editable: EditableEdge,
- routed: RoutedEdge,
-}
-
-type ShakeState = {
- lastX: number
- lastDirection: -1 | 0 | 1
- turns: number
- disconnected: boolean
-}
-
-function distance(a: { x: number; y: number }, b: { x: number; y: number }) {
- return Math.hypot(a.x - b.x, a.y - b.y)
-}
-
-function edgeIdsAtScreenPoint(point: { x: number; y: number }, threshold = 10): string[] {
- const hits: string[] = []
- const edges = document.querySelectorAll(".react-flow__edge[data-id]")
-
- edges.forEach((edge) => {
- const id = edge.dataset.id
- const path = edge.querySelector("path.react-flow__edge-path, path[id]")
- if (!id || !path) return
- const ctm = path.getScreenCTM()
- if (!ctm) return
-
- const total = path.getTotalLength()
- const steps = Math.max(16, Math.ceil(total / 18))
- for (let i = 0; i <= steps; i++) {
- const svgPoint = path.getPointAtLength((total * i) / steps)
- const screenPoint = new DOMPoint(svgPoint.x, svgPoint.y).matrixTransform(ctm)
- if (distance(point, screenPoint) <= threshold) {
- hits.push(id)
- return
- }
- }
- })
-
- return hits
-}
-
-function localPoint(element: HTMLElement | null, event: ReactMouseEvent) {
- const rect = element?.getBoundingClientRect()
- if (!rect) return { x: event.clientX, y: event.clientY }
- return { x: event.clientX - rect.left, y: event.clientY - rect.top }
-}
-
-function minimapNodeColor(node: { selected?: boolean }) {
- return node.selected ? "#e8e8e6" : "#3a3d42"
-}
-
-/** Live zoom bridge so nodes can render at different detail levels. */
-function ZoomProvider({ onZoom }: { onZoom: (z: number) => void }) {
- const zoom = useStore((s) => s.transform[2])
- useEffect(() => {
- onZoom(zoom)
- }, [zoom, onZoom])
- return null
+import { useWorkflowKeyboardShortcuts } from "./workflow-keyboard-shortcuts"
+import {
+ useCanvasViewportCompaction,
+ useConnectionGuards,
+ usePaletteDrop,
+ useScissorCanvasHandlers,
+ useWorkflowNodeDragHandlers,
+ type ShakeState,
+} from "./workflow-canvas-interactions"
+import { useWorkflowNodeMenuActions, type NodeMenuState } from "./workflow-node-menu-actions"
+import { useWorkflowAgentProposal } from "./workflow-agent-proposal"
+import { selectEditorCanvasState } from "./workflow-editor-selectors"
+import { WorkflowCanvasSurface } from "./workflow-canvas-surface"
+import {
+ isNetworkLocked,
+ useApplyWorkflowCapabilities,
+ useAutoDismissToast,
+ useCompactViewportEffect,
+ useCompactViewportMedia,
+ useDismissNodeMenu,
+ useExitCurrentNetwork,
+ useSharedWorkflowImport,
+} from "./workflow-editor-effects"
+
+function buildPrimitiveMenuGroups() {
+ return groupPrimitivesForNodeMenu(getWorkflowPrimitives())
}
function EditorCanvas() {
- const nodes = useFlowStore((s) => s.nodes)
- const edges = useFlowStore((s) => s.edges)
- const onNodesChange = useFlowStore((s) => s.onNodesChange)
- const onEdgesChange = useFlowStore((s) => s.onEdgesChange)
- const onConnect = useFlowStore((s) => s.onConnect)
- const helperLines = useFlowStore((s) => s.helperLines)
- const takeSnapshot = useFlowStore((s) => s.takeSnapshot)
- const clearHelperLines = useFlowStore((s) => s.clearHelperLines)
- const addNodeFromPalette = useFlowStore((s) => s.addNodeFromPalette)
- const undo = useFlowStore((s) => s.undo)
- const redo = useFlowStore((s) => s.redo)
- const copy = useFlowStore((s) => s.copy)
- const paste = useFlowStore((s) => s.paste)
- const cut = useFlowStore((s) => s.cut)
- const duplicate = useFlowStore((s) => s.duplicateSelected)
- const deleteSelected = useFlowStore((s) => s.deleteSelected)
- const autoLayout = useFlowStore((s) => s.autoLayout)
- const disconnectNodeConnections = useFlowStore((s) => s.disconnectNodeConnections)
- const removeEdgesByIds = useFlowStore((s) => s.removeEdgesByIds)
- const selectConnectedComponent = useFlowStore((s) => s.selectConnectedComponent)
- const unlockNodeInternals = useFlowStore((s) => s.unlockNodeInternals)
- const lockNodeInternals = useFlowStore((s) => s.lockNodeInternals)
- const enterNodeNetwork = useFlowStore((s) => s.enterNodeNetwork)
- const exitNodeNetwork = useFlowStore((s) => s.exitNodeNetwork)
- const networkStack = useFlowStore((s) => s.networkStack)
- const groupSelection = useFlowStore((s) => s.groupSelection)
- const attachToParent = useFlowStore((s) => s.attachToParent)
- const detachFromParent = useFlowStore((s) => s.detachFromParent)
- const resolveNodeCollisions = useFlowStore((s) => s.resolveNodeCollisions)
- const resizeGroupToFit = useFlowStore((s) => s.resizeGroupToFit)
- const toolMode = useFlowStore((s) => s.toolMode)
- const save = useFlowStore((s) => s.save)
- const workflowProject = useFlowStore((s) => s.workflowProject)
- const importWorkflowProject = useFlowStore((s) => s.importWorkflowProject)
- const applyWorkflowCapabilities = useFlowStore((s) => s.applyWorkflowCapabilities)
- const updateWorkflowProfile = useFlowStore((s) => s.updateWorkflowProfile)
- const focusProposalTargets = useFlowStore((s) => s.focusProposalTargets)
- const clearProposalFocus = useFlowStore((s) => s.clearProposalFocus)
- const pendingAgentProposal = useFlowStore((s) => s.pendingAgentProposal)
- const clearPendingAgentProposal = useFlowStore((s) => s.clearPendingAgentProposal)
- const addWorkflowNodeFromCatalog = useFlowStore((s) => s.addWorkflowNodeFromCatalog)
- const addPrimitiveNode = useFlowStore((s) => s.addPrimitiveNode)
+ const {
+ addNodeFromPalette,
+ addPrimitiveNode,
+ addWorkflowNodeFromCatalog,
+ applyWorkflowCapabilities,
+ attachToParent,
+ autoLayout,
+ clearHelperLines,
+ clearPendingAgentProposal,
+ clearProposalFocus,
+ copy,
+ cut,
+ deleteSelected,
+ detachFromParent,
+ disconnectNodeConnections,
+ duplicate,
+ edges,
+ enterNodeNetwork,
+ exitNodeNetwork,
+ focusProposalTargets,
+ groupSelection,
+ helperLines,
+ importWorkflowProject,
+ lockNodeInternals,
+ networkStack,
+ nodes,
+ onConnect,
+ onEdgesChange,
+ onNodesChange,
+ paste,
+ pendingAgentProposal,
+ redo,
+ removeEdgesByIds,
+ resizeGroupToFit,
+ resolveNodeCollisions,
+ save,
+ selectConnectedComponent,
+ setToolMode,
+ takeSnapshot,
+ toolMode,
+ undo,
+ unlockNodeInternals,
+ updateWorkflowProfile,
+ workflowProject,
+ } = useFlowStore(selectEditorCanvasState)
const settings = useSettingsStore()
- const setToolMode = useFlowStore((s) => s.setToolMode)
const { screenToFlowPosition, getInternalNode, setViewport, fitView } = useReactFlow()
const wrapperRef = useRef(null)
@@ -186,532 +105,142 @@ function EditorCanvas() {
const [projectSettingsOpen, setProjectSettingsOpen] = useState(false)
const [runTraceOpen, setRunTraceOpen] = useState(false)
const [agentDrawerOpen, setAgentDrawerOpen] = useState(false)
- const [agentProposal, setAgentProposal] = useState(undefined)
const [nodeManagementOpen, setNodeManagementOpen] = useState(false)
const [zoom, setZoom] = useState(1)
const [compactViewport, setCompactViewport] = useState(false)
- const [nodeMenu, setNodeMenu] = useState<{ nodeId: string; x: number; y: number } | null>(null)
+ const [nodeMenu, setNodeMenu] = useState(null)
const { capabilities } = useWorkflowCapabilities(true)
const dopNodeMenuItems = useMemo(
() => getWorkflowNodeCatalog(workflowProject.profile, capabilities),
[workflowProject.profile, capabilities],
)
- const primitiveMenuGroups = useMemo(() => groupPrimitivesForNodeMenu(getWorkflowPrimitives()), [])
+ const [primitiveMenuGroups] = useState(buildPrimitiveMenuGroups)
const showToast = useCallback((msg: string) => setToast(msg), [])
+ const setMiniMapVisible = useCallback((visible: boolean) => settings.set("showMiniMap", visible), [settings])
- useEffect(() => {
- if (capabilities) applyWorkflowCapabilities(capabilities)
- }, [applyWorkflowCapabilities, capabilities, workflowProject.id])
-
- useEffect(() => {
- if (typeof window === "undefined") return
- const shared = loadShareStateFromUrl(window.location.href)
- if (!shared) return
- useFlowStore.setState({
- workflowProject: shared.workflowProject,
- nodes: shared.nodes,
- edges: shared.edges,
- drawings: shared.drawings ?? [],
- networkStack: [],
- helperLines: { snapPosition: {} },
- })
- showToast("已从分享 URL 恢复 workflow")
- window.setTimeout(() => void fitView({ padding: 0.24, duration: 220 }), 30)
- }, [fitView, showToast])
-
- useEffect(() => {
- if (!toast) return
- const t = setTimeout(() => setToast(null), 2200)
- return () => clearTimeout(t)
- }, [toast])
+ useApplyWorkflowCapabilities({ applyWorkflowCapabilities, capabilities, workflowProjectId: workflowProject.id })
+ useSharedWorkflowImport({ fitView, showToast })
+ useAutoDismissToast(toast, setToast)
+ useDismissNodeMenu(nodeMenu, setNodeMenu)
+ useCompactViewportMedia(setCompactViewport)
+ const applyCompactViewport = useCanvasViewportCompaction({ compactViewport, nodes, setViewport })
+ useCompactViewportEffect(applyCompactViewport)
- useEffect(() => {
- if (!nodeMenu) return
- const close = () => setNodeMenu(null)
- window.addEventListener("click", close)
- window.addEventListener("keydown", close)
- return () => {
- window.removeEventListener("click", close)
- window.removeEventListener("keydown", close)
- }
- }, [nodeMenu])
-
- useEffect(() => {
- const media = window.matchMedia("(max-width: 640px)")
- const update = () => setCompactViewport(media.matches)
- update()
- media.addEventListener("change", update)
- return () => media.removeEventListener("change", update)
- }, [])
-
- useEffect(() => {
- if (!compactViewport || nodes.length === 0) return
- const leftMost = Math.min(...nodes.map((node) => node.position.x))
- const topMost = Math.min(...nodes.map((node) => node.position.y))
- const zoom = 0.62
- const timer = window.setTimeout(() => {
- setViewport({ x: 18 - leftMost * zoom, y: 220 - topMost * zoom, zoom }, { duration: 0 })
- }, 120)
- return () => window.clearTimeout(timer)
- }, [compactViewport, nodes.length, setViewport])
-
- useEffect(() => {
- const isEditableTarget = (target: EventTarget | null) => {
- const element = target as HTMLElement | null
- if (!element) return false
- return element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.isContentEditable
- }
-
- const onKeyDown = (e: KeyboardEvent) => {
- const mod = e.metaKey || e.ctrlKey
- if (mod && e.key.toLowerCase() === "k") {
- e.preventDefault()
- setPaletteOpen((o) => !o)
- return
- }
- if (isEditableTarget(e.target)) return
-
- if (e.key === "Tab" || e.key.toLowerCase() === "b") {
- if (!mod) {
- e.preventDefault()
- setPaletteOpen(true)
- return
- }
- }
- if (mod && e.key.toLowerCase() === "s") {
- e.preventDefault()
- save()
- showToast("已保存到本地")
- } else if (mod && e.key.toLowerCase() === "z" && !e.shiftKey) {
- e.preventDefault()
- undo()
- } else if (mod && (e.key.toLowerCase() === "y" || (e.key.toLowerCase() === "z" && e.shiftKey))) {
- e.preventDefault()
- redo()
- } else if (mod && e.key.toLowerCase() === "c") {
- copy()
- } else if (mod && e.key.toLowerCase() === "v") {
- e.preventDefault()
- paste(screenToFlowPosition(mousePos.current))
- } else if (mod && e.key.toLowerCase() === "x") {
- cut()
- } else if (mod && e.key.toLowerCase() === "d") {
- e.preventDefault()
- duplicate()
- } else if (mod && e.key.toLowerCase() === "g") {
- e.preventDefault()
- groupSelection()
- } else if (!mod && e.key.toLowerCase() === "o") {
- e.preventDefault()
- const next = !useSettingsStore.getState().showMiniMap
- settings.set("showMiniMap", next)
- showToast(next ? "节点缩略图已显示" : "节点缩略图已隐藏")
- } else if (!mod && e.key.toLowerCase() === "p") {
- e.preventDefault()
- if (settingsOpen || projectSettingsOpen) {
- setSettingsOpen(false)
- setProjectSettingsOpen(false)
- setInspectorOpen(true)
- showToast("Parameter Interface 已显示")
- return
- }
- setInspectorOpen((open) => {
- const next = !open
- showToast(next ? "Parameter Interface 已显示" : "Parameter Interface 已隐藏")
- return next
- })
- } else if (!mod && e.key.toLowerCase() === "h") {
- e.preventDefault()
- if (useFlowStore.getState().nodes.length === 0) return
- void fitView({ padding: 0.24, duration: 220 })
- showToast("已显示全部节点")
- } else if (!mod && e.key.toLowerCase() === "l") {
- e.preventDefault()
- if (useFlowStore.getState().nodes.length === 0) return
- showToast("正在自动排布节点")
- void autoLayout("TB", "elk", true).then(() => {
- showToast("已自动排布整体节点")
- window.setTimeout(() => void fitView({ padding: 0.24, duration: 260 }), 30)
- })
- } else if (!mod && (e.key === "Escape" || e.key === "Backspace") && useFlowStore.getState().networkStack.length > 0) {
- e.preventDefault()
- if (exitNodeNetwork()) {
- showToast("已返回上一层 Network")
- window.setTimeout(() => void fitView({ padding: 0.24, duration: 180 }), 20)
- }
- } else if (!mod && e.key.toLowerCase() === "y") {
- e.preventDefault()
- if (e.repeat) return
- yMomentaryModeRef.current = useFlowStore.getState().toolMode
- setToolMode("scissors")
- } else if (e.key === "Delete" || e.key === "Backspace") {
- deleteSelected()
- }
- }
-
- const onKeyUp = (e: KeyboardEvent) => {
- if (isEditableTarget(e.target)) return
- if (e.metaKey || e.ctrlKey || e.key.toLowerCase() !== "y") return
- if (yMomentaryModeRef.current === null) return
- e.preventDefault()
- const restoreMode = yMomentaryModeRef.current
- yMomentaryModeRef.current = null
- scissorDraggingRef.current = false
- scissorCutRef.current = new Set()
- setScissorTrail([])
- setToolMode(restoreMode)
- }
-
- window.addEventListener("keydown", onKeyDown)
- window.addEventListener("keyup", onKeyUp)
- return () => {
- window.removeEventListener("keydown", onKeyDown)
- window.removeEventListener("keyup", onKeyUp)
- }
- }, [
- undo,
- redo,
+ useWorkflowKeyboardShortcuts({
+ autoLayout,
copy,
- paste,
cut,
- duplicate,
deleteSelected,
- autoLayout,
- groupSelection,
+ duplicate,
+ exitNodeNetwork,
fitView,
- screenToFlowPosition,
+ groupSelection,
+ mousePosRef: mousePos,
+ paste,
+ projectSettingsOpen,
+ redo,
save,
+ screenToFlowPosition,
+ scissorCutRef,
+ scissorDraggingRef,
+ setInspectorOpen,
+ setPaletteOpen,
+ setProjectSettingsOpen,
+ setScissorTrail,
+ setSettingsOpen,
setToolMode,
- settings,
+ setMiniMapVisible,
settingsOpen,
- projectSettingsOpen,
- exitNodeNetwork,
showToast,
- ])
-
- const onDragOver = useCallback((event: DragEvent) => {
- event.preventDefault()
- event.dataTransfer.dropEffect = "move"
- }, [])
-
- const onDrop = useCallback(
- (event: DragEvent) => {
- event.preventDefault()
- const raw = event.dataTransfer.getData("application/reactflow")
- if (!raw) return
- const item = JSON.parse(raw) as PaletteItem
- const position = screenToFlowPosition({ x: event.clientX, y: event.clientY })
- addNodeFromPalette(item, position)
- },
- [screenToFlowPosition, addNodeFromPalette],
- )
-
- const cutEdgesAtPoint = useCallback(
- (event: ReactMouseEvent) => {
- const hits = edgeIdsAtScreenPoint({ x: event.clientX, y: event.clientY })
- const fresh = hits.filter((id) => !scissorCutRef.current.has(id))
- if (fresh.length === 0) return
- fresh.forEach((id) => scissorCutRef.current.add(id))
- const removed = removeEdgesByIds(fresh)
- if (removed > 0) showToast(`已剪断 ${removed} 条连接`)
- },
- [removeEdgesByIds, showToast],
- )
-
- const onCanvasMouseDownCapture = useCallback(
- (event: ReactMouseEvent) => {
- if (toolMode !== "scissors" || event.button !== 0) return
- event.preventDefault()
- event.stopPropagation()
- scissorDraggingRef.current = true
- scissorCutRef.current = new Set()
- setScissorTrail([localPoint(wrapperRef.current, event)])
- cutEdgesAtPoint(event)
- },
- [cutEdgesAtPoint, toolMode],
- )
-
- const onCanvasMouseMoveCapture = useCallback(
- (event: ReactMouseEvent) => {
- if (!scissorDraggingRef.current) return
- event.preventDefault()
- event.stopPropagation()
- setScissorTrail((trail) => {
- const next = [...trail, localPoint(wrapperRef.current, event)]
- return next.length > 80 ? next.slice(-80) : next
- })
- cutEdgesAtPoint(event)
- },
- [cutEdgesAtPoint],
- )
-
- const onCanvasMouseUpCapture = useCallback((event: ReactMouseEvent) => {
- if (!scissorDraggingRef.current) return
- event.preventDefault()
- event.stopPropagation()
- scissorDraggingRef.current = false
- scissorCutRef.current = new Set()
- window.setTimeout(() => setScissorTrail([]), 120)
- }, [])
-
- const onNodeDrag: OnNodeDrag = useCallback(
- (_e, node) => {
- const current = shakeRef.current.get(node.id) ?? {
- lastX: node.position.x,
- lastDirection: 0,
- turns: 0,
- disconnected: false,
- }
- const delta = node.position.x - current.lastX
- if (Math.abs(delta) < 14) {
- shakeRef.current.set(node.id, { ...current, lastX: node.position.x })
- return
- }
- const direction = delta > 0 ? 1 : -1
- const turns = current.lastDirection !== 0 && current.lastDirection !== direction ? current.turns + 1 : current.turns
- const next = {
- lastX: node.position.x,
- lastDirection: direction as -1 | 1,
- turns,
- disconnected: current.disconnected,
- }
- if (!next.disconnected && turns >= 4) {
- const removed = disconnectNodeConnections(node.id)
- if (removed > 0) {
- next.disconnected = true
- showToast(`已断开 ${removed} 条连接`)
- }
- }
- shakeRef.current.set(node.id, next)
- },
- [disconnectNodeConnections, showToast],
- )
-
- const unlockInternals = useCallback(
- (nodeId: string) => {
- const count = unlockNodeInternals(nodeId)
- showToast(count > 0 ? `已解锁 ${count} 个下层节点` : "这个节点没有可解锁的下层节点")
- setNodeMenu(null)
- },
- [showToast, unlockNodeInternals],
- )
-
- const diveIntoNetwork = useCallback(
- (nodeId: string) => {
- const count = enterNodeNetwork(nodeId)
- showToast(count > 0 ? `Dive into Network: ${count} nodes` : "这个节点没有下层 Network")
- setNodeMenu(null)
- if (count > 0) {
- window.setTimeout(() => void fitView({ padding: 0.24, duration: 180 }), 20)
- }
- },
- [enterNodeNetwork, fitView, showToast],
- )
-
- const addDopNodeFromMenu = useCallback(
- (item: WorkflowNodeCatalogItem) => {
- if (!nodeMenu) return
- const text = localizeNodeText(item.id, { label: item.label, description: item.description }, settings.language)
- addWorkflowNodeFromCatalog(item, screenToFlowPosition({ x: nodeMenu.x + 26, y: nodeMenu.y + 26 }))
- showToast(`已添加 DOP 节点：${text.label}`)
- setNodeMenu(null)
- },
- [addWorkflowNodeFromCatalog, nodeMenu, screenToFlowPosition, settings.language, showToast],
- )
-
- const addPrimitiveFromMenu = useCallback(
- (item: WorkflowPrimitive, itemIndex: number) => {
- if (!nodeMenu) return
- const text = localizeNodeText(item.id, { label: item.label, description: item.description }, settings.language)
- const isInsideNetwork = useFlowStore.getState().networkStack.length > 0
- let position = screenToFlowPosition({ x: nodeMenu.x + 280, y: nodeMenu.y + 26 + itemIndex * 34 })
-
- if (!isInsideNetwork) {
- const count = enterNodeNetwork(nodeMenu.nodeId)
- if (count > 0) {
- position = { x: 780, y: 96 + itemIndex * 96 }
- window.setTimeout(() => void fitView({ padding: 0.24, duration: 180 }), 20)
- } else {
- showToast("这个节点没有下层 Network，已在当前层添加 draft primitive")
- }
- }
-
- addPrimitiveNode(item, position, primitiveRuntimeCapability(capabilities, item.id))
- showToast(`已添加原子节点：${text.label}`)
- setNodeMenu(null)
- },
- [addPrimitiveNode, capabilities, enterNodeNetwork, fitView, nodeMenu, screenToFlowPosition, settings.language, showToast],
- )
-
- const lockInternals = useCallback(
- (nodeId: string) => {
- const count = lockNodeInternals(nodeId)
- showToast(count > 0 ? `已收回 ${count} 个下层节点` : "没有已解锁的下层节点")
- setNodeMenu(null)
- },
- [lockNodeInternals, showToast],
- )
+ undo,
+ yMomentaryModeRef,
+ })
- const selectComponentFromMenu = useCallback(
- (nodeId: string) => {
- const result = selectConnectedComponent(nodeId)
- showToast(`已选中组件：${result.nodeIds.length} 节点 / ${result.edgeIds.length} 连线`)
- setNodeMenu(null)
- if (result.nodeIds.length > 0) {
- window.setTimeout(() => void fitView({ nodes: result.nodeIds.map((id) => ({ id })), padding: 0.35, duration: 260 }), 20)
- }
- },
- [fitView, selectConnectedComponent, showToast],
- )
+ const { onDragOver, onDrop } = usePaletteDrop({ addNodeFromPalette, screenToFlowPosition })
+ const { onCanvasMouseDownCapture, onCanvasMouseMoveCapture, onCanvasMouseUpCapture } = useScissorCanvasHandlers({
+ cutRef: scissorCutRef,
+ draggingRef: scissorDraggingRef,
+ removeEdgesByIds,
+ setTrail: setScissorTrail,
+ showToast,
+ toolMode,
+ wrapperRef,
+ })
+ const { onNodeDrag, onNodeDragStop } = useWorkflowNodeDragHandlers({
+ attachToParent,
+ clearHelperLines,
+ detachFromParent,
+ disconnectNodeConnections,
+ getInternalNode,
+ resizeGroupToFit,
+ resolveNodeCollisions,
+ shakeRef,
+ showToast,
+ })
+ const {
+ addDopNodeFromMenu,
+ addPrimitiveFromMenu,
+ diveIntoNetwork,
+ lockInternals,
+ selectComponentFromMenu,
+ showNodeInfo,
+ showParameters,
+ unlockInternals,
+ } = useWorkflowNodeMenuActions({
+ addPrimitiveNode,
+ addWorkflowNodeFromCatalog,
+ capabilities,
+ enterNodeNetwork,
+ fitView,
+ language: settings.language,
+ lockNodeInternals,
+ nodeMenu,
+ screenToFlowPosition,
+ selectConnectedComponent,
+ setInspectorOpen,
+ setNodeMenu,
+ showToast,
+ unlockNodeInternals,
+ })
- const onNodeDoubleClick = useCallback(
- (_event: ReactMouseEvent, node: Node) => {
+ const onNodeDoubleClick: NodeMouseHandler = useCallback(
+ (_event: unknown, node: { id: string }) => {
diveIntoNetwork(node.id)
},
[diveIntoNetwork],
)
- const onNodeContextMenu = useCallback((event: ReactMouseEvent, node: Node) => {
+ const onNodeContextMenu: NodeMouseHandler = useCallback((event, node) => {
event.preventDefault()
event.stopPropagation()
setNodeMenu({ nodeId: node.id, x: event.clientX, y: event.clientY })
}, [])
- const onNodeDragStop = useCallback(
- (_e: unknown, node: Node) => {
- clearHelperLines()
- shakeRef.current.delete(node.id)
- if (node.type === "group") {
- resizeGroupToFit(node.id)
- return
- }
- const internal = getInternalNode(node.id)
- const abs = internal?.internals.positionAbsolute ?? node.position
- const w = node.measured?.width ?? 240
- const h = node.measured?.height ?? 96
- const cx = abs.x + w / 2
- const cy = abs.y + h / 2
-
- const wf = node as WorkflowNode
- const groups = useFlowStore
- .getState()
- .nodes.filter((n) => n.type === "group" && !n.data.collapsed && n.id !== node.id)
- const targetGroup = groups.find((g) => {
- const gw = (g.width as number) ?? g.measured?.width ?? 320
- const gh = (g.height as number) ?? g.measured?.height ?? 220
- return cx >= g.position.x && cx <= g.position.x + gw && cy >= g.position.y && cy <= g.position.y + gh
- })
-
- if (targetGroup && wf.parentId !== targetGroup.id) {
- attachToParent(node.id, targetGroup.id)
- } else if (!targetGroup && wf.parentId) {
- detachFromParent(node.id)
- } else if (targetGroup && wf.parentId === targetGroup.id) {
- resizeGroupToFit(targetGroup.id)
- }
- resolveNodeCollisions(node.id)
- },
- [clearHelperLines, getInternalNode, attachToParent, detachFromParent, resizeGroupToFit, resolveNodeCollisions],
- )
-
- // Prevent Cycles + Connection Limit + typed handles → isValidConnection
- const isValidConnection: IsValidConnection = useCallback(
- (connection) => {
- const conn = {
- source: connection.source,
- target: connection.target,
- sourceHandle: connection.sourceHandle ?? null,
- targetHandle: connection.targetHandle ?? null,
- }
- const res = validateConnection(useFlowStore.getState().edges, conn, {
- preventCycles: settings.preventCycles,
- maxSourceConnections: settings.maxSourceConnections,
- maxTargetConnections: settings.maxTargetConnections,
- typedHandles: settings.typedHandles,
- nodes: useFlowStore.getState().nodes,
- })
- if (!res.ok) {
- showToast(res.reason)
- return false
- }
- return true
- },
- [settings.preventCycles, settings.maxSourceConnections, settings.maxTargetConnections, settings.typedHandles, showToast],
- )
-
- // Confirm Delete
- const onBeforeDelete: OnBeforeDelete = useCallback(
- async ({ nodes: toDelNodes, edges: toDelEdges }) => {
- if (!settings.confirmDelete) return { nodes: toDelNodes, edges: toDelEdges }
- const count = toDelNodes.length + toDelEdges.length
- if (count === 0) return false
- // eslint-disable-next-line no-alert
- const ok = window.confirm(
- `确认删除 ${toDelNodes.length} 个节点 / ${toDelEdges.length} 条连线？`,
- )
- if (!ok) return false
- return { nodes: toDelNodes, edges: toDelEdges }
- },
- [settings.confirmDelete],
- )
+ const { isValidConnection, onBeforeDelete } = useConnectionGuards({ settings, showToast })
const isDraw = toolMode === "draw"
const isScissors = toolMode === "scissors"
- const networkLocked = networkStack.length > 0 && nodes.some((node) => node.data.internalLocked === true)
- const acceptProposal = useCallback(
- (proposal: AgentProposal) => {
- try {
- importWorkflowProject(acceptAgentProposal(useFlowStore.getState().workflowProject, proposal))
- showToast("Agent proposal accepted")
- setAgentDrawerOpen(false)
- setAgentProposal(undefined)
- } catch (error) {
- showToast(error instanceof Error ? error.message : "Agent proposal failed")
- }
- },
- [importWorkflowProject, showToast],
- )
-
- const rejectProposal = useCallback(() => {
- showToast("Agent proposal rejected")
- clearProposalFocus()
- setAgentDrawerOpen(false)
- setAgentProposal(undefined)
- }, [clearProposalFocus, showToast])
-
- const presentAgentProposal = useCallback(
- (proposal: AgentProposal) => {
- setAgentProposal(proposal)
- setAgentDrawerOpen(true)
- showToast("Demand proposal ready")
- },
- [showToast],
- )
-
- useEffect(() => {
- if (!pendingAgentProposal) return
- presentAgentProposal(pendingAgentProposal)
- clearPendingAgentProposal()
- }, [clearPendingAgentProposal, pendingAgentProposal, presentAgentProposal])
+ const networkLocked = isNetworkLocked(networkStack, nodes)
+ const exitCurrentNetwork = useExitCurrentNetwork({ exitNodeNetwork, fitView, showToast })
+ const { acceptProposal, agentProposal, focusProposalOperation, rejectProposal } = useWorkflowAgentProposal({
+ clearPendingAgentProposal,
+ clearProposalFocus,
+ fitView,
+ focusProposalTargets,
+ importWorkflowProject,
+ pendingAgentProposal,
+ setAgentDrawerOpen,
+ showToast,
+ })
- const focusProposalOperation = useCallback(
- (focus: ProposalFocusTarget) => {
- focusProposalTargets(focus.nodeIds, focus.edgeIds)
- if (focus.nodeIds.length > 0) {
- window.setTimeout(() => void fitView({ nodes: focus.nodeIds.map((id) => ({ id })), padding: 0.35, duration: 280 }), 20)
- }
- },
- [fitView, focusProposalTargets],
- )
+ const onCanvasMouseMove = useCallback((event: ReactMouseEvent) => {
+ mousePos.current = { x: event.clientX, y: event.clientY }
+ }, [])
- const touchProps = useMemo(
- () =>
- settings.touchMode
- ? { panOnDrag: [1, 2] as number[], selectionOnDrag: false, panOnScroll: true }
- : {},
- [settings.touchMode],
- )
+ const toggleCollabProvider = useCallback(() => {
+ settings.set("collabProvider", settings.collabProvider === "off" ? "yjs" : "off")
+ }, [settings])
return (
@@ -719,12 +248,7 @@ function EditorCanvas() {
onOpenPalette={() => setPaletteOpen(true)}
onExported={showToast}
collab={settings.collabProvider !== "off"}
- onToggleCollab={() =>
- settings.set(
- "collabProvider",
- settings.collabProvider === "off" ? "yjs" : "off",
- )
- }
+ onToggleCollab={toggleCollabProvider}
settingsOpen={settingsOpen}
onToggleSettings={() => setSettingsOpen((v) => !v)}
projectSettingsOpen={projectSettingsOpen}
@@ -737,328 +261,66 @@ function EditorCanvas() {
onToggleNodeManagement={() => setNodeManagementOpen((v) => !v)}
/>
-
{
- mousePos.current = { x: e.clientX, y: e.clientY }
- }}
- data-zoom-bucket={zoom < 0.5 ? "low" : zoom > 1.4 ? "high" : "mid"}
- >
-
-
- {settings.showBackground ? (
-
- ) : null}
- {settings.showControls ? (
-
- ) : null}
- {settings.showMiniMap ? (
-
- ) : null}
-
-
-
-
-
-
- {isScissors ? (
-
- ) : null}
-
- {runTraceOpen ? (
-
-
-
- ) : null}
-
- {nodeManagementOpen ?
setNodeManagementOpen(false)} /> : null}
-
- {networkStack.length > 0 ? (
-
-
- /
- obj
- {networkStack.map((entry) => (
-
- /
- {entry.label}
-
- ))}
-
- {networkLocked ? "LOCKED" : "DRAFT"}
-
- Esc / Backspace
-
- ) : null}
-
- {nodeMenu ? (
- event.stopPropagation()}
- onClick={(event) => event.stopPropagation()}
- >
-
-
-
- DOP Operators
-
-
- {dopNodeMenuItems.map((item) => {
- const text = localizeNodeText(item.id, { label: item.label, description: item.description }, settings.language)
- const visual = getNodeVisualSignature({
- label: item.label,
- description: item.description,
- nodeType: item.kind === "router" ? "condition" : item.kind === "schedule" ? "trigger" : item.kind === "source" ? "http" : "action",
- category: item.category === "decision" ? "logic" : item.category === "trigger" ? "trigger" : item.category === "source" ? "data" : item.category === "output" ? "action" : "action",
- icon: item.icon,
- canonical: { catalogId: item.id, kind: item.kind, capability: item.capability },
- })
- return (
-
- )
- })}
-
-
-
- Add Internal Primitive
- ›
-
-
- {primitiveMenuGroups.map((group) => (
-
-
- {group.label}
- ›
-
-
- {group.items.map((item, itemIndex) => {
- const text = localizeNodeText(item.id, { label: item.label, description: item.description }, settings.language)
- const runtimeCapability = primitiveRuntimeCapability(capabilities, item.id)
- const visual = getNodeVisualSignature({
- label: item.label,
- description: item.description,
- nodeType: item.nodeType,
- category: item.nodeCategory,
- icon: item.icon,
- primitiveId: item.id,
- primitiveCategory: item.category,
- })
- return (
-
- )
- })}
-
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
Help...
-
-
-
- ) : inspectorOpen ? (
-
-
-
- ) : null}
-
- setAgentDrawerOpen(false)}
- />
-
- {toast ? (
-
- {toast}
-
- ) : null}
-
+
+
**Agent 节点自动路由**