diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx index 7f1d3702..56ae42f7 100755 --- a/client/src/components/passive.container.jsx +++ b/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() { diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index bed28422..adcc1c16 100755 --- a/client/src/components/passive.phaser.js +++ b/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,9 +33,14 @@ class PhaserPassives extends Phaser.Scene { if (!gameObjects[0].alloc) gameObjects[0].clearTint(); } }); - this.input.on('pointerdown', (event, gameObjects) => { - if (gameObjects[0] instanceof PassiveNode) { - gameObjects[0].allocate(); + 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() { - this.cursors = this.input.keyboard.createCursorKeys(); + addCanmeraControl() { + 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); }