diff --git a/sources/index.html b/sources/index.html
index 58ac096..9507ac3 100644
--- a/sources/index.html
+++ b/sources/index.html
@@ -10,6 +10,7 @@
+
diff --git a/sources/links/main.css b/sources/links/main.css
index b2349d7..f07e5c0 100644
--- a/sources/links/main.css
+++ b/sources/links/main.css
@@ -13,9 +13,7 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit
#widgets { z-index: 9000 }
#render { display: none }
-.icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 1}
-.icon.right { float:right;}
-.icon.inactive { opacity: 0.3 !important }
+.icon { width:25px; height:25px; margin-right:5px; opacity: 1}
.icon:hover { cursor: pointer; opacity: 1 }
svg.vector { z-index: 1000;position: relative; left:5px; top:5px; }
@@ -25,4 +23,6 @@ svg.vector { z-index: 1000;position: relative; left:5px; top:5px; }
#dotgrid:hover #guide { opacity: 1 }
#dotgrid:hover #widgets { opacity: 1 }
-#interface { max-width: 295px;margin:0px auto;font-size: 11px;line-height: 30px; text-transform: uppercase; margin-top:15px;-webkit-app-region: no-drag;}
\ No newline at end of file
+#interface { max-width: 295px;margin: 0px auto;font-size: 11px;line-height: 30px;text-transform: uppercase;margin-top: 15px;-webkit-app-region: no-drag;position: fixed;bottom: 25px;left: 45px;}
+#interface svg.inactive { opacity: 0.2 }
+#interface svg:hover { opacity: 0.5 }
\ No newline at end of file
diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index 90ad015..ef24ca7 100644
--- a/sources/scripts/dotgrid.js
+++ b/sources/scripts/dotgrid.js
@@ -1,6 +1,7 @@
function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000")
{
this.theme = new Theme();
+ this.interface = new Interface();
this.width = width;
this.height = height;
@@ -46,15 +47,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.segments = [];
- this.interface = document.createElement("div");
- this.interface.id = "interface";
this.scale = 1
this.install = function()
{
document.body.appendChild(this.wrapper);
this.wrapper.appendChild(this.element);
- this.wrapper.appendChild(this.interface);
this.element.appendChild(this.guide.el);
this.element.appendChild(this.guide.widgets);
this.wrapper.appendChild(this.render.el);
@@ -85,22 +83,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.mirror_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.mirror_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
- // Interface
- var html = ""
- var path_arr = [
- ["line","line (d)","M50,50 L250,250 ",""],
- ["arc_c","arc clockwise (s)","M50,50 A200,200 0 0,1 250,250 ",""],
- ["arc_r","arc reverse (a)","M50,50 A200,200 0 0,0 250,250 ",""],
- ["bezier","bezier (f)","M50,50 Q50,150 150,150 Q250,150 250,250 ",""],
- ["close","close (r)","M50,50 L120,120 M250,250 L180,180 ",""],
- ["mirror","mirror (space)","M144,50 L144,250 M48,144 L96,144 M192,144 L240,144 ","margin-left:35px"],// these values are almost all multiples of 12, to get pixel alignment.
- ["export","export (ctrl s)","M150,50 L50,150 L150,250 L250,150 L150,50 ","float:right"]
- ]
- path_arr.forEach(function(a) {
- html+=''
- }, this);
- this.interface.innerHTML = html
-
// Vector
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.svg_el.setAttribute("class","vector fh");
@@ -124,6 +106,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.theme.start();
this.guide.start();
+ this.interface.start();
this.resize();
this.draw();
@@ -150,6 +133,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
if(o == "arc_r"){ this.draw_arc("0,0"); }
if(o == "bezier"){ this.draw_bezier(); }
if(o == "close"){ this.draw_close(); }
+
+ if(o == "thickness"){ this.mod_thickness(); }
+ if(o == "linecap"){ this.mod_linecap(); }
if(o == "mirror"){ this.mod_mirror(); }
if(o == "export"){ this.export(); }
}
@@ -270,6 +256,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.mod_thickness = function(mod)
{
+ if(!mod){ mod = 1; this.thickness = this.thickness > 30 ? 1 : this.thickness }
+
this.thickness = Math.max(this.thickness+mod,0);
this.cursor_coord.textContent = this.thickness;
this.draw();
@@ -302,8 +290,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw();
return;
}
- // Move offset
- // this.offset = this.offset.add(new Pos(move.x,move.y));
this.draw();
}
@@ -365,7 +351,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.offset_el.setAttribute("transform","translate("+(this.offset.x*this.scale)+","+(this.offset.y*this.scale)+")")
this.render.draw();
- this.update_interface();
+ this.interface.update();
this.guide.update();
}
@@ -481,40 +467,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
});
}
- this.update_interface = function()
- {
- if(from && to){
- document.getElementById("line").className.baseVal = "icon";
- document.getElementById("arc_c").className.baseVal = "icon";
- document.getElementById("arc_r").className.baseVal = "icon";
- } else {
- document.getElementById("line").className.baseVal = "icon inactive";
- document.getElementById("arc_c").className.baseVal = "icon inactive";
- document.getElementById("arc_r").className.baseVal = "icon inactive";
- }
-
- if(from && to && end){
- document.getElementById("bezier").className.baseVal = "icon";
- } else {
- document.getElementById("bezier").className.baseVal = "icon inactive";
- }
-
- let prev = this.segments[this.segments.length-1]
- if(this.segments.length > 0 && prev.name != "close" && (prev.name != "line" || prev.end)){
- document.getElementById("close").className.baseVal = "icon";
- } else {
- document.getElementById("close").className.baseVal = "icon inactive";
- }
-
- if(this.segments.length > 0) {
- document.getElementById("mirror").className.baseVal = "icon";
- document.getElementById("export").className.baseVal = "icon";
- } else {
- document.getElementById("mirror").className.baseVal = "icon inactive";
- document.getElementById("export").className.baseVal = "icon inactive";
- }
- }
-
// Normalizers
this.position_in_grid = function(pos)
@@ -563,6 +515,23 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
cursor_end.style.top = Math.floor(end.y*this.scale + this.grid_height);
}
}
+
+ // To Clean
+
+ this.from = function()
+ {
+ return from;
+ }
+
+ this.to = function()
+ {
+ return to;
+ }
+
+ this.end = function()
+ {
+ return end;
+ }
}
window.addEventListener('dragover',function(e)
diff --git a/sources/scripts/interface.js b/sources/scripts/interface.js
new file mode 100644
index 0000000..bcb9416
--- /dev/null
+++ b/sources/scripts/interface.js
@@ -0,0 +1,46 @@
+function Interface()
+{
+ this.el = document.createElement("div");
+ this.el.id = "interface";
+
+ this.start = function()
+ {
+ document.body.appendChild(this.el);
+
+ // Interface
+ var html = ""
+ var path_arr = [
+ ["line","line (d)","M60,60 L240,240",""],
+ ["arc_c","arc clockwise (s)","M60,60 A180,180 0 0,1 240,240",""],
+ ["arc_r","arc reverse (a)","M60,60 A180,180 0 0,0 240,240",""],
+ ["bezier","bezier (f)","M60,60 Q60,150 150,150 Q240,150 240,240 ",""],
+ ["close","close (r)","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"],
+ ["mirror","mirror (space)","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210 "],
+
+ ["export","export (ctrl s)","M150,50 L50,150 L150,250 L250,150 L150,50 Z"]
+ ]
+ path_arr.forEach(function(a) {
+ html+=''
+ }, this);
+ this.el.innerHTML = html
+ }
+
+ this.update = function()
+ {
+ let prev = dotgrid.segments[dotgrid.segments.length-1]
+
+ document.getElementById("line").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon";
+ document.getElementById("arc_c").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon";
+ document.getElementById("arc_r").className.baseVal = !dotgrid.from() || !dotgrid.to() ? "icon inactive" : "icon";
+ document.getElementById("bezier").className.baseVal = !dotgrid.from() || !dotgrid.to() || !dotgrid.end() ? "icon inactive" : "icon";
+
+ document.getElementById("thickness").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
+ document.getElementById("linecap").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
+ document.getElementById("mirror").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
+ document.getElementById("close").className.baseVal = dotgrid.segments.length < 1 || (prev && prev.name == "close") ? "icon inactive" : "icon";
+ document.getElementById("export").className.baseVal = dotgrid.segments.length < 1 ? "icon inactive" : "icon";
+ }
+}
\ No newline at end of file
diff --git a/sources/scripts/theme.js b/sources/scripts/theme.js
index 9021c6c..0b8d6e3 100644
--- a/sources/scripts/theme.js
+++ b/sources/scripts/theme.js
@@ -4,7 +4,7 @@ function Theme()
this.active = null;
this.collection = {};
- this.collection.blanc = { background:"#eee",f_high:"#111",f_med:"#999",f_low:"#bbb",f_inv:"#fff",f_inv:"#000",b_high:"#000",b_med:"#999",b_low:"#ddd",b_inv:"#999",b_inv:"#72dec2" };
+ this.collection.blanc = { background:"#eee",f_high:"#111",f_med:"#999",f_low:"#ddd",f_inv:"#fff",f_inv:"#000",b_high:"#000",b_med:"#999",b_low:"#ddd",b_inv:"#999",b_inv:"#72dec2" };
this.start = function()
{