Draggable helper not used... + Button Text ready

src/Game/misc/Button.js

@@ -1,42 +1,50 @@
 import * as PIXI from 'pixi.js';
+
 import Text from './Text.js';
 import { getParam } from '../../helpers/url';
 
+import GuiableContainer from '../../helpers/Guiable';
+import draggable from '../../helpers/draggable'
 
 const DefaultImageUrl = '/files/assets/ui/woodenbutton.png';
 const DefaultImage = PIXI.Texture.fromImage(DefaultImageUrl);
 
-class Button extends PIXI.Sprite{
+class Button extends GuiableContainer{
     constructor(props) {
-        super(DefaultImage);
+        super(props);
         let {
-            image,
-            text,
-            Gui
+            image
         } = props;
 
         this.imageURL = image || getParam('imageURL') || DefaultImageUrl;
-        if(Gui) {
-            this.Gui = Gui;
-            this.folder = Gui.addFolder('Button');
-            let position = {
-                x:0,
-                y:0
-            };
-            this.controllers = [];
-            this.controllers.push(this.folder.add(this, 'imageURL').onFinishChange((v) => this.loadImage(v)));
-            this.controllers.push(this.folder.add(position, 'x').onFinishChange((v) => this.position.x = v));
-            this.controllers.push(this.folder.add(position, 'y').onFinishChange((v) => this.position.y = v));
-        }
+        
+
+        let position = {
+            x:0,
+            y:0
+        };
+  
+        this.addFolder('Button');
+        this.addToFolder('Button', this, 'imageURL').onFinishChange((v) => this.loadImage(v));
+        this.addToFolder('Button', this.position, 'x').onFinishChange((v) => this.position.x = v).listen();
+        this.addToFolder('Button', this.position, 'y').onFinishChange((v) => this.position.y = v).listen();
+        
+        this.construct(props);
+    }
 
-        this.anchor.set(0.5,0.5);
-        this.interactive = true;
-        this.buttonMode = true;
+    construct(props) {
+        this.sprite = new PIXI.Sprite(DefaultImage);
+        this.sprite.anchor.set(0.5,0.5);
+        this.sprite.interactive = true;
+        this.sprite.buttonMode = true;
 
-        this.textNode = new Text({...props, Gui:this.folder});
-        this.addChild(this.textNode);
+        //draggable(this.sprite);
 
-        this.loadImage(this.imageURL);
+        this.textNode = new Text(props);
+        this.sprite.addChild(this.textNode);
+        this.addChild(this.sprite);
+
+        this.loadImage(this.imageURL);        
     }
 
     loadImage(img) {
@@ -48,15 +56,24 @@ class Button extends PIXI.Sprite{
         this.texture = texture;
     }
 
+    onClick(fn) {
+        this.on('pointerdown', (e) => fn(e));
+    }
+
+
     _kill() {
-        this.Gui.removeFolder('Button');
-        this.controllers.forEach((e) => e.remove());
         this.textNode._kill();
-        this.destroy();
+        super._kill();
     }
 
-    onClick(fn) {
-        this.on('pointerdown', (e) => fn(e));
+    getAsJSON = () => {
+        return {
+            image: this.imageURL,
+            ...this.textNode.getAsJSON(),
+            x: this.position.x,
+            y: this.position.y,
+            component: 'Button'
+        }
     }
 }
 

src/Game/misc/Text.js

@@ -1,7 +1,7 @@
 import * as PIXI from 'pixi.js'
 import GuiableContainer from '../../helpers/Guiable'
 
-class Text extends GuiableContainer{
+class Text extends GuiableContainer {
 	constructor(props) {
 		super(props);
 		let {
@@ -14,9 +14,9 @@ class Text extends GuiableContainer{
 
 		this.addFolder("Text");
 		this.addToFolder('Text', this, 'text').onFinishChange((v) => this.setText(v));
-
 		this.addToFolder('Text', this, 'style', TextStylesNames).onFinishChange((v) => this.setStyle(v));
 
+
 		this.construct();
 	}
 
@@ -26,14 +26,6 @@ class Text extends GuiableContainer{
 		this.addChild(this.textNode);
 	}
 
-	getAsJSON = () => {
-		return {
-			component: 'Text',
-			text: this.text,
-			style: this.style
-		}
-	}
-
 	setText = (args) => {
 		this.text = args;
 		this.textNode.text = args;
@@ -43,7 +35,13 @@ class Text extends GuiableContainer{
 		this.textNode.style = TextStyles[args];
 	}
 
-	static get styles() { return 1; }
+	getAsJSON = () => {
+		return {
+			component: 'Text',
+			text: this.text,
+			style: this.style
+		}
+	}
 }
 
 let TextStylesNames = {

src/helpers/draggable.js

@@ -0,0 +1,42 @@
+function draggable(sprite) {
+	sprite
+		// events for drag start
+        .on('mousedown', onDragStart)
+        .on('touchstart', onDragStart)
+        // events for drag end
+        .on('mouseup', onDragEnd)
+        .on('mouseupoutside', onDragEnd)
+        .on('touchend', onDragEnd)
+        .on('touchendoutside', onDragEnd)
+        // events for drag move
+        .on('mousemove', onDragMove)
+        .on('touchmove', onDragMove);
+}
+
+function onDragStart(event)
+{
+    // store a reference to the data
+    // the reason for this is because of multitouch
+    // we want to track the movement of this particular touch
+    this.data = event.data;
+    this.dragging = true;
+}
+
+function onDragEnd()
+{
+    this.alpha = 1;
+    this.dragging = false;
+    // set the interaction data to null
+    this.data = null;
+}
+
+function onDragMove()
+{
+    if (this.dragging)
+    {
+        var newPosition = this.data.getLocalPosition(this.parent);
+        this.position.x = newPosition.x;
+        this.position.y = newPosition.y;
+    }
+}
+export default draggable;