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

Progress on layers

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-02-07 07:42:34 +13:00
parent 8bf586c283
commit 2cf8005706
2 changed files with 58 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
sources/scripts/dotgrid.js
View File

@@ -39,7 +39,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.mirror_el = null;
this.mirror = false;
this.fill = false;
this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.layer_1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.layer_2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.layer_3 = document.createElementNS("http://www.w3.org/2000/svg", "path");
this.scale = 1;
this.install = function()
@@ -101,7 +103,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.preview_el.style.strokeLinecap = "round";
this.element.appendChild(this.preview_el);
this.offset_el.appendChild(this.path)
this.offset_el.appendChild(this.layer_1)
this.offset_el.appendChild(this.layer_2)
this.offset_el.appendChild(this.layer_3)
this.svg_el.appendChild(this.offset_el);
this.svg_el.appendChild(this.mirror_el);
this.mirror_el.appendChild(this.mirror_path);
@@ -135,15 +139,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.controller.add("default","Stroke","Bezier",() => { dotgrid.tool.cast("bezier") },"F");
this.controller.add("default","Stroke","Connect",() => { dotgrid.tool.cast("close") },"Z");
this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"Q");
this.controller.add("default","Effect","Linejoin",() => { dotgrid.mod_linejoin(); },"W");
this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"E");
this.controller.add("default","Effect","Fill",() => { dotgrid.toggle_fill(); },"R");
this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}");
this.controller.add("default","Effect","Thinner",() => { dotgrid.mod_thickness(-1) },"{");
this.controller.add("default","Effect","Thicker +5",() => { dotgrid.mod_thickness(5,true) },"]");
this.controller.add("default","Effect","Thinner -5",() => { dotgrid.mod_thickness(-5,true) },"[");
this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"Y");
this.controller.add("default","Effect","Linejoin",() => { dotgrid.mod_linejoin(); },"T");
this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"Space");
this.controller.add("default","Effect","Fill",() => { dotgrid.toggle_fill(); },"G");
this.controller.add("default","Layers","Move Above",() => { dotgrid.tool.layer_up() },"Up");
this.controller.add("default","Layers","Move Below",() => { dotgrid.tool.layer_down() },"Down");
this.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U");
this.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H");
this.controller.add("default","View","Control Points",() => { dotgrid.guide.toggle_widgets(); },"J");
@@ -376,8 +384,15 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
this.draw = function(exp = false)
{
var paths = this.tool.paths();
var d = this.tool.path();
this.path.setAttribute("d",d);
this.layer_1.setAttribute("d",paths[0]);
this.layer_2.setAttribute("d",paths[1]);
this.layer_3.setAttribute("d",paths[2]);
this.layer_1.style.stroke = this.theme.active.f_high;
this.layer_2.style.stroke = this.theme.active.f_med;
this.layer_3.style.stroke = this.theme.active.f_low;
this.svg_el.style.width = this.width;
this.svg_el.style.height = this.height;

49
sources/scripts/tool.js
View File

@@ -40,6 +40,20 @@ function Tool()
this.verteces.push(pos);
}
this.vertex_at = function(pos)
{
for(segment_id in this.layer()){
var segment = this.layer()[segment_id];
for(vertex_id in segment.verteces){
var vertex = segment.verteces[vertex_id];
if(vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)){
return vertex;
}
}
}
return null;
}
this.cast = function(type)
{
if(!this.layer()){ this.layers[this.index] = []; }
@@ -78,6 +92,11 @@ function Tool()
return html
}
this.paths = function()
{
return [this.path(this.layers[0]),this.path(this.layers[1]),this.path(this.layers[2])]
}
this.render = function(segment)
{
var type = segment.type;
@@ -110,20 +129,6 @@ function Tool()
return html
}
this.vertex_at = function(pos)
{
for(segment_id in this.layer()){
var segment = this.layer()[segment_id];
for(vertex_id in segment.verteces){
var vertex = segment.verteces[vertex_id];
if(vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)){
return vertex;
}
}
}
return null;
}
this.translate = function(a,b)
{
for(segment_id in this.layer()){
@@ -170,4 +175,20 @@ function Tool()
this.clear();
dotgrid.draw();
}
this.layer_up = function()
{
this.index -= this.index > 0 ? 1 : 0;
this.clear();
dotgrid.draw();
console.log(`layer:${this.index}`)
}
this.layer_down = function()
{
this.index += this.index < 2 ? 1 : 0;
this.clear();
dotgrid.draw();
console.log(`layer:${this.index}`)
}
}