To save: Copy this into a .grid file.
To load: Drag the .grid onto the browser window.
${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.warn('Nothing to render'); return }
-
- if (!dialog) { DOTGRID.render_web(content); return }
-
- dialog.showSaveDialog({ title: 'Save to .png', filters: [{ name: 'Image Format', extensions: ['png'] }] }, (fileName) => {
- if (fileName === undefined) { return }
- fileName = fileName.substr(-4, 4) != '.png' ? fileName + '.png' : fileName
- console.log(`Rendered ${size.width}x${size.height}`)
- fs.writeFileSync(fileName, ready)
- })
- }
-
- this.render_web = function (content, window) {
- // Handled in Renderer
- console.info('Web Render')
- }
-
- this.export = function (content = this.renderer.to_svg()) {
+ this.export = function () {
if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return }
- if (!dialog) { this.export_web(content); return }
-
- dialog.showSaveDialog({ title: 'Save to .svg', filters: [{ name: 'Vector Format', extensions: ['svg'] }] }, (fileName) => {
- if (fileName === undefined) { return }
- fileName = fileName.substr(-4, 4) != '.svg' ? fileName + '.svg' : fileName
- fs.writeFileSync(fileName, content)
- this.guide.update()
- })
+ this.renderer.to_svg(grab)
}
- this.export_web = function (content) {
- console.info('Web Export')
- const 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()}`
+ this.render = function () {
+ if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
+
+ const size = { width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }
+ this.renderer.to_png(size, grab)
}
// Basics
@@ -230,8 +197,8 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
if (e.target !== this.picker.input) {
e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer()))
e.clipboardData.setData('text/plain', DOTGRID.tool.path())
- e.clipboardData.setData('text/html', DOTGRID.renderer.to_svg())
- e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.to_svg())
+ e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML)
+ e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML)
e.preventDefault()
}
@@ -243,8 +210,8 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
if (e.target !== this.picker.input) {
e.clipboardData.setData('text/plain', DOTGRID.tool.export(DOTGRID.tool.layer()))
- e.clipboardData.setData('text/html', DOTGRID.renderer.to_svg())
- e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.to_svg())
+ e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML)
+ e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML)
DOTGRID.tool.layers[DOTGRID.tool.index] = []
e.preventDefault()
}
@@ -285,6 +252,4 @@ function pos_is_equal (a, b) { return a && b && a.x == b.x && a.y == b.y }
function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
function step (v, s) { return Math.round(v / s) * s }
-const DOTGRID = new Dotgrid(300,300,20,20,4,4);
-
-
+const DOTGRID = new Dotgrid(300, 300, 20, 20, 4, 4)
diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js
index 67f7d30..633dc72 100644
--- a/desktop/sources/scripts/guide.js
+++ b/desktop/sources/scripts/guide.js
@@ -1,6 +1,6 @@
'use strict'
-DOTGRID.Guide = function(){
+DOTGRID.Guide = function () {
this.el = document.createElement('canvas')
this.el.id = 'guide'
this.el.width = 640
diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js
index 77b660e..9ff20dc 100644
--- a/desktop/sources/scripts/interface.js
+++ b/desktop/sources/scripts/interface.js
@@ -1,6 +1,6 @@
'use strict'
-DOTGRID.Interface = function(){
+DOTGRID.Interface = function () {
this.el = document.createElement('div')
this.el.id = 'interface'
@@ -72,7 +72,7 @@ DOTGRID.Interface = function(){
DOTGRID.cursor.operation = {}
DOTGRID.cursor.operation[type] = name
this.update(true)
- DOTGRID.guide.update(true);
+ DOTGRID.guide.update(true)
}
this.out = function (type, name) {
@@ -92,7 +92,7 @@ DOTGRID.Interface = function(){
DOTGRID.tool[type](name)
this.update(true)
- DOTGRID.guide.update(true);
+ DOTGRID.guide.update(true)
}
this.prev_operation = null
diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js
index da79f2c..87319ed 100644
--- a/desktop/sources/scripts/picker.js
+++ b/desktop/sources/scripts/picker.js
@@ -1,6 +1,6 @@
'use strict'
-DOTGRID.Picker = function() {
+DOTGRID.Picker = function () {
this.memory = ''
this.el = document.createElement('div')
this.el.id = 'picker'
diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js
index 71b5cc3..dda0e17 100644
--- a/desktop/sources/scripts/renderer.js
+++ b/desktop/sources/scripts/renderer.js
@@ -1,6 +1,6 @@
'use strict'
-DOTGRID.Renderer = function(){
+DOTGRID.Renderer = function () {
// Create SVG parts
this.svg_el = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
this.svg_el.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
@@ -48,15 +48,17 @@ DOTGRID.Renderer = function(){
this.layer_3.setAttribute('d', paths[2])
}
- this.to_png = function (size = DOTGRID.tool.settings.size, callback = DOTGRID.render) {
- if (!dialog) { return this.to_png_web(size) }
-
+ this.svg64 = function () {
this.update()
let xml = new XMLSerializer().serializeToString(this.svg_el)
let svg64 = btoa(xml)
let b64Start = 'data:image/svg+xml;base64,'
- let image64 = b64Start + svg64
+ return b64Start + svg64
+ }
+
+ this.to_png = function (size = DOTGRID.tool.settings.size, callback) {
+ let image64 = this.svg64()
let img = new Image()
let canvas = document.createElement('canvas')
@@ -68,44 +70,20 @@ DOTGRID.Renderer = function(){
img.onload = function () {
ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height + 30) * 2)
- let data = canvas.toDataURL('image/png').replace(/^data:image\/\w+;base64,/, '')
- DOTGRID.renderer.to_png_ready(callback, new Buffer(data, 'base64'), size)
+ let data = canvas.toDataURL('image/png')
+ callback(data, 'export.png')
}
img.src = image64
}
- this.to_png_ready = function (callback, buffer, size) {
- callback(null, buffer, size)
+ this.to_svg = function (callback) {
+ const image64 = this.svg64()
+ callback(image64, 'export.svg')
}
- this.to_png_web = function (size) {
- if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return }
- this.update()
-
- let xml = new XMLSerializer().serializeToString(this.svg_el)
- let svg64 = btoa(xml)
- let b64Start = 'data:image/svg+xml;base64,'
- let image64 = b64Start + svg64
-
- let canvas = document.createElement('canvas')
- let ctx = canvas.getContext('2d')
-
- let win = window.open('about:blank', 'image from canvas')
- let 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(`