mirror of
https://github.com/johndoe6345789/AutoMetabuilder.git
synced 2026-04-25 06:15:01 +00:00
6e9ff896e7
- Created custom hooks: useWorkflowGraph, useWorkflowPlugins, usePluginSearch, useTabNavigation - Decomposed canvas logic into: useCanvasNodes, useCanvasEdges, useCanvasDragDrop - Built atomic node components: NodeHeader, NodeBody, NodePorts - Created canvas UI components: CanvasInfoPanel, CanvasHintPanel - Split builder into: LoadingState, ErrorState, WorkflowBuilderHeader, WorkflowBuilderTabs, WorkflowBuilderContent - Added React Flow for n8n-style visual canvas with drag-and-drop - All components now under 100 LOC following PROMPT.md guidelines Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { NodeProps } from "reactflow";
|
|
import { Paper, Stack } from "@mui/material";
|
|
import { WorkflowPluginDefinition } from "../../lib/types";
|
|
import NodeHeader from "./NodeHeader";
|
|
import NodeBody from "./NodeBody";
|
|
import NodePorts from "./NodePorts";
|
|
|
|
export type WorkflowNodeData = {
|
|
label: string;
|
|
type: string;
|
|
inputs: Record<string, unknown>;
|
|
outputs: Record<string, unknown>;
|
|
plugin: WorkflowPluginDefinition;
|
|
t: (key: string, fallback?: string) => string;
|
|
};
|
|
|
|
function WorkflowNode({ data, selected }: NodeProps<WorkflowNodeData>) {
|
|
const { label, type, plugin, t } = data;
|
|
const inputPorts = plugin.inputs || [];
|
|
const outputPorts = plugin.outputs || [];
|
|
|
|
return (
|
|
<Paper
|
|
elevation={selected ? 8 : 2}
|
|
sx={{
|
|
minWidth: 200,
|
|
minHeight: 80,
|
|
border: selected ? "2px solid #1976d2" : "1px solid var(--color-border-muted)",
|
|
backgroundColor: "var(--color-panel-bg)",
|
|
transition: "all 0.2s",
|
|
"&:hover": {
|
|
boxShadow: 4,
|
|
},
|
|
}}
|
|
>
|
|
<NodePorts ports={inputPorts} type="input" />
|
|
|
|
<Stack spacing={1} sx={{ p: 1.5 }}>
|
|
<NodeHeader type={type} />
|
|
<NodeBody
|
|
label={label}
|
|
category={plugin.category}
|
|
inputCount={inputPorts.length}
|
|
outputCount={outputPorts.length}
|
|
t={t}
|
|
/>
|
|
</Stack>
|
|
|
|
<NodePorts ports={outputPorts} type="output" />
|
|
</Paper>
|
|
);
|
|
}
|
|
|
|
export default memo(WorkflowNode);
|