Mouse control of passive tree, Q & E for zoom

client/src/components/passive.container.jsx

@@ -55,6 +55,9 @@ class PhaserInstance extends preact.Component {
             scene: this.PhaserPassives,
         };
         const game = new Phaser.Game(config);
+        game.canvas.addEventListener('mousedown', () => this.PhaserPassives.camPan(true));
+        game.canvas.addEventListener('mouseup', () => this.PhaserPassives.camPan(false));
+
     }
 
     render() {

client/src/components/passive.phaser.js

@@ -9,12 +9,14 @@ class PhaserPassives extends Phaser.Scene {
     }
 
     create() {
+        this.cameras.main.setBounds(0, 0, 3000, 3000);
+        this.physics.world.setBounds(0, 0, 3000, 3000);
         this.graphics = this.add.graphics();
         this.passiveNodes = passiveDataNode;
         this.passiveEdges = passiveDataEdge;
         this.addPassiveNodes();
         this.drawPassiveEdges();
-        this.addCamera();
+        this.addCanmeraControl();
     }
 
     addPassiveNodes() {
@@ -31,10 +33,15 @@ class PhaserPassives extends Phaser.Scene {
                 if (!gameObjects[0].alloc) gameObjects[0].clearTint();
             }
         });
-        this.input.on('pointerdown', (event, gameObjects) => {
+        this.input.on('pointerup', (pointer, gameObjects) => {
+            if (Math.abs(pointer.upX - pointer.downX) < 5
+                    && Math.abs(pointer.upY - pointer.downY) < 5) {
+                // Check cursor hasn't significantly moved during point allocation
+                // If panning and mouse release is on node it won't allocate
                 if (gameObjects[0] instanceof PassiveNode) {
                     gameObjects[0].allocate();
                 }
+            }
         });
     }
 
@@ -52,14 +59,16 @@ class PhaserPassives extends Phaser.Scene {
         });
     }
 
-    addCamera() {
+    addCanmeraControl() {
-        this.cursors = this.input.keyboard.createCursorKeys();
+        this.input.on('pointermove', (pointer) => {
+            if (this.pan) {
+                const points = pointer.getInterpolatedPosition(2);
+                this.cameras.main.scrollX -= (points[1].x - points[0].x) * 1.5;
+                this.cameras.main.scrollY -= (points[1].y - points[0].y) * 1.5;
+            }
+        }, this);
         this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
             camera: this.cameras.main,
-            left: this.cursors.left,
-            right: this.cursors.right,
-            up: this.cursors.up,
-            down: this.cursors.down,
             zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
             zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
             acceleration: 0.005,
@@ -68,6 +77,10 @@ class PhaserPassives extends Phaser.Scene {
         });
     }
 
+    camPan(bool) {
+        this.pan = bool;
+    }
+
     update(delta) {
         this.controls.update(delta);
     }