Implementing the mouse handler.

background-move/package-lock.json

@@ -25,6 +25,7 @@
         "@types/react-router": "^5.1.11",
         "@types/react-router-dom": "^5.1.7",
         "ionicons": "^6.0.3",
+        "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router": "^5.2.0",
@@ -46,7 +47,8 @@
         "workbox-streams": "^5.1.4"
       },
       "devDependencies": {
-        "@capacitor/cli": "4.1.0"
+        "@capacitor/cli": "4.1.0",
+        "@types/lodash": "^4.14.184"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3775,6 +3777,12 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.184",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
+      "integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
+      "dev": true
+    },
     "node_modules/@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -18560,6 +18568,12 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
     },
+    "@types/lodash": {
+      "version": "4.14.184",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.184.tgz",
+      "integrity": "sha512-RoZphVtHbxPZizt4IcILciSWiC6dcn+eZ8oX9IWEYfDMcocdd42f7NPI6fQj+6zI8y4E0L7gu2pcZKLGTRaV9Q==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",

background-move/package.json

@@ -20,6 +20,7 @@
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "ionicons": "^6.0.3",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^5.2.0",
@@ -65,7 +66,8 @@
     ]
   },
   "devDependencies": {
-    "@capacitor/cli": "4.1.0"
+    "@capacitor/cli": "4.1.0",
+    "@types/lodash": "^4.14.184"
   },
   "description": "An Ionic project"
 }

background-move/src/App.tsx

@@ -19,13 +19,13 @@ import '@ionic/react/css/display.css';
 /* Theme variables */
 import './theme/variables.css';
 
-import Background from './components/background';
+import Viewport from './components/viewport';
 
 setupIonicReact();
 
 const App: React.FC = () => (
   <IonApp>
-    <Background shift={{ x: 1000, y: 1000 }} />
+    <Viewport />
   </IonApp>
 );
 

background-move/src/components/background.tsx

@@ -5,6 +5,8 @@ import '../theme/background.css';
 const Background: react.FC<{ shift: { x: number; y: number } }> = (props: {
   shift: { x: number; y: number };
 }) => {
+  console.log('rendering background');
+
   return (
     <div
       className='background'

background-move/src/components/viewport.tsx

@@ -0,0 +1,77 @@
+import react, { useMemo, useState } from 'react';
+
+import _ from 'lodash';
+
+import Background from './background';
+
+import '../theme/viewport.css';
+
+const Viewport: react.FC<{}> = (props: {}) => {
+  console.log('rendering viewport');
+  const [shift, setShift] = useState({ x: 1000, y: 1000 });
+
+  const initialMouseState = {
+    down: false,
+    starting: { x: -1, y: -1 },
+  };
+  const [mouseState, setMouseState] = useState(initialMouseState);
+
+  console.log('mouseState: ' + JSON.stringify(mouseState));
+
+  const genericHandler = (event: any) => {
+    console.log('Log - Event: ' + event.type);
+  };
+
+  const mouseDownHandler = (event: any) => {
+    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);
+  };
+
+  const mouseMoveHandler = (event: any) => {
+    event.preventDefault();
+    if (mouseState.down) {
+      console.log('Log - Moving...' + event.pageX);
+      genericHandler(event);
+      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,
+        },
+      }));
+    }
+  };
+
+  const throtteledMouseMoveHandler = useMemo(
+    () => _.throttle(mouseMoveHandler, 100),
+    undefined
+  );
+
+  return (
+    <div
+      className='viewport'
+      onMouseDown={mouseDownHandler}
+      onMouseMove={throtteledMouseMoveHandler}
+      onMouseUp={mouseUpHandler}
+    >
+      <Background shift={shift} />
+    </div>
+  );
+};
+
+export default Viewport;

background-move/src/theme/viewport.css

@@ -0,0 +1,5 @@
+.viewport {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}