From a0016ef84132d054e185be3aa1cfdc0fe2a9617c Mon Sep 17 00:00:00 2001
From: samid737 <dara_s@live.nl>
Date: Sun, 8 Jul 2018 21:39:51 +0200
Subject: [PATCH] add snap toggle.

---
 src/Scene.js      |  5 +++--
 src/UI/Pointer.js | 12 +++++++-----
 src/UI/Toggle.js  | 36 ++++++++++++++++++++++++++++++++++++
 src/UI/UI.js      |  6 ++++++
 4 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 src/UI/Toggle.js

diff --git a/src/Scene.js b/src/Scene.js
index 467b8cc..14a2611 100644
--- a/src/Scene.js
+++ b/src/Scene.js
@@ -51,12 +51,15 @@ export default class Scene extends Phaser.Scene
         this.graphics.fillStyle(0x00ff00, 1).fillCircle(10, 10, 8).generateTexture('controlpoint', 32, 32);
         this.graphics.clear();
         
+        this.pointer = this.add.superpointer(this.middle, 100, 100, 'controlpoint');
+
         this.W = this.cameras.main.width;
         this.H = this.cameras.main.height;
         //TODO: rewrite callback implementation
         this.hidebutton = this.top.add.button(10, 300, 'hide', null, null, null, [this.drawpanel.hide, this.middle.hide], [], [this.drawpanel, this.middle]);
         this.showbutton = this.top.add.button(10, 350, 'show', null, null, null, [this.drawpanel.show, this.middle.show], [], [this.drawpanel, this.middle]);
         this.viewbutton = this.top.add.button(this.W - 100, this.H * 0.1, 'reset view', null, null, null, this.resetView, [], this);
+        this.snapbutton = this.middle.add.toggle(this.W - 100, this.H * 0.2, 'snap', null, null, null, this.pointer.snap, [], this.pointer);
 
         this.drawbutton = this.middle.add.button(10, 200, 'draw', null, null, null, this.switchmode, ["draw"], this);
         this.clearbutton = this.middle.add.button(10, 100, 'clear', null, null, null, this.clear, [], this);
@@ -73,8 +76,6 @@ export default class Scene extends Phaser.Scene
         this.modelabel = this.middle.add.label(100, 20, 'mode: ', null, null, null, null, this);
         this.drawmodelabel = this.middle.add.label(400, 20, 'curve: ' + this.drawmode, null, null, null, null, this);
 
-        this.pointer = this.add.superpointer(this.middle, 100, 100, 'controlpoint');
-
         this.setCameras();
 
         this.drawpanel.hide();
diff --git a/src/UI/Pointer.js b/src/UI/Pointer.js
index 17978a5..06a52f3 100644
--- a/src/UI/Pointer.js
+++ b/src/UI/Pointer.js
@@ -9,7 +9,7 @@ export default class Pointer extends Element(Phaser.GameObjects.Image){
 
         this.alpha = 0.5;
 
-        this.snap = 50;
+        this.delta = 1;
     
         //global input listener 
     
@@ -112,6 +112,9 @@ export default class Pointer extends Element(Phaser.GameObjects.Image){
         this.menu.hide();            
         this.scene.switchmode("draw");
     }
+    snap(){
+        this.delta = this.delta == 1 ? 50: 1;
+    }
     update() {
     
         this.x = this.scene.input.activePointer.x;
@@ -130,10 +133,9 @@ export default class Pointer extends Element(Phaser.GameObjects.Image){
     
         if(this.scene.mode !== "select"){
         
-            if (this.snapkey.isDown) {
-                this.x = Math.round(this.x / this.snap) * this.snap;
-                this.y = Math.round(this.y / this.snap) * this.snap;
-            }
+            this.x = Math.round(this.x / this.delta) * this.delta;
+            this.y = Math.round(this.y / this.delta) * this.delta;
+
             this.lbl.setPosition(this.x + 20, this.y + 20);
             this.lbl.setText("x: " + this.x + " y: " + this.y);
         }
diff --git a/src/UI/Toggle.js b/src/UI/Toggle.js
new file mode 100644
index 0000000..14e7da2
--- /dev/null
+++ b/src/UI/Toggle.js
@@ -0,0 +1,36 @@
+import Button from "./Button";
+import UI from "./UI";
+
+export default class Toggle extends Button{
+
+    constructor(...args){
+        super(...args);    
+        this.setColor('#ff0000');
+        this.val = false;
+    }
+
+    click() {
+        super.click();
+
+        this.val = !this.val;
+
+        if(this.val){
+            this.setColor("#00ff00");
+        }else{
+            this.setColor("#ff0000");
+        }
+    }
+
+    hover() {
+        game.canvas.style.cursor = "pointer";
+        this.setScale(1.1, 1.1);
+        super.hover();
+    }
+    
+    out() {
+        this.scene.pointer.switchCursor();                       
+        this.setScale(1, 1);
+        super.out();
+    }
+
+}
diff --git a/src/UI/UI.js b/src/UI/UI.js
index 08a9569..e4bc30a 100644
--- a/src/UI/UI.js
+++ b/src/UI/UI.js
@@ -1,5 +1,6 @@
 import Menu from "./Menu";
 import Button from "./Button";
+import Toggle from "./Toggle";
 import Point from "./Point/Point";
 import EndPoint from "./Point/EndPoint";
 import ControlPoint from "./Point/ControlPoint";
@@ -22,6 +23,11 @@ export default class UI {
                 this.ui.scene.add.existing(tb);
                 return tb;
             },
+            toggle: function (x, y, text, key, frame, target, callback, args, context) {
+                let tb = new Toggle(this.ui, x, y, text, key, frame, target, callback, args, context);
+                this.ui.scene.add.existing(tb);
+                return tb;
+            },
             label: function (x, y, text, target, callback, args, context) {
                 let l = new Label(this.ui, x, y, text, target, callback, args, context);
                 this.ui.scene.add.existing(l);