diff --git a/sources/links/main.css b/sources/links/main.css
index 3798c84..b2349d7 100644
--- a/sources/links/main.css
+++ b/sources/links/main.css
@@ -13,9 +13,9 @@ 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: 0.5}
+.icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 1}
.icon.right { float:right;}
-.icon.inactive { opacity: 0.1 !important }
+.icon.inactive { opacity: 0.3 !important }
.icon:hover { cursor: pointer; opacity: 1 }
svg.vector { z-index: 1000;position: relative; left:5px; top:5px; }
diff --git a/sources/scripts/dotgrid.js b/sources/scripts/dotgrid.js
index e4f3699..90ad015 100644
--- a/sources/scripts/dotgrid.js
+++ b/sources/scripts/dotgrid.js
@@ -85,6 +85,22 @@ 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");
@@ -119,7 +135,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.mouse_down = function(e)
{
- var o = e.target.getAttribute("data-operation");
+ var o = e.target.getAttribute("ar");
var pos = this.position_in_grid(new Pos(e.clientX,e.clientY));
pos = this.position_on_grid(pos);
@@ -364,6 +380,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.segments.push(new Path_Line(from,to,end));
+ this.reset();
this.draw();
this.reset();
}
@@ -378,6 +395,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.segments.push(new Path_Arc(from,to,orientation,end));
+ this.reset();
this.draw();
this.reset();
}
@@ -392,6 +410,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.segments.push(new Path_Bezier(from,to,end));
+ this.reset();
this.draw();
this.reset();
}
@@ -403,6 +422,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.segments.push(new Path_Close());
+ this.reset();
this.draw();
this.reset();
}
@@ -463,48 +483,36 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.update_interface = function()
{
- var html = "";
-
if(from && to){
- html += "
";
- html += "
";
- html += "
";
- }
- else{
- html += "
";
- html += "
";
- html += "
";
+ 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){
- html += "
";
- }
- else{
- html += "
";
+ document.getElementById("bezier").className.baseVal = "icon";
+ } else {
+ document.getElementById("bezier").className.baseVal = "icon inactive";
}
- if(this.segments.length > 0 && this.segments[this.segments.length-1].name != "close"){
- html += "
";
- }
- else{
- html += "
";
+ 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 && this.mirror_index != 0){
- html += "
";
+ 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";
}
- else{
- html += "
";
- }
-
- if(this.segments.length > 0){
- html += "
";
- }
- else{
- html += "
";
- }
-
- this.interface.innerHTML = html;
}
// Normalizers
diff --git a/sources/scripts/theme.js b/sources/scripts/theme.js
index 3872bcc..9021c6c 100644
--- a/sources/scripts/theme.js
+++ b/sources/scripts/theme.js
@@ -54,6 +54,8 @@ function Theme()
html += ".bl { background:"+theme.b_low+" !important ; fill:"+theme.b_low+" !important }\n";
html += ".b_inv { background:"+theme.b_inv+" !important ; fill:"+theme.b_inv+" !important }\n";
+ html += ".icon { color:"+theme.f_high+" !important; stroke:"+theme.f_high+" !important }\n";
+
html += "#dotgrid svg.vector { fill:"+theme.f_high+" }\n";
html += "#dotgrid #cursor { border-color:"+theme.f_med+"}\n";
html += "#dotgrid #cursor_from { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";