From ba78d991771e78463854529975d49bb3b2ccc91a Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Wed, 7 Feb 2018 08:04:25 +1300
Subject: [PATCH] Reflect layer in interface

---
 sources/scripts/interface.js | 38 +++++++++++++++++++++---------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js
index 26a3f72..35688f4 100644
--- a/sources/scripts/interface.js
+++ b/sources/scripts/interface.js
@@ -10,31 +10,37 @@ function Interface()
   {
     document.getElementById("app").appendChild(this.el);
     var html = ""
-    var tools = [
-      ["line","line","M60,60 L240,240",""],
-      ["arc_c","arc clockwise","M60,60 A180,180 0 0,1 240,240",""],
-      ["arc_r","arc reverse","M60,60 A180,180 0 0,0 240,240",""],
-      ["bezier","bezier","M60,60 Q60,150 150,150 Q240,150 240,240",""],
-      ["close","close","M60,60 A180,180 0 0,1 240,240  M60,60 A180,180 0 0,0 240,240",""],
-      
-      ["thickness","thickness","M60,60 L240,240","stroke-dasharray: 30,15"],
-      ["linecap","linecap","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
-      ["linejoin","linejoin","M60,60 L120,120 L180,120  M120,180 L180,180 L240,240"],
-      ["mirror","mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210"],
-      ["fill","fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z"],
-    
-      ["export","export","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
-    ]
+    var tools = {
+      line: ["line","M60,60 L240,240",""],
+      arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240",""],
+      arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240",""],
+      bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240",""],
+      close: ["close","M60,60 A180,180 0 0,1 240,240  M60,60 A180,180 0 0,0 240,240",""],
+
+      thickness: ["thickness","M60,60 L240,240","stroke-dasharray: 30,15"],
+      linecap: ["linecap","M60,60 L240,240 M240,180 L240,240 M180,240 L240,240"],
+      linejoin: ["linejoin","M60,60 L120,120 L180,120  M120,180 L180,180 L240,240"],
+      mirror: ["mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210"],
+      fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z"],
+
+      export: ["export","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
+    }
 
     for(id in tools){
       var tool = tools[id];
-      html += `<svg id="${tool[0]}" ar="${tool[0]}" title="${tool[1]}" viewBox="0 0 300 300" class="icon" style="${tool[3]}"><path class="icon_path" d="${tool[2]}" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="${tool[0]}" width="300" height="300" opacity="0"><title>${tool[1]}</title></rect></svg>`
+      html += `<svg id="${id}" ar="${id}" title="${tool[0]}" viewBox="0 0 300 300" class="icon"><path class="icon_path" d="${tool[1]}" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="${id}" width="300" height="300" opacity="0"><title>${id}</title></rect></svg>`
     }
     this.el.innerHTML = html
   }
 
   this.update = function()
   {
+    var layer_path = "M150,50 L50,150 L150,250 L250,150 L150,50 Z ";
+
+    layer_path += dotgrid.tool.index > 0 ? "M60,150 L60,150 L240,150 " : "";
+    layer_path += dotgrid.tool.index > 1 ? "M90,120 L90,120 M105,195 L105,195 L195,195 M105,105 L105,105 L195,105" : "";
+
+    document.getElementById("export").children[0].setAttribute("d",layer_path);
 
     document.getElementById("line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon";
     document.getElementById("arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon";