Improved theme support
This commit is contained in:
parent
0b1f1ab10c
commit
f771b73652
@ -92,7 +92,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
this.svg_el.style.height = this.height;
|
this.svg_el.style.height = this.height;
|
||||||
this.svg_el.style.stroke = this.color;
|
this.svg_el.style.stroke = this.color;
|
||||||
this.svg_el.style.strokeWidth = this.thickness;
|
this.svg_el.style.strokeWidth = this.thickness;
|
||||||
this.svg_el.style.fill = this.fill ? "black" : "none";
|
this.svg_el.style.fill = this.fill ? "black" : "none !important";
|
||||||
this.svg_el.style.strokeLinecap = this.linecap;
|
this.svg_el.style.strokeLinecap = this.linecap;
|
||||||
this.element.appendChild(this.svg_el);
|
this.element.appendChild(this.svg_el);
|
||||||
|
|
||||||
@ -113,7 +113,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
var o = e.target.getAttribute("data-operation");
|
var o = e.target.getAttribute("data-operation");
|
||||||
if(!o){ return; }
|
if(!o){ return; }
|
||||||
|
|
||||||
console.log(o)
|
|
||||||
if(o == "line"){ this.draw_line(); }
|
if(o == "line"){ this.draw_line(); }
|
||||||
if(o == "arc_c"){ this.draw_arc("0,1"); }
|
if(o == "arc_c"){ this.draw_arc("0,1"); }
|
||||||
if(o == "arc_r"){ this.draw_arc("0,0"); }
|
if(o == "arc_r"){ this.draw_arc("0,0"); }
|
||||||
@ -250,27 +249,27 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
// Draw
|
// Draw
|
||||||
this.draw_line = function()
|
this.draw_line = function()
|
||||||
{
|
{
|
||||||
if(from === null || to === null){ return; }
|
if(from === null || to === null){ return; }
|
||||||
|
|
||||||
to = new Pos(to[0] * -1, to[1]);
|
to = new Pos(to[0] * -1, to[1]).sub(this.offset)
|
||||||
|
from = new Pos(from[0] * -1,from[1]).sub(this.offset)
|
||||||
|
end = end ? new Pos(end[0] * -1,end[1]).sub(this.offset) : null;
|
||||||
|
|
||||||
var end_point = end ? new Pos(end[0] * -1,end[1]).sub(this.offset) : null;
|
this.segments.push(new Path_Line(from,to,end));
|
||||||
|
|
||||||
from = new Pos(from[0] * -1,from[1])
|
this.draw();
|
||||||
|
reset();
|
||||||
this.segments.push(new Path_Line(from.sub(this.offset),to.sub(this.offset),end_point));
|
|
||||||
|
|
||||||
this.draw();
|
|
||||||
reset();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.draw_arc = function(orientation)
|
this.draw_arc = function(orientation)
|
||||||
{
|
{
|
||||||
if(from === null || to === null){ return; }
|
if(from === null || to === null){ return; }
|
||||||
|
|
||||||
var end_point = end ? new Pos(end[0] * -1,end[1]).sub(this.offset) : null;
|
to = new Pos(to[0] * -1, to[1]).sub(this.offset)
|
||||||
|
from = new Pos(from[0] * -1,from[1]).sub(this.offset)
|
||||||
|
end = end ? new Pos(end[0] * -1,end[1]).sub(this.offset) : null;
|
||||||
|
|
||||||
this.segments.push(new Path_Arc(new Pos(from[0] * -1,from[1]).sub(this.offset),new Pos(to[0] * -1,to[1]).sub(this.offset),orientation,end_point));
|
this.segments.push(new Path_Arc(from,to,orientation,end));
|
||||||
|
|
||||||
this.draw();
|
this.draw();
|
||||||
reset();
|
reset();
|
||||||
@ -280,7 +279,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
|
|||||||
{
|
{
|
||||||
if(from === null || to === null || end === null){ return; }
|
if(from === null || to === null || end === null){ return; }
|
||||||
|
|
||||||
this.segments.push(new Path_Bezier(new Pos(from[0] * -1,from[1]).sub(this.offset),new Pos(to[0] * -1,to[1]).sub(this.offset),new Pos(end[0] * -1,end[1]).sub(this.offset)));
|
to = new Pos(to[0] * -1, to[1]).sub(this.offset)
|
||||||
|
from = new Pos(from[0] * -1,from[1]).sub(this.offset)
|
||||||
|
end = new Pos(end[0] * -1,end[1]).sub(this.offset)
|
||||||
|
|
||||||
|
this.segments.push(new Path_Bezier(from,to,end));
|
||||||
|
|
||||||
this.draw();
|
this.draw();
|
||||||
reset();
|
reset();
|
||||||
|
@ -1,22 +1,29 @@
|
|||||||
function Keyboard()
|
function Keyboard()
|
||||||
{
|
{
|
||||||
this.listen = function(event)
|
this.listen = function(e)
|
||||||
{
|
{
|
||||||
// save
|
// save
|
||||||
if(event.key == "s" && (event.ctrlKey || event.metaKey)){
|
if(e.key == "s" && (e.ctrlKey || e.metaKey)){
|
||||||
dotgrid.export();
|
dotgrid.export();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// undo
|
// undo
|
||||||
if(event.key == "z" && (event.ctrlKey || event.metaKey)){
|
if(e.key == "z" && (e.ctrlKey || e.metaKey)){
|
||||||
dotgrid.erase();
|
dotgrid.erase();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (event.keyCode) {
|
// Reset
|
||||||
case 83 : dotgrid.draw_arc(event.shiftKey ? "1,1" : "0,1"); break; // 'S'
|
if((e.key == "Backspace" || e.key == "Delete") && e.ctrlKey && e.shiftKey){
|
||||||
case 65 : dotgrid.draw_arc(event.shiftKey ? "1,0" : "0,0"); break; // 'a'
|
e.preventDefault();
|
||||||
|
dotgrid.theme.reset();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (e.keyCode) {
|
||||||
|
case 83 : dotgrid.draw_arc(e.shiftKey ? "1,1" : "0,1"); break; // 'S'
|
||||||
|
case 65 : dotgrid.draw_arc(e.shiftKey ? "1,0" : "0,0"); break; // 'a'
|
||||||
case 68 : dotgrid.draw_line(); break; // 'd'
|
case 68 : dotgrid.draw_line(); break; // 'd'
|
||||||
case 70 : dotgrid.draw_bezier(); break; // 'f'
|
case 70 : dotgrid.draw_bezier(); break; // 'f'
|
||||||
case 82 : dotgrid.draw_close(); break; // 'r'
|
case 82 : dotgrid.draw_close(); break; // 'r'
|
||||||
@ -35,7 +42,7 @@ function Keyboard()
|
|||||||
case 69 : dotgrid.export(); break; // 'e'
|
case 69 : dotgrid.export(); break; // 'e'
|
||||||
case 13 : dotgrid.export(); break; // 'e'
|
case 13 : dotgrid.export(); break; // 'e'
|
||||||
|
|
||||||
case 9 : dotgrid.toggle_fill(); event.preventDefault(); break; // 'tab'
|
case 9 : dotgrid.toggle_fill(); e.preventDefault(); break; // 'tab'
|
||||||
|
|
||||||
case 38 : dotgrid.mod_move(0,-10); break; // 'up'
|
case 38 : dotgrid.mod_move(0,-10); break; // 'up'
|
||||||
case 40 : dotgrid.mod_move(0,10); break; // 'down'
|
case 40 : dotgrid.mod_move(0,10); break; // 'down'
|
||||||
|
@ -54,8 +54,8 @@ function Theme()
|
|||||||
html += ".bl { background:"+theme.b_low+" !important ; fill:"+theme.b_low+" !important }\n";
|
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 += ".b_inv { background:"+theme.b_inv+" !important ; fill:"+theme.b_inv+" !important }\n";
|
||||||
|
|
||||||
|
html += "#dotgrid svg.vector { fill:"+theme.f_high+" }\n";
|
||||||
html += "#dotgrid #cursor { border-color:"+theme.f_med+"}\n";
|
html += "#dotgrid #cursor { border-color:"+theme.f_med+"}\n";
|
||||||
|
|
||||||
html += "#dotgrid #cursor_from { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
|
html += "#dotgrid #cursor_from { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
|
||||||
html += "#dotgrid #cursor_to { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
|
html += "#dotgrid #cursor_to { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
|
||||||
html += "#dotgrid #cursor_end { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
|
html += "#dotgrid #cursor_end { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
|
||||||
|
Loading…
Reference in New Issue
Block a user