OrchestrationDesigner

비주얼 워크플로우 편집기 컴포넌트

개요

OrchestrationDesigner는 노드와 커넥터를 사용해 워크플로우, 프로세스 흐름, 조직도 등을 시각적으로 설계할 수 있는 다이어그램 편집기입니다.

주요 특징

• ✅ 노드/커넥터 CRUD: ref API(addNode, removeNode, addConnector 등)로 외부에서 제어
• ✅ 팔레트: 드래그앤드롭 또는 클릭으로 노드 추가
• ✅ 직교 라우팅: Dijkstra 기반 장애물 회피 커넥터 자동 경로 탐색
• ✅ 인터랙션 제어: selectable, movable, resizable, connectable, reconnectable 독립 토글
• ✅ 커스텀 노드 템플릿: nodeTemplate prop으로 노드 외형 자유 정의
• ✅ 포트 연결/재연결: 노드 호버 시 포트 표시, 드래그로 연결 생성 및 재연결
• ✅ 줌/팬: 마우스 휠 줌, 패닝 모드 전환
• ✅ Undo/Redo: 내장 히스토리 관리

기본 사용

노드와 커넥터만으로 읽기 전용 다이어그램을 렌더링합니다.

<OrchestrationDesigner
  initialNodes={nodes}
  initialConnectors={connectors}
  showPalette={false}
  showToolbar={false}
/>

인터랙티브 편집

팔레트에서 드래그앤드롭 또는 클릭으로 노드를 추가하고, 포트를 드래그해 커넥터를 연결합니다.

const ref = useRef<OrchestrationDesignerRef>(null)
 
<OrchestrationDesigner
  ref={ref}
  initialNodes={nodes}
  initialConnectors={connectors}
  nodeGroups={paletteGroups}
  showPalette
  onNodeDrop={(type, position) => ({
    id: `node_${Date.now()}`,
    type,
    title: type,
    position,
    size: { width: 160, height: 48 },
  })}
  selectable
  movable
  resizable
  connectable
  reconnectable
/>

커스텀 노드 템플릿

nodeTemplate prop으로 노드 렌더링을 완전히 커스터마이즈할 수 있습니다.

<OrchestrationDesigner
  initialNodes={nodes}
  initialConnectors={connectors}
  nodeTemplate={(node) => (
    <div style={{ backgroundColor: node.color }}>
      <span>{node.title}</span>
      <span>{node.type}</span>
    </div>
  )}
/>

API Reference

Props

Events

Ref API (OrchestrationDesignerRef)

주요 타입

DesignerNode

interface DesignerNode {
  id: string
  type: string
  title: string
  position: Position
  size?: Size
  color?: string
  shape?: "rect" | "diamond" | "circle"
  status?: NodeStatus
  locked?: boolean
  connectionPoints?: ConnectionPoint[]
  data?: Record<string, unknown>
}

DesignerConnector

interface DesignerConnector {
  id: string
  sourceNodeId: string
  targetNodeId: string
  sourcePointId?: string
  targetPointId?: string
  label?: string
  color?: string
}

NodeTypeGroup

interface NodeTypeGroup {
  id: string
  label: string
  color?: string
  items: NodeTypeItem[]
}

접근성

권장 사항

• ✅ 노드 선택 시 액션 바가 표시되어 키보드 접근 가능합니다.
• ✅ Delete/Backspace 키로 선택된 노드/커넥터를 삭제할 수 있습니다.
• ✅ 마우스 휠로 줌 조절이 가능합니다.
• ❌ 현재 포트 연결은 마우스 드래그 전용입니다. 키보드만으로 커넥터를 생성할 수 없습니다.

관련 컴포넌트

• Kanban: 컬럼 기반 카드 보드 컴포넌트