mlogclub
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import "@flowgram.ai/free-layout-editor/index.css"
|
|
|
|
import {
|
|
useNodeRender,
|
|
WorkflowNodeRenderer,
|
|
type WorkflowNodeProps,
|
|
} from "@flowgram.ai/free-layout-editor"
|
|
import { useLayoutEffect } from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { useWorkflowPortAdd } from "./workflow-port-add-context"
|
|
|
|
export function FlowgramNodeRenderer(props: WorkflowNodeProps) {
|
|
const { selected, node, form } = useNodeRender()
|
|
const requestPortAdd = useWorkflowPortAdd()
|
|
const nodeType = String(node.flowNodeType ?? "")
|
|
|
|
useLayoutEffect(() => {
|
|
if (nodeType !== "condition") return
|
|
const frame = window.requestAnimationFrame(() => {
|
|
node.ports.updateDynamicPorts()
|
|
})
|
|
return () => window.cancelAnimationFrame(frame)
|
|
})
|
|
|
|
return (
|
|
<WorkflowNodeRenderer
|
|
node={props.node}
|
|
className={cn(
|
|
"overflow-visible rounded-lg border transition-colors",
|
|
selected ? "border-(--g-selection-background)" : "border-transparent"
|
|
)}
|
|
style={{ padding: 0 }}
|
|
portClassName="workflow-node-port"
|
|
portPrimaryColor="#2575FC"
|
|
portSecondaryColor="#c9cdd4"
|
|
portBackgroundColor="#FFFFFF"
|
|
onPortClick={(port, event) => {
|
|
if (port.portType !== "output" || typeof event === "function") {
|
|
return
|
|
}
|
|
event.stopPropagation()
|
|
requestPortAdd?.({ sourcePort: port, event })
|
|
}}
|
|
>
|
|
{form?.render()}
|
|
</WorkflowNodeRenderer>
|
|
)
|
|
}
|