Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Moved the interface into its own class

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-11-15 10:11:09 +13:00
parent 4818e09896
commit ae0e4a8ba9
5 changed files with 77 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sources/index.html
View File

@ -10,6 +10,7 @@
<script type="text/javascript" src="scripts/guide.js"></script> <script type="text/javascript" src="scripts/guide.js"></script>
<script type="text/javascript" src="scripts/render.js"></script> <script type="text/javascript" src="scripts/render.js"></script>
<script type="text/javascript" src="scripts/theme.js"></script> <script type="text/javascript" src="scripts/theme.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<link rel="stylesheet" type="text/css" href="links/reset.css"/> <link rel="stylesheet" type="text/css" href="links/reset.css"/>
<link rel="stylesheet" type="text/css" href="links/fonts.css"/> <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
<link rel="stylesheet" type="text/css" href="links/main.css"/> <link rel="stylesheet" type="text/css" href="links/main.css"/>

8
sources/links/main.css
View File

@ -13,9 +13,7 @@ body { background:#fff; padding: 5px; font-family: 'input_mono_regular'; -webkit
#widgets { z-index: 9000 } #widgets { z-index: 9000 }
#render { display: none } #render { display: none }
.icon { width:25px; height:25px; margin-left:-5px; margin-right:0px; opacity: 1} .icon { width:25px; height:25px; margin-right:5px; opacity: 1}
.icon.right { float:right;}
.icon.inactive { opacity: 0.3 !important }
.icon:hover { cursor: pointer; opacity: 1 } .icon:hover { cursor: pointer; opacity: 1 }
svg.vector { z-index: 1000;position: relative; left:5px; top:5px; } 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 #guide { opacity: 1 }
#dotgrid:hover #widgets { 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;} #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 }

81
sources/scripts/dotgrid.js
View File

@ -1,6 +1,7 @@
function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000") function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000")
{ {
this.theme = new Theme(); this.theme = new Theme();
this.interface = new Interface();
this.width = width; this.width = width;
this.height = height; 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.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.segments = []; this.segments = [];
this.interface = document.createElement("div");
this.interface.id = "interface";
this.scale = 1 this.scale = 1
this.install = function() this.install = function()
{ {
document.body.appendChild(this.wrapper); document.body.appendChild(this.wrapper);
this.wrapper.appendChild(this.element); this.wrapper.appendChild(this.element);
this.wrapper.appendChild(this.interface);
this.element.appendChild(this.guide.el); this.element.appendChild(this.guide.el);
this.element.appendChild(this.guide.widgets); this.element.appendChild(this.guide.widgets);
this.wrapper.appendChild(this.render.el); 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_el = document.createElementNS("http://www.w3.org/2000/svg", "g");
this.mirror_path = document.createElementNS("http://www.w3.org/2000/svg", "path"); 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+='<svg id="'+a[0]+'" ar="'+a[0]+'" title="hello" class="icon" viewBox="0 0 300 300" style="'+a[3]+'"><path class="icon_path" d="'+a[2]+'" stroke-linecap: square; stroke-width="24px" fill="none" /><rect ar="'+a[0]+'" width="300" height="300" opacity="0"><title>'+a[1]+'</title></rect></svg>'
}, this);
this.interface.innerHTML = html
// Vector // Vector
this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg"); this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.svg_el.setAttribute("class","vector fh"); 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.theme.start();
this.guide.start(); this.guide.start();
this.interface.start();
this.resize(); this.resize();
this.draw(); 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 == "arc_r"){ this.draw_arc("0,0"); }
if(o == "bezier"){ this.draw_bezier(); } if(o == "bezier"){ this.draw_bezier(); }
if(o == "close"){ this.draw_close(); } 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 == "mirror"){ this.mod_mirror(); }
if(o == "export"){ this.export(); } 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) 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.thickness = Math.max(this.thickness+mod,0);
this.cursor_coord.textContent = this.thickness; this.cursor_coord.textContent = this.thickness;
this.draw(); this.draw();
@ -302,8 +290,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw(); this.draw();
return; return;
} }
// Move offset
// this.offset = this.offset.add(new Pos(move.x,move.y));
this.draw(); 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.offset_el.setAttribute("transform","translate("+(this.offset.x*this.scale)+","+(this.offset.y*this.scale)+")")
this.render.draw(); this.render.draw();
this.update_interface(); this.interface.update();
this.guide.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 // Normalizers
this.position_in_grid = function(pos) 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); 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) window.addEventListener('dragover',function(e)

46
sources/scripts/interface.js Normal file
View File

@ -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+='<svg id="'+a[0]+'" ar="'+a[0]+'" title="hello" viewBox="0 0 300 300" class="icon" style="'+a[3]+'"><path class="icon_path" d="'+a[2]+'" stroke-linecap: round; stroke-width="12px" fill="none" /><rect ar="'+a[0]+'" width="300" height="300" opacity="0"><title>'+a[1]+'</title></rect></svg>'
}, 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";
}
}

2
sources/scripts/theme.js
View File

@ -4,7 +4,7 @@ function Theme()
this.active = null; this.active = null;
this.collection = {}; 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() this.start = function()
{ {