diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index 27eb2bb..e58bf09 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -1,7 +1,8 @@ function Cursor() { - this.pos = {x:0,y:0}, - this.translation = null, + this.pos = {x:0,y:0}; + this.translation = null; + this.operation = null; this.translate = function(from = null,to = null, multi = false) { diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index e4d8317..d1824bf 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -210,47 +210,6 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) } } - // Toggles - - this.mod_thickness = function(mod = 10,step = false,cap = false) - { - if(cap){ - this.tool.style().thickness = this.tool.style().thickness > 40 ? 1 : this.tool.style().thickness - } - if(step){ - this.tool.style().thickness = parseInt(this.tool.style().thickness/5) * 5; - } - - this.tool.style().thickness = clamp(this.tool.style().thickness+mod,1,40); - dotgrid.guide.refresh(); - } - - this.mod_linecap_index = 1; - - this.mod_linecap = function(mod) - { - var a = ["butt","square","round"]; - this.mod_linecap_index += 1; - this.tool.style().strokeLinecap = a[this.mod_linecap_index % a.length]; - dotgrid.guide.refresh(); - } - - this.mod_linejoin_index = 1; - - this.mod_linejoin = function(mod) - { - var a = ["miter","round","bevel"]; - this.mod_linejoin_index += 1; - this.tool.style().strokeLinejoin = a[this.mod_linejoin_index % a.length]; - dotgrid.guide.refresh(); - } - - this.mod_fill = function() - { - this.tool.style().fill = this.tool.style().fill == "none" ? this.tool.style().color : "none"; - dotgrid.guide.refresh(); - } - // Basics this.set_size = function(size = {width:300,height:300},interface = true,scale = 1) diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 6c91b3c..09d4f21 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -209,7 +209,7 @@ function Guide() this.draw_preview = function() { - var operation = dotgrid.cursor.operation + var operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null if(!dotgrid.tool.can_cast(operation)){ return; } if(operation == "close"){ return; } diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 8ad89fb..133b88c 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -15,38 +15,55 @@ function Interface() this.el.appendChild(dotgrid.picker.el); var html = "" - var tools = { - line: ["line","M60,60 L240,240","A"], - arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240","S"], - arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240","D"], - bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240","F"], - close: ["close","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240","Z"], - - linecap: ["linecap","M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180","Q"], - 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 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"], + var options = { + cast:{ + line: ["line","M60,60 L240,240","A"], + arc_c: ["arc clockwise","M60,60 A180,180 0 0,1 240,240","S"], + arc_r: ["arc reverse","M60,60 A180,180 0 0,0 240,240","D"], + bezier: ["bezier","M60,60 Q60,150 150,150 Q240,150 240,240","F"], + close: ["close","M60,60 A180,180 0 0,1 240,240 M60,60 A180,180 0 0,0 240,240","Z"] + }, + toggle:{ + linecap: ["linecap","M60,60 L60,60 L180,180 L240,180 L240,240 L180,240 L180,180","Q"], + 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 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"] + }, + misc:{ + 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"] + } } - for(id in tools){ - var tool = tools[id]; - var shortcut = tool[2]; - html += `${id == "depth" ? `` : ""}${id.capitalize()}${shortcut ? '('+shortcut+')' : ''}` + for(type in options){ + var tools = options[type]; + for(name in tools){ + var tool = tools[name]; + var shortcut = tool[2]; + html += `${name == "depth" ? `` : ""}${name.capitalize()}${shortcut ? '('+shortcut+')' : ''}` + } + } this.menu_el.innerHTML = html } - this.over = function(id) + this.over = function(type,name) { - console.log("over",id) + dotgrid.cursor.operation = {} + dotgrid.cursor.operation[type] = name; } - this.down = function(id) + this.out = function(type,name) { - console.log("click",id) + dotgrid.cursor.operation = "" + } + + this.up = function(type,name) + { + if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } + + dotgrid.tool[type](name) + this.refresh(); } this.prev_operation = null; diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 8f779aa..f207782 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -158,6 +158,29 @@ function Tool() console.log(`Casted ${type} -> ${this.layer().length} elements`); } + this.i = { linecap:0,linejoin:0,thickness:5 } + + this.toggle = function(type,mod = 1) + { + if(type == "linecap"){ + var a = ["butt","square","round"]; + this.i.linecap += mod; + this.style().strokeLinecap = a[this.i.linecap % a.length]; + } + if(type == "linejoin"){ + var a = ["miter","round","bevel"]; + this.i.linejoin += mod; + this.style().strokeLinejoin = a[this.i.linejoin % a.length]; + } + if(type == "fill"){ + this.style().fill = this.style().fill == "none" ? this.style().color : "none"; + } + if(type == "thickness"){ + this.style().thickness = clamp(this.style().thickness+mod,1,40); + } + dotgrid.guide.refresh(); + } + this.can_append = function(content) { for(id in this.layer()){