diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 20d88c6..b97d513 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -84,6 +84,7 @@ DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.select_layer(2) },"CmdOrCtrl+3"); DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.select_next_layer() },"Tab"); DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.select_prev_layer() },"Shift+Tab"); + DOTGRID.controller.add("default","Layers","Merge Layers",() => { DOTGRID.tool.merge() },"M"); DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G"); DOTGRID.controller.add("default","View","Toggle Grid",() => { DOTGRID.guide.toggle(); },"H"); diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 604f5a9..725145c 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -18,6 +18,10 @@ DOTGRID.Tool = function () { this.styles[2].color = DOTGRID.theme.active.f_low } + this.erase = function () { + this.layers = [[], [], []] + } + this.reset = function () { this.styles[0].mirror_style = 0 this.styles[1].mirror_style = 0 @@ -25,7 +29,7 @@ DOTGRID.Tool = function () { this.styles[0].fill = 'none' this.styles[1].fill = 'none' this.styles[2].fill = 'none' - this.layers = [[], [], []] + this.erase() this.vertices = [] this.index = 0 } @@ -315,6 +319,16 @@ DOTGRID.Tool = function () { DOTGRID.guide.update() } + this.merge = function () { + const merged = [].concat(this.layers[0]).concat(this.layers[1]).concat(this.layers[2]) + this.erase() + this.layers[this.index] = merged + + DOTGRID.history.push(this.layers) + this.clear() + DOTGRID.guide.update() + } + // Style this.style = function () { diff --git a/examples/taijitu.grid b/examples/taijitu.grid index b717eb3..5935587 100644 --- a/examples/taijitu.grid +++ b/examples/taijitu.grid @@ -6,33 +6,6 @@ } }, "layers": [ - [ - { - "type": "arc_c", - "vertices": [ - { - "x": 135, - "y": 165 - }, - { - "x": 165, - "y": 135 - }, - { - "x": 195, - "y": 165 - }, - { - "x": 165, - "y": 195 - }, - { - "x": 135, - "y": 165 - } - ] - } - ], [ { "type": "arc_r", @@ -80,9 +53,32 @@ "y": 165 } ] - } - ], - [ + }, + { + "type": "arc_c", + "vertices": [ + { + "x": 135, + "y": 165 + }, + { + "x": 165, + "y": 135 + }, + { + "x": 195, + "y": 165 + }, + { + "x": 165, + "y": 195 + }, + { + "x": 135, + "y": 165 + } + ] + }, { "type": "arc_c", "vertices": [ @@ -112,7 +108,72 @@ "type": "close", "vertices": [] } - ] + ], + [ + { + "type": "arc_r", + "vertices": [ + { + "x": 255, + "y": 165 + }, + { + "x": 165, + "y": 75 + }, + { + "x": 75, + "y": 165 + }, + { + "x": 135, + "y": 225 + }, + { + "x": 195, + "y": 165 + } + ] + }, + { + "type": "arc_c", + "vertices": [ + { + "x": 195, + "y": 165 + }, + { + "x": 195, + "y": 165 + }, + { + "x": 165, + "y": 195 + }, + { + "x": 135, + "y": 165 + }, + { + "x": 135, + "y": 165 + }, + { + "x": 195, + "y": 105 + }, + { + "x": 255, + "y": 165 + } + ] + }, + { + "type": "close", + "vertices": [] + } + ], + [] ], "styles": [ { @@ -128,7 +189,7 @@ "strokeLinecap": "round", "strokeLinejoin": "round", "color": "#000", - "fill": "none", + "fill": "#000", "mirror_style": 0 }, { diff --git a/web/events.js b/web/events.js index d84d28c..4924b79 100644 --- a/web/events.js +++ b/web/events.js @@ -40,6 +40,8 @@ document.onkeyup = (e) => if(ch == "]"){ DOTGRID.tool.toggle("thickness",5); e.preventDefault(); } if(ch == "["){ DOTGRID.tool.toggle("thickness",-5); e.preventDefault(); } + if(ch == "m"){ DOTGRID.tool.merge(); e.preventDefault(); } + if(ch == "i"){ DOTGRID.theme.invert(); e.preventDefault(); } }