Load colors from theme

This commit is contained in:
Devine Lu Linvega 2018-03-07 11:57:52 +13:00
parent fcbe3d4b74
commit 74e64f42e9
3 changed files with 33 additions and 18 deletions

View File

@ -49,12 +49,6 @@ body { background:var(--background) !important; }
.b_inv { background:var(--b_inv) !important ; ; }
.icon { color:var(--f_high) !important; stroke:var(--f_high) !important; }
#dotgrid svg.vector { stroke:var(--f_high) !important; }
#dotgrid svg.vector #layer_1 { stroke:var(--f_high) !important; }
#dotgrid svg.vector #layer_2 { stroke:var(--f_med) !important; }
#dotgrid svg.vector #layer_3 { stroke:var(--f_low) !important; }
#dotgrid svg.vector #mirror_layer_1 { stroke:var(--f_high) !important; }
#dotgrid svg.vector #mirror_layer_2 { stroke:var(--f_med) !important; }
#dotgrid svg.vector #mirror_layer_3 { stroke:var(--f_low) !important; }
#dotgrid #preview { stroke:var(--f_high) !important; }
#dotgrid #cursor { border-color:var(--f_med); }
#dotgrid #cursor.keyboard { border-color:var(--f_high) !Important; }

View File

@ -110,6 +110,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.svg_el.appendChild(this.mirror_el);
this.theme.start();
this.tool.start();
this.guide.start();
this.interface.start();
@ -438,21 +439,34 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.svg_el.style.width = this.width;
this.svg_el.style.height = this.height;
this.svg_el.style.stroke = this.color;
this.svg_el.style.strokeWidth = this.tool.style().thickness;
this.svg_el.style.fill = this.fill ? this.theme.active.f_high : "none";
this.layer_1.style.strokeWidth = this.tool.styles[0].thickness;
this.layer_2.style.strokeWidth = this.tool.styles[1].thickness;
this.layer_3.style.strokeWidth = this.tool.styles[2].thickness;
this.layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap;
this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
this.layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
this.layer_1.style.stroke = this.tool.styles[0].color;
this.mirror_layer_1.style.strokeWidth = this.tool.styles[0].thickness;
this.mirror_layer_1.style.strokeLinecap = this.tool.styles[0].strokeLinecap;
this.mirror_layer_1.style.strokeLinejoin = this.tool.styles[0].strokeLinejoin;
this.mirror_layer_1.style.stroke = this.tool.styles[0].color;
this.layer_2.style.strokeWidth = this.tool.styles[1].thickness;
this.layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
this.layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
this.layer_2.style.stroke = this.tool.styles[1].color;
this.mirror_layer_2.style.strokeWidth = this.tool.styles[1].thickness;
this.mirror_layer_2.style.strokeLinecap = this.tool.styles[1].strokeLinecap;
this.mirror_layer_2.style.strokeLinejoin = this.tool.styles[1].strokeLinejoin;
this.mirror_layer_2.style.stroke = this.tool.styles[1].color;
this.layer_3.style.strokeWidth = this.tool.styles[2].thickness;
this.layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
this.layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
this.layer_3.style.stroke = this.tool.styles[2].color;
this.mirror_layer_3.style.strokeWidth = this.tool.styles[2].thickness;
this.mirror_layer_3.style.strokeLinecap = this.tool.styles[2].strokeLinecap;
this.mirror_layer_3.style.strokeLinejoin = this.tool.styles[2].strokeLinejoin;
this.mirror_layer_3.style.stroke = this.tool.styles[2].color;
// Draw Mirror
if(this.mirror_index == 1){
@ -476,7 +490,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y, color = "#000000")
this.mirror_layer_3.setAttribute("transform","")
}
this.offset_el.setAttribute("transform","translate("+(this.offset.x)+","+(this.offset.y)+")")
this.offset_el.setAttribute("transform","translate(0,0)")
this.preview();
this.render.draw();

View File

@ -3,13 +3,20 @@ function Tool()
this.index = 0;
this.layers = [[],[],[]];
this.styles = [
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round"},
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round"},
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round"}
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#f00"},
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#0f0"},
{thickness:5,strokeLinecap:"round",strokeLinejoin:"round",color:"#00f"}
];
this.verteces = [];
this.reqs = {line:2,arc_c:2,arc_r:2,bezier:3,close:0};
this.start = function()
{
this.styles[0].color = dotgrid.theme.active.f_high
this.styles[1].color = dotgrid.theme.active.f_med
this.styles[2].color = dotgrid.theme.active.f_low
}
this.reset = function()
{
this.layers = [[],[],[]];