add snap toggle.

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();

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);
         }

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();
+    }
+
+}

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);