@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/Flow/FlowCanvas.js

@@ -0,0 +1,559 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { mergeClasses } from "../../../helpers/mergeClasses.js";
+import { useReactFlow, useStore, MarkerType, ReactFlow, SelectionMode, Background, BackgroundVariant, MiniMap, Panel } from "@xyflow/react";
+import FlowAnnotationDraftPreview from "./FlowAnnotationDraftPreview.js";
+import FlowAnnotationNode from "./FlowAnnotationNode.js";
+import { scaleAnnotationPoints, FLOW_ANNOTATION_MIN_SIZE, FLOW_TEXT_CARET_OFFSET } from "./flowAnnotations.js";
+import FlowAnnotationToolbar, { FlowAnnotationLauncher } from "./FlowAnnotationToolbar.js";
+import FlowBlockNode, { FLOW_INPUT_HANDLE_ID } from "./FlowBlockNode.js";
+import { flowOutputsOf } from "./flowBlockRegistry.js";
+import FlowConnectionEdge from "./FlowConnectionEdge.js";
+import { useFlowBlockRegistry, useFlowEditorStore, useFlowEditor } from "./FlowEditorProvider.js";
+import { canConnect, isFlowNodeRemovable, layoutFlowByLevels } from "./flowGraph.js";
+import FlowSelectionBar from "./FlowSelectionBar.js";
+import { boundsOfRects, viewportToReveal } from "./flowViewport.js";
+import FlowZoomControls from "./FlowZoomControls.js";
+import { useFlowAnnotationDrawing } from "./useFlowAnnotationDrawing.js";
+import { useFlowLabels } from "./useFlowLabels.js";
+import "@xyflow/react/dist/base.css";
+/* empty css                       */
+const PRO_OPTIONS = { hideAttribution: true };
+const NODE_TYPES = { flowBlock: FlowBlockNode, flowAnnotation: FlowAnnotationNode };
+const EDGE_TYPES = { flowConnection: FlowConnectionEdge };
+const MINIMAP_SIZE = { width: 160, height: 104 };
+const MINIMAP_MIN_NODES = 5;
+const BLOCK_GRID = 16;
+const PORTS = ["next", "true", "false", "error"];
+const REVEAL_DURATION_MS = 200;
+const PAN_ON_DRAG_BUTTONS = [1];
+const MULTI_SELECTION_KEYS = ["Shift", "Meta", "Control"];
+const TOOL_BY_KEY = {
+  v: "select",
+  p: "drawing",
+  l: "line",
+  r: "rectangle",
+  o: "ellipse",
+  a: "arrow",
+  t: "text"
+};
+const SHAPE_TOOLS = ["line", "arrow", "rectangle", "ellipse", "step"];
+const ANNOTATION_Z_INDEX = -1;
+const isPortId = (value) => PORTS.includes(value);
+const worstSeverity = (issues) => {
+  if (issues.some((issue) => issue.severity === "error")) return "error";
+  if (issues.some((issue) => issue.severity === "warning")) return "warning";
+  return void 0;
+};
+const isTypingTarget = (target) => target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
+const FlowCanvas = ({
+  issues = [],
+  runOverlay,
+  readOnly = false,
+  ariaLabel,
+  className,
+  controlsPosition,
+  background = "dots",
+  annotationTools = false
+}) => {
+  const { t } = useTranslation("ui");
+  const labels = useFlowLabels();
+  const registry = useFlowBlockRegistry();
+  const store = useFlowEditorStore();
+  const graph = useFlowEditor((state) => state.graph);
+  const selectedNodeIds = useFlowEditor((state) => state.selectedNodeIds);
+  const selectedEdgeIds = useFlowEditor((state) => state.selectedEdgeIds);
+  const selectedAnnotationIds = useFlowEditor((state) => state.selectedAnnotationIds);
+  const isAreaSelecting = useFlowEditor((state) => state.isAreaSelecting);
+  const canUndo = useFlowEditor((state) => state.past.length > 0);
+  const canRedo = useFlowEditor((state) => state.future.length > 0);
+  const safeIssues = useMemo(() => Array.isArray(issues) ? issues : [], [issues]);
+  const [measuredSizes, setMeasuredSizes] = useState({});
+  const { getViewport, setViewport, screenToFlowPosition } = useReactFlow();
+  const containerRef = useRef(null);
+  const [tool, setTool] = useState("select");
+  const [shapeTool, setShapeTool] = useState("rectangle");
+  const [toolsOpen, setToolsOpen] = useState(false);
+  const [annotationTone, setAnnotationTone] = useState("danger");
+  const [annotationStroke, setAnnotationStroke] = useState("medium");
+  const [editingAnnotationId, setEditingAnnotationId] = useState(null);
+  const canAnnotate = annotationTools && !readOnly;
+  const isDrawing = canAnnotate && tool !== "select";
+  const annotations = useMemo(() => graph.annotations ?? [], [graph.annotations]);
+  const changeTool = useCallback((nextTool) => {
+    setTool(nextTool);
+    setToolsOpen(true);
+    if (SHAPE_TOOLS.includes(nextTool)) setShapeTool(nextTool);
+  }, []);
+  const closeTools = useCallback(() => {
+    setTool("select");
+    setToolsOpen(false);
+  }, []);
+  const handleAnnotationCreated = useCallback(
+    (annotationId, kind) => {
+      if (kind === "drawing" || kind === "step") {
+        store.getState().setSelection({ annotationIds: [] });
+        return;
+      }
+      setTool("select");
+      if (kind === "text") setEditingAnnotationId(annotationId);
+    },
+    [store]
+  );
+  const draft = useFlowAnnotationDrawing({
+    containerRef,
+    tool,
+    tone: annotationTone,
+    stroke: annotationStroke,
+    enabled: canAnnotate,
+    onCreated: handleAnnotationCreated
+  });
+  useEffect(() => {
+    if (!canAnnotate) return void 0;
+    const pane = containerRef.current?.querySelector(".react-flow__pane");
+    if (!pane) return void 0;
+    const handleDoubleClick = (event) => {
+      if (event.target !== pane) return;
+      const point = screenToFlowPosition({ x: event.clientX, y: event.clientY }, { snapToGrid: false });
+      const annotationId = store.getState().addAnnotation({
+        kind: "text",
+        tone: annotationTone,
+        stroke: annotationStroke,
+        position: { x: point.x, y: point.y - FLOW_TEXT_CARET_OFFSET },
+        size: { width: FLOW_ANNOTATION_MIN_SIZE, height: FLOW_ANNOTATION_MIN_SIZE },
+        text: ""
+      });
+      setTool("select");
+      setEditingAnnotationId(annotationId);
+    };
+    pane.addEventListener("dblclick", handleDoubleClick);
+    return () => pane.removeEventListener("dblclick", handleDoubleClick);
+  }, [canAnnotate, annotationTone, annotationStroke, screenToFlowPosition, store]);
+  const canvasWidth = useStore((state) => state.width);
+  const canvasHeight = useStore((state) => state.height);
+  const [revealNodeIds, setRevealNodeIds] = useState([]);
+  const knownNodeIdsRef = useRef(null);
+  const pendingViewportRef = useRef(null);
+  useEffect(() => {
+    const currentIds = new Set(graph.nodes.map((node) => node.nodeId));
+    const knownIds = knownNodeIdsRef.current;
+    knownNodeIdsRef.current = currentIds;
+    const addedAndSelected = knownIds ? selectedNodeIds.filter((id) => currentIds.has(id) && !knownIds.has(id)) : [];
+    if (addedAndSelected.length > 0) {
+      setRevealNodeIds(addedAndSelected);
+      return;
+    }
+    setRevealNodeIds(
+      (current) => current.length > 0 && !current.every((id) => selectedNodeIds.includes(id)) ? [] : current
+    );
+  }, [graph.nodes, selectedNodeIds]);
+  useEffect(() => {
+    if (revealNodeIds.length === 0) return;
+    const rects = [];
+    for (const nodeId of revealNodeIds) {
+      const node = graph.nodes.find((candidate) => candidate.nodeId === nodeId);
+      const size = measuredSizes[nodeId];
+      if (!node || !size) return;
+      rects.push({ ...node.position, ...size });
+    }
+    const bounds = boundsOfRects(rects);
+    if (!bounds) return;
+    const pending = pendingViewportRef.current;
+    const baseViewport = pending && pending.settlesAt > Date.now() ? pending.viewport : getViewport();
+    const target = viewportToReveal(baseViewport, bounds, { width: canvasWidth, height: canvasHeight });
+    if (!target) return;
+    pendingViewportRef.current = { viewport: target, settlesAt: Date.now() + REVEAL_DURATION_MS };
+    void setViewport(target, { duration: REVEAL_DURATION_MS });
+  }, [revealNodeIds, graph.nodes, measuredSizes, canvasWidth, canvasHeight, getViewport, setViewport]);
+  const handleAreaSelectionStart = useCallback(() => {
+    store.getState().setAreaSelecting(true);
+    const finishAreaSelection = () => {
+      store.getState().setAreaSelecting(false);
+      window.removeEventListener("pointerup", finishAreaSelection);
+      window.removeEventListener("pointercancel", finishAreaSelection);
+      window.removeEventListener("blur", finishAreaSelection);
+    };
+    window.addEventListener("pointerup", finishAreaSelection);
+    window.addEventListener("pointercancel", finishAreaSelection);
+    window.addEventListener("blur", finishAreaSelection);
+  }, [store]);
+  const stopRevealing = useCallback(() => {
+    pendingViewportRef.current = null;
+    setRevealNodeIds((current) => current.length > 0 ? [] : current);
+  }, []);
+  const addableBlocks = useMemo(() => {
+    if (readOnly) return [];
+    return registry.list.filter((definition) => definition.category !== "trigger").filter(
+      (definition) => definition.maxInstances === void 0 || graph.nodes.filter((node) => node.type === definition.type).length < definition.maxInstances
+    ).map((definition) => ({ type: definition.type, label: definition.label, icon: definition.icon }));
+  }, [registry, graph.nodes, readOnly]);
+  const insertableBlocks = useMemo(
+    () => addableBlocks.filter((block) => {
+      const definition = registry.get(block.type);
+      return definition ? flowOutputsOf(definition, definition.createDefaultConfig()).length > 0 : false;
+    }),
+    [addableBlocks, registry]
+  );
+  const blockNodes = useMemo(
+    () => graph.nodes.map((node) => {
+      const definition = registry.get(node.type);
+      const nodeIssues = safeIssues.filter((issue) => issue.nodeId === node.nodeId);
+      return {
+        id: node.nodeId,
+        type: "flowBlock",
+        position: node.position,
+        measured: measuredSizes[node.nodeId],
+        selected: selectedNodeIds.includes(node.nodeId),
+        draggable: !readOnly,
+        connectable: !readOnly,
+        data: {
+          icon: definition?.resolveIcon?.(node.config) ?? definition?.icon ?? "help",
+          title: node.label ?? definition?.resolveLabel?.(node.config) ?? definition?.label ?? node.type,
+          categoryLabel: definition ? labels.categories[definition.category] : "",
+          summary: definition ? definition.renderSummary(node.config) : labels.issueMessage({ code: "unknownBlock", severity: "error" }),
+          hasInput: definition ? definition.category !== "trigger" : true,
+          outputs: flowOutputsOf(definition, node.config),
+          connectedPorts: graph.edges.filter((edge) => edge.source === node.nodeId).map((edge) => edge.sourcePort),
+          portLabels: labels.ports,
+          addableBlocks,
+          onAddFromPort: readOnly ? void 0 : (port, type) => store.getState().addNodeFromPort(type, node.nodeId, port),
+          disabled: node.disabled,
+          issueSeverity: worstSeverity(nodeIssues),
+          issueCount: nodeIssues.length,
+          runStatus: runOverlay?.steps?.[node.nodeId]
+        }
+      };
+    }),
+    [
+      graph.nodes,
+      graph.edges,
+      registry,
+      safeIssues,
+      selectedNodeIds,
+      readOnly,
+      labels,
+      runOverlay,
+      measuredSizes,
+      addableBlocks,
+      store
+    ]
+  );
+  const resizeAnnotation = useCallback(
+    (annotationId, geometry) => {
+      const annotation = (store.getState().graph.annotations ?? []).find(
+        (candidate) => candidate.annotationId === annotationId
+      );
+      if (!annotation || !geometry.size) return;
+      store.getState().setAnnotationGeometry({
+        [annotationId]: {
+          ...geometry,
+          points: scaleAnnotationPoints(annotation.points, annotation.size, geometry.size)
+        }
+      });
+    },
+    [store]
+  );
+  const finishTextEdit = useCallback(
+    (annotationId) => {
+      setEditingAnnotationId((current) => current === annotationId ? null : current);
+      const annotation = (store.getState().graph.annotations ?? []).find(
+        (candidate) => candidate.annotationId === annotationId
+      );
+      if (annotation && !annotation.text?.trim()) store.getState().removeAnnotations([annotationId]);
+      window.setTimeout(() => {
+        if (!document.activeElement || document.activeElement === document.body)
+          containerRef.current?.focus({ preventScroll: true });
+      }, 0);
+    },
+    [store]
+  );
+  const annotationNodes = useMemo(
+    () => annotations.map((annotation) => {
+      const selected = selectedAnnotationIds.includes(annotation.annotationId);
+      const editing = editingAnnotationId === annotation.annotationId;
+      return {
+        id: annotation.annotationId,
+        type: "flowAnnotation",
+        position: annotation.position,
+        // A text note takes the size of what is written in it; every other kind keeps its box.
+        ...annotation.kind === "text" ? {} : { width: annotation.size.width, height: annotation.size.height },
+        selected,
+        draggable: !readOnly && !editing,
+        connectable: false,
+        zIndex: ANNOTATION_Z_INDEX,
+        // A shape is only grabbed by its stroke until it is selected; text is grabbed anywhere.
+        style: { pointerEvents: annotation.kind === "text" || selected ? "all" : "none" },
+        data: {
+          annotation,
+          readOnly,
+          editing,
+          placeholder: t("flow.annotations.textPlaceholder"),
+          onTextChange: (text) => store.getState().updateAnnotations([annotation.annotationId], { text }),
+          onEditStart: () => setEditingAnnotationId(annotation.annotationId),
+          onEditEnd: () => finishTextEdit(annotation.annotationId),
+          onResizeStart: () => store.getState().recordHistory(),
+          onResize: (geometry) => resizeAnnotation(annotation.annotationId, geometry)
+        }
+      };
+    }),
+    [annotations, selectedAnnotationIds, editingAnnotationId, readOnly, t, store, finishTextEdit, resizeAnnotation]
+  );
+  const nodes = useMemo(
+    () => [...annotationNodes, ...blockNodes],
+    [annotationNodes, blockNodes]
+  );
+  const edges = useMemo(() => {
+    const traversed = new Set(runOverlay?.traversedEdgeIds ?? []);
+    return graph.edges.map((edge) => ({
+      id: edge.edgeId,
+      type: "flowConnection",
+      source: edge.source,
+      sourceHandle: edge.sourcePort,
+      target: edge.target,
+      targetHandle: FLOW_INPUT_HANDLE_ID,
+      selected: selectedEdgeIds.includes(edge.edgeId),
+      markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },
+      data: {
+        label: edge.sourcePort === "next" ? void 0 : labels.ports[edge.sourcePort],
+        traversed: traversed.has(edge.edgeId),
+        issueSeverity: worstSeverity(safeIssues.filter((issue) => issue.edgeId === edge.edgeId)),
+        insertableBlocks,
+        onInsert: readOnly ? void 0 : (type) => store.getState().insertNodeOnEdge(type, edge.edgeId)
+      }
+    }));
+  }, [graph.edges, selectedEdgeIds, runOverlay, labels, safeIssues, insertableBlocks, readOnly, store]);
+  const handleNodesChange = useCallback(
+    (changes) => {
+      const state = store.getState();
+      const annotationIds = new Set((state.graph.annotations ?? []).map((annotation) => annotation.annotationId));
+      const positions = {};
+      const annotationGeometry = {};
+      const sizes = {};
+      let nodeSelection = null;
+      let annotationSelection = null;
+      const toggled = (current, id, selected) => selected ? [.../* @__PURE__ */ new Set([...current, id])] : current.filter((candidate) => candidate !== id);
+      for (const change of changes) {
+        if (change.type === "dimensions" && change.dimensions) sizes[change.id] = change.dimensions;
+        if (change.type === "position" && change.position && !readOnly) {
+          if (annotationIds.has(change.id)) annotationGeometry[change.id] = { position: change.position };
+          else
+            positions[change.id] = {
+              x: Math.round(change.position.x / BLOCK_GRID) * BLOCK_GRID,
+              y: Math.round(change.position.y / BLOCK_GRID) * BLOCK_GRID
+            };
+        }
+        if (change.type === "select") {
+          if (annotationIds.has(change.id))
+            annotationSelection = toggled(
+              annotationSelection ?? state.selectedAnnotationIds,
+              change.id,
+              change.selected
+            );
+          else nodeSelection = toggled(nodeSelection ?? state.selectedNodeIds, change.id, change.selected);
+        }
+      }
+      if (Object.keys(sizes).length > 0) setMeasuredSizes((current) => ({ ...current, ...sizes }));
+      if (Object.keys(positions).length > 0) state.moveNodes(positions);
+      if (Object.keys(annotationGeometry).length > 0) state.setAnnotationGeometry(annotationGeometry);
+      if (nodeSelection || annotationSelection)
+        state.setSelection({
+          ...nodeSelection ? { nodeIds: nodeSelection } : {},
+          ...annotationSelection ? { annotationIds: annotationSelection } : {}
+        });
+    },
+    [store, readOnly]
+  );
+  const handleEdgesChange = useCallback(
+    (changes) => {
+      let selection = null;
+      for (const change of changes) {
+        if (change.type !== "select") continue;
+        const current = selection ?? store.getState().selectedEdgeIds;
+        selection = change.selected ? [.../* @__PURE__ */ new Set([...current, change.id])] : current.filter((id) => id !== change.id);
+      }
+      if (selection) store.getState().setSelection({ edgeIds: selection });
+    },
+    [store]
+  );
+  const handleConnect = useCallback(
+    (connection) => {
+      if (readOnly || !isPortId(connection.sourceHandle)) return;
+      store.getState().connect(connection.source, connection.sourceHandle, connection.target);
+    },
+    [store, readOnly]
+  );
+  const isValidConnection = useCallback(
+    (connection) => isPortId(connection.sourceHandle) && canConnect(store.getState().graph, registry, {
+      source: connection.source,
+      sourcePort: connection.sourceHandle,
+      target: connection.target
+    }),
+    [store, registry]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (readOnly || isTypingTarget(event.target)) return;
+      const state = store.getState();
+      const withModifier = event.metaKey || event.ctrlKey;
+      const key = event.key.toLowerCase();
+      if (event.key === "Delete" || event.key === "Backspace") state.removeSelected();
+      else if (event.key === "Escape" && isDrawing) setTool("select");
+      else if (event.key === "Escape") state.setSelection({ nodeIds: [], edgeIds: [], annotationIds: [] });
+      else if (withModifier && key === "a")
+        state.setSelection({
+          nodeIds: state.graph.nodes.map((node) => node.nodeId),
+          annotationIds: (state.graph.annotations ?? []).map((annotation) => annotation.annotationId)
+        });
+      else if (canAnnotate && !withModifier && !event.altKey && TOOL_BY_KEY[key]) changeTool(TOOL_BY_KEY[key]);
+      else if (withModifier && key === "z" && event.shiftKey) state.redo();
+      else if (withModifier && key === "z") state.undo();
+      else if (withModifier && key === "y") state.redo();
+      else if (withModifier && key === "c") state.copySelected();
+      else if (withModifier && key === "v") state.paste();
+      else if (withModifier && key === "d") state.duplicateSelected();
+      else return;
+      event.preventDefault();
+    },
+    [store, readOnly, isDrawing, canAnnotate, changeTool]
+  );
+  const canDeleteSelection = useMemo(
+    () => selectedAnnotationIds.length > 0 || graph.nodes.some((node) => selectedNodeIds.includes(node.nodeId) && isFlowNodeRemovable(node, registry)),
+    [graph.nodes, selectedNodeIds, selectedAnnotationIds, registry]
+  );
+  const selectedAnnotations = useMemo(
+    () => annotations.filter((annotation) => selectedAnnotationIds.includes(annotation.annotationId)),
+    [annotations, selectedAnnotationIds]
+  );
+  const sharedSelectedValue = (valueOf) => {
+    const values = new Set(selectedAnnotations.map(valueOf));
+    return values.size === 1 ? [...values][0] ?? null : null;
+  };
+  const shownTone = sharedSelectedValue((annotation) => annotation.tone) ?? annotationTone;
+  const shownStroke = sharedSelectedValue((annotation) => annotation.stroke ?? "medium") ?? annotationStroke;
+  const changeAnnotationTone = (tone) => {
+    setAnnotationTone(tone);
+    if (selectedAnnotations.length > 0) store.getState().updateAnnotations(selectedAnnotationIds, { tone });
+  };
+  const changeAnnotationStroke = (stroke) => {
+    setAnnotationStroke(stroke);
+    if (selectedAnnotations.length > 0) store.getState().updateAnnotations(selectedAnnotationIds, { stroke });
+  };
+  const selectedCount = selectedNodeIds.length + selectedAnnotationIds.length;
+  const showsSelectionBar = !readOnly && !isAreaSelecting && editingAnnotationId === null && selectedCount > 1;
+  const clearSelection = () => store.getState().setSelection({ nodeIds: [], edgeIds: [], annotationIds: [] });
+  const handlePaneClick = () => {
+    if (editingAnnotationId) finishTextEdit(editingAnnotationId);
+    clearSelection();
+  };
+  const handleLayout = useCallback(() => {
+    const state = store.getState();
+    state.recordHistory();
+    state.moveNodes(layoutFlowByLevels(state.graph, registry));
+  }, [store, registry]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel ?? t("flow.canvas"),
+      ref: containerRef,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      className: mergeClasses(
+        "umode-flow relative h-full min-h-[24rem] w-full select-none rounded-xl bg-canvas focus:outline-none",
+        isDrawing && "umode-flow--drawing",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          nodeTypes: NODE_TYPES,
+          edgeTypes: EDGE_TYPES,
+          onNodesChange: handleNodesChange,
+          onEdgesChange: handleEdgesChange,
+          onConnect: handleConnect,
+          isValidConnection,
+          onNodeDragStart: () => {
+            stopRevealing();
+            store.getState().recordHistory();
+          },
+          onMoveStart: (event) => {
+            if (event) stopRevealing();
+          },
+          onPaneClick: handlePaneClick,
+          onSelectionStart: handleAreaSelectionStart,
+          onSelectionEnd: () => store.getState().setAreaSelecting(false),
+          deleteKeyCode: null,
+          selectionKeyCode: null,
+          multiSelectionKeyCode: MULTI_SELECTION_KEYS,
+          selectionOnDrag: !isDrawing,
+          selectionMode: SelectionMode.Partial,
+          panOnDrag: PAN_ON_DRAG_BUTTONS,
+          panOnScroll: true,
+          panOnScrollSpeed: 1,
+          zoomOnDoubleClick: false,
+          nodesDraggable: !readOnly,
+          nodesConnectable: !readOnly,
+          minZoom: 0.25,
+          maxZoom: 2,
+          fitView: true,
+          fitViewOptions: { padding: 0.2, maxZoom: 1 },
+          proOptions: PRO_OPTIONS,
+          children: [
+            background === "dots" && /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1 }),
+            draft && /* @__PURE__ */ jsx(FlowAnnotationDraftPreview, { draft }),
+            graph.nodes.length >= MINIMAP_MIN_NODES && /* @__PURE__ */ jsx(MiniMap, { pannable: true, zoomable: true, position: "bottom-right", style: MINIMAP_SIZE }),
+            (showsSelectionBar || canAnnotate) && /* @__PURE__ */ jsxs(Panel, { position: "bottom-center", className: "flex flex-col items-center gap-y-2", children: [
+              showsSelectionBar && /* @__PURE__ */ jsx(
+                FlowSelectionBar,
+                {
+                  selectedCount,
+                  canDelete: canDeleteSelection,
+                  onDuplicate: () => store.getState().duplicateSelected(),
+                  onDelete: () => store.getState().removeSelected(),
+                  onClear: clearSelection
+                }
+              ),
+              canAnnotate && (toolsOpen ? /* @__PURE__ */ jsx(
+                FlowAnnotationToolbar,
+                {
+                  tool,
+                  shapeTool,
+                  onToolChange: changeTool,
+                  tone: shownTone,
+                  onToneChange: changeAnnotationTone,
+                  stroke: shownStroke,
+                  onStrokeChange: changeAnnotationStroke,
+                  canUndo,
+                  canRedo,
+                  onUndo: () => store.getState().undo(),
+                  onRedo: () => store.getState().redo(),
+                  canDelete: canDeleteSelection,
+                  onDelete: () => store.getState().removeSelected(),
+                  onClose: closeTools
+                }
+              ) : /* @__PURE__ */ jsx(FlowAnnotationLauncher, { onOpen: () => setToolsOpen(true) }))
+            ] }),
+            /* @__PURE__ */ jsx(
+              FlowZoomControls,
+              {
+                onUndo: readOnly ? void 0 : () => store.getState().undo(),
+                onRedo: readOnly ? void 0 : () => store.getState().redo(),
+                canUndo,
+                canRedo,
+                onLayout: readOnly ? void 0 : handleLayout,
+                position: controlsPosition
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  FlowCanvas as default
+};
+//# sourceMappingURL=FlowCanvas.js.map

package/dist/components/UI/Flow/FlowCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowCanvas.js","sources":["../../../../src/components/UI/Flow/FlowCanvas.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport {\n  Background,\n  BackgroundVariant,\n  type Connection,\n  type EdgeChange,\n  MarkerType,\n  MiniMap,\n  type NodeChange,\n  Panel,\n  type PanelPosition,\n  type ProOptions,\n  ReactFlow,\n  SelectionMode,\n  useReactFlow,\n  useStore as useReactFlowStore,\n} from '@xyflow/react';\n\nimport FlowAnnotationDraftPreview from './FlowAnnotationDraftPreview';\nimport FlowAnnotationNode, { type TFlowAnnotationNode } from './FlowAnnotationNode';\nimport { FLOW_ANNOTATION_MIN_SIZE, FLOW_TEXT_CARET_OFFSET, scaleAnnotationPoints } from './flowAnnotations';\nimport FlowAnnotationToolbar, { FlowAnnotationLauncher } from './FlowAnnotationToolbar';\nimport FlowBlockNode, { FLOW_INPUT_HANDLE_ID, type IFlowAddableBlock, type TFlowBlockNode } from './FlowBlockNode';\nimport { flowOutputsOf } from './flowBlockRegistry';\nimport FlowConnectionEdge, { type TFlowConnectionEdge } from './FlowConnectionEdge';\nimport { useFlowBlockRegistry, useFlowEditor, useFlowEditorStore } from './FlowEditorProvider';\nimport type { IFlowAnnotationGeometry } from './flowEditorStore';\nimport { canConnect, isFlowNodeRemovable, layoutFlowByLevels } from './flowGraph';\nimport FlowSelectionBar from './FlowSelectionBar';\nimport type {\n  IFlowAnnotation,\n  IFlowIssue,\n  IFlowPosition,\n  IFlowRunOverlay,\n  TFlowAnnotationKind,\n  TFlowAnnotationStroke,\n  TFlowAnnotationTone,\n  TFlowCanvasTool,\n  TFlowIssueSeverity,\n  TFlowPortId,\n  TFlowShapeTool,\n} from './flowTypes';\nimport { boundsOfRects, type IFlowRect, type IFlowViewport, viewportToReveal } from './flowViewport';\nimport FlowZoomControls from './FlowZoomControls';\nimport { useFlowAnnotationDrawing } from './useFlowAnnotationDrawing';\nimport { useFlowLabels } from './useFlowLabels';\n\nimport '@xyflow/react/dist/base.css';\nimport '../../../styles/flow.css';\n\nconst PRO_OPTIONS: ProOptions = { hideAttribution: true };\nconst NODE_TYPES = { flowBlock: FlowBlockNode, flowAnnotation: FlowAnnotationNode };\nconst EDGE_TYPES = { flowConnection: FlowConnectionEdge };\nconst MINIMAP_SIZE = { width: 160, height: 104 };\n/** A small flow fits on screen whole, where a minimap only covers blocks. */\nconst MINIMAP_MIN_NODES = 5;\n/** Blocks snap to this grid; annotations move freely, so the snap is applied here and not by xyflow. */\nconst BLOCK_GRID = 16;\nconst PORTS: Array<TFlowPortId> = ['next', 'true', 'false', 'error'];\nconst REVEAL_DURATION_MS = 200;\n/**\n * Navigation reads like Figma: two fingers on a trackpad (or the wheel) pan, a pinch or Cmd/Ctrl + wheel\n * zooms, Space + drag or the middle button pans, and a drag on the empty canvas draws a selection.\n */\nconst PAN_ON_DRAG_BUTTONS = [1];\nconst MULTI_SELECTION_KEYS = ['Shift', 'Meta', 'Control'];\nconst TOOL_BY_KEY: Record<string, TFlowCanvasTool> = {\n  v: 'select',\n  p: 'drawing',\n  l: 'line',\n  r: 'rectangle',\n  o: 'ellipse',\n  a: 'arrow',\n  t: 'text',\n};\nconst SHAPE_TOOLS: Array<TFlowShapeTool> = ['line', 'arrow', 'rectangle', 'ellipse', 'step'];\n/** Annotations sit under the blocks: a frame drawn around them never covers what it points at. */\nconst ANNOTATION_Z_INDEX = -1;\n\ntype TFlowCanvasNode = TFlowBlockNode | TFlowAnnotationNode;\n\nexport interface IFlowCanvasProps {\n  issues?: Array<IFlowIssue>;\n  runOverlay?: IFlowRunOverlay | null;\n  readOnly?: boolean;\n  /** Accessible name of the canvas region, from `t()`. Defaults to the library label. */\n  ariaLabel?: string;\n  className?: string;\n  /** Where the zoom and history controls sit. */\n  controlsPosition?: PanelPosition;\n  /** The dot grid behind the blocks. Blocks still snap to the grid when it is hidden. */\n  background?: 'dots' | 'none';\n  /** Shows the drawing toolbar (pen, shapes, text). Annotations already in the graph render either way. */\n  annotationTools?: boolean;\n}\n\nconst isPortId = (value: string | null | undefined): value is TFlowPortId => PORTS.includes(value as TFlowPortId);\n\nconst worstSeverity = (issues: Array<IFlowIssue>): TFlowIssueSeverity | undefined => {\n  if (issues.some((issue) => issue.severity === 'error')) return 'error';\n  if (issues.some((issue) => issue.severity === 'warning')) return 'warning';\n  return undefined;\n};\n\nconst isTypingTarget = (target: EventTarget | null): boolean =>\n  target instanceof HTMLElement &&\n  (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));\n\n/**\n * The editing surface. Renders the graph held by `FlowEditorProvider` and turns every\n * gesture (drag, connect, select, delete, shortcuts) into a store action, so undo\n * and the dirty flag see all of them.\n */\nconst FlowCanvas: React.FC<IFlowCanvasProps> = ({\n  issues = [],\n  runOverlay,\n  readOnly = false,\n  ariaLabel,\n  className,\n  controlsPosition,\n  background = 'dots',\n  annotationTools = false,\n}) => {\n  const { t } = useTranslation('ui');\n  const labels = useFlowLabels();\n  const registry = useFlowBlockRegistry();\n  const store = useFlowEditorStore();\n\n  const graph = useFlowEditor((state) => state.graph);\n  const selectedNodeIds = useFlowEditor((state) => state.selectedNodeIds);\n  const selectedEdgeIds = useFlowEditor((state) => state.selectedEdgeIds);\n  const selectedAnnotationIds = useFlowEditor((state) => state.selectedAnnotationIds);\n  const isAreaSelecting = useFlowEditor((state) => state.isAreaSelecting);\n  const canUndo = useFlowEditor((state) => state.past.length > 0);\n  const canRedo = useFlowEditor((state) => state.future.length > 0);\n\n  const safeIssues = useMemo(() => (Array.isArray(issues) ? issues : []), [issues]);\n  // Measured sizes are view state, not part of the flow: kept here so the minimap can draw the blocks.\n  const [measuredSizes, setMeasuredSizes] = useState<Record<string, { width: number; height: number }>>({});\n\n  const { getViewport, setViewport, screenToFlowPosition } = useReactFlow<TFlowCanvasNode, TFlowConnectionEdge>();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [tool, setTool] = useState<TFlowCanvasTool>('select');\n  const [shapeTool, setShapeTool] = useState<TFlowShapeTool>('rectangle');\n  const [toolsOpen, setToolsOpen] = useState(false);\n  const [annotationTone, setAnnotationTone] = useState<TFlowAnnotationTone>('danger');\n  const [annotationStroke, setAnnotationStroke] = useState<TFlowAnnotationStroke>('medium');\n  const [editingAnnotationId, setEditingAnnotationId] = useState<string | null>(null);\n  const canAnnotate = annotationTools && !readOnly;\n  const isDrawing = canAnnotate && tool !== 'select';\n  const annotations = useMemo(() => graph.annotations ?? [], [graph.annotations]);\n\n  const changeTool = useCallback((nextTool: TFlowCanvasTool) => {\n    setTool(nextTool);\n    setToolsOpen(true);\n    if (SHAPE_TOOLS.includes(nextTool as TFlowShapeTool)) setShapeTool(nextTool as TFlowShapeTool);\n  }, []);\n\n  const closeTools = useCallback(() => {\n    setTool('select');\n    setToolsOpen(false);\n  }, []);\n\n  // The pen and the steps keep going (stroke after stroke, 1, 2, 3...); every other tool hands back the pointer.\n  const handleAnnotationCreated = useCallback(\n    (annotationId: string, kind: TFlowAnnotationKind) => {\n      if (kind === 'drawing' || kind === 'step') {\n        store.getState().setSelection({ annotationIds: [] });\n        return;\n      }\n      setTool('select');\n      if (kind === 'text') setEditingAnnotationId(annotationId);\n    },\n    [store],\n  );\n\n  const draft = useFlowAnnotationDrawing({\n    containerRef,\n    tool,\n    tone: annotationTone,\n    stroke: annotationStroke,\n    enabled: canAnnotate,\n    onCreated: handleAnnotationCreated,\n  });\n  // As in Excalidraw: a double click on the empty canvas starts a note right there, ready to type.\n  useEffect(() => {\n    if (!canAnnotate) return undefined;\n    const pane = containerRef.current?.querySelector<HTMLElement>('.react-flow__pane');\n    if (!pane) return undefined;\n    const handleDoubleClick = (event: MouseEvent) => {\n      if (event.target !== pane) return;\n      const point = screenToFlowPosition({ x: event.clientX, y: event.clientY }, { snapToGrid: false });\n      const annotationId = store.getState().addAnnotation({\n        kind: 'text',\n        tone: annotationTone,\n        stroke: annotationStroke,\n        position: { x: point.x, y: point.y - FLOW_TEXT_CARET_OFFSET },\n        size: { width: FLOW_ANNOTATION_MIN_SIZE, height: FLOW_ANNOTATION_MIN_SIZE },\n        text: '',\n      });\n      setTool('select');\n      setEditingAnnotationId(annotationId);\n    };\n    pane.addEventListener('dblclick', handleDoubleClick);\n    return () => pane.removeEventListener('dblclick', handleDoubleClick);\n  }, [canAnnotate, annotationTone, annotationStroke, screenToFlowPosition, store]);\n\n  const canvasWidth = useReactFlowStore((state) => state.width);\n  const canvasHeight = useReactFlowStore((state) => state.height);\n  // Blocks just added and selected: kept in view until the user moves the view or the selection, so\n  // the host panel that opens on selection (and narrows the canvas) cannot hide them.\n  const [revealNodeIds, setRevealNodeIds] = useState<Array<string>>([]);\n  const knownNodeIdsRef = useRef<Set<string> | null>(null);\n  const pendingViewportRef = useRef<{ viewport: IFlowViewport; settlesAt: number } | null>(null);\n\n  useEffect(() => {\n    const currentIds = new Set(graph.nodes.map((node) => node.nodeId));\n    const knownIds = knownNodeIdsRef.current;\n    knownNodeIdsRef.current = currentIds;\n    const addedAndSelected = knownIds ? selectedNodeIds.filter((id) => currentIds.has(id) && !knownIds.has(id)) : [];\n    if (addedAndSelected.length > 0) {\n      setRevealNodeIds(addedAndSelected);\n      return;\n    }\n    setRevealNodeIds((current) =>\n      current.length > 0 && !current.every((id) => selectedNodeIds.includes(id)) ? [] : current,\n    );\n  }, [graph.nodes, selectedNodeIds]);\n\n  useEffect(() => {\n    if (revealNodeIds.length === 0) return;\n    const rects: Array<IFlowRect> = [];\n    for (const nodeId of revealNodeIds) {\n      const node = graph.nodes.find((candidate) => candidate.nodeId === nodeId);\n      const size = measuredSizes[nodeId];\n      if (!node || !size) return;\n      rects.push({ ...node.position, ...size });\n    }\n    const bounds = boundsOfRects(rects);\n    if (!bounds) return;\n    // A pan still animating reports an in-between viewport; build on where it is heading instead.\n    const pending = pendingViewportRef.current;\n    const baseViewport = pending && pending.settlesAt > Date.now() ? pending.viewport : getViewport();\n    const target = viewportToReveal(baseViewport, bounds, { width: canvasWidth, height: canvasHeight });\n    if (!target) return;\n    pendingViewportRef.current = { viewport: target, settlesAt: Date.now() + REVEAL_DURATION_MS };\n    void setViewport(target, { duration: REVEAL_DURATION_MS });\n  }, [revealNodeIds, graph.nodes, measuredSizes, canvasWidth, canvasHeight, getViewport, setViewport]);\n\n  // xyflow reports no end for a cancelled pointer, so the release is also heard on the window.\n  const handleAreaSelectionStart = useCallback(() => {\n    store.getState().setAreaSelecting(true);\n    const finishAreaSelection = () => {\n      store.getState().setAreaSelecting(false);\n      window.removeEventListener('pointerup', finishAreaSelection);\n      window.removeEventListener('pointercancel', finishAreaSelection);\n      window.removeEventListener('blur', finishAreaSelection);\n    };\n    window.addEventListener('pointerup', finishAreaSelection);\n    window.addEventListener('pointercancel', finishAreaSelection);\n    window.addEventListener('blur', finishAreaSelection);\n  }, [store]);\n\n  const stopRevealing = useCallback(() => {\n    pendingViewportRef.current = null;\n    setRevealNodeIds((current) => (current.length > 0 ? [] : current));\n  }, []);\n\n  const addableBlocks = useMemo<Array<IFlowAddableBlock>>(() => {\n    if (readOnly) return [];\n    return registry.list\n      .filter((definition) => definition.category !== 'trigger')\n      .filter(\n        (definition) =>\n          definition.maxInstances === undefined ||\n          graph.nodes.filter((node) => node.type === definition.type).length < definition.maxInstances,\n      )\n      .map((definition) => ({ type: definition.type, label: definition.label, icon: definition.icon }));\n  }, [registry, graph.nodes, readOnly]);\n\n  // A block in the middle of an edge needs an output to carry the flow on to the old target.\n  const insertableBlocks = useMemo<Array<IFlowAddableBlock>>(\n    () =>\n      addableBlocks.filter((block) => {\n        const definition = registry.get(block.type);\n        return definition ? flowOutputsOf(definition, definition.createDefaultConfig()).length > 0 : false;\n      }),\n    [addableBlocks, registry],\n  );\n\n  const blockNodes = useMemo<Array<TFlowBlockNode>>(\n    () =>\n      graph.nodes.map((node) => {\n        const definition = registry.get(node.type);\n        const nodeIssues = safeIssues.filter((issue) => issue.nodeId === node.nodeId);\n        return {\n          id: node.nodeId,\n          type: 'flowBlock',\n          position: node.position,\n          measured: measuredSizes[node.nodeId],\n          selected: selectedNodeIds.includes(node.nodeId),\n          draggable: !readOnly,\n          connectable: !readOnly,\n          data: {\n            icon: definition?.resolveIcon?.(node.config) ?? definition?.icon ?? 'help',\n            title: node.label ?? definition?.resolveLabel?.(node.config) ?? definition?.label ?? node.type,\n            categoryLabel: definition ? labels.categories[definition.category] : '',\n            summary: definition\n              ? definition.renderSummary(node.config)\n              : labels.issueMessage({ code: 'unknownBlock', severity: 'error' }),\n            hasInput: definition ? definition.category !== 'trigger' : true,\n            outputs: flowOutputsOf(definition, node.config),\n            connectedPorts: graph.edges.filter((edge) => edge.source === node.nodeId).map((edge) => edge.sourcePort),\n            portLabels: labels.ports,\n            addableBlocks,\n            onAddFromPort: readOnly\n              ? undefined\n              : (port, type) => store.getState().addNodeFromPort(type, node.nodeId, port),\n            disabled: node.disabled,\n            issueSeverity: worstSeverity(nodeIssues),\n            issueCount: nodeIssues.length,\n            runStatus: runOverlay?.steps?.[node.nodeId],\n          },\n        };\n      }),\n    [\n      graph.nodes,\n      graph.edges,\n      registry,\n      safeIssues,\n      selectedNodeIds,\n      readOnly,\n      labels,\n      runOverlay,\n      measuredSizes,\n      addableBlocks,\n      store,\n    ],\n  );\n\n  const resizeAnnotation = useCallback(\n    (annotationId: string, geometry: IFlowAnnotationGeometry) => {\n      const annotation = (store.getState().graph.annotations ?? []).find(\n        (candidate) => candidate.annotationId === annotationId,\n      );\n      if (!annotation || !geometry.size) return;\n      store.getState().setAnnotationGeometry({\n        [annotationId]: {\n          ...geometry,\n          points: scaleAnnotationPoints(annotation.points, annotation.size, geometry.size),\n        },\n      });\n    },\n    [store],\n  );\n\n  const finishTextEdit = useCallback(\n    (annotationId: string) => {\n      setEditingAnnotationId((current) => (current === annotationId ? null : current));\n      const annotation = (store.getState().graph.annotations ?? []).find(\n        (candidate) => candidate.annotationId === annotationId,\n      );\n      if (annotation && !annotation.text?.trim()) store.getState().removeAnnotations([annotationId]);\n      // Escape leaves the focus nowhere; give it back to the canvas so the tool keys keep working.\n      window.setTimeout(() => {\n        if (!document.activeElement || document.activeElement === document.body)\n          containerRef.current?.focus({ preventScroll: true });\n      }, 0);\n    },\n    [store],\n  );\n\n  const annotationNodes = useMemo<Array<TFlowAnnotationNode>>(\n    () =>\n      annotations.map((annotation) => {\n        const selected = selectedAnnotationIds.includes(annotation.annotationId);\n        const editing = editingAnnotationId === annotation.annotationId;\n        return {\n          id: annotation.annotationId,\n          type: 'flowAnnotation',\n          position: annotation.position,\n          // A text note takes the size of what is written in it; every other kind keeps its box.\n          ...(annotation.kind === 'text' ? {} : { width: annotation.size.width, height: annotation.size.height }),\n          selected,\n          draggable: !readOnly && !editing,\n          connectable: false,\n          zIndex: ANNOTATION_Z_INDEX,\n          // A shape is only grabbed by its stroke until it is selected; text is grabbed anywhere.\n          style: { pointerEvents: annotation.kind === 'text' || selected ? 'all' : 'none' },\n          data: {\n            annotation,\n            readOnly,\n            editing,\n            placeholder: t('flow.annotations.textPlaceholder'),\n            onTextChange: (text: string) => store.getState().updateAnnotations([annotation.annotationId], { text }),\n            onEditStart: () => setEditingAnnotationId(annotation.annotationId),\n            onEditEnd: () => finishTextEdit(annotation.annotationId),\n            onResizeStart: () => store.getState().recordHistory(),\n            onResize: (geometry: IFlowAnnotationGeometry) => resizeAnnotation(annotation.annotationId, geometry),\n          },\n        };\n      }),\n    [annotations, selectedAnnotationIds, editingAnnotationId, readOnly, t, store, finishTextEdit, resizeAnnotation],\n  );\n\n  const nodes = useMemo<Array<TFlowCanvasNode>>(\n    () => [...annotationNodes, ...blockNodes],\n    [annotationNodes, blockNodes],\n  );\n\n  const edges = useMemo<Array<TFlowConnectionEdge>>(() => {\n    const traversed = new Set(runOverlay?.traversedEdgeIds ?? []);\n    return graph.edges.map((edge) => ({\n      id: edge.edgeId,\n      type: 'flowConnection',\n      source: edge.source,\n      sourceHandle: edge.sourcePort,\n      target: edge.target,\n      targetHandle: FLOW_INPUT_HANDLE_ID,\n      selected: selectedEdgeIds.includes(edge.edgeId),\n      markerEnd: { type: MarkerType.ArrowClosed, width: 16, height: 16 },\n      data: {\n        label: edge.sourcePort === 'next' ? undefined : labels.ports[edge.sourcePort],\n        traversed: traversed.has(edge.edgeId),\n        issueSeverity: worstSeverity(safeIssues.filter((issue) => issue.edgeId === edge.edgeId)),\n        insertableBlocks,\n        onInsert: readOnly ? undefined : (type: string) => store.getState().insertNodeOnEdge(type, edge.edgeId),\n      },\n    }));\n  }, [graph.edges, selectedEdgeIds, runOverlay, labels, safeIssues, insertableBlocks, readOnly, store]);\n\n  const handleNodesChange = useCallback(\n    (changes: Array<NodeChange<TFlowCanvasNode>>) => {\n      const state = store.getState();\n      const annotationIds = new Set((state.graph.annotations ?? []).map((annotation) => annotation.annotationId));\n      const positions: Record<string, IFlowPosition> = {};\n      const annotationGeometry: Record<string, IFlowAnnotationGeometry> = {};\n      const sizes: Record<string, { width: number; height: number }> = {};\n      let nodeSelection: Array<string> | null = null;\n      let annotationSelection: Array<string> | null = null;\n      const toggled = (current: Array<string>, id: string, selected: boolean): Array<string> =>\n        selected ? [...new Set([...current, id])] : current.filter((candidate) => candidate !== id);\n\n      for (const change of changes) {\n        if (change.type === 'dimensions' && change.dimensions) sizes[change.id] = change.dimensions;\n        if (change.type === 'position' && change.position && !readOnly) {\n          if (annotationIds.has(change.id)) annotationGeometry[change.id] = { position: change.position };\n          else\n            positions[change.id] = {\n              x: Math.round(change.position.x / BLOCK_GRID) * BLOCK_GRID,\n              y: Math.round(change.position.y / BLOCK_GRID) * BLOCK_GRID,\n            };\n        }\n        if (change.type === 'select') {\n          if (annotationIds.has(change.id))\n            annotationSelection = toggled(\n              annotationSelection ?? state.selectedAnnotationIds,\n              change.id,\n              change.selected,\n            );\n          else nodeSelection = toggled(nodeSelection ?? state.selectedNodeIds, change.id, change.selected);\n        }\n      }\n      if (Object.keys(sizes).length > 0) setMeasuredSizes((current) => ({ ...current, ...sizes }));\n      if (Object.keys(positions).length > 0) state.moveNodes(positions);\n      if (Object.keys(annotationGeometry).length > 0) state.setAnnotationGeometry(annotationGeometry);\n      if (nodeSelection || annotationSelection)\n        state.setSelection({\n          ...(nodeSelection ? { nodeIds: nodeSelection } : {}),\n          ...(annotationSelection ? { annotationIds: annotationSelection } : {}),\n        });\n    },\n    [store, readOnly],\n  );\n\n  const handleEdgesChange = useCallback(\n    (changes: Array<EdgeChange<TFlowConnectionEdge>>) => {\n      let selection: Array<string> | null = null;\n      for (const change of changes) {\n        if (change.type !== 'select') continue;\n        const current: Array<string> = selection ?? store.getState().selectedEdgeIds;\n        selection = change.selected ? [...new Set([...current, change.id])] : current.filter((id) => id !== change.id);\n      }\n      if (selection) store.getState().setSelection({ edgeIds: selection });\n    },\n    [store],\n  );\n\n  const handleConnect = useCallback(\n    (connection: Connection) => {\n      if (readOnly || !isPortId(connection.sourceHandle)) return;\n      store.getState().connect(connection.source, connection.sourceHandle, connection.target);\n    },\n    [store, readOnly],\n  );\n\n  const isValidConnection = useCallback(\n    (connection: Connection | TFlowConnectionEdge) =>\n      isPortId(connection.sourceHandle) &&\n      canConnect(store.getState().graph, registry, {\n        source: connection.source,\n        sourcePort: connection.sourceHandle,\n        target: connection.target,\n      }),\n    [store, registry],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (readOnly || isTypingTarget(event.target)) return;\n      const state = store.getState();\n      const withModifier = event.metaKey || event.ctrlKey;\n      const key = event.key.toLowerCase();\n\n      if (event.key === 'Delete' || event.key === 'Backspace') state.removeSelected();\n      else if (event.key === 'Escape' && isDrawing) setTool('select');\n      else if (event.key === 'Escape') state.setSelection({ nodeIds: [], edgeIds: [], annotationIds: [] });\n      else if (withModifier && key === 'a')\n        state.setSelection({\n          nodeIds: state.graph.nodes.map((node) => node.nodeId),\n          annotationIds: (state.graph.annotations ?? []).map((annotation) => annotation.annotationId),\n        });\n      else if (canAnnotate && !withModifier && !event.altKey && TOOL_BY_KEY[key]) changeTool(TOOL_BY_KEY[key]);\n      else if (withModifier && key === 'z' && event.shiftKey) state.redo();\n      else if (withModifier && key === 'z') state.undo();\n      else if (withModifier && key === 'y') state.redo();\n      else if (withModifier && key === 'c') state.copySelected();\n      else if (withModifier && key === 'v') state.paste();\n      else if (withModifier && key === 'd') state.duplicateSelected();\n      else return;\n      event.preventDefault();\n    },\n    [store, readOnly, isDrawing, canAnnotate, changeTool],\n  );\n\n  const canDeleteSelection = useMemo(\n    () =>\n      selectedAnnotationIds.length > 0 ||\n      graph.nodes.some((node) => selectedNodeIds.includes(node.nodeId) && isFlowNodeRemovable(node, registry)),\n    [graph.nodes, selectedNodeIds, selectedAnnotationIds, registry],\n  );\n\n  // The toolbar shows the colour and weight of what is selected, when it all shares one, and changing\n  // them restyles the selection as well as what is drawn next.\n  const selectedAnnotations = useMemo(\n    () => annotations.filter((annotation) => selectedAnnotationIds.includes(annotation.annotationId)),\n    [annotations, selectedAnnotationIds],\n  );\n  const sharedSelectedValue = <TValue,>(valueOf: (annotation: IFlowAnnotation) => TValue): TValue | null => {\n    const values = new Set(selectedAnnotations.map(valueOf));\n    return values.size === 1 ? ([...values][0] ?? null) : null;\n  };\n  const shownTone = sharedSelectedValue((annotation) => annotation.tone) ?? annotationTone;\n  const shownStroke = sharedSelectedValue((annotation) => annotation.stroke ?? 'medium') ?? annotationStroke;\n  const changeAnnotationTone = (tone: TFlowAnnotationTone) => {\n    setAnnotationTone(tone);\n    if (selectedAnnotations.length > 0) store.getState().updateAnnotations(selectedAnnotationIds, { tone });\n  };\n  const changeAnnotationStroke = (stroke: TFlowAnnotationStroke) => {\n    setAnnotationStroke(stroke);\n    if (selectedAnnotations.length > 0) store.getState().updateAnnotations(selectedAnnotationIds, { stroke });\n  };\n\n  const selectedCount = selectedNodeIds.length + selectedAnnotationIds.length;\n  const showsSelectionBar = !readOnly && !isAreaSelecting && editingAnnotationId === null && selectedCount > 1;\n  const clearSelection = () => store.getState().setSelection({ nodeIds: [], edgeIds: [], annotationIds: [] });\n  const handlePaneClick = () => {\n    if (editingAnnotationId) finishTextEdit(editingAnnotationId);\n    clearSelection();\n  };\n\n  const handleLayout = useCallback(() => {\n    const state = store.getState();\n    state.recordHistory();\n    state.moveNodes(layoutFlowByLevels(state.graph, registry));\n  }, [store, registry]);\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabel ?? t('flow.canvas')}\n      ref={containerRef}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      className={mergeClasses(\n        'umode-flow relative h-full min-h-[24rem] w-full select-none rounded-xl bg-canvas focus:outline-none',\n        isDrawing && 'umode-flow--drawing',\n        className,\n      )}\n    >\n      <ReactFlow<TFlowCanvasNode, TFlowConnectionEdge>\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={NODE_TYPES}\n        edgeTypes={EDGE_TYPES}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={handleConnect}\n        isValidConnection={isValidConnection}\n        onNodeDragStart={() => {\n          stopRevealing();\n          store.getState().recordHistory();\n        }}\n        onMoveStart={(event) => {\n          if (event) stopRevealing();\n        }}\n        onPaneClick={handlePaneClick}\n        onSelectionStart={handleAreaSelectionStart}\n        onSelectionEnd={() => store.getState().setAreaSelecting(false)}\n        deleteKeyCode={null}\n        selectionKeyCode={null}\n        multiSelectionKeyCode={MULTI_SELECTION_KEYS}\n        selectionOnDrag={!isDrawing}\n        selectionMode={SelectionMode.Partial}\n        panOnDrag={PAN_ON_DRAG_BUTTONS}\n        panOnScroll\n        panOnScrollSpeed={1}\n        zoomOnDoubleClick={false}\n        nodesDraggable={!readOnly}\n        nodesConnectable={!readOnly}\n        minZoom={0.25}\n        maxZoom={2}\n        fitView\n        fitViewOptions={{ padding: 0.2, maxZoom: 1 }}\n        proOptions={PRO_OPTIONS}\n      >\n        {background === 'dots' && <Background variant={BackgroundVariant.Dots} gap={16} size={1} />}\n        {draft && <FlowAnnotationDraftPreview draft={draft} />}\n        {graph.nodes.length >= MINIMAP_MIN_NODES && (\n          <MiniMap pannable zoomable position=\"bottom-right\" style={MINIMAP_SIZE} />\n        )}\n        {(showsSelectionBar || canAnnotate) && (\n          <Panel position=\"bottom-center\" className=\"flex flex-col items-center gap-y-2\">\n            {showsSelectionBar && (\n              <FlowSelectionBar\n                selectedCount={selectedCount}\n                canDelete={canDeleteSelection}\n                onDuplicate={() => store.getState().duplicateSelected()}\n                onDelete={() => store.getState().removeSelected()}\n                onClear={clearSelection}\n              />\n            )}\n            {canAnnotate &&\n              (toolsOpen ? (\n                <FlowAnnotationToolbar\n                  tool={tool}\n                  shapeTool={shapeTool}\n                  onToolChange={changeTool}\n                  tone={shownTone}\n                  onToneChange={changeAnnotationTone}\n                  stroke={shownStroke}\n                  onStrokeChange={changeAnnotationStroke}\n                  canUndo={canUndo}\n                  canRedo={canRedo}\n                  onUndo={() => store.getState().undo()}\n                  onRedo={() => store.getState().redo()}\n                  canDelete={canDeleteSelection}\n                  onDelete={() => store.getState().removeSelected()}\n                  onClose={closeTools}\n                />\n              ) : (\n                <FlowAnnotationLauncher onOpen={() => setToolsOpen(true)} />\n              ))}\n          </Panel>\n        )}\n        <FlowZoomControls\n          onUndo={readOnly ? undefined : () => store.getState().undo()}\n          onRedo={readOnly ? undefined : () => store.getState().redo()}\n          canUndo={canUndo}\n          canRedo={canRedo}\n          onLayout={readOnly ? undefined : handleLayout}\n          position={controlsPosition}\n        />\n      </ReactFlow>\n    </div>\n  );\n};\n\nexport default FlowCanvas;\n"],"names":["useReactFlowStore"],"mappings":"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"}