chore(examples): useCallback for useOnViewport handlers

examples/nextjs/pages/CustomNode/ColorSelectorNode.tsx

@@ -1,5 +1,5 @@
-import React, { memo, FC, CSSProperties } from 'react';
+import React, { memo, FC, CSSProperties, useCallback } from 'react';
-import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange } from '@react-flow/bundle';
+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),
+    onStart,
-    onChange: (viewport) => console.log('change', viewport),
+    onChange,
-    onEnd: (viewport) => console.log('end', viewport),
+    onEnd,
   });
 
   return (

package.json

@@ -52,4 +52,4 @@
       "packages/*"
     ]
   }
-}
+}

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]);
 

packages/core/src/styles/init.css

@@ -44,6 +44,7 @@
 .react-flow__connection-path {
   stroke: #b1b1b7;
   stroke-width: 1;
+  fill: none;
 }
 
 .react-flow__edge {