From 961b5a936c0baf4974e1be933fd542406984ccba Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 10 Apr 2024 14:56:40 +0200
Subject: [PATCH] chore(examples): make dev tools example reusable

---
 examples/react/src/examples/CustomMiniMapNode/index.tsx | 2 +-
 examples/react/src/examples/DevTools/DevTools/index.tsx | 8 +++++---
 examples/react/src/examples/DevTools/index.tsx          | 1 -
 examples/react/src/examples/Hidden/index.tsx            | 2 ++
 packages/react/src/components/NodeWrapper/index.tsx     | 1 -
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/examples/react/src/examples/CustomMiniMapNode/index.tsx b/examples/react/src/examples/CustomMiniMapNode/index.tsx
index 7ecf1c54..21b1d073 100644
--- a/examples/react/src/examples/CustomMiniMapNode/index.tsx
+++ b/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} />
diff --git a/examples/react/src/examples/DevTools/DevTools/index.tsx b/examples/react/src/examples/DevTools/DevTools/index.tsx
index 107d0078..09bd5f70 100644
--- a/examples/react/src/examples/DevTools/DevTools/index.tsx
+++ b/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>
diff --git a/examples/react/src/examples/DevTools/index.tsx b/examples/react/src/examples/DevTools/index.tsx
index 5303dea6..504d7ed1 100644
--- a/examples/react/src/examples/DevTools/index.tsx
+++ b/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[] = [
   {
diff --git a/examples/react/src/examples/Hidden/index.tsx b/examples/react/src/examples/Hidden/index.tsx
index f00d8bae..97bb6fcb 100644
--- a/examples/react/src/examples/Hidden/index.tsx
+++ b/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>
diff --git a/packages/react/src/components/NodeWrapper/index.tsx b/packages/react/src/components/NodeWrapper/index.tsx
index e3fbf16c..e081a6c7 100644
--- a/packages/react/src/components/NodeWrapper/index.tsx
+++ b/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);