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+=''+a[1]+'' - }, 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+=''+a[1]+'' + }, 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() {