Making throttling work (at last)

background-move/src/components/background.tsx

@@ -5,7 +5,7 @@ import '../theme/background.css';
 const Background: react.FC<{ shift: { x: number; y: number } }> = (props: {
   shift: { x: number; y: number };
 }) => {
-  console.log('rendering background');
+  console.log(`--- Rendering background, props: ${JSON.stringify(props)} ---`);
 
   return (
     <div

background-move/src/components/viewport.tsx

@@ -1,4 +1,4 @@
-import react, { useMemo, useState } from 'react';
+import react, { useCallback, useMemo, useState } from 'react';
 
 import _ from 'lodash';
 
@@ -7,7 +7,8 @@ import Background from './background';
 import '../theme/viewport.css';
 
 const Viewport: react.FC<{}> = (props: {}) => {
-  console.log('rendering viewport');
+  console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
+
   const [shift, setShift] = useState({ x: 1000, y: 1000 });
 
   const initialMouseState = {
@@ -16,50 +17,64 @@ const Viewport: react.FC<{}> = (props: {}) => {
   };
   const [mouseState, setMouseState] = useState(initialMouseState);
 
-  console.log('mouseState: ' + JSON.stringify(mouseState));
+  console.log('viewport, mouseState: ' + JSON.stringify(mouseState));
 
   const genericHandler = (event: any) => {
     console.log('Log - Event: ' + event.type);
+    console.log(`Mouse : ${event.pageX}, ${event.pageY}`);
+    console.log('mouseState: ' + JSON.stringify(mouseState));
   };
 
+  // TODO: implement resize and focusout or blur events
+  // TODO: check boundaries
+
   const mouseDownHandler = (event: any) => {
+    genericHandler(event);
     event.preventDefault();
     setMouseState({
       down: true,
       starting: { x: event.pageX, y: event.pageY },
     });
-    genericHandler(event);
   };
 
   const mouseUpHandler = (event: any) => {
-    event.preventDefault();
-    console.log('Log - Up, now do something ! ');
-    setMouseState(initialMouseState);
     genericHandler(event);
+    event.preventDefault();
+    setMouseState(initialMouseState);
   };
 
   const mouseMoveHandler = (event: any) => {
     event.preventDefault();
     if (mouseState.down) {
-      console.log('Log - Moving...' + event.pageX);
       genericHandler(event);
-      setShift((shift) => ({
+      // setShift((shift) => ({
+      //   x: shift.x + (mouseState.starting.x - event.pageX),
+      //   y: shift.y + (mouseState.starting.y - event.pageY),
+      // }));
+      // setMouseState((mouseState) => ({
+      //   down: true,
+      //   starting: {
+      //     x: event.pageX,
+      //     y: event.pageY,
+      //   },
+      // }));
+      setShift({
         x: shift.x + (mouseState.starting.x - event.pageX),
         y: shift.y + (mouseState.starting.y - event.pageY),
-      }));
+      });
-      setMouseState((mouseState) => ({
+      setMouseState({
         down: true,
         starting: {
           x: event.pageX,
           y: event.pageY,
         },
-      }));
+      });
     }
   };
 
-  const throtteledMouseMoveHandler = useMemo(
+  const throtteledMouseMoveHandler = useCallback(
-    () => _.throttle(mouseMoveHandler, 100),
+    _.throttle(mouseMoveHandler, 50),
-    undefined
+    [mouseState.down]
   );
 
   return (