refactor handles

src/components/graph/BaseHandle.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from "react";
+import { Handle, type HandleProps } from "@xyflow/react";
+
+import { cn } from "@/lib/utils";
+
+export type BaseHandleProps = HandleProps;
+
+export function BaseHandle({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Handle>) {
+  return (
+    <Handle
+      {...props}
+      className={cn(
+        "dark:border-secondary dark:bg-secondary h-[11px] w-[11px] rounded-full border border-slate-300 bg-slate-100 transition",
+        className,
+      )}
+    >
+      {children}
+    </Handle>
+  );
+}

src/components/graph/ConfigNode.tsx

@@ -1,5 +1,4 @@
 import React, { memo, useCallback, useContext, useEffect, useRef, useState } from 'react'
-import { Handle, Position } from 'reactflow'
 import Editor, { loader } from '@monaco-editor/react'
 import FlowContext from '../../lib/flowContext'
 import {
@@ -22,6 +21,7 @@ import {
     MenubarSubTrigger,
     MenubarTrigger,
 } from '../ui/menubar'
+import { InputHandle, OutputHandle } from './NodeHandles'
 
 // Ensure Monaco can load its web workers under Vite by pointing to a CDN
 loader.config({ paths: { vs: 'https://unpkg.com/monaco-editor@latest/min/vs' } })
@@ -201,12 +201,11 @@ export const ConfigNode = memo(function ConfigNode({ id, data }: Props) {
             </BaseNodeContent>
 
             <BaseNodeFooter>
-                <div className="w-full text-xs text-gray-500">Stored YAML: {storedYaml ? `${storedYaml.length} chars` : 'none'}</div>
+                <div className="w-full text-xs text-gray-500">{storedYaml ? `${storedYaml.length} chars` : 'none'}</div>
             </BaseNodeFooter>
 
-            <Handle type="target" position={Position.Left} id="ain" style={{ background: '#F97316', top: 20, width: 12, height: 12, borderRadius: 3 }} />
-
-            <Handle type="source" position={Position.Right} id="out" style={{ background: '#10B981', top: 20, width: 12, height: 12, borderRadius: 3 }} />
+            <InputHandle id="ain" />
+            <OutputHandle id="out" />
         </BaseNode>
     )
 })

src/components/graph/NodeHandles.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Handle, Position } from 'reactflow'
+import { Circle, CircleDashed } from 'lucide-react'
+
+type NodeHandleProps = {
+    id: string
+}
+
+export function InputHandle({ id }: NodeHandleProps) {
+    return (
+        <Handle
+            type="target"
+            position={Position.Left}
+            id={id}
+            style={{
+                top: 20,
+                width: 20,
+                height: 20,
+                left: -10,
+                borderRadius: '9999px',
+                background: 'transparent',
+                border: 'none',
+                padding: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <CircleDashed className="w-4 h-4 text-gray-500 pointer-events-none" />
+        </Handle>
+    )
+}
+
+export function OutputHandle({ id }: NodeHandleProps) {
+    return (
+        <Handle
+            type="source"
+            position={Position.Right}
+            id={id}
+            style={{
+                top: 20,
+                width: 20,
+                height: 20,
+                right: -10,
+                borderRadius: '9999px',
+                background: 'transparent',
+                border: 'none',
+                padding: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}
+        >
+            <Circle className="w-4 h-4 text-gray-800 pointer-events-none" />
+        </Handle>
+    )
+}
+

src/components/graph/RenderingNode.tsx

@@ -1,5 +1,4 @@
 import { memo, useContext, useEffect, useMemo, useState } from 'react'
-import { Handle, Position } from 'reactflow'
 import yaml from 'js-yaml'
 import FlowContext from '../../lib/flowContext'
 import { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia } from '../ui/empty'
@@ -11,6 +10,7 @@ import {
     BaseNodeHeaderTitle,
 } from './BaseNode'
 import { Rocket } from 'lucide-react'
+import { InputHandle, OutputHandle } from './NodeHandles'
 
 type Props = {
     id: string
@@ -178,8 +178,8 @@ export const RenderingNode = memo(function RenderingNode({ id }: Props) {
                 <div className="w-full text-xs text-muted-foreground">Parsed YAML output</div>
             </BaseNodeFooter>
 
-            <Handle type="target" position={Position.Left} id="ain" style={{ background: '#F97316', top: 20, width: 12, height: 12, borderRadius: 3 }} />
-            <Handle type="source" position={Position.Right} id="out" style={{ background: '#10B981', top: 20, width: 12, height: 12, borderRadius: 3 }} />
+            <InputHandle id="ain" />
+            <OutputHandle id="out" />
         </BaseNode>
     )
 })