chore(examples): make dev tools example reusable

examples/react/src/examples/CustomMiniMapNode/index.tsx

@@ -59,7 +59,7 @@ const CustomMiniMapNodeFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={(p) => onConnect(p)}
       onNodeDragStop={onNodeDragStop}
-      onlyRenderVisibleElements={false}
+      onlyRenderVisibleElements={true}
     >
       <Controls />
       <Background variant={BackgroundVariant.Lines} />

examples/react/src/examples/DevTools/DevTools/index.tsx

@@ -1,16 +1,18 @@
 import { useState, type Dispatch, type SetStateAction, type ReactNode, HTMLAttributes } from 'react';
-import { Panel } from '@xyflow/react';
+import { Panel, PanelPosition } from '@xyflow/react';
 
 import NodeInspector from './NodeInspector';
 import ChangeLogger from './ChangeLogger';
 
-export default function ReactFlowDevTools() {
+import './style.css';
+
+export default function ReactFlowDevTools({ position = 'top-left' }: { position: PanelPosition }) {
   const [nodeInspectorActive, setNodeInspectorActive] = useState(false);
   const [changeLoggerActive, setChangeLoggerActive] = useState(false);
 
   return (
     <div className="react-flow__devtools">
-      <Panel position="top-left">
+      <Panel position={position}>
         <DevToolButton setActive={setNodeInspectorActive} active={nodeInspectorActive} title="Toggle Node Inspector">
           Node Inspector
         </DevToolButton>

examples/react/src/examples/DevTools/index.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react';
 import { ReactFlow, addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from '@xyflow/react';
 
 import DevTools from './DevTools';
-import './Devtools/style.css';
 
 const initNodes: Node[] = [
   {

examples/react/src/examples/Hidden/index.tsx

@@ -11,6 +11,7 @@ import {
   MiniMap,
   Controls,
 } from '@xyflow/react';
+import ReactFlowDevTools from '../DevTools/DevTools';
 
 const initialNodes: Node[] = [
   {
@@ -82,6 +83,7 @@ const HiddenFlow = () => {
     >
       <MiniMap />
       <Controls />
+      <ReactFlowDevTools position="top-right" />
 
       <div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
         <div>

packages/react/src/components/NodeWrapper/index.tsx

@@ -100,7 +100,6 @@ export function NodeWrapper<NodeType extends Node>({
   useEffect(() => {
     if (nodeRef.current && !node.hidden) {
       const currNode = nodeRef.current;
-
       if (!initialized || !hasHandleBounds) {
         resizeObserver?.unobserve(currNode);
         resizeObserver?.observe(currNode);