diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 7eda6de..febb1e7 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -21,6 +21,7 @@ + Dotgrid(Icon) @@ -47,14 +48,6 @@ dotgrid.controller.add("default","File","Render(.png)",() => { dotgrid.render(); },"CmdOrCtrl+R"); dotgrid.controller.add("default","File","Export(.svg)",() => { dotgrid.export(); },"CmdOrCtrl+E"); - dotgrid.controller.add("default","Edit","Copy",() => { document.execCommand('copy'); },"CmdOrCtrl+C"); - dotgrid.controller.add("default","Edit","Cut",() => { document.execCommand('cut'); },"CmdOrCtrl+X"); - dotgrid.controller.add("default","Edit","Paste",() => { document.execCommand('paste'); },"CmdOrCtrl+V"); - dotgrid.controller.add("default","Edit","Undo",() => { dotgrid.tool.undo(); },"CmdOrCtrl+Z"); - dotgrid.controller.add("default","Edit","Redo",() => { dotgrid.tool.redo(); },"CmdOrCtrl+Shift+Z"); - dotgrid.controller.add("default","Edit","Delete",() => { dotgrid.tool.remove_segment(); },"Backspace"); - dotgrid.controller.add("default","Edit","Deselect",() => { dotgrid.tool.clear(); },"Esc"); - dotgrid.controller.add("default","Stroke","Line",() => { dotgrid.tool.cast("line"); },"A"); dotgrid.controller.add("default","Stroke","Arc",() => { dotgrid.tool.cast("arc_c"); },"S"); // 0,1 dotgrid.controller.add("default","Stroke","Arc Rev",() => { dotgrid.tool.cast("arc_r")},"D"); // 0,0 @@ -71,12 +64,13 @@ dotgrid.controller.add("default","Effect","Thicker +5",() => { dotgrid.tool.toggle("thickness",5) },"]"); dotgrid.controller.add("default","Effect","Thinner -5",() => { dotgrid.tool.toggle("thickness",-5) },"["); - dotgrid.controller.add("default","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.guide.refresh() },"Enter"); - dotgrid.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.guide.refresh() },"Up"); - dotgrid.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x -= 15; dotgrid.guide.refresh() },"Right"); - dotgrid.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.guide.refresh() },"Down"); - dotgrid.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x += 15; dotgrid.guide.refresh() },"Left"); - dotgrid.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"CmdOrCtrl+Backspace"); + dotgrid.controller.add("default","Manual","Add Point",() => { dotgrid.tool.add_vertex(dotgrid.cursor.pos); dotgrid.guide.update() },"Enter"); + dotgrid.controller.add("default","Manual","Move Up",() => { dotgrid.cursor.pos.y -= 15; dotgrid.guide.update() },"Up"); + dotgrid.controller.add("default","Manual","Move Right",() => { dotgrid.cursor.pos.x += 15; dotgrid.guide.update() },"Right"); + dotgrid.controller.add("default","Manual","Move Down",() => { dotgrid.cursor.pos.y += 15; dotgrid.guide.update() },"Down"); + dotgrid.controller.add("default","Manual","Move Left",() => { dotgrid.cursor.pos.x -= 15; dotgrid.guide.update() },"Left"); + dotgrid.controller.add("default","Manual","Remove Point",() => { dotgrid.tool.remove_segments_at(dotgrid.cursor.pos); },"Shift+Backspace"); + dotgrid.controller.add("default","Manual","Remove Segment",() => { dotgrid.tool.remove_segment(); },"Backspace"); dotgrid.controller.add("default","Layers","Foreground",() => { dotgrid.tool.select_layer(0) },"CmdOrCtrl+1"); dotgrid.controller.add("default","Layers","Middleground",() => { dotgrid.tool.select_layer(1) },"CmdOrCtrl+2"); @@ -85,6 +79,11 @@ dotgrid.controller.add("default","View","Tools",() => { dotgrid.interface.toggle(); },"U"); dotgrid.controller.add("default","View","Grid",() => { dotgrid.guide.toggle(); },"H"); + dotgrid.controller.add("default","Theme","Noir",() => { dotgrid.theme.noir(); },"CmdOrCtrl+Shift+1"); + dotgrid.controller.add("default","Theme","Pale",() => { dotgrid.theme.pale(); },"CmdOrCtrl+Shift+2"); + dotgrid.controller.add("default","Theme","Invert",() => { dotgrid.theme.invert(); },"CmdOrCtrl+Shift+I"); + dotgrid.controller.add("default","Theme","Install",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); }); + dotgrid.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); dotgrid.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); dotgrid.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); @@ -106,6 +105,7 @@ dotgrid.controller.commit(); dotgrid.install(); + dotgrid.start(); diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index 00c93e6..5a37836 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -13,33 +13,20 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non #interface.hidden { bottom:10px;opacity: 0 } #interface.visible { bottom:20px; opacity: 1 } #interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;} -#interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.7 } +#interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.6 } #interface #menu svg.icon.inactive { opacity: 0.2 } #interface #menu svg.icon:hover { cursor: pointer; opacity: 1.0 } #interface #menu svg.icon:last-child { margin-right: 0; } #interface #menu svg.icon path { fill:none; stroke-linecap: round; stroke-linejoin: round; stroke-width:12px; } #interface #menu svg.icon.source { float:right; margin-left:-2px; margin-right:0px; } +#interface #menu svg.icon#option_color { opacity: 1.0 } +#interface #menu svg.icon#option_color:hover { opacity: 0.8 } #interface #picker { background:red; position: absolute; line-height: 30px; z-index: 0; width:250px; top:5px; opacity: 0; transition: all 250ms; padding-left:2.5px;} #interface #color_path { transition: all 500ms; fill:red; } #interface.picker #menu { opacity: 0; top:-5px; z-index: 0 } #interface.picker #picker { opacity: 1; top:0px; z-index: 900 } -#app.web #interface #menu #option_open { display: none; } +/* Web Specific */ -/* Theme Overrides */ - -:root { --background: "#222"; --f_high: "#fff";--f_med: "#777";--f_low: "#444";--f_inv: "#000";--b_high: "#000";--b_med: "#affec7";--b_low: "#000";--b_inv: "#affec7"; } - -body { background:var(--background) !important; } -#picker { background:var(--background) !important; color:var(--f_high) !important; } -.fh { color:var(--f_high) !important; stroke:var(--f_high) !important; } -.fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; } -.fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; } -.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important; } -.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important; } -.bh { background:var(--b_high) !important; } -.bm { background:var(--b_med) !important ; } -.bl { background:var(--b_low) !important ; } -.b_inv { background:var(--b_inv) !important ; ; } -.icon { color:var(--f_high) !important; stroke:var(--f_high) !important; } \ No newline at end of file +#app.web #interface #menu #option_open { display: none; } \ No newline at end of file diff --git a/desktop/sources/links/theme.css b/desktop/sources/links/theme.css new file mode 100644 index 0000000..a4f8b88 --- /dev/null +++ b/desktop/sources/links/theme.css @@ -0,0 +1,12 @@ +body { background:var(--background) !important; } +#picker { background:var(--background) !important; color:var(--f_high) !important; } +.fh { color:var(--f_high) !important; stroke:var(--f_high) !important; } +.fm { color:var(--f_med) !important ; stroke:var(--f_med) !important; } +.fl { color:var(--f_low) !important ; stroke:var(--f_low) !important; } +.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important; } +.f_inv { color:var(--f_inv) !important ; stroke:var(--f_inv) !important; } +.bh { background:var(--b_high) !important; } +.bm { background:var(--b_med) !important ; } +.bl { background:var(--b_low) !important ; } +.b_inv { background:var(--b_inv) !important ; ; } +.icon { color:var(--f_high) !important; stroke:var(--f_high) !important; } \ No newline at end of file diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index bda6e01..fe29c1d 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -27,8 +27,8 @@ function Cursor() this.translate(this.pos,this.pos,e.shiftKey) } - dotgrid.guide.refresh(); - dotgrid.interface.refresh(); + dotgrid.guide.update(); + dotgrid.interface.update(); e.preventDefault(); } @@ -44,10 +44,10 @@ function Cursor() } if(this.last_pos.x != this.pos.x || this.last_pos.y != this.pos.y){ - dotgrid.guide.refresh(); + dotgrid.guide.update(); } - dotgrid.interface.refresh(); + dotgrid.interface.update(); e.preventDefault(); this.last_pos = this.pos; @@ -69,8 +69,8 @@ function Cursor() this.translate(); - dotgrid.interface.refresh(); - dotgrid.guide.refresh(); + dotgrid.interface.update(); + dotgrid.guide.update(); e.preventDefault(); } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 69f8742..e2517d9 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -21,6 +21,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) { document.getElementById("app").appendChild(this.guide.el); + this.theme.install(document.body,this.update); + } + + this.start = function() + { this.theme.start(); this.tool.start(); this.guide.start(); @@ -59,7 +64,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) fs.readFile(paths[0], 'utf-8', (err, data) => { if(err){ alert("An error ocurred reading the file :" + err.message); return; } this.tool.replace(JSON.parse(data.toString().trim())); - this.guide.refresh(); + this.guide.update(); }); } @@ -73,7 +78,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) if (fileName === undefined){ return; } fileName = fileName.substr(-5,5) != ".grid" ? fileName+".grid" : fileName; fs.writeFileSync(fileName, content); - dotgrid.guide.refresh() + dotgrid.guide.update() }); } @@ -115,7 +120,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) if (fileName === undefined){ return; } fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName; fs.writeFileSync(fileName, content); - this.guide.refresh() + this.guide.update() }); } @@ -151,8 +156,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) dotgrid.guide.resize(size); - this.interface.refresh(); - dotgrid.guide.refresh(); + this.interface.update(); + dotgrid.guide.update(); } this.set_zoom = function(scale) @@ -172,7 +177,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.reset = function() { this.tool.clear(); - this.refresh(); + this.update(); } this.clear = function() @@ -180,11 +185,11 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) this.history.clear(); this.tool.reset(); this.reset(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); } - this.refresh = function() + this.update = function() { let size = {width:step(window.innerWidth-90,15),height:step(window.innerHeight-120,15)} @@ -199,8 +204,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) dotgrid.guide.resize(size); - dotgrid.interface.refresh(); - dotgrid.guide.refresh(); + dotgrid.interface.update(); + dotgrid.guide.update(); document.title = `Dotgrid — ${size.width}x${size.height}` } @@ -216,14 +221,14 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) let reader = new FileReader(); reader.onload = function(e){ dotgrid.tool.replace(JSON.parse(e.target.result.toString().trim())); - dotgrid.guide.refresh(); + dotgrid.guide.update(); }; reader.readAsText(file); } this.copy = function(e) { - dotgrid.guide.refresh(); + dotgrid.guide.update(); if(e.target !== this.picker.el){ e.clipboardData.setData('text/source', dotgrid.tool.export(dotgrid.tool.layer())); @@ -233,12 +238,12 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) e.preventDefault(); } - dotgrid.guide.refresh(); + dotgrid.guide.update(); } this.cut = function(e) { - dotgrid.guide.refresh(); + dotgrid.guide.update(); if(e.target !== this.picker.el){ e.clipboardData.setData('text/plain', dotgrid.tool.export(dotgrid.tool.layer())); @@ -248,7 +253,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) e.preventDefault(); } - dotgrid.guide.refresh(); + dotgrid.guide.update(); } this.paste = function(e) @@ -262,13 +267,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) e.preventDefault(); } - dotgrid.guide.refresh(); + dotgrid.guide.update(); } } window.addEventListener('resize', function(e) { - dotgrid.refresh(); + dotgrid.update(); }, false); window.addEventListener('dragover',function(e) diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 2202b9c..03c54d5 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -15,10 +15,10 @@ function Guide() this.start = function() { this.clear(); - this.refresh(); + this.update(); } - this.refresh = function(force = false) + this.update = function(force = false) { this.clear(); @@ -45,7 +45,7 @@ function Guide() this.toggle = function() { this.show_extras = this.show_extras ? false : true; - this.refresh() + this.update() } this.resize = function(size) @@ -56,7 +56,7 @@ function Guide() this.el.style.width = (size.width+offset)+"px"; this.el.style.height = (size.height+(offset*2))+"px"; - this.refresh(); + this.update(); } this.draw_handles = function() diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 7db8e7d..701f5e5 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -85,7 +85,7 @@ function Interface() { if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } - this.refresh(true); + this.update(true); } this.down = function(type,name) @@ -93,7 +93,7 @@ function Interface() if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } dotgrid.tool[type](name) - this.refresh(true); + this.update(true); } this.click = function(type,name) @@ -101,12 +101,12 @@ function Interface() // if(!dotgrid.tool[type]){ console.warn(`Unknown option(type): ${type}.${name}`,dotgrid.tool); return; } // dotgrid.tool[type](name) - // this.refresh(); + // this.update(); } this.prev_operation = null; - this.refresh = function(force = false,id) + this.update = function(force = false,id) { if(this.prev_operation == dotgrid.cursor.operation && force == false){ return; } diff --git a/desktop/sources/scripts/lib/theme.js b/desktop/sources/scripts/lib/theme.js index d7d6104..a37d3d4 100644 --- a/desktop/sources/scripts/lib/theme.js +++ b/desktop/sources/scripts/lib/theme.js @@ -2,22 +2,31 @@ function Theme() { - let app = this; + let theme = this; this.el = document.createElement("style"); this.el.type = 'text/css'; - this.default = {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#000", b_high: "#000", b_med: "#affec7", b_low: "#000", b_inv: "#affec7" }} - this.active = this.default; + this.callback = null; + + this.collection = { + noir: {meta:{}, data: { background: "#222", f_high: "#fff", f_med: "#777", f_low: "#444", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#000", b_inv: "#aaa" }}, + pale: {meta:{}, data: { background: "#e1e1e1", f_high: "#222", f_med: "#777", f_low: "#aaa", f_inv: "#000", b_high: "#000", b_med: "#aaa", b_low: "#ccc", b_inv: "#fff" }} + } + + this.active = this.collection.noir; + + this.install = function(host = document.body,callback) + { + host.appendChild(this.el) + this.callback = callback; + } this.start = function() { - this.load(localStorage.theme ? localStorage.theme : this.default, this.default); - window.addEventListener('dragover',this.drag_enter); - window.addEventListener('drop', this.drag); - document.head.appendChild(this.el) + this.load(localStorage.theme ? localStorage.theme : this.collection.noir, this.collection.noir); } - this.load = function(t, fall_back) + this.load = function(t, fall_back = this.collection.noir) { let theme = is_json(t) ? JSON.parse(t).data : t.data; @@ -43,15 +52,38 @@ function Theme() }`; this.active = theme; - this.el.textContent = css; + this.el.innerHTML = css; localStorage.setItem("theme", JSON.stringify({data: theme})); + + if(this.callback){ + this.callback(); + } } this.reset = function() { - this.load(this.default); + this.load(this.collection.noir); } + // Defaults + + this.pale = function() + { + this.load(this.collection.pale) + } + + this.noir = function() + { + this.load(this.collection.noir) + } + + this.invert = function() + { + this.load(this.active.background == this.collection.noir.data.background ? this.collection.pale : this.collection.noir) + } + + // Drag + this.drag_enter = function(e) { e.stopPropagation(); @@ -70,19 +102,13 @@ function Theme() let reader = new FileReader(); reader.onload = function(e){ - app.load(e.target.result); + theme.load(e.target.result); }; reader.readAsText(file); } - function is_json(text) - { - try{ - JSON.parse(text); - return true; - } - catch (error){ - return false; - } - } + window.addEventListener('dragover',this.drag_enter); + window.addEventListener('drop', this.drag); + + function is_json(text){ try{ JSON.parse(text); return true; } catch (error){ return false; } } } \ No newline at end of file diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 7657870..f102d1c 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -39,7 +39,7 @@ function Picker() if(parts.color){ this.set_color(parts.color); } if(parts.size){ this.set_size(parts.size); } - dotgrid.guide.refresh(); + dotgrid.guide.update(); try{ dotgrid.controller.set(); } catch(err){ } @@ -48,7 +48,7 @@ function Picker() this.el.blur() this.el.value = "" - setTimeout(() => { dotgrid.interface.refresh(true); }, 500) + setTimeout(() => { dotgrid.interface.update(true); }, 500) } this.set_color = function(color) @@ -67,7 +67,7 @@ function Picker() if(!this.original){ return; } dotgrid.tool.style().color = this.original; dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? this.original : "none"; - dotgrid.guide.refresh(); + dotgrid.guide.update(); } this.update = function() @@ -77,7 +77,7 @@ function Picker() dotgrid.tool.style().color = parts.color; dotgrid.tool.style().fill = dotgrid.tool.style().fill != "none" ? parts.color : "none"; - dotgrid.guide.refresh(); + dotgrid.guide.update(); } this.listen = function(e) diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 361df4c..7999ab0 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -17,7 +17,7 @@ function Renderer() this.svg_el.appendChild(this.layer_2); this.svg_el.appendChild(this.layer_1); - this.refresh = function() + this.update = function() { this.svg_el.setAttribute("width",(dotgrid.tool.settings.size.width-(5))+"px"); this.svg_el.setAttribute("height",(dotgrid.tool.settings.size.height+(10))+"px"); @@ -54,7 +54,7 @@ function Renderer() { if(!dialog){ return this.to_png_web(size); } - this.refresh(); + this.update(); let xml = new XMLSerializer().serializeToString(this.svg_el); let svg64 = btoa(xml); @@ -85,7 +85,7 @@ function Renderer() this.to_png_web = function(size) { if(dotgrid.tool.length() < 1){ console.warn('Nothing to render'); return; } - this.refresh(); + this.update(); let xml = new XMLSerializer().serializeToString(this.svg_el); let svg64 = btoa(xml); @@ -110,7 +110,7 @@ function Renderer() this.to_svg = function() { - this.refresh(); + this.update(); return this.svg_el.outerHTML; } diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 19dabb8..41492f7 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -30,22 +30,22 @@ function Tool() this.clear = function() { this.vertices = []; - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); } this.undo = function() { this.layers = dotgrid.history.prev(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); } this.redo = function() { this.layers = dotgrid.history.next(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); } this.length = function() @@ -65,8 +65,8 @@ function Tool() this.layers[this.index] = this.layers[this.index].concat(layer) dotgrid.history.push(this.layers); this.clear(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); } this.replace = function(dot) @@ -85,8 +85,8 @@ function Tool() this.settings = dot.settings; this.clear(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); dotgrid.history.push(this.layers); } @@ -98,8 +98,8 @@ function Tool() this.layer().pop(); this.clear(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); } this.remove_segments_at = function(pos) @@ -117,15 +117,15 @@ function Tool() } } this.clear(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); } this.add_vertex = function(pos) { pos = {x:Math.abs(pos.x),y:Math.abs(pos.y)} this.vertices.push(pos); - dotgrid.interface.refresh(true); + dotgrid.interface.update(true); } this.vertex_at = function(pos) @@ -159,8 +159,8 @@ function Tool() dotgrid.history.push(this.layers); this.clear(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); console.log(`Casted ${type} -> ${this.layer().length} elements`); } @@ -191,8 +191,8 @@ function Tool() else{ console.warn("Unknown",type) } - dotgrid.interface.refresh(true); - dotgrid.guide.refresh(); + dotgrid.interface.update(true); + dotgrid.guide.update(); } this.misc = function(type) @@ -270,7 +270,7 @@ function Tool() } dotgrid.history.push(this.layers); this.clear(); - dotgrid.guide.refresh(); + dotgrid.guide.update(); } this.translate_multi = function(a,b) @@ -286,7 +286,7 @@ function Tool() } dotgrid.history.push(this.layers); this.clear(); - dotgrid.guide.refresh(); + dotgrid.guide.update(); } // Style @@ -313,8 +313,8 @@ function Tool() { this.index = clamp(id,0,2); this.clear(); - dotgrid.guide.refresh(); - dotgrid.interface.refresh(true); + dotgrid.guide.update(); + dotgrid.interface.update(true); console.log(`layer:${this.index}`) } diff --git a/index.html b/index.html index 84a59f3..0b7375b 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,7 @@ + Dotgrid(Icon) @@ -31,6 +32,7 @@ let dialog = null; dotgrid = new Dotgrid(300,300,20,20,4,4); dotgrid.install(); + dotgrid.start(); document.getElementById("app").className = "web"; diff --git a/web/events.js b/web/events.js index 079e078..8cbf899 100644 --- a/web/events.js +++ b/web/events.js @@ -31,4 +31,6 @@ document.onkeyup = (e) => if(ch == "{"){ dotgrid.tool.toggle("thickness",-1); e.preventDefault(); } if(ch == "]"){ dotgrid.tool.toggle("thickness",5); e.preventDefault(); } if(ch == "["){ dotgrid.tool.toggle("thickness",-5); e.preventDefault(); } + + if(ch == "i"){ dotgrid.theme.invert(); e.preventDefault(); } } \ No newline at end of file