chore(examples): add zindexmode

examples/react/src/App/routes.ts

@@ -60,6 +60,7 @@ import DevTools from '../examples/DevTools';
 import Redux from '../examples/Redux';
 import MovingHandles from '../examples/MovingHandles';
 import DetachedHandle from '../examples/DetachedHandle';
+import ZIndexMode from '../examples/ZIndexMode';
 
 export interface IRoute {
   name: string;
@@ -378,6 +379,11 @@ const routes: IRoute[] = [
     path: 'use-key-press',
     component: UseKeyPress,
   },
+  {
+    name: 'zIndexMode',
+    path: 'z-index-mode',
+    component: ZIndexMode,
+  },
 ];
 
 export default routes;

examples/react/src/examples/ColorMode/index.tsx

@@ -15,8 +15,6 @@ import {
   Position,
 } from '@xyflow/react';
 
-import './style.css';
-
 const nodeDefaults = {
   sourcePosition: Position.Right,
   targetPosition: Position.Left,

examples/react/src/examples/ZIndexMode/index.tsx

@@ -0,0 +1,88 @@
+import { ChangeEventHandler, useCallback, useState } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  Node,
+  useNodesState,
+  useEdgesState,
+  OnConnect,
+  Edge,
+  MiniMap,
+  Background,
+  Controls,
+  Position,
+  ZIndexMode,
+  Panel,
+} from '@xyflow/react';
+
+const nodeDefaults = {
+  sourcePosition: Position.Right,
+  targetPosition: Position.Left,
+};
+
+const initialNodes: Node[] = [
+  { id: 'A', type: 'input', position: { x: 0, y: 150 }, data: { label: 'A' }, ...nodeDefaults },
+  { id: 'B', position: { x: 250, y: 0 }, data: { label: 'B' }, ...nodeDefaults },
+  { id: 'C', position: { x: 250, y: 150 }, data: { label: 'C' }, ...nodeDefaults },
+
+  // group 1
+  { id: 'D', position: { x: 0, y: 300 }, width: 200, height: 200, data: { label: 'D' }, ...nodeDefaults },
+  { id: 'E', parentId: 'D', position: { x: 10, y: 10 }, data: { label: 'E' }, ...nodeDefaults },
+
+  // group 2
+  { id: 'F', position: { x: 250, y: 300 }, width: 200, height: 200, data: { label: 'F' }, ...nodeDefaults },
+  { id: 'G', parentId: 'F', position: { x: 10, y: 10 }, data: { label: 'G' }, ...nodeDefaults },
+
+  // group 3
+  { id: 'H', position: { x: 500, y: 300 }, width: 200, height: 200, data: { label: 'H' }, ...nodeDefaults },
+  { id: 'I', parentId: 'H', position: { x: 10, y: 10 }, data: { label: 'I' }, ...nodeDefaults },
+];
+
+const initialEdges: Edge[] = [
+  {
+    id: 'A-B',
+    source: 'A',
+    target: 'B',
+  },
+  {
+    id: 'A-C',
+    source: 'A',
+    target: 'C',
+  },
+];
+
+function ZIndexModeFlow() {
+  const [zIndexMode, setZIndexMode] = useState<ZIndexMode>('auto');
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect: OnConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  const onChange: ChangeEventHandler<HTMLSelectElement> = (evt) => setZIndexMode(evt.target.value as ZIndexMode);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      zIndexMode={zIndexMode}
+      fitView
+    >
+      <MiniMap />
+      <Background />
+      <Controls />
+
+      <Panel position="top-right">
+        <select value={zIndexMode} onChange={onChange} data-testid="zindexmode-select">
+          <option value="manual">manual</option>
+          <option value="basic">basic</option>
+          <option value="auto">auto</option>
+        </select>
+      </Panel>
+    </ReactFlow>
+  );
+}
+
+export default ZIndexModeFlow;

packages/react/src/index.ts

@@ -113,6 +113,7 @@ export {
   type SetViewport,
   type FitBounds,
   type HandleConnection,
+  type ZIndexMode,
 } from '@xyflow/system';
 
 // we need this workaround to prevent a duplicate identifier error

packages/svelte/src/lib/index.ts

@@ -122,7 +122,8 @@ export {
   type SetCenter,
   type SetViewport,
   type FitBounds,
-  type HandleConnection
+  type HandleConnection,
+  type ZIndexMode
 } from '@xyflow/system';
 
 // system utils