Refactor DOM handling of dragonblocks.gui.Box

Use references rather than IDs
This commit also improves dragging behavior of GUI Boxes

diff --git a/engine/gui.js b/engine/gui.js
index ddff23f6574d97c98d9adb025f48a4d8f35c72b0..3d6eea90d9ab6e485b000dee500d4d72b99ce451 100644 (file)
--- a/engine/gui.js
+++ b/engine/gui.js
@@ -66,25 +66,22 @@ dragonblocks.gui.Box = class extends EventTarget
                if (def)
                        dblib.copy(this, def);
 
-               this.id = "dragonblocks.gui.box[" + dragonblocks.getToken() + "]";
-
                this.x = 0;
                this.y = 0;
 
                this.dragging = false;
 
-               let display = document.body.appendChild(document.createElement("div"));
-               display.id = this.id;
-               display.style.width = this.big ? "700px" : "500px";
-               display.style.height = this.big ? "500px" : "300px";
-               display.style.position = "fixed";
-               display.style.backgroundColor = "#7E7E7E";
-               display.style.visibility = "hidden";
-               dblib.center(display);
-               dblib.centerVertical(display);
+               this.display = document.body.appendChild(document.createElement("div"));
+               this.display.style.width = this.big ? "700px" : "500px";
+               this.display.style.height = this.big ? "500px" : "300px";
+               this.display.style.position = "fixed";
+               this.display.style.backgroundColor = "#7E7E7E";
+               this.display.style.visibility = "hidden";
+               dblib.center(this.display);
+               dblib.centerVertical(this.display);
 
                if (this.scroll)
-                       display.style.overflowY = "scroll";
+                       this.display.style.overflowY = "scroll";
 
                this.moveable && this.addMoveField();
                this.closeable && this.addCloseField();
@@ -93,7 +90,6 @@ dragonblocks.gui.Box = class extends EventTarget
        addMoveField()
        {
                let moveField = this.create("div");
-               moveField.id = this.id + ".moveField";
                moveField.style.position = "absolute";
                moveField.style.left = "0px";
                moveField.style.top = "0px";
@@ -104,32 +100,26 @@ dragonblocks.gui.Box = class extends EventTarget
                moveField.style.cursor = "move";
 
                let self = this;
-               let display = this.getDisplay();
-
-               display.addEventListener("mousedown", event => {
-                       if (event.srcElement.id != moveField.id)
-                               return;
 
+               moveField.addEventListener("mousedown", event => {
                        self.x = event.clientX;
                        self.y = event.clientY;
 
                        self.dragging = true;
                });
 
-               display.addEventListener("mousemove", event => {
+               addEventListener("mousemove", event => {
                        if (! self.dragging)
                                return;
 
-                       let display = self.getDisplay();
-
                        let x = self.x - event.clientX;
                        let y = self.y - event.clientY;
 
                        self.x = event.clientX;
                        self.y = event.clientY;
 
-                       display.style.left = display.offsetLeft - x + "px";
-                       display.style.top = display.offsetTop - y + "px";
+                       self.display.style.left = self.display.offsetLeft - x + "px";
+                       self.display.style.top = self.display.offsetTop - y + "px";
                });
 
                addEventListener("mouseup", event => {
@@ -140,7 +130,6 @@ dragonblocks.gui.Box = class extends EventTarget
        addCloseField()
        {
                let closeField = this.create("div");
-               closeField.id = this.id + ".closeField";
                closeField.style.position = "absolute";
                closeField.style.right = "0px";
                closeField.style.top = "0px";
@@ -156,19 +145,14 @@ dragonblocks.gui.Box = class extends EventTarget
                });
        }
 
-       getDisplay()
-       {
-               return document.getElementById(this.id);
-       }
-
        setContent(html)
        {
-               this.getDisplay().innerHTML = html;
+               this.display.innerHTML = html;
        }
 
        open()
        {
-               this.getDisplay().style.visibility = "visible";
+               this.display.style.visibility = "visible";
 
                this.layer && dragonblocks.gui.openLayer();
                this.keylock && dragonblocks.keyHandler.lockAll();
@@ -178,7 +162,7 @@ dragonblocks.gui.Box = class extends EventTarget
 
        close()
        {
-               this.getDisplay().style.visibility = "hidden";
+               this.display.style.visibility = "hidden";
 
                this.layer && dragonblocks.gui.closeLayer();
                this.keylock && dragonblocks.keyHandler.unlockAll();
@@ -188,7 +172,7 @@ dragonblocks.gui.Box = class extends EventTarget
 
        add(elem)
        {
-               return this.getDisplay().appendChild(elem);
+               return this.display.appendChild(elem);
        }
 
        create(tag)

diff --git a/engine/skin.js b/engine/skin.js
index 7691e555a62c0b9a77af1ee7692db21dc3bb12aa..9989be6344ebec6078a5c8a7da928d7787381862 100644 (file)
--- a/engine/skin.js
+++ b/engine/skin.js
@@ -42,7 +42,7 @@ dragonblocks.registerSkin = def => {
        status.style.top = "5px";
        status.style.left = "5px";
 
-       let columns = parseInt(parseInt(gui.getDisplay().style.width) / (dragonblocks.settings.map.scale * 1.5));
+       let columns = parseInt(parseInt(gui.display.style.width) / (dragonblocks.settings.map.scale * 1.5));
 
        let container = gui.create("div");
        container.style.width = parseInt(columns * dragonblocks.settings.map.scale * 1.5) + "px";