Refactor input control to use interact.js

package.json

@@ -11,8 +11,8 @@
     }
   },
   "scripts": {
-    "dev-vanilla": "FRAMEWORK=vanilla npx vite build --mode development --watch  & FRAMEWORK=vanilla npx vite serve demo/vanilla --config demo/vanilla/vite.config.js",
-    "dev-react": "FRAMEWORK=react npx vite build --mode development --watch    & FRAMEWORK=react npx vite serve demo/react --config demo/react/vite.config.js ",
+    "dev-vanilla": "FRAMEWORK=vanilla npx vite build --mode development --watch  & FRAMEWORK=vanilla npx vite serve demo/vanilla --config demo/vanilla/vite.config.js --host",
+    "dev-react": "FRAMEWORK=react npx vite build --mode development --watch    & FRAMEWORK=react npx vite serve demo/react --config demo/react/vite.config.js --host",
     "format": "prettier --write src",
     "lint": "eslint src --ext .ts",
     "build": "vite build --mode production"
@@ -45,6 +45,7 @@
     "vite": "^5.3.2"
   },
   "dependencies": {
+    "interactjs": "^1.10.27",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

src/camera.ts

@@ -68,23 +68,26 @@ class Camera {
 
   /**
    * Handle the scroll event to zoom in and out of the camera view
-   * @param deltaScroll Amount of scroll
+   * @param deltaZoom Amount of scroll
    * @param mouseX Position of the mouse on the device screen
    * @param mouseY
    */
-  handleScroll(deltaScroll: number, mouseX: number, mouseY: number) {
+  handleScroll(deltaZoom: number, mouseX: number, mouseY: number) {
     // Mouse position should be relative to the container
     mouseX -= this.containerDom.offsetLeft;
     mouseY -= this.containerDom.offsetTop;
 
-    let deltaZoom = 1 * this.zoom * (-deltaScroll / 1000); // Control scroll speed
     // Limit zoom
     if (this.zoom + deltaZoom < 0.2) {
       deltaZoom = 0.2 - this.zoom;
     } else if (this.zoom + deltaZoom > 1) {
       deltaZoom = 1 - this.zoom;
     }
 
+    // console.debug(
+    //   `MouseX: ${mouseX}, MouseY: ${mouseY}, cameraWidth: ${this.cameraWidth}, cameraHeight: ${this.cameraHeight}`,
+    // );
+
     const zoomRatio = this.zoom / (this.zoom + deltaZoom); // Ratio of current zoom to new zoom
     // Move camera to zoom in on the mouse position
     this.cameraX -=
@@ -98,6 +101,12 @@ class Camera {
 
     this.zoom += deltaZoom;
 
+    // console.log(
+    //   (this.cameraWidth / this.zoom) *
+    //     (zoomRatio - 1) *
+    //     (1 - (this.cameraWidth * 1.5 - mouseX) / this.cameraWidth),
+    // );
+
     this.updateCamera();
   }
 

src/components/base.ts

@@ -28,9 +28,11 @@ export abstract class Base {
   bindFunction(dom: HTMLElement) {
     dom.onmousedown = this.domMouseDown.bind(this);
     dom.ontouchstart = this.domTouchStart.bind(this);
+    dom.onpointerdown = this.domMouseDown.bind(this);
   }
 
   domMouseDown(e: MouseEvent): void {
+    console.debug(`Mouse down event triggered on ${this.gid}`);
     this.domCursorDown({
       button: e.button,
       clientX: e.clientX,
@@ -40,6 +42,7 @@ export abstract class Base {
   }
 
   domTouchStart(e: TouchEvent): void {
+    console.debug(`Touch start event triggered on ${this.gid}`);
     this.domCursorDown({
       button: 0,
       clientX: e.touches[0].clientX,

src/components/node.ts

@@ -374,11 +374,13 @@ class NodeComponent extends Base {
   }
 
   onFocus() {
+    console.debug("On focus");
     this.setNodeStyle({ _focus: true });
     this.renderNode(this.nodeStyle);
   }
 
   offFocus() {
+    console.debug("Off focus");
     this.setNodeStyle({ _focus: false });
     this.renderNode(this.nodeStyle);
   }