Re-Implement all paths drawing
This commit is contained in:
parent
b7e8b8e578
commit
ff63f27b55
@ -53,7 +53,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
|||||||
|
|
||||||
this.controller.add("default","Effect","Linecap",() => { dotgrid.mod_linecap(); },"Q");
|
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","Linejoin",() => { dotgrid.mod_linejoin(); },"W");
|
||||||
this.controller.add("default","Effect","Mirror",() => { dotgrid.mod_mirror(); },"E");
|
this.controller.add("default","Effect","Mirror",() => { dotgrid.tool.toggle_mirror(); },"E");
|
||||||
this.controller.add("default","Effect","Fill",() => { dotgrid.mod_fill(); },"R");
|
this.controller.add("default","Effect","Fill",() => { dotgrid.mod_fill(); },"R");
|
||||||
this.controller.add("default","Effect","Color",() => { dotgrid.picker.start(); },"G");
|
this.controller.add("default","Effect","Color",() => { dotgrid.picker.start(); },"G");
|
||||||
this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}");
|
this.controller.add("default","Effect","Thicker",() => { dotgrid.mod_thickness(1) },"}");
|
||||||
@ -162,7 +162,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
|||||||
if(o == "thickness"){ this.mod_thickness(); return; }
|
if(o == "thickness"){ this.mod_thickness(); return; }
|
||||||
if(o == "linecap"){ this.mod_linecap(); return; }
|
if(o == "linecap"){ this.mod_linecap(); return; }
|
||||||
if(o == "linejoin"){ this.mod_linejoin(); return; }
|
if(o == "linejoin"){ this.mod_linejoin(); return; }
|
||||||
if(o == "mirror"){ this.mod_mirror(); return; }
|
if(o == "mirror"){ this.tool.toggle_mirror(); return; }
|
||||||
if(o == "fill"){ this.mod_fill(); return; }
|
if(o == "fill"){ this.mod_fill(); return; }
|
||||||
if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100); return; }
|
if(o == "color"){ setTimeout(()=>{ this.picker.start(); }, 100); return; }
|
||||||
if(o == "depth"){ this.tool.select_next_layer(); return; }
|
if(o == "depth"){ this.tool.select_next_layer(); return; }
|
||||||
@ -276,13 +276,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y)
|
|||||||
dotgrid.guide.refresh();
|
dotgrid.guide.refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.mod_mirror = function()
|
|
||||||
{
|
|
||||||
this.tool.style().mirror_style += 1;
|
|
||||||
this.tool.style().mirror_style = this.tool.style().mirror_style > 7 ? 0 : this.tool.style().mirror_style;
|
|
||||||
dotgrid.guide.refresh();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.mod_fill = function()
|
this.mod_fill = function()
|
||||||
{
|
{
|
||||||
this.tool.style().fill = this.tool.style().fill == "none" ? this.tool.style().color : "none";
|
this.tool.style().fill = this.tool.style().fill == "none" ? this.tool.style().color : "none";
|
||||||
|
@ -62,18 +62,24 @@ function Generator(layer)
|
|||||||
return html
|
return html
|
||||||
}
|
}
|
||||||
|
|
||||||
this.toString = function(offset = {x:0,y:0}, scale = 1)
|
this.convert = function(layer)
|
||||||
{
|
{
|
||||||
var s = ""
|
var s = ""
|
||||||
|
|
||||||
var layer = operate(this.layer,offset,scale)
|
|
||||||
|
|
||||||
for(id in layer){
|
for(id in layer){
|
||||||
var seg = layer[id];
|
var seg = layer[id];
|
||||||
s += `${this.render(seg)}`
|
s += `${this.render(seg)}`
|
||||||
}
|
}
|
||||||
|
|
||||||
return s.trim()
|
return s.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.toString = function(offset = {x:0,y:0}, scale = 1, mirror = dotgrid.tool.style().mirror_style)
|
||||||
|
{
|
||||||
|
var s = ""
|
||||||
|
var layer = operate(this.layer,offset,scale)
|
||||||
|
s += this.convert(layer)
|
||||||
|
return s
|
||||||
}
|
}
|
||||||
|
|
||||||
function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; }
|
function copy(data){ return data ? JSON.parse(JSON.stringify(data)) : []; }
|
||||||
|
@ -123,10 +123,9 @@ function Guide()
|
|||||||
|
|
||||||
this.draw_paths = function()
|
this.draw_paths = function()
|
||||||
{
|
{
|
||||||
var path = new Generator(dotgrid.tool.layer()).toString({x:15,y:15},scale)
|
this.draw_path(new Generator(dotgrid.tool.layers[2]).toString({x:15,y:15},scale),dotgrid.tool.styles[2])
|
||||||
var style = dotgrid.tool.style()
|
this.draw_path(new Generator(dotgrid.tool.layers[1]).toString({x:15,y:15},scale),dotgrid.tool.styles[1])
|
||||||
|
this.draw_path(new Generator(dotgrid.tool.layers[0]).toString({x:15,y:15},scale),dotgrid.tool.styles[0])
|
||||||
this.draw_path(path,style)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.draw_path = function(path,style)
|
this.draw_path = function(path,style)
|
||||||
|
@ -26,7 +26,7 @@ function Interface()
|
|||||||
linejoin: ["linejoin","M60,60 L120,120 L180,120 M120,180 L180,180 L240,240","W"],
|
linejoin: ["linejoin","M60,60 L120,120 L180,120 M120,180 L180,180 L240,240","W"],
|
||||||
thickness: ["thickness","M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240"],
|
thickness: ["thickness","M120,90 L120,90 L90,120 L180,210 L210,180 Z M105,105 L105,105 L60,60 M195,195 L195,195 L240,240"],
|
||||||
|
|
||||||
mirror: ["mirror","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210","E"],
|
mirror: ["mirror","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210","E"],
|
||||||
fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z","R"],
|
fill: ["fill","M60,60 L60,150 L150,150 L240,150 L240,240 Z","R"],
|
||||||
color: ["color","M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60","G"],
|
color: ["color","M150,60 A90,90 0 0,1 240,150 A-90,90 0 0,1 150,240 A-90,-90 0 0,1 60,150 A90,-90 0 0,1 150,60","G"],
|
||||||
}
|
}
|
||||||
@ -34,13 +34,17 @@ function Interface()
|
|||||||
for(id in tools){
|
for(id in tools){
|
||||||
var tool = tools[id];
|
var tool = tools[id];
|
||||||
var shortcut = tool[2];
|
var shortcut = tool[2];
|
||||||
html += `<svg id="${id}" ar="${id}" title="${tool[0].capitalize()}" viewBox="0 0 300 300" class="icon"><path class="icon_path" d="${tool[1]}"/>${id == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${id}" width="300" height="300" opacity="0"><title>${id.capitalize()}${shortcut ? '('+shortcut+')' : ''}</title></rect></svg>`
|
html += `<svg id="${id}" ar="${id}" title="${tool[0].capitalize()}" viewBox="0 0 300 300" class="icon"><path id="${id}_path" class="icon_path" d="${tool[1]}"/>${id == "depth" ? `<path class="icon_path inactive" d=""/>` : ""}<rect ar="${id}" width="300" height="300" opacity="0"><title>${id.capitalize()}${shortcut ? '('+shortcut+')' : ''}</title></rect></svg>`
|
||||||
}
|
}
|
||||||
this.menu_el.innerHTML = html
|
this.menu_el.innerHTML = html
|
||||||
}
|
}
|
||||||
|
|
||||||
this.refresh = function()
|
this.prev_operation = null;
|
||||||
|
|
||||||
|
this.refresh = function(force = false)
|
||||||
{
|
{
|
||||||
|
if(this.prev_operation == dotgrid.cursor.operation && force == false){ return; }
|
||||||
|
|
||||||
document.getElementById("line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon";
|
document.getElementById("line").className.baseVal = !dotgrid.tool.can_cast("line") ? "icon inactive" : "icon";
|
||||||
document.getElementById("arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon";
|
document.getElementById("arc_c").className.baseVal = !dotgrid.tool.can_cast("arc_c") ? "icon inactive" : "icon";
|
||||||
document.getElementById("arc_r").className.baseVal = !dotgrid.tool.can_cast("arc_r") ? "icon inactive" : "icon";
|
document.getElementById("arc_r").className.baseVal = !dotgrid.tool.can_cast("arc_r") ? "icon inactive" : "icon";
|
||||||
@ -56,6 +60,19 @@ function Interface()
|
|||||||
document.getElementById("color").children[0].style.fill = dotgrid.tool.style().color;
|
document.getElementById("color").children[0].style.fill = dotgrid.tool.style().color;
|
||||||
document.getElementById("color").children[0].style.stroke = dotgrid.tool.style().color;
|
document.getElementById("color").children[0].style.stroke = dotgrid.tool.style().color;
|
||||||
document.getElementById("color").className.baseVal = "icon";
|
document.getElementById("color").className.baseVal = "icon";
|
||||||
|
|
||||||
|
// Mirror
|
||||||
|
if(dotgrid.tool.style().mirror_style == 0){
|
||||||
|
document.getElementById("mirror_path").setAttribute("d","M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210")
|
||||||
|
}
|
||||||
|
else if(dotgrid.tool.style().mirror_style == 1){
|
||||||
|
document.getElementById("mirror_path").setAttribute("d","M60,60 L240,240 M180,120 L210,90 M120,180 L90,210")
|
||||||
|
}
|
||||||
|
else if(dotgrid.tool.style().mirror_style == 2){
|
||||||
|
document.getElementById("mirror_path").setAttribute("d","M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240")
|
||||||
|
}
|
||||||
|
|
||||||
|
this.prev_operation = dotgrid.cursor.operation;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.toggle = function()
|
this.toggle = function()
|
||||||
|
@ -223,6 +223,16 @@ function Tool()
|
|||||||
dotgrid.guide.refresh();
|
dotgrid.guide.refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Toggles
|
||||||
|
|
||||||
|
this.toggle_mirror = function()
|
||||||
|
{
|
||||||
|
this.style().mirror_style = this.style().mirror_style > 1 ? 0 : this.style().mirror_style+1;
|
||||||
|
|
||||||
|
dotgrid.guide.refresh();
|
||||||
|
dotgrid.interface.refresh(true);
|
||||||
|
}
|
||||||
|
|
||||||
// Style
|
// Style
|
||||||
|
|
||||||
this.style = function()
|
this.style = function()
|
||||||
|
Loading…
Reference in New Issue
Block a user