From 87a9abfc6f182cdfb9bc939cf893c15e1f5513c6 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 16 Aug 2022 15:49:45 +0200
Subject: [PATCH] chore(examples): useCallback for useOnViewport handlers

---
 .../nextjs/pages/CustomNode/ColorSelectorNode.tsx  | 14 +++++++++-----
 package.json                                       |  2 +-
 packages/core/src/hooks/useOnViewportChange.ts     |  1 +
 packages/core/src/styles/init.css                  |  1 +
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx b/examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx
index afc2d9d2..c59aca93 100644
--- a/examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx
+++ b/examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx
@@ -1,5 +1,5 @@
-import React, { memo, FC, CSSProperties } from 'react';
-import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange } from '@react-flow/bundle';
+import React, { memo, FC, CSSProperties, useCallback } from 'react';
+import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@react-flow/bundle';
 
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
@@ -12,10 +12,14 @@ const sourceHandleStyleB: CSSProperties = {
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 
 const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
+  const onStart = useCallback((viewport: Viewport) => console.log('onStart', viewport), []);
+  const onChange = useCallback((viewport: Viewport) => console.log('onChange', viewport), []);
+  const onEnd = useCallback((viewport: Viewport) => console.log('onEnd', viewport), []);
+
   useOnViewportChange({
-    onStart: (viewport) => console.log('start', viewport),
-    onChange: (viewport) => console.log('change', viewport),
-    onEnd: (viewport) => console.log('end', viewport),
+    onStart,
+    onChange,
+    onEnd,
   });
 
   return (
diff --git a/package.json b/package.json
index af2b1f65..86c41241 100644
--- a/package.json
+++ b/package.json
@@ -52,4 +52,4 @@
       "packages/*"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/src/hooks/useOnViewportChange.ts b/packages/core/src/hooks/useOnViewportChange.ts
index 25727a59..15b9fe43 100644
--- a/packages/core/src/hooks/useOnViewportChange.ts
+++ b/packages/core/src/hooks/useOnViewportChange.ts
@@ -17,6 +17,7 @@ function useOnViewportChange({ onStart, onChange, onEnd }: UseOnViewportChangeOp
   }, [onStart]);
 
   useEffect(() => {
+    console.log('change onchange');
     store.setState({ onViewportChange: onChange });
   }, [onChange]);
 
diff --git a/packages/core/src/styles/init.css b/packages/core/src/styles/init.css
index 3536691d..37290096 100644
--- a/packages/core/src/styles/init.css
+++ b/packages/core/src/styles/init.css
@@ -44,6 +44,7 @@
 .react-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
+  fill: none;
 }
 
 .react-flow__edge {