Function Canvas

frontend/src/components/workflow/Canvas.tsx:108–1287

({
  className,
  nodes,
  edges,
  setNodes,
  setEdges,
  onNodesChange,
  onEdgesChange,
  workflowId,
  workflowSchedules,
  schedulesLoading,
  scheduleError,
  onScheduleCreate,
  onScheduleEdit,
  onScheduleAction,
  onScheduleDelete,
  onViewSchedules,
  onOpenScheduleSidebar,
  onCloseScheduleSidebar,
  onCloseWebhooksSidebar,
  onClearNodeSelection,
  onNodeSelectionChange,
  onSnapshot,
  schedulePanelExpanded,
  webhooksPanelExpanded,
}: CanvasProps)

}

export function Canvas({
  className,
  nodes,
  edges,
  setNodes,
  setEdges,
  onNodesChange,
  onEdgesChange,
  workflowId,
  workflowSchedules,
  schedulesLoading,
  scheduleError,
  onScheduleCreate,
  onScheduleEdit,
  onScheduleAction,
  onScheduleDelete,
  onViewSchedules,
  onOpenScheduleSidebar,
  onCloseScheduleSidebar,
  onCloseWebhooksSidebar,
  onClearNodeSelection,
  onNodeSelectionChange,
  onSnapshot,
  schedulePanelExpanded,
  webhooksPanelExpanded,
}: CanvasProps) {
  const [reactFlowInstance, setReactFlowInstance] = useState<any>(null);
  const [selectedNode, setSelectedNode] = useState<Node<NodeData> | null>(null);
  const canvasContainerRef = useRef<HTMLDivElement>(null);
  const { getComponent } = useComponentStore();
  const { nodeStates } = useExecutionStore();
  const { markDirty } = useWorkflowStore();
  const { dataFlows, selectedNodeId, selectNode, selectEvent } = useExecutionTimelineStore();
  const mode = useWorkflowUiStore((state) => state.mode);
  const { toast } = useToast();
  const { setConfigPanelOpen } = useWorkflowUiStore();
  const isMobile = useIsMobile();

  // Component placement state (for spotlight/sidebar component placement)
  const placementState = usePlacementStore();
  const isPlacementActive = placementState.isPlacementActiveForWorkflow(workflowId ?? null);

  // Sync selection state with UI store for mobile bottom sheet visibility
  useEffect(() => {
    setConfigPanelOpen(Boolean(selectedNode));
  }, [selectedNode, setConfigPanelOpen]);

  const scheduleContext = useOptionalWorkflowSchedulesContext();
  const resolvedWorkflowSchedules = workflowSchedules ?? scheduleContext?.schedules ?? [];
  const resolvedSchedulesLoading = schedulesLoading ?? scheduleContext?.isLoading ?? false;
  const resolvedScheduleError = scheduleError ?? scheduleContext?.error ?? null;
  const resolvedOnScheduleCreate = onScheduleCreate ?? scheduleContext?.onScheduleCreate;
  const resolvedOnScheduleEdit = onScheduleEdit ?? scheduleContext?.onScheduleEdit;
  const resolvedOnScheduleAction = onScheduleAction ?? scheduleContext?.onScheduleAction;
  const resolvedOnScheduleDelete = onScheduleDelete ?? scheduleContext?.onScheduleDelete;
  const resolvedOnViewSchedules = onViewSchedules ?? scheduleContext?.onViewSchedules;
  const resolvedOnOpenScheduleSidebar =
    onOpenScheduleSidebar ?? scheduleContext?.onOpenScheduleSidebar;