Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cleaning up the renderer

Browse Source
This commit is contained in:
Devine Lu Linvega 2019-01-09 14:45:20 +12:00
parent d8f3e0191f
commit 1f4b917318
3 changed files with 36 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
desktop/sources/scripts/dotgrid.js
View File

@ -24,6 +24,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
this.cursor = new this.Cursor() this.cursor = new this.Cursor()
host.appendChild(this.guide.el) host.appendChild(this.guide.el)
this.renderer.install()
this.interface.install(host) this.interface.install(host)
this.theme.install(host, this.update) this.theme.install(host, this.update)
} }
@ -113,7 +114,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
try { try {
const win = require('electron').remote.getCurrentWindow() 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) { } catch (err) {
console.log('No window') console.log('No window')
} }

2
desktop/sources/scripts/guide.js
View File

@ -55,7 +55,7 @@ DOTGRID.Guide = function () {
} }
this.resize = function (size) { this.resize = function (size) {
const offset = 15 const offset = 0
this.el.width = (size.width + offset) * this.scale this.el.width = (size.width + offset) * this.scale
this.el.height = (size.height + (offset * 2)) * this.scale this.el.height = (size.height + (offset * 2)) * this.scale
this.el.style.width = (size.width + offset) + 'px' this.el.style.width = (size.width + offset) + 'px'

77
desktop/sources/scripts/renderer.js
View File

@ -2,56 +2,49 @@
DOTGRID.Renderer = function () { DOTGRID.Renderer = function () {
// Create SVG parts // Create SVG parts
this.svg_el = document.createElementNS('http://www.w3.org/2000/svg', 'svg') this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
this.svg_el.setAttribute('xmlns', 'http://www.w3.org/2000/svg') this.el.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
this.svg_el.setAttribute('baseProfile', 'full') this.el.setAttribute('baseProfile', 'full')
this.svg_el.setAttribute('version', '1.1') this.el.setAttribute('version', '1.1')
this.svg_el.style.fill = 'none' this.el.style.fill = 'none'
this.layer_1 = document.createElementNS('http://www.w3.org/2000/svg', 'path') this.layers = []
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.svg_el.appendChild(this.layer_3) this.install = function () {
this.svg_el.appendChild(this.layer_2) this.layers[0] = document.createElementNS('http://www.w3.org/2000/svg', 'path')
this.svg_el.appendChild(this.layer_1) 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.update = function () {
this.svg_el.setAttribute('width', (DOTGRID.tool.settings.size.width) + 'px') this.el.setAttribute('width', (DOTGRID.tool.settings.size.width) + 'px')
this.svg_el.setAttribute('height', (DOTGRID.tool.settings.size.height) + 'px') this.el.setAttribute('height', (DOTGRID.tool.settings.size.height) + 'px')
this.svg_el.style.width = (DOTGRID.tool.settings.size.width) this.el.style.width = (DOTGRID.tool.settings.size.width)
this.svg_el.style.height = DOTGRID.tool.settings.size.height this.el.style.height = DOTGRID.tool.settings.size.height
this.svg_el.style.strokeWidth = DOTGRID.tool.style().thickness
let styles = DOTGRID.tool.styles const styles = DOTGRID.tool.styles
let paths = DOTGRID.tool.paths() const paths = DOTGRID.tool.paths()
this.layer_1.style.strokeWidth = styles[0].thickness for (const id in this.layers) {
this.layer_1.style.strokeLinecap = styles[0].strokeLinecap const style = styles[id]
this.layer_1.style.strokeLinejoin = styles[0].strokeLinejoin const path = paths[id]
this.layer_1.style.stroke = styles[0].color const layer = this.layers[id]
this.layer_1.style.fill = styles[0].fill layer.style.strokeWidth = style.thickness
this.layer_1.setAttribute('d', paths[0]) layer.style.strokeLinecap = style.strokeLinecap
layer.style.strokeLinejoin = style.strokeLinejoin
this.layer_2.style.strokeWidth = styles[1].thickness layer.style.stroke = style.color
this.layer_2.style.strokeLinecap = styles[1].strokeLinecap layer.style.fill = style.fill
this.layer_2.style.strokeLinejoin = styles[1].strokeLinejoin layer.setAttribute('d', paths[id])
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])
} }
this.svg64 = function () { this.svg64 = function () {
this.update() this.update()
let xml = new XMLSerializer().serializeToString(this.el)
let xml = new XMLSerializer().serializeToString(this.svg_el)
let svg64 = btoa(xml) let svg64 = btoa(xml)
let b64Start = 'data:image/svg+xml;base64,' let b64Start = 'data:image/svg+xml;base64,'
return b64Start + svg64 return b64Start + svg64
@ -60,14 +53,10 @@ DOTGRID.Renderer = function () {
this.toPNG = function (size = DOTGRID.tool.settings.size, callback) { this.toPNG = function (size = DOTGRID.tool.settings.size, callback) {
let image64 = this.svg64() let image64 = this.svg64()
let img = new Image() let img = new Image()
let canvas = document.createElement('canvas') let canvas = document.createElement('canvas')
canvas.width = (size.width) * 2 canvas.width = (size.width) * 2
canvas.height = (size.height) * 2 canvas.height = (size.height) * 2
let ctx = canvas.getContext('2d') let ctx = canvas.getContext('2d')
img.onload = function () { img.onload = function () {
ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height) * 2) ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height) * 2)
let data = canvas.toDataURL('image/png') let data = canvas.toDataURL('image/png')