refactor(fitview-nodes): cleanup

examples/vite-app/src/examples/Layouting/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import ReactFlow, {
   Controls,
   ReactFlowProvider,
@@ -10,6 +10,8 @@ import ReactFlow, {
   useEdgesState,
   MarkerType,
   EdgeMarker,
+  Panel,
+  useReactFlow,
 } from 'reactflow';
 
 import dagre from 'dagre';
@@ -29,6 +31,7 @@ const nodeExtent: CoordinateExtent = [
 const LayoutFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialItems.nodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialItems.edges);
+  const { fitView } = useReactFlow();
 
   const onConnect = useCallback(
     (connection: Connection) => {
@@ -85,31 +88,31 @@ const LayoutFlow = () => {
 
   return (
     <div className={styles.layoutflow}>
-      <ReactFlowProvider>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          onConnect={onConnect}
-          nodeExtent={nodeExtent}
-          onInit={() => onLayout('TB')}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-        >
-          <Controls />
-        </ReactFlow>
-        <div className={styles.controls}>
-          <button onClick={() => onLayout('TB')} style={{ marginRight: 10 }}>
-            vertical layout
-          </button>
-          <button onClick={() => onLayout('LR')} style={{ marginRight: 10 }}>
-            horizontal layout
-          </button>
-          <button onClick={() => unselect()}>unselect nodes</button>
-          <button onClick={() => changeMarker()}>change marker</button>
-        </div>
-      </ReactFlowProvider>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onConnect={onConnect}
+        nodeExtent={nodeExtent}
+        onInit={() => onLayout('TB')}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+      >
+        <Controls />
+      </ReactFlow>
+      <Panel position="top-right">
+        <button onClick={() => onLayout('TB')}>vertical layout</button>
+        <button onClick={() => onLayout('LR')}>horizontal layout</button>
+        <button onClick={() => unselect()}>unselect nodes</button>
+        <button onClick={() => changeMarker()}>change marker</button>
+        <button onClick={() => fitView()}>fitView</button>
+        <button onClick={() => fitView({ nodes: nodes.slice(0, 2) })}>fitView partially</button>
+      </Panel>
     </div>
   );
 };
 
-export default LayoutFlow;
+export default () => (
+  <ReactFlowProvider>
+    <LayoutFlow />
+  </ReactFlowProvider>
+);

examples/vite-app/src/examples/Layouting/layouting.module.css

@@ -2,10 +2,3 @@
   flex-grow: 1;
   position: relative;
 }
-
-.controls {
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 10;
-}