From 6e6720579e97938c299f835724384defd9f3897d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 13 Feb 2023 16:21:50 +0100
Subject: [PATCH] chore(examples): cleanup

---
 .../vite-app/src/examples/Basic/index.tsx     | 21 +++++++------------
 .../src/examples/EasyConnect/CustomNode.tsx   | 18 +++++++++++++---
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/examples/vite-app/src/examples/Basic/index.tsx b/examples/vite-app/src/examples/Basic/index.tsx
index 970aac57..76ce801b 100644
--- a/examples/vite-app/src/examples/Basic/index.tsx
+++ b/examples/vite-app/src/examples/Basic/index.tsx
@@ -8,6 +8,7 @@ import ReactFlow, {
   Node,
   Edge,
   useReactFlow,
+  Panel,
 } from 'reactflow';
 
 const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
@@ -98,20 +99,12 @@ const BasicFlow = () => {
       <MiniMap />
       <Controls />
 
-      <div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>
-        <button onClick={resetTransform} style={{ marginRight: 5 }}>
-          reset transform
-        </button>
-        <button onClick={updatePos} style={{ marginRight: 5 }}>
-          change pos
-        </button>
-        <button onClick={toggleClassnames} style={{ marginRight: 5 }}>
-          toggle classnames
-        </button>
-        <button onClick={logToObject} style={{ marginRight: 5 }}>
-          toObject
-        </button>
-      </div>
+      <Panel position="top-right">
+        <button onClick={resetTransform}>reset transform</button>
+        <button onClick={updatePos}>change pos</button>
+        <button onClick={toggleClassnames}>toggle classnames</button>
+        <button onClick={logToObject}>toObject</button>
+      </Panel>
     </ReactFlow>
   );
 };
diff --git a/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx b/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx
index 49c1adb9..989df5fa 100644
--- a/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx
+++ b/examples/vite-app/src/examples/EasyConnect/CustomNode.tsx
@@ -2,7 +2,7 @@ import { Handle, NodeProps, Position, ReactFlowState, useStore } from 'reactflow
 
 const connectionNodeIdSelector = (state: ReactFlowState) => state.connectionNodeId;
 
-export default function CustomNode({ id }: NodeProps) {
+export default function CustomNode({ id, isConnectable }: NodeProps) {
   const connectionNodeId = useStore(connectionNodeIdSelector);
   const isTarget = connectionNodeId && connectionNodeId !== id;
 
@@ -18,8 +18,20 @@ export default function CustomNode({ id }: NodeProps) {
           backgroundColor: isTarget ? '#ffcce3' : '#ccd9f6',
         }}
       >
-        <Handle className="targetHandle" style={{ zIndex: 2 }} position={Position.Right} type="source" />
-        <Handle className="targetHandle" style={targetHandleStyle} position={Position.Left} type="target" />
+        <Handle
+          className="targetHandle"
+          style={{ zIndex: 2 }}
+          position={Position.Right}
+          type="source"
+          isConnectable={isConnectable}
+        />
+        <Handle
+          className="targetHandle"
+          style={targetHandleStyle}
+          position={Position.Left}
+          type="target"
+          isConnectable={isConnectable}
+        />
         {label}
       </div>
     </div>