From 1f4b917318eb3257e7336b882258001b60fe592a Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 14:45:20 +1200 Subject: [PATCH] Cleaning up the renderer --- desktop/sources/scripts/dotgrid.js | 3 +- desktop/sources/scripts/guide.js | 2 +- desktop/sources/scripts/renderer.js | 77 +++++++++++++---------------- 3 files changed, 36 insertions(+), 46 deletions(-) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index d1950c9..a8155ef 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -24,6 +24,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.cursor = new this.Cursor() host.appendChild(this.guide.el) + this.renderer.install() this.interface.install(host) this.theme.install(host, this.update) } @@ -113,7 +114,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { try { const win = require('electron').remote.getCurrentWindow() - win.setSize((size.width + 100) * scale, (size.height + 100 + (ui ? 10 : 0)) * scale, true) + win.setSize((size.width + 100) * scale, (size.height + 100) * scale, true) } catch (err) { console.log('No window') } diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 79588bb..d11f5b8 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -55,7 +55,7 @@ DOTGRID.Guide = function () { } this.resize = function (size) { - const offset = 15 + const offset = 0 this.el.width = (size.width + offset) * this.scale this.el.height = (size.height + (offset * 2)) * this.scale this.el.style.width = (size.width + offset) + 'px' diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index b7a18ab..1819d4e 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -2,56 +2,49 @@ 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') - this.svg_el.setAttribute('baseProfile', 'full') - this.svg_el.setAttribute('version', '1.1') - this.svg_el.style.fill = 'none' + this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg') + this.el.setAttribute('xmlns', 'http://www.w3.org/2000/svg') + this.el.setAttribute('baseProfile', 'full') + this.el.setAttribute('version', '1.1') + this.el.style.fill = 'none' - this.layer_1 = document.createElementNS('http://www.w3.org/2000/svg', 'path') - this.layer_2 = document.createElementNS('http://www.w3.org/2000/svg', 'path') - this.layer_3 = document.createElementNS('http://www.w3.org/2000/svg', 'path') + this.layers = [] - this.svg_el.appendChild(this.layer_3) - this.svg_el.appendChild(this.layer_2) - this.svg_el.appendChild(this.layer_1) + this.install = function () { + this.layers[0] = document.createElementNS('http://www.w3.org/2000/svg', 'path') + this.layers[1] = document.createElementNS('http://www.w3.org/2000/svg', 'path') + this.layers[2] = document.createElementNS('http://www.w3.org/2000/svg', 'path') + + this.el.appendChild(this.layers[2]) + this.el.appendChild(this.layers[1]) + this.el.appendChild(this.layers[0]) + } this.update = function () { - this.svg_el.setAttribute('width', (DOTGRID.tool.settings.size.width) + 'px') - this.svg_el.setAttribute('height', (DOTGRID.tool.settings.size.height) + 'px') - this.svg_el.style.width = (DOTGRID.tool.settings.size.width) - this.svg_el.style.height = DOTGRID.tool.settings.size.height - this.svg_el.style.strokeWidth = DOTGRID.tool.style().thickness + this.el.setAttribute('width', (DOTGRID.tool.settings.size.width) + 'px') + this.el.setAttribute('height', (DOTGRID.tool.settings.size.height) + 'px') + this.el.style.width = (DOTGRID.tool.settings.size.width) + this.el.style.height = DOTGRID.tool.settings.size.height - let styles = DOTGRID.tool.styles - let paths = DOTGRID.tool.paths() + const styles = DOTGRID.tool.styles + const paths = DOTGRID.tool.paths() - this.layer_1.style.strokeWidth = styles[0].thickness - this.layer_1.style.strokeLinecap = styles[0].strokeLinecap - this.layer_1.style.strokeLinejoin = styles[0].strokeLinejoin - this.layer_1.style.stroke = styles[0].color - this.layer_1.style.fill = styles[0].fill - this.layer_1.setAttribute('d', paths[0]) - - this.layer_2.style.strokeWidth = styles[1].thickness - this.layer_2.style.strokeLinecap = styles[1].strokeLinecap - this.layer_2.style.strokeLinejoin = styles[1].strokeLinejoin - this.layer_2.style.stroke = styles[1].color - this.layer_2.style.fill = styles[1].fill - this.layer_2.setAttribute('d', paths[1]) - - this.layer_3.style.strokeWidth = styles[2].thickness - this.layer_3.style.strokeLinecap = styles[2].strokeLinecap - this.layer_3.style.strokeLinejoin = styles[2].strokeLinejoin - this.layer_3.style.stroke = styles[2].color - this.layer_3.style.fill = styles[2].fill - this.layer_3.setAttribute('d', paths[2]) + for (const id in this.layers) { + const style = styles[id] + const path = paths[id] + const layer = this.layers[id] + layer.style.strokeWidth = style.thickness + layer.style.strokeLinecap = style.strokeLinecap + layer.style.strokeLinejoin = style.strokeLinejoin + layer.style.stroke = style.color + layer.style.fill = style.fill + layer.setAttribute('d', paths[id]) + } } this.svg64 = function () { this.update() - - let xml = new XMLSerializer().serializeToString(this.svg_el) + let xml = new XMLSerializer().serializeToString(this.el) let svg64 = btoa(xml) let b64Start = 'data:image/svg+xml;base64,' return b64Start + svg64 @@ -60,14 +53,10 @@ DOTGRID.Renderer = function () { this.toPNG = function (size = DOTGRID.tool.settings.size, callback) { let image64 = this.svg64() let img = new Image() - let canvas = document.createElement('canvas') - canvas.width = (size.width) * 2 canvas.height = (size.height) * 2 - let ctx = canvas.getContext('2d') - img.onload = function () { ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height) * 2) let data = canvas.toDataURL('image/png')