Re-Implement all paths drawing
This commit is contained in:
@@ -26,7 +26,7 @@ function Interface()
|
||||
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"],
|
||||
|
||||
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"],
|
||||
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){
|
||||
var tool = tools[id];
|
||||
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.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("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";
|
||||
@@ -56,6 +60,19 @@ function Interface()
|
||||
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").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()
|
||||
|
||||
Reference in New Issue
Block a user