From 3c218a8a5899299ed450dc0273cf1832606e96f5 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 18 Aug 2018 09:34:24 +1200 Subject: [PATCH] Dotgrid Live! --- desktop/sources/index.html | 4 ++++ desktop/sources/scripts/dotgrid.js | 35 ++++++++++++++++++++++++----- desktop/sources/scripts/renderer.js | 29 ++++++++++++++++++++++++ index.html | 10 ++++++++- web/events.js | 34 ++++++++++++++++++++++++++++ 5 files changed, 106 insertions(+), 6 deletions(-) create mode 100644 web/events.js diff --git a/desktop/sources/index.html b/desktop/sources/index.html index e8fd44a..7eda6de 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -1,5 +1,9 @@ + + + + diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index b307671..00e0980 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -63,22 +63,30 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) { if(dotgrid.tool.length() < 1){ console.log("Nothing to save"); return; } - dialog.showSaveDialog({ - title:"Save to .grid", - filters: [{name: "Dotgrid", extensions: ["grid", "dot"]}] - },(fileName) => { + if(!dialog){ this.save_web(content); return; } + + dialog.showSaveDialog({title:"Save to .grid",filters: [{name: "Dotgrid", extensions: ["grid", "dot"]}]},(fileName) => { if (fileName === undefined){ return; } fileName = fileName.substr(-5,5) != ".grid" ? fileName+".grid" : fileName; fs.writeFileSync(fileName, content); - this.guide.refresh() + dotgrid.guide.refresh() }); } + this.save_web = function(content) + { + console.info("Web Save"); + var win = window.open("", "Save", `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height-200},left=${screen.width-640}`); + win.document.body.innerHTML = `

Copy this content into a .grid file, and later drag it over this window to load it again.

${content}
`; + } + this.render = function(content = this.renderer.to_png({width:dotgrid.tool.settings.size.width*2,height:dotgrid.tool.settings.size.height*2}), ready = null, size = null) { if(!ready){return; } if(dotgrid.tool.length() < 1){ console.log("Nothing to render"); return; } + if(!dialog){ dotgrid.render_web(content); return; } + dialog.showSaveDialog({title:"Render to .png"},(fileName) => { if (fileName === undefined){ return; } fileName = fileName.substr(-4,4) != ".png" ? fileName+".png" : fileName; @@ -87,10 +95,19 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) }); } + this.render_web = function(content,window) + { + console.info("Web Render"); + + // Handled in Renderer + } + this.export = function(content = this.renderer.to_svg()) { if(dotgrid.tool.length() < 1){ console.log("Nothing to export"); return; } + if(!dialog){ this.export_web(content); return; } + dialog.showSaveDialog({title:"Export to .svg"},(fileName) => { if (fileName === undefined){ return; } fileName = fileName.substr(-4,4) != ".svg" ? fileName+".svg" : fileName; @@ -99,6 +116,13 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) }); } + this.export_web = function(content) + { + console.info("Web Export"); + var win = window.open("", "Save", `toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480,top=${screen.height-200},left=${screen.width-640}`); + win.document.body.innerHTML = `${dotgrid.renderer.to_svg()}`; + } + // Basics this.set_size = function(size = {width:300,height:300},interface = true,scale = 1) @@ -174,6 +198,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y) dotgrid.interface.refresh(); dotgrid.guide.refresh(); + document.title = `Dotgrid — ${size.width}x${size.height}` } this.drag = function(e) diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index b83f56c..1611fa2 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -50,6 +50,8 @@ function Renderer() this.to_png = function(size = dotgrid.tool.settings.size,callback = dotgrid.render) { + if(!dialog){ return this.to_png_web(size); } + this.refresh(); var xml = new XMLSerializer().serializeToString(this.svg_el); @@ -78,6 +80,33 @@ function Renderer() callback(null,buffer,size) } + this.to_png_web = function(size) + { + console.log('Making!'); + + this.refresh(); + + var xml = new XMLSerializer().serializeToString(this.svg_el); + var svg64 = btoa(xml); + var b64Start = 'data:image/svg+xml;base64,'; + var image64 = b64Start + svg64; + + var canvas = document.createElement("canvas"); + var ctx = canvas.getContext('2d'); + + var win = window.open('about:blank','image from canvas'); + var img = new Image; + + canvas.width = size.width*2; + canvas.height = size.height*2; + + img.onload = function(){ + ctx.drawImage(img, 0, 0, size.width*2, size.height*2); + win.document.write(`from canvas`); + }; + img.src = image64; + } + this.to_svg = function() { this.refresh(); diff --git a/index.html b/index.html index 4381d2f..70be766 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,10 @@ + + + + + @@ -13,6 +18,8 @@ + + @@ -20,7 +27,8 @@
- diff --git a/web/events.js b/web/events.js new file mode 100644 index 0000000..33a64d4 --- /dev/null +++ b/web/events.js @@ -0,0 +1,34 @@ +document.onkeydown = function key_down(e) +{ + +}; + +document.onkeyup = (e) => +{ + var ch = e.key.toLowerCase(); + + console.log(ch); + + if(ch == "1"){ dotgrid.tool.select_layer(0); } + if(ch == "2"){ dotgrid.tool.select_layer(1); } + if(ch == "3"){ dotgrid.tool.select_layer(2); } + + if(ch == "u"){ dotgrid.interface.toggle(); } + if(ch == "h"){ dotgrid.guide.toggle(); } + + if(ch == "a"){ dotgrid.tool.cast("line"); } + if(ch == "s"){ dotgrid.tool.cast("arc_c"); } + if(ch == "d"){ dotgrid.tool.cast("arc_r"); } + if(ch == "f"){ dotgrid.tool.cast("bezier"); } + if(ch == "z"){ dotgrid.tool.cast("close"); } + + if(ch == "q"){ dotgrid.tool.toggle("linecap"); } + if(ch == "w"){ dotgrid.tool.toggle("linejoin"); } + if(ch == "e"){ dotgrid.tool.toggle("mirror"); } + if(ch == "r"){ dotgrid.tool.toggle("fill"); } + if(ch == "g"){ dotgrid.picker.start(); } + if(ch == "}"){ dotgrid.tool.toggle("thickness",1); } + if(ch == "{"){ dotgrid.tool.toggle("thickness",-1); } + if(ch == "]"){ dotgrid.tool.toggle("thickness",5); } + if(ch == "["){ dotgrid.tool.toggle("thickness",-5); } +} \ No newline at end of file