feat: Add zIndex Management for all Nodes

Author: camielvs

knip.json

@@ -7,7 +7,10 @@
     "src/components/ui/**",
     "src/components/shared/StatusFilterSelect/**",
     "openapi-ts.config.ts",
-    "vite.config.ghpages.js"
+    "vite.config.ghpages.js",
+    "src/components/shared/ReactFlow/FlowCanvas/utils/zIndex.ts",
+    "src/components/shared/ReactFlow/FlowControls/StackingControls.tsx",
+    "src/components/shared/ReactFlow/FlowCanvas/types.ts"
   ],
   "ignoreDependencies": [
     "@radix-ui/react-accordion",

react-compiler.config.js

@@ -48,6 +48,7 @@ export const REACT_COMPILER_ENABLED_DIRS = [
   "src/components/shared/TaskDetails/DisplayNameEditor.tsx",
   "src/components/shared/TaskDetails/Actions/UnpackSubgraphButton.tsx",
   "src/components/shared/ReactFlow/FlowSidebar/components/ComponentHoverPopover.tsx",
+  "src/components/shared/ReactFlow/FlowControls/StackingControls.tsx",
 
   // 11-20 useCallback/useMemo
   // "src/components/ui",                         // 12

src/components/shared/ReactFlow/FlowCanvas/FlowCanvas.tsx

@@ -990,6 +990,7 @@ const FlowCanvas = ({
         connectOnClick={!readOnly}
         connectionLineComponent={ConnectionLine}
         proOptions={{ hideAttribution: true }}
+        zIndexMode="manual"
         className={cn(
           (rest.selectionOnDrag || (shiftKeyPressed && !isConnecting)) &&
             "cursor-crosshair",

src/components/shared/ReactFlow/FlowCanvas/types.ts

@@ -26,6 +26,10 @@ export const edgeTypes: Record<string, ComponentType<any>> = {
   customEdge: SmoothEdge,
 };
 
+export function isDefinedNode(node: Node): node is Node & { type: NodeType } {
+  return !!node.type && node.type in nodeTypes;
+}
+
 export function isTaskNodeType(type: string): type is TaskType {
   return type === "task" || type === "input" || type === "output";
 }

src/components/shared/ReactFlow/FlowCanvas/utils/zIndex.ts

@@ -0,0 +1,91 @@
+import { type Node } from "@xyflow/react";
+
+import { isDefinedNode, type NodeType } from "../types";
+
+type ZIndexDefinition = {
+  min: number;
+  max: number;
+  default: number;
+};
+
+export const Z_INDEX_RANGES: Record<NodeType, ZIndexDefinition> = {
+  task: {
+    min: -100,
+    max: 100,
+    default: 0,
+  },
+  input: {
+    min: -100,
+    max: 100,
+    default: 0,
+  },
+  output: {
+    min: -100,
+    max: 100,
+    default: 0,
+  },
+  ghost: {
+    min: 100,
+    max: 100,
+    default: 100,
+  },
+};
+
+const getNodeZIndexProp = (
+  node: Node,
+  prop: keyof ZIndexDefinition,
+): number => {
+  if (!isDefinedNode(node)) {
+    return 0;
+  }
+
+  return Z_INDEX_RANGES[node.type][prop];
+};
+
+const getAllNodeZIndices = (nodes: Node[]): number[] => {
+  return nodes
+    .map((node) => node.zIndex ?? getNodeZIndexProp(node, "default"))
+    .sort((a, b) => a - b);
+};
+
+export const bringToFront = (node: Node, allNodes: Node[]): number => {
+  const allZIndices = getAllNodeZIndices(allNodes);
+  const maxZ = Math.max(...allZIndices, getNodeZIndexProp(node, "default"));
+  const nodeMax = getNodeZIndexProp(node, "max");
+  return Math.min(maxZ + 1, nodeMax);
+};
+
+export const sendToBack = (node: Node, allNodes: Node[]): number => {
+  const allZIndices = getAllNodeZIndices(allNodes);
+  const minZ = Math.min(...allZIndices, getNodeZIndexProp(node, "default"));
+  const nodeMin = getNodeZIndexProp(node, "min");
+  return Math.max(minZ - 1, nodeMin);
+};
+
+export const moveForward = (node: Node, allNodes: Node[]): number => {
+  const currentZ = node.zIndex ?? getNodeZIndexProp(node, "default");
+  const allZIndices = getAllNodeZIndices(allNodes);
+  const nodeMax = getNodeZIndexProp(node, "max");
+
+  const higherIndices = allZIndices.filter((z) => z > currentZ);
+  if (higherIndices.length === 0) {
+    return currentZ;
+  }
+
+  const nextZ = Math.min(...higherIndices);
+  return Math.min(nextZ === currentZ + 1 ? nextZ + 1 : nextZ, nodeMax);
+};
+
+export const moveBackward = (node: Node, allNodes: Node[]): number => {
+  const currentZ = node.zIndex ?? getNodeZIndexProp(node, "default");
+  const allZIndices = getAllNodeZIndices(allNodes);
+  const nodeMin = getNodeZIndexProp(node, "min");
+
+  const lowerIndices = allZIndices.filter((z) => z < currentZ);
+  if (lowerIndices.length === 0) {
+    return currentZ;
+  }
+
+  const prevZ = Math.max(...lowerIndices);
+  return Math.max(prevZ === currentZ - 1 ? prevZ - 1 : prevZ, nodeMin);
+};

src/components/shared/ReactFlow/FlowControls/StackingControls.tsx

@@ -0,0 +1,85 @@
+import { useReactFlow } from "@xyflow/react";
+
+import { Icon } from "@/components/ui/icon";
+import { InlineStack } from "@/components/ui/layout";
+
+import TooltipButton from "../../Buttons/TooltipButton";
+import {
+  bringToFront,
+  moveBackward,
+  moveForward,
+  sendToBack,
+} from "../FlowCanvas/utils/zIndex";
+
+export const StackingControls = ({
+  nodeId,
+  onChange,
+}: {
+  nodeId: string;
+  onChange: (newZIndex: number) => void;
+}) => {
+  const { getNodes } = useReactFlow();
+
+  const updateZIndex = (
+    operation: "front" | "back" | "forward" | "backward",
+  ) => {
+    const nodes = getNodes();
+    const currentNode = nodes.find((n) => n.id === nodeId);
+    if (!currentNode) return;
+
+    let newZIndex: number;
+    switch (operation) {
+      case "front":
+        newZIndex = bringToFront(currentNode, nodes);
+        break;
+      case "back":
+        newZIndex = sendToBack(currentNode, nodes);
+        break;
+      case "forward":
+        newZIndex = moveForward(currentNode, nodes);
+        break;
+      case "backward":
+        newZIndex = moveBackward(currentNode, nodes);
+        break;
+    }
+
+    onChange(newZIndex);
+  };
+
+  return (
+    <InlineStack gap="2">
+      <TooltipButton
+        size="sm"
+        variant="outline"
+        onClick={() => updateZIndex("forward")}
+        tooltip="Move Forward"
+      >
+        <Icon name="ArrowUpFromLine" />
+      </TooltipButton>
+      <TooltipButton
+        size="sm"
+        variant="outline"
+        onClick={() => updateZIndex("backward")}
+        tooltip="Move Backward"
+      >
+        <Icon name="ArrowDownFromLine" />
+      </TooltipButton>
+      <TooltipButton
+        size="sm"
+        variant="outline"
+        onClick={() => updateZIndex("front")}
+        tooltip="Bring to Front"
+      >
+        <Icon name="ListStart" />
+      </TooltipButton>
+      <TooltipButton
+        size="sm"
+        variant="outline"
+        onClick={() => updateZIndex("back")}
+        tooltip="Send to Back"
+      >
+        <Icon name="ListEnd" />
+      </TooltipButton>
+    </InlineStack>
+  );
+};