From d8f3e0191f79e807a7ae4a6cf9a86ca982d1fbfb Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 14:36:26 +1200 Subject: [PATCH 01/20] Cleanup --- desktop/sources/scripts/dotgrid.js | 12 ++++++------ desktop/sources/scripts/guide.js | 13 ++++++++++--- desktop/sources/scripts/renderer.js | 18 +++++++++--------- desktop/sources/scripts/tool.js | 2 +- 4 files changed, 26 insertions(+), 19 deletions(-) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 61bfcdb..d1950c9 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -58,7 +58,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.new = function () { this.set_zoom(1.0) - this.set_size({ width: 300, height: 300 }) + this.setSize({ width: 300, height: 300 }) this.history.push(this.tool.layers) this.clear() } @@ -87,25 +87,25 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.save = function () { if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } - this.renderer.to_grid(grab) + this.renderer.toGRID(grab) } this.export = function () { if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } - this.renderer.to_svg(grab) + this.renderer.toSVG(grab) } 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) + this.renderer.toPNG(size, grab) } // Basics - this.set_size = function (size = { width: 300, height: 300 }, ui = true, scale = 1) { + this.setSize = function (size = { width: 300, height: 300 }, ui = true, scale = 1) { size = { width: clamp(step(size.width, 15), 105, 1080), height: clamp(step(size.height, 15), 120, 1080) } this.tool.settings.size.width = size.width @@ -131,7 +131,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { } this.set_zoom = function (scale) { - this.set_size({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale) + this.setSize({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale) try { webFrame.setZoomFactor(scale) diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index f00e48c..79588bb 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -24,12 +24,19 @@ DOTGRID.Guide = function () { this.drawMirror() this.drawRulers() + DOTGRID.renderer.update() + let ctx = this.el.getContext('2d') + let image64 = DOTGRID.renderer.svg64() + let img = new Image() + img.src = image64 + ctx.drawImage(img, 0, 0, this.el.width, this.el.height) + if (DOTGRID.tool.index == 2) { this.drawMarkers(); this.drawVertices() } - this.drawPath(new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[2]) + // this.drawPath(new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[2]) if (DOTGRID.tool.index == 1) { this.drawMarkers(); this.drawVertices() } - this.drawPath(new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[1]) + // this.drawPath(new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[1]) if (DOTGRID.tool.index == 0) { this.drawMarkers(); this.drawVertices() } - this.drawPath(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0]) + // this.drawPath(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0]) this.drawHandles() this.drawTranslation() diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index dda0e17..b7a18ab 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -17,10 +17,10 @@ DOTGRID.Renderer = function () { this.svg_el.appendChild(this.layer_1) 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') - this.svg_el.style.width = (DOTGRID.tool.settings.size.width - (5)) - this.svg_el.style.height = DOTGRID.tool.settings.size.height + (10) + 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 let styles = DOTGRID.tool.styles @@ -57,31 +57,31 @@ DOTGRID.Renderer = function () { return b64Start + svg64 } - this.to_png = function (size = DOTGRID.tool.settings.size, callback) { + 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 + 30) * 2 + canvas.height = (size.height) * 2 let ctx = canvas.getContext('2d') img.onload = function () { - ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height + 30) * 2) + ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height) * 2) let data = canvas.toDataURL('image/png') callback(data, 'export.png') } img.src = image64 } - this.to_svg = function (callback) { + this.toSVG = function (callback) { const image64 = this.svg64() callback(image64, 'export.svg') } - this.to_grid = function (callback) { + this.toGRID = function (callback) { const text = DOTGRID.tool.export() const file = new Blob([text], { type: 'text/plain' }) callback(URL.createObjectURL(file), 'export.grid') diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index a4d8e04..4271788 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -77,7 +77,7 @@ DOTGRID.Tool = function () { dot.settings.size = { width: dot.settings.width, height: dot.settings.height } } if (this.settings && (this.settings.size.width != dot.settings.size.width || this.settings.size.height != dot.settings.size.height)) { - DOTGRID.set_size({ width: dot.settings.size.width, height: dot.settings.size.height }) + DOTGRID.setSize({ width: dot.settings.size.width, height: dot.settings.size.height }) } this.layers = dot.layers From 1f4b917318eb3257e7336b882258001b60fe592a Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 14:45:20 +1200 Subject: [PATCH 02/20] 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') From f604780056f6164ac229f5405c885bad9703747a Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 14:48:03 +1200 Subject: [PATCH 03/20] ** --- desktop/sources/scripts/renderer.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 1819d4e..94e4088 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -43,34 +43,39 @@ DOTGRID.Renderer = function () { } this.svg64 = function () { - this.update() let xml = new XMLSerializer().serializeToString(this.el) let svg64 = btoa(xml) let b64Start = 'data:image/svg+xml;base64,' return b64Start + svg64 } + // Exporters + this.toPNG = function (size = DOTGRID.tool.settings.size, callback) { + this.update() + 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') - callback(data, 'export.png') + canvas.getContext('2d').drawImage(img, 0, 0, (size.width) * 2, (size.height) * 2) + callback(canvas.toDataURL('image/png'), 'export.png') } img.src = image64 } this.toSVG = function (callback) { + this.update() + const image64 = this.svg64() callback(image64, 'export.svg') } this.toGRID = function (callback) { + this.update() + const text = DOTGRID.tool.export() const file = new Blob([text], { type: 'text/plain' }) callback(URL.createObjectURL(file), 'export.grid') From cd02c01f0de78f893e1d1ead3afd3ed56cc279c3 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 15:01:01 +1200 Subject: [PATCH 04/20] Cleaning up the guide --- desktop/sources/scripts/dotgrid.js | 1 + desktop/sources/scripts/guide.js | 28 ++++++++++++++-------------- desktop/sources/scripts/renderer.js | 1 + desktop/sources/scripts/tool.js | 6 +++--- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index a8155ef..23bf31d 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -51,6 +51,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.update = function () { DOTGRID.resize() + DOTGRID.renderer.update() DOTGRID.interface.update() DOTGRID.guide.update() } diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index d11f5b8..2e60710 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -7,6 +7,7 @@ DOTGRID.Guide = function () { this.el.height = 640 this.el.style.width = '320px' this.el.style.height = '320px' + this.context = this.el.getContext('2d') this.showExtras = true this.scale = 2 @@ -17,27 +18,20 @@ DOTGRID.Guide = function () { } this.update = function (force = false) { + + DOTGRID.renderer.update() + this.clear() - this.el.getContext('2d').restore() + this.context.restore() this.drawMirror() this.drawRulers() - DOTGRID.renderer.update() - let ctx = this.el.getContext('2d') - let image64 = DOTGRID.renderer.svg64() - let img = new Image() - img.src = image64 - ctx.drawImage(img, 0, 0, this.el.width, this.el.height) - - if (DOTGRID.tool.index == 2) { this.drawMarkers(); this.drawVertices() } - // this.drawPath(new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[2]) - if (DOTGRID.tool.index == 1) { this.drawMarkers(); this.drawVertices() } - // this.drawPath(new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[1]) - if (DOTGRID.tool.index == 0) { this.drawMarkers(); this.drawVertices() } - // this.drawPath(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0]) + this.drawRender() + this.drawMarkers() + this.drawVertices() this.drawHandles() this.drawTranslation() this.drawCursor() @@ -278,6 +272,12 @@ DOTGRID.Guide = function () { ctx.restore() } + this.drawRender = function(ctx = this.context){ + let img = new Image() + img.src = DOTGRID.renderer.svg64() + this.context.drawImage(img, 0, 0, this.el.width, this.el.height) + } + function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } function clamp (v, min, max) { return v < min ? min : v > max ? max : v } } diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 94e4088..951346d 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -38,6 +38,7 @@ DOTGRID.Renderer = function () { layer.style.strokeLinejoin = style.strokeLinejoin layer.style.stroke = style.color layer.style.fill = style.fill + layer.style.transform = style.transform layer.setAttribute('d', paths[id]) } } diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 4271788..31ce0a1 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -5,9 +5,9 @@ DOTGRID.Tool = function () { this.settings = { size: { width: 300, height: 300 } } this.layers = [[], [], []] this.styles = [ - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0 }, - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0 }, - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0 } + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform:'rotate(45)' }, + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0, transform:'rotate(45)' }, + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0, transform:'rotate(45)' } ] this.vertices = [] this.reqs = { line: 2, arc_c: 2, arc_r: 2, arc_c_full: 2, arc_r_full: 2, bezier: 3, close: 0 } From 55670a4a146346c488c1c31d50ad316e67411343 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 15:09:20 +1200 Subject: [PATCH 05/20] Renderer is now the manager --- desktop/sources/scripts/dotgrid.js | 21 ++++++++++--------- desktop/sources/scripts/guide.js | 5 ++--- .../scripts/{renderer.js => manager.js} | 4 +++- index.html | 3 ++- 4 files changed, 18 insertions(+), 15 deletions(-) rename desktop/sources/scripts/{renderer.js => manager.js} (97%) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 23bf31d..3a296d3 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -16,15 +16,16 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { // ISU this.install = function (host) { + this.manager = new Manager(this) this.guide = new this.Guide() this.tool = new this.Tool() this.interface = new this.Interface() - this.renderer = new this.Renderer() + this.picker = new this.Picker() this.cursor = new this.Cursor() host.appendChild(this.guide.el) - this.renderer.install() + this.manager.install() this.interface.install(host) this.theme.install(host, this.update) } @@ -51,7 +52,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.update = function () { DOTGRID.resize() - DOTGRID.renderer.update() + DOTGRID.manager.update() DOTGRID.interface.update() DOTGRID.guide.update() } @@ -89,20 +90,20 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.save = function () { if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } - this.renderer.toGRID(grab) + this.manager.toGRID(grab) } this.export = function () { if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } - this.renderer.toSVG(grab) + this.manager.toSVG(grab) } 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.toPNG(size, grab) + this.manager.toPNG(size, grab) } // Basics @@ -206,8 +207,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.svg_el.outerHTML) - e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML) + e.clipboardData.setData('text/html', DOTGRID.manager.svg_el.outerHTML) + e.clipboardData.setData('text/svg+xml', DOTGRID.manager.svg_el.outerHTML) e.preventDefault() } @@ -220,8 +221,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.export(DOTGRID.tool.layer())) - e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML) - e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML) + e.clipboardData.setData('text/html', DOTGRID.manager.svg_el.outerHTML) + e.clipboardData.setData('text/svg+xml', DOTGRID.manager.svg_el.outerHTML) DOTGRID.tool.layers[DOTGRID.tool.index] = [] e.preventDefault() } diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 2e60710..8106492 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -18,9 +18,8 @@ DOTGRID.Guide = function () { } this.update = function (force = false) { + DOTGRID.manager.update() - DOTGRID.renderer.update() - this.clear() this.context.restore() @@ -274,7 +273,7 @@ DOTGRID.Guide = function () { this.drawRender = function(ctx = this.context){ let img = new Image() - img.src = DOTGRID.renderer.svg64() + img.src = DOTGRID.manager.svg64() this.context.drawImage(img, 0, 0, this.el.width, this.el.height) } diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/manager.js similarity index 97% rename from desktop/sources/scripts/renderer.js rename to desktop/sources/scripts/manager.js index 951346d..ff1a665 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/manager.js @@ -1,6 +1,8 @@ 'use strict' -DOTGRID.Renderer = function () { +// Manages the SVG file + +function Manager (dotgrid) { // Create SVG parts this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg') this.el.setAttribute('xmlns', 'http://www.w3.org/2000/svg') diff --git a/index.html b/index.html index 737d621..bead1be 100644 --- a/index.html +++ b/index.html @@ -22,9 +22,10 @@ + - + From 43cf9891c4d73931d8e7d6eff4c0723abaef4214 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 15:12:18 +1200 Subject: [PATCH 06/20] Renamed guide->renderer --- desktop/sources/index.html | 12 +++--- desktop/sources/scripts/cursor.js | 10 ++--- desktop/sources/scripts/dotgrid.js | 32 ++++++++-------- desktop/sources/scripts/interface.js | 12 +++--- desktop/sources/scripts/manager.js | 10 ++--- desktop/sources/scripts/picker.js | 2 +- .../sources/scripts/{guide.js => renderer.js} | 11 ++---- desktop/sources/scripts/tool.js | 38 +++++++++---------- index.html | 2 +- web/events.js | 2 +- 10 files changed, 61 insertions(+), 70 deletions(-) rename desktop/sources/scripts/{guide.js => renderer.js} (98%) diff --git a/desktop/sources/index.html b/desktop/sources/index.html index b97d513..7101695 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -71,11 +71,11 @@ 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.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","Add Point",() => { DOTGRID.tool.add_vertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter"); + DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.renderer.update() },"Up"); + DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.renderer.update() },"Right"); + DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.renderer.update() },"Down"); + DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.renderer.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"); @@ -87,7 +87,7 @@ DOTGRID.controller.add("default","Layers","Merge Layers",() => { DOTGRID.tool.merge() },"M"); DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G"); - DOTGRID.controller.add("default","View","Toggle Grid",() => { DOTGRID.guide.toggle(); },"H"); + DOTGRID.controller.add("default","View","Toggle Grid",() => { DOTGRID.renderer.toggle(); },"H"); DOTGRID.controller.add("default","Theme","Open Theme",() => { DOTGRID.theme.open(); },"CmdOrCtrl+Shift+o") DOTGRID.controller.add("default","Theme","Reset Theme",() => { DOTGRID.theme.reset(); },"CmdOrCtrl+Shift+Backspace") diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index cd229e7..3d20030 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -24,7 +24,7 @@ DOTGRID.Cursor = function () { this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey) } - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update() e.preventDefault() } @@ -40,7 +40,7 @@ DOTGRID.Cursor = function () { } if (this.last_pos.x != this.pos.x || this.last_pos.y != this.pos.y) { - DOTGRID.guide.update() + DOTGRID.renderer.update() } DOTGRID.interface.update() @@ -62,7 +62,7 @@ DOTGRID.Cursor = function () { this.translate() DOTGRID.interface.update() - DOTGRID.guide.update() + DOTGRID.renderer.update() e.preventDefault() } @@ -83,8 +83,8 @@ DOTGRID.Cursor = function () { this.pos_relative = function (pos) { return { - x: pos.x - DOTGRID.guide.el.offsetLeft, - y: pos.y - DOTGRID.guide.el.offsetTop + x: pos.x - DOTGRID.renderer.el.offsetLeft, + y: pos.y - DOTGRID.renderer.el.offsetTop } } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 3a296d3..faabdd4 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -17,13 +17,13 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.install = function (host) { this.manager = new Manager(this) - this.guide = new this.Guide() + this.renderer = new Renderer(this) this.tool = new this.Tool() this.interface = new this.Interface() - + this.picker = new this.Picker() this.cursor = new this.Cursor() - host.appendChild(this.guide.el) + host.appendChild(this.renderer.el) this.manager.install() this.interface.install(host) @@ -33,7 +33,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.start = function () { this.theme.start() this.tool.start() - this.guide.start() + this.renderer.start() this.interface.start() document.addEventListener('mousedown', function (e) { DOTGRID.cursor.down(e) }, false) @@ -54,7 +54,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { DOTGRID.resize() DOTGRID.manager.update() DOTGRID.interface.update() - DOTGRID.guide.update() + DOTGRID.renderer.update() } // File @@ -76,7 +76,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.update() + this.renderer.update() }) } @@ -127,10 +127,10 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.grid_width = this.tool.settings.size.width / this.grid_x this.grid_height = this.tool.settings.size.height / this.grid_y - DOTGRID.guide.resize(size) + DOTGRID.renderer.resize(size) this.interface.update() - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.set_zoom = function (scale) { @@ -154,7 +154,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.history.clear() this.tool.reset() this.reset() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) } @@ -176,7 +176,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { DOTGRID.grid_width = DOTGRID.tool.settings.size.width / DOTGRID.grid_x DOTGRID.grid_height = DOTGRID.tool.settings.size.height / DOTGRID.grid_y - DOTGRID.guide.resize(size) + DOTGRID.renderer.resize(size) document.title = `Dotgrid — ${size.width}x${size.height}` } @@ -196,13 +196,13 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { const data = e.target && e.target.result ? e.target.result : '' if (data && !isJson(data)) { return } DOTGRID.tool.replace(JSON.parse(`${data}`)) - DOTGRID.guide.update() + DOTGRID.renderer.update() } reader.readAsText(file) } this.copy = function (e) { - DOTGRID.guide.update() + DOTGRID.renderer.update() if (e.target !== this.picker.input) { e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer())) @@ -212,11 +212,11 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { e.preventDefault() } - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.cut = function (e) { - DOTGRID.guide.update() + DOTGRID.renderer.update() if (e.target !== this.picker.input) { e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer())) @@ -227,7 +227,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { e.preventDefault() } - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.paste = function (e) { @@ -240,7 +240,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { e.preventDefault() } - DOTGRID.guide.update() + DOTGRID.renderer.update() } } diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index ea50d46..f58858b 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -72,19 +72,19 @@ DOTGRID.Interface = function () { DOTGRID.cursor.operation = {} DOTGRID.cursor.operation[type] = name this.update(true) - DOTGRID.guide.update(true) + DOTGRID.renderer.update(true) } this.out = function (type, name) { DOTGRID.cursor.operation = '' - DOTGRID.guide.update(true) + DOTGRID.renderer.update(true) } this.up = function (type, name) { if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return } this.update(true) - DOTGRID.guide.update(true) + DOTGRID.renderer.update(true) } this.down = function (type, name) { @@ -92,7 +92,7 @@ DOTGRID.Interface = function () { DOTGRID.tool[type](name) this.update(true) - DOTGRID.guide.update(true) + DOTGRID.renderer.update(true) } this.prev_operation = null @@ -130,10 +130,10 @@ DOTGRID.Interface = function () { document.getElementById('option_export').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' document.getElementById('option_render').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' - document.getElementById('option_grid').className.baseVal = DOTGRID.guide.showExtras ? 'icon inactive source' : 'icon source' + document.getElementById('option_grid').className.baseVal = DOTGRID.renderer.showExtras ? 'icon inactive source' : 'icon source' // Grid - if (DOTGRID.guide.showExtras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') } + if (DOTGRID.renderer.showExtras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') } // Mirror if (DOTGRID.tool.style().mirror_style == 0) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 1) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 2) { document.getElementById('mirror_path').setAttribute('d', 'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240') } else if (DOTGRID.tool.style().mirror_style == 3) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 4) { document.getElementById('mirror_path').setAttribute('d', 'M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ') } diff --git a/desktop/sources/scripts/manager.js b/desktop/sources/scripts/manager.js index ff1a665..b31d45f 100644 --- a/desktop/sources/scripts/manager.js +++ b/desktop/sources/scripts/manager.js @@ -13,13 +13,9 @@ function Manager (dotgrid) { this.layers = [] 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.el.appendChild(this.layers[2] = document.createElementNS('http://www.w3.org/2000/svg', 'path')) + this.el.appendChild(this.layers[1] = document.createElementNS('http://www.w3.org/2000/svg', 'path')) + this.el.appendChild(this.layers[0] = document.createElementNS('http://www.w3.org/2000/svg', 'path')) } this.update = function () { diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 87319ed..823f273 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -46,7 +46,7 @@ DOTGRID.Picker = function () { try { DOTGRID.controller.set() } catch (err) { console.log('No controller') } - setTimeout(() => { DOTGRID.interface.update(true); DOTGRID.guide.update() }, 250) + setTimeout(() => { DOTGRID.interface.update(true); DOTGRID.renderer.update() }, 250) } this.validate = function () { diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/renderer.js similarity index 98% rename from desktop/sources/scripts/guide.js rename to desktop/sources/scripts/renderer.js index 8106492..2cd3339 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/renderer.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Guide = function () { +function Renderer () { this.el = document.createElement('canvas') this.el.id = 'guide' this.el.width = 640 @@ -21,15 +21,10 @@ DOTGRID.Guide = function () { DOTGRID.manager.update() this.clear() - - this.context.restore() - this.drawMirror() this.drawRulers() - this.drawRender() - - this.drawMarkers() + this.drawMarkers() this.drawVertices() this.drawHandles() this.drawTranslation() @@ -271,7 +266,7 @@ DOTGRID.Guide = function () { ctx.restore() } - this.drawRender = function(ctx = this.context){ + this.drawRender = function (ctx = this.context) { let img = new Image() img.src = DOTGRID.manager.svg64() this.context.drawImage(img, 0, 0, this.el.width, this.el.height) diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 31ce0a1..7e6f397 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -5,9 +5,9 @@ DOTGRID.Tool = function () { this.settings = { size: { width: 300, height: 300 } } this.layers = [[], [], []] this.styles = [ - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform:'rotate(45)' }, - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0, transform:'rotate(45)' }, - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0, transform:'rotate(45)' } + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform: 'rotate(45)' }, + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0, transform: 'rotate(45)' }, + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0, transform: 'rotate(45)' } ] this.vertices = [] this.reqs = { line: 2, arc_c: 2, arc_r: 2, arc_c_full: 2, arc_r_full: 2, bezier: 3, close: 0 } @@ -36,19 +36,19 @@ DOTGRID.Tool = function () { this.clear = function () { this.vertices = [] - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) } this.undo = function () { this.layers = DOTGRID.history.prev() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) } this.redo = function () { this.layers = DOTGRID.history.next() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) } @@ -66,7 +66,7 @@ DOTGRID.Tool = function () { this.layers[this.index] = this.layers[this.index].concat(layer) DOTGRID.history.push(this.layers) this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) } @@ -85,7 +85,7 @@ DOTGRID.Tool = function () { this.settings = dot.settings this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) DOTGRID.history.push(this.layers) } @@ -97,7 +97,7 @@ DOTGRID.Tool = function () { this.layer().pop() this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) } @@ -115,7 +115,7 @@ DOTGRID.Tool = function () { } } this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) } @@ -170,7 +170,7 @@ DOTGRID.Tool = function () { DOTGRID.history.push(this.layers) this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) console.log(`Casted ${type} -> ${this.layer().length} elements`) @@ -197,7 +197,7 @@ DOTGRID.Tool = function () { console.warn('Unknown', type) } DOTGRID.interface.update(true) - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.misc = function (type) { @@ -205,7 +205,7 @@ DOTGRID.Tool = function () { } this.source = function (type) { - if (type == 'grid') { DOTGRID.guide.toggle() } + if (type == 'grid') { DOTGRID.renderer.toggle() } if (type == 'screen') { app.toggle_fullscreen() } if (type == 'open') { DOTGRID.open() } @@ -268,7 +268,7 @@ DOTGRID.Tool = function () { } DOTGRID.history.push(this.layers) this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.translate_multi = function (a, b) { @@ -284,7 +284,7 @@ DOTGRID.Tool = function () { DOTGRID.history.push(this.layers) this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.translate_layer = function (a, b) { @@ -299,7 +299,7 @@ DOTGRID.Tool = function () { } DOTGRID.history.push(this.layers) this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.translate_copy = function (a, b) { @@ -316,7 +316,7 @@ DOTGRID.Tool = function () { DOTGRID.history.push(this.layers) this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.merge = function () { @@ -326,7 +326,7 @@ DOTGRID.Tool = function () { DOTGRID.history.push(this.layers) this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() } // Style @@ -350,7 +350,7 @@ DOTGRID.Tool = function () { this.select_layer = function (id) { this.index = clamp(id, 0, 2) this.clear() - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update(true) console.log(`layer:${this.index}`) } diff --git a/index.html b/index.html index bead1be..d1885c2 100644 --- a/index.html +++ b/index.html @@ -23,8 +23,8 @@ + - diff --git a/web/events.js b/web/events.js index 4924b79..cd67fc5 100644 --- a/web/events.js +++ b/web/events.js @@ -19,7 +19,7 @@ document.onkeyup = (e) => if(ch == "2"){ DOTGRID.tool.select_layer(1); e.preventDefault(); } if(ch == "3"){ DOTGRID.tool.select_layer(2); e.preventDefault(); } - if(ch == "h"){ DOTGRID.guide.toggle(); e.preventDefault(); } + if(ch == "h"){ DOTGRID.renderer.toggle(); e.preventDefault(); } if(ch == "?"){ DOTGRID.reset(); DOTGRID.theme.reset(); e.preventDefault(); } if(ch == "a"){ DOTGRID.tool.cast("line"); e.preventDefault(); } From 945c77f948f1372154ec51b02dbb5ac67a4750ed Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 15:20:29 +1200 Subject: [PATCH 07/20] Cleaning up the renderer --- desktop/sources/scripts/renderer.js | 133 +++++++++++++--------------- 1 file changed, 62 insertions(+), 71 deletions(-) diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 2cd3339..87b5e86 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -1,6 +1,6 @@ 'use strict' -function Renderer () { +function Renderer (dotgrid) { this.el = document.createElement('canvas') this.el.id = 'guide' this.el.width = 640 @@ -13,18 +13,18 @@ function Renderer () { this.scale = 2 this.start = function () { - this.clear() this.update() } this.update = function (force = false) { - DOTGRID.manager.update() + dotgrid.manager.update() this.clear() + this.drawMirror() this.drawRulers() this.drawRender() - this.drawMarkers() + this.drawGrid() this.drawVertices() this.drawHandles() this.drawTranslation() @@ -33,45 +33,46 @@ function Renderer () { } this.clear = function () { - this.el.getContext('2d').clearRect(0, 0, this.el.width * this.scale, this.el.height * this.scale) + this.context.clearRect(0, 0, this.el.width * this.scale, this.el.height * this.scale) } this.toggle = function () { this.showExtras = !this.showExtras this.update() - DOTGRID.interface.update(true) + dotgrid.interface.update(true) } this.resize = function (size) { - 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' - this.el.style.height = (size.height + (offset * 2)) + 'px' + this.el.width = size.width * this.scale + this.el.height = size.height * this.scale + this.el.style.width = size.width + 'px' + this.el.style.height = size.height + 'px' this.update() } + // Collections + this.drawMirror = function () { if (!this.showExtras) { return } - if (DOTGRID.tool.style().mirror_style === 0) { return } + if (dotgrid.tool.style().mirror_style === 0) { return } - const middle = { x: DOTGRID.tool.settings.size.width + (DOTGRID.grid_width), y: DOTGRID.tool.settings.size.height + (2 * DOTGRID.grid_height) } + const middle = { x: dotgrid.tool.settings.size.width + (dotgrid.grid_width), y: dotgrid.tool.settings.size.height + (this.scale * dotgrid.grid_height) } - if (DOTGRID.tool.style().mirror_style === 1 || DOTGRID.tool.style().mirror_style === 3) { - this.drawRule({ x: middle.x, y: DOTGRID.grid_height * 2 }, { x: middle.x, y: (DOTGRID.tool.settings.size.height + DOTGRID.grid_height) * 2 }) + if (dotgrid.tool.style().mirror_style === 1 || dotgrid.tool.style().mirror_style === 3) { + this.drawRule({ x: middle.x, y: dotgrid.grid_height * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height + dotgrid.grid_height) * this.scale }) } - if (DOTGRID.tool.style().mirror_style === 2 || DOTGRID.tool.style().mirror_style === 3) { - this.drawRule({ x: DOTGRID.grid_width * 2, y: middle.y }, { x: (DOTGRID.tool.settings.size.width + DOTGRID.grid_width) * 2, y: middle.y }) + if (dotgrid.tool.style().mirror_style === 2 || dotgrid.tool.style().mirror_style === 3) { + this.drawRule({ x: dotgrid.grid_width * this.scale, y: middle.y }, { x: (dotgrid.tool.settings.size.width + dotgrid.grid_width) * this.scale, y: middle.y }) } } this.drawHandles = function () { if (!this.showExtras) { return } - for (const segment_id in DOTGRID.tool.layer()) { - const segment = DOTGRID.tool.layer()[segment_id] + for (const segment_id in dotgrid.tool.layer()) { + const segment = dotgrid.tool.layer()[segment_id] for (const vertex_id in segment.vertices) { const vertex = segment.vertices[vertex_id] this.drawHandle(vertex) @@ -80,31 +81,44 @@ function Renderer () { } this.drawVertices = function () { - for (const id in DOTGRID.tool.vertices) { - this.drawVertex(DOTGRID.tool.vertices[id]) + for (const id in dotgrid.tool.vertices) { + this.drawVertex(dotgrid.tool.vertices[id]) } } - this.drawMarkers = function () { + this.drawGrid = function () { if (!this.showExtras) { return } - const cursor = { x: parseInt(DOTGRID.cursor.pos.x / DOTGRID.grid_width), y: parseInt(DOTGRID.cursor.pos.y / DOTGRID.grid_width) } + const cursor = { x: parseInt(dotgrid.cursor.pos.x / dotgrid.grid_width), y: parseInt(dotgrid.cursor.pos.y / dotgrid.grid_width) } - for (let x = DOTGRID.grid_x - 1; x >= 0; x--) { - for (let y = DOTGRID.grid_y; y >= 0; y--) { - let is_step = x % DOTGRID.block_x == 0 && y % DOTGRID.block_y == 0 + for (let x = dotgrid.grid_x - 1; x >= 0; x--) { + for (let y = dotgrid.grid_y; y >= 0; y--) { + let is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0 // Color - let color = is_step ? DOTGRID.theme.active.b_med : DOTGRID.theme.active.b_low - if ((y == 0 || y == DOTGRID.grid_y) && cursor.x == x + 1) { color = DOTGRID.theme.active.b_high } else if ((x == 0 || x == DOTGRID.grid_x - 1) && cursor.y == y + 1) { color = DOTGRID.theme.active.b_high } else if (cursor.x == x + 1 && cursor.y == y + 1) { color = DOTGRID.theme.active.b_high } + let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low + if ((y == 0 || y == dotgrid.grid_y) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == dotgrid.grid_x - 1) && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x == x + 1 && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } this.drawMarker({ - x: parseInt(x * DOTGRID.grid_width) + DOTGRID.grid_width, - y: parseInt(y * DOTGRID.grid_height) + DOTGRID.grid_height + x: parseInt(x * dotgrid.grid_width) + dotgrid.grid_width, + y: parseInt(y * dotgrid.grid_height) + dotgrid.grid_height }, is_step ? 2.5 : 1.5, color) } } } + this.drawRulers = function () { + if (!dotgrid.cursor.translation) { return } + + const pos = dotgrid.cursor.translation.to + const bottom = (dotgrid.tool.settings.size.height * this.scale) + const right = (dotgrid.tool.settings.size.width * this.scale) + + this.drawRule({ x: pos.x * this.scale, y: 0 }, { x: pos.x * this.scale, y: bottom }) + this.drawRule({ x: 0, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale }) + } + + // Elements + this.drawMarker = function (pos, radius = 1, color) { let ctx = this.el.getContext('2d') ctx.beginPath() @@ -120,7 +134,7 @@ function Renderer () { ctx.beginPath() ctx.lineWidth = 2 ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) - ctx.fillStyle = DOTGRID.theme.active.f_med + ctx.fillStyle = dotgrid.theme.active.f_med ctx.fill() ctx.closePath() } @@ -133,34 +147,11 @@ function Renderer () { ctx.lineTo(to.x, to.y) ctx.lineCap = 'round' ctx.lineWidth = 3 - ctx.strokeStyle = DOTGRID.theme.active.b_low + ctx.strokeStyle = dotgrid.theme.active.b_low ctx.stroke() ctx.closePath() } - this.drawRuler = function (pos) { - let offset = 15 * this.scale - let top = offset - let bottom = (DOTGRID.tool.settings.size.height * this.scale) + offset - let left = offset - let right = (DOTGRID.tool.settings.size.width * this.scale) - - // Translation - this.drawRule({ x: pos.x * this.scale, y: top }, { x: pos.x * this.scale, y: bottom }) - this.drawRule({ x: left, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale }) - } - - this.drawRulers = function () { - if (!DOTGRID.cursor.translation) { return } - - let ctx = this.el.getContext('2d') - - this.drawRuler(DOTGRID.cursor.translation.to) - - ctx.setLineDash([]) - ctx.restore() - } - this.drawHandle = function (pos, radius = 6) { let ctx = this.el.getContext('2d') @@ -168,21 +159,21 @@ function Renderer () { ctx.lineWidth = 3 ctx.lineCap = 'round' ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), radius + 3, 0, 2 * Math.PI, false) - ctx.fillStyle = DOTGRID.theme.active.f_high + ctx.fillStyle = dotgrid.theme.active.f_high ctx.fill() - ctx.strokeStyle = DOTGRID.theme.active.f_high + ctx.strokeStyle = dotgrid.theme.active.f_high ctx.stroke() ctx.closePath() ctx.beginPath() ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) - ctx.fillStyle = DOTGRID.theme.active.f_low + ctx.fillStyle = dotgrid.theme.active.f_low ctx.fill() ctx.closePath() ctx.beginPath() ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius - 3, 0, 2 * Math.PI, false) - ctx.fillStyle = DOTGRID.theme.active.f_high + ctx.fillStyle = dotgrid.theme.active.f_high ctx.fill() ctx.closePath() } @@ -207,16 +198,16 @@ function Renderer () { } this.drawTranslation = function () { - if (!DOTGRID.cursor.translation) { return } + if (!dotgrid.cursor.translation) { return } let ctx = this.el.getContext('2d') ctx.beginPath() - ctx.moveTo((DOTGRID.cursor.translation.from.x * this.scale), (DOTGRID.cursor.translation.from.y * this.scale)) - ctx.lineTo((DOTGRID.cursor.translation.to.x * this.scale), (DOTGRID.cursor.translation.to.y * this.scale)) + ctx.moveTo((dotgrid.cursor.translation.from.x * this.scale), (dotgrid.cursor.translation.from.y * this.scale)) + ctx.lineTo((dotgrid.cursor.translation.to.x * this.scale), (dotgrid.cursor.translation.to.y * this.scale)) ctx.lineCap = 'round' ctx.lineWidth = 5 - ctx.strokeStyle = DOTGRID.cursor.translation.multi === true ? DOTGRID.theme.active.b_inv : DOTGRID.cursor.translation.copy === true ? DOTGRID.theme.active.f_med : DOTGRID.theme.active.f_low + ctx.strokeStyle = dotgrid.cursor.translation.multi === true ? dotgrid.theme.active.b_inv : dotgrid.cursor.translation.copy === true ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low ctx.setLineDash([5, 10]) ctx.stroke() ctx.closePath() @@ -225,14 +216,14 @@ function Renderer () { ctx.restore() } - this.drawCursor = function (pos = DOTGRID.cursor.pos, radius = DOTGRID.tool.style().thickness - 1) { + this.drawCursor = function (pos = dotgrid.cursor.pos, radius = dotgrid.tool.style().thickness - 1) { let ctx = this.el.getContext('2d') ctx.beginPath() ctx.lineWidth = 3 ctx.lineCap = 'round' ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), 5, 0, 2 * Math.PI, false) - ctx.strokeStyle = DOTGRID.theme.active.background + ctx.strokeStyle = dotgrid.theme.active.background ctx.stroke() ctx.closePath() @@ -240,21 +231,21 @@ function Renderer () { ctx.lineWidth = 3 ctx.lineCap = 'round' ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), clamp(radius, 5, 100), 0, 2 * Math.PI, false) - ctx.strokeStyle = DOTGRID.theme.active.f_med + ctx.strokeStyle = dotgrid.theme.active.f_med ctx.stroke() ctx.closePath() } this.drawPreview = function () { let ctx = this.el.getContext('2d') - let operation = DOTGRID.cursor.operation && DOTGRID.cursor.operation.cast ? DOTGRID.cursor.operation.cast : null + let operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null - if (!DOTGRID.tool.canCast(operation)) { return } + if (!dotgrid.tool.canCast(operation)) { return } if (operation == 'close') { return } - let path = new Generator([{ vertices: DOTGRID.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2) + let path = new Generator([{ vertices: dotgrid.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2) let style = { - color: DOTGRID.theme.active.f_med, + color: dotgrid.theme.active.f_med, thickness: 2, strokeLinecap: 'round', strokeLinejoin: 'round', @@ -268,7 +259,7 @@ function Renderer () { this.drawRender = function (ctx = this.context) { let img = new Image() - img.src = DOTGRID.manager.svg64() + img.src = dotgrid.manager.svg64() this.context.drawImage(img, 0, 0, this.el.width, this.el.height) } From e79fae8a4918b92f8ff31b8b1bdac6f9235db984 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 15:24:58 +1200 Subject: [PATCH 08/20] Further cleanu[ --- desktop/sources/scripts/renderer.js | 241 ++++++++++++++-------------- 1 file changed, 117 insertions(+), 124 deletions(-) diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 87b5e86..752b7c7 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -117,127 +117,7 @@ function Renderer (dotgrid) { this.drawRule({ x: 0, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale }) } - // Elements - - this.drawMarker = function (pos, radius = 1, color) { - let ctx = this.el.getContext('2d') - ctx.beginPath() - ctx.lineWidth = 2 - ctx.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false) - ctx.fillStyle = color - ctx.fill() - ctx.closePath() - } - - this.drawVertex = function (pos, radius = 5) { - let ctx = this.el.getContext('2d') - ctx.beginPath() - ctx.lineWidth = 2 - ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) - ctx.fillStyle = dotgrid.theme.active.f_med - ctx.fill() - ctx.closePath() - } - - this.drawRule = function (from, to) { - let ctx = this.el.getContext('2d') - - ctx.beginPath() - ctx.moveTo(from.x, from.y) - ctx.lineTo(to.x, to.y) - ctx.lineCap = 'round' - ctx.lineWidth = 3 - ctx.strokeStyle = dotgrid.theme.active.b_low - ctx.stroke() - ctx.closePath() - } - - this.drawHandle = function (pos, radius = 6) { - let ctx = this.el.getContext('2d') - - ctx.beginPath() - ctx.lineWidth = 3 - ctx.lineCap = 'round' - ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), radius + 3, 0, 2 * Math.PI, false) - ctx.fillStyle = dotgrid.theme.active.f_high - ctx.fill() - ctx.strokeStyle = dotgrid.theme.active.f_high - ctx.stroke() - ctx.closePath() - - ctx.beginPath() - ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) - ctx.fillStyle = dotgrid.theme.active.f_low - ctx.fill() - ctx.closePath() - - ctx.beginPath() - ctx.arc((pos.x * this.scale), (pos.y * this.scale), radius - 3, 0, 2 * Math.PI, false) - ctx.fillStyle = dotgrid.theme.active.f_high - ctx.fill() - ctx.closePath() - } - - this.drawPath = function (path, style) { - let ctx = this.el.getContext('2d') - let p = new Path2D(path) - - ctx.strokeStyle = style.color - ctx.lineWidth = style.thickness * this.scale - ctx.lineCap = style.strokeLinecap - ctx.lineJoin = style.strokeLinejoin - - if (style.fill && style.fill != 'none') { - ctx.fillStyle = style.color - ctx.fill(p) - } - - // Dash - if (style.strokeLineDash) { ctx.setLineDash(style.strokeLineDash) } else { ctx.setLineDash([]) } - ctx.stroke(p) - } - - this.drawTranslation = function () { - if (!dotgrid.cursor.translation) { return } - - let ctx = this.el.getContext('2d') - - ctx.beginPath() - ctx.moveTo((dotgrid.cursor.translation.from.x * this.scale), (dotgrid.cursor.translation.from.y * this.scale)) - ctx.lineTo((dotgrid.cursor.translation.to.x * this.scale), (dotgrid.cursor.translation.to.y * this.scale)) - ctx.lineCap = 'round' - ctx.lineWidth = 5 - ctx.strokeStyle = dotgrid.cursor.translation.multi === true ? dotgrid.theme.active.b_inv : dotgrid.cursor.translation.copy === true ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low - ctx.setLineDash([5, 10]) - ctx.stroke() - ctx.closePath() - - ctx.setLineDash([]) - ctx.restore() - } - - this.drawCursor = function (pos = dotgrid.cursor.pos, radius = dotgrid.tool.style().thickness - 1) { - let ctx = this.el.getContext('2d') - - ctx.beginPath() - ctx.lineWidth = 3 - ctx.lineCap = 'round' - ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), 5, 0, 2 * Math.PI, false) - ctx.strokeStyle = dotgrid.theme.active.background - ctx.stroke() - ctx.closePath() - - ctx.beginPath() - ctx.lineWidth = 3 - ctx.lineCap = 'round' - ctx.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), clamp(radius, 5, 100), 0, 2 * Math.PI, false) - ctx.strokeStyle = dotgrid.theme.active.f_med - ctx.stroke() - ctx.closePath() - } - this.drawPreview = function () { - let ctx = this.el.getContext('2d') let operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null if (!dotgrid.tool.canCast(operation)) { return } @@ -252,12 +132,125 @@ function Renderer (dotgrid) { strokeLineDash: [5, 15] } this.drawPath(path, style) - - ctx.setLineDash([]) - ctx.restore() } - this.drawRender = function (ctx = this.context) { + // Elements + + this.drawMarker = function (pos, radius = 1, color) { + this.context.beginPath() + this.context.lineWidth = 2 + this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false) + this.context.fillStyle = color + this.context.fill() + this.context.closePath() + } + + this.drawVertex = function (pos, radius = 5) { + this.context.beginPath() + this.context.lineWidth = 2 + this.context.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) + this.context.fillStyle = dotgrid.theme.active.f_med + this.context.fill() + this.context.closePath() + } + + this.drawRule = function (from, to) { + this.context.beginPath() + this.context.moveTo(from.x, from.y) + this.context.lineTo(to.x, to.y) + this.context.lineCap = 'round' + this.context.lineWidth = 3 + this.context.strokeStyle = dotgrid.theme.active.b_low + this.context.stroke() + this.context.closePath() + } + + this.drawHandle = function (pos, radius = 6) { + this.context.beginPath() + this.context.lineWidth = 3 + this.context.lineCap = 'round' + this.context.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), radius + 3, 0, 2 * Math.PI, false) + this.context.fillStyle = dotgrid.theme.active.f_high + this.context.fill() + this.context.strokeStyle = dotgrid.theme.active.f_high + this.context.stroke() + this.context.closePath() + + this.context.beginPath() + this.context.arc((pos.x * this.scale), (pos.y * this.scale), radius, 0, 2 * Math.PI, false) + this.context.fillStyle = dotgrid.theme.active.f_low + this.context.fill() + this.context.closePath() + + this.context.beginPath() + this.context.arc((pos.x * this.scale), (pos.y * this.scale), radius - 3, 0, 2 * Math.PI, false) + this.context.fillStyle = dotgrid.theme.active.f_high + this.context.fill() + this.context.closePath() + } + + this.drawPath = function (path, style) { + let p = new Path2D(path) + + this.context.strokeStyle = style.color + this.context.lineWidth = style.thickness * this.scale + this.context.lineCap = style.strokeLinecap + this.context.lineJoin = style.strokeLinejoin + + if (style.fill && style.fill != 'none') { + this.context.fillStyle = style.color + this.context.fill(p) + } + + // Dash + this.context.save() + if (style.strokeLineDash) { this.context.setLineDash(style.strokeLineDash) } else { this.context.setLineDash([]) } + this.context.stroke(p) + this.context.restore() + } + + this.drawTranslation = function () { + if (!dotgrid.cursor.translation) { return } + + this.context.save() + + this.context.beginPath() + this.context.moveTo((dotgrid.cursor.translation.from.x * this.scale), (dotgrid.cursor.translation.from.y * this.scale)) + this.context.lineTo((dotgrid.cursor.translation.to.x * this.scale), (dotgrid.cursor.translation.to.y * this.scale)) + this.context.lineCap = 'round' + this.context.lineWidth = 5 + this.context.strokeStyle = dotgrid.cursor.translation.multi === true ? dotgrid.theme.active.b_inv : dotgrid.cursor.translation.copy === true ? dotgrid.theme.active.f_med : dotgrid.theme.active.f_low + this.context.setLineDash([5, 10]) + this.context.stroke() + this.context.closePath() + + this.context.setLineDash([]) + this.context.restore() + } + + this.drawCursor = function (pos = dotgrid.cursor.pos, radius = dotgrid.tool.style().thickness - 1) { + this.context.save() + + this.context.beginPath() + this.context.lineWidth = 3 + this.context.lineCap = 'round' + this.context.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), 5, 0, 2 * Math.PI, false) + this.context.strokeStyle = dotgrid.theme.active.background + this.context.stroke() + this.context.closePath() + + this.context.beginPath() + this.context.lineWidth = 3 + this.context.lineCap = 'round' + this.context.arc(Math.abs(pos.x * -this.scale), Math.abs(pos.y * this.scale), clamp(radius, 5, 100), 0, 2 * Math.PI, false) + this.context.strokeStyle = dotgrid.theme.active.f_med + this.context.stroke() + this.context.closePath() + + this.context.restore() + } + + this.drawRender = function () { let img = new Image() img.src = dotgrid.manager.svg64() this.context.drawImage(img, 0, 0, this.el.width, this.el.height) From 1d574d43c03c0da3a64e2f4518ed6d6ee2f9c06c Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 15:49:34 +1200 Subject: [PATCH 09/20] Minor cleanup --- desktop/sources/index.html | 16 +-- desktop/sources/links/main.css | 2 +- desktop/sources/scripts/cursor.js | 8 +- desktop/sources/scripts/dotgrid.js | 2 +- desktop/sources/scripts/generator.js | 11 -- desktop/sources/scripts/renderer.js | 26 ++-- desktop/sources/scripts/tool.js | 201 +++++++++++++-------------- web/events.js | 10 +- 8 files changed, 136 insertions(+), 140 deletions(-) diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 7101695..356ffab 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -71,19 +71,19 @@ 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.renderer.update() },"Enter"); + DOTGRID.controller.add("default","Manual","Add Point",() => { DOTGRID.tool.addVertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter"); DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.renderer.update() },"Up"); DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.renderer.update() },"Right"); DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.renderer.update() },"Down"); DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.renderer.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","Manual","Remove Point",() => { DOTGRID.tool.removeSegmentsAt(DOTGRID.cursor.pos); },"Shift+Backspace"); + DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.removeSegment(); },"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"); - DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.select_layer(2) },"CmdOrCtrl+3"); - DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.select_next_layer() },"Tab"); - DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.select_prev_layer() },"Shift+Tab"); + DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.selectLayer(0) },"CmdOrCtrl+1"); + DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.selectLayer(1) },"CmdOrCtrl+2"); + DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.selectLayer(2) },"CmdOrCtrl+3"); + DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.selectNextLayer() },"Tab"); + DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.selectPrevLayer() },"Shift+Tab"); DOTGRID.controller.add("default","Layers","Merge Layers",() => { DOTGRID.tool.merge() },"M"); DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G"); diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index e4c67be..e70f773 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -8,7 +8,7 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non /* Interface */ -#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:45px; height:30px; max-width:calc(100vw - 90px); overflow: hidden;} +#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:35px; height:30px; max-width:calc(100vw - 80px); overflow: hidden;} #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%;} diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index 3d20030..5dcfd91 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -20,7 +20,7 @@ DOTGRID.Cursor = function () { this.pos = this.pos_from_event(e) // Translation - if (DOTGRID.tool.vertex_at(this.pos)) { + if (DOTGRID.tool.vertexAt(this.pos)) { this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey) } @@ -53,9 +53,9 @@ DOTGRID.Cursor = function () { this.pos = this.pos_from_event(e) if (this.translation && !is_equal(this.translation.from, this.translation.to)) { - if (this.translation.layer === true) { DOTGRID.tool.translate_layer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translate_copy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translate_multi(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) } + if (this.translation.layer === true) { DOTGRID.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translateMulti(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) } } else if (e.target.id == 'guide') { - DOTGRID.tool.add_vertex({ x: this.pos.x, y: this.pos.y }) + DOTGRID.tool.addVertex({ x: this.pos.x, y: this.pos.y }) DOTGRID.picker.stop() } @@ -69,7 +69,7 @@ DOTGRID.Cursor = function () { this.alt = function (e) { this.pos = this.pos_from_event(e) - DOTGRID.tool.remove_segments_at(this.pos) + DOTGRID.tool.removeSegmentsAt(this.pos) e.preventDefault() setTimeout(() => { DOTGRID.tool.clear() }, 150) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index faabdd4..c724f3d 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -18,7 +18,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.install = function (host) { this.manager = new Manager(this) this.renderer = new Renderer(this) - this.tool = new this.Tool() + this.tool = new Tool(this) this.interface = new this.Interface() this.picker = new this.Picker() diff --git a/desktop/sources/scripts/generator.js b/desktop/sources/scripts/generator.js index 8e99a5f..9ed7e05 100644 --- a/desktop/sources/scripts/generator.js +++ b/desktop/sources/scripts/generator.js @@ -109,17 +109,6 @@ function Generator (layer, style) { s += this.convert(operate(this.layer, offset, scale, mirror), mirror) } - // if (mirror == 3) { - // s += this.convert(operate(this.layer, offset, scale, mirror, 120), mirror) - // s += this.convert(operate(this.layer, offset, scale, mirror, 240), mirror) - // } - // if (mirror == 4) { - // s += this.convert(operate(this.layer, offset, scale, mirror, 72), mirror) - // s += this.convert(operate(this.layer, offset, scale, mirror, 144), mirror) - // s += this.convert(operate(this.layer, offset, scale, mirror, 216), mirror) - // s += this.convert(operate(this.layer, offset, scale, mirror, 288), mirror) - // } - return s } diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 752b7c7..e6b8b00 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -23,13 +23,14 @@ function Renderer (dotgrid) { this.drawMirror() this.drawRulers() - this.drawRender() + this.drawRender() // this.drawGrid() this.drawVertices() this.drawHandles() this.drawTranslation() this.drawCursor() this.drawPreview() + this.drawDebug() } this.clear = function () { @@ -43,10 +44,11 @@ function Renderer (dotgrid) { } this.resize = function (size) { - this.el.width = size.width * this.scale - this.el.height = size.height * this.scale - this.el.style.width = size.width + 'px' - this.el.style.height = size.height + 'px' + const pad = 15 + this.el.width = (size.width + pad) * this.scale + this.el.height = (size.height + pad) * this.scale + this.el.style.width = (size.width + pad) + 'px' + this.el.style.height = (size.height + pad) + 'px' this.update() } @@ -71,10 +73,10 @@ function Renderer (dotgrid) { this.drawHandles = function () { if (!this.showExtras) { return } - for (const segment_id in dotgrid.tool.layer()) { - const segment = dotgrid.tool.layer()[segment_id] - for (const vertex_id in segment.vertices) { - const vertex = segment.vertices[vertex_id] + for (const segmentId in dotgrid.tool.layer()) { + const segment = dotgrid.tool.layer()[segmentId] + for (const vertexId in segment.vertices) { + const vertex = segment.vertices[vertexId] this.drawHandle(vertex) } } @@ -256,6 +258,12 @@ function Renderer (dotgrid) { this.context.drawImage(img, 0, 0, this.el.width, this.el.height) } + this.drawDebug = function () { + this.context.strokeRect(0, 0, this.el.width, this.el.height) + this.context.strokeRect(this.el.width / 2, 0, this.el.width, this.el.height) + this.context.strokeRect(0, this.el.height / 2, this.el.width, this.el.height) + } + function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } function clamp (v, min, max) { return v < min ? min : v > max ? max : v } } diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 7e6f397..a224028 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Tool = function () { +function Tool (dotgrid) { this.index = 0 this.settings = { size: { width: 300, height: 300 } } this.layers = [[], [], []] @@ -13,9 +13,9 @@ DOTGRID.Tool = function () { this.reqs = { line: 2, arc_c: 2, arc_r: 2, arc_c_full: 2, arc_r_full: 2, bezier: 3, close: 0 } this.start = function () { - this.styles[0].color = DOTGRID.theme.active.f_high - this.styles[1].color = DOTGRID.theme.active.f_med - this.styles[2].color = DOTGRID.theme.active.f_low + this.styles[0].color = dotgrid.theme.active.f_high + this.styles[1].color = dotgrid.theme.active.f_med + this.styles[2].color = dotgrid.theme.active.f_low } this.erase = function () { @@ -36,20 +36,20 @@ DOTGRID.Tool = function () { this.clear = function () { this.vertices = [] - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + dotgrid.interface.update(true) } this.undo = function () { - this.layers = DOTGRID.history.prev() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + this.layers = dotgrid.history.prev() + dotgrid.renderer.update() + dotgrid.interface.update(true) } this.redo = function () { - this.layers = DOTGRID.history.next() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + this.layers = dotgrid.history.next() + dotgrid.renderer.update() + dotgrid.interface.update(true) } this.length = function () { @@ -64,10 +64,10 @@ DOTGRID.Tool = function () { this.import = function (layer) { this.layers[this.index] = this.layers[this.index].concat(layer) - DOTGRID.history.push(this.layers) + dotgrid.history.push(this.layers) this.clear() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + dotgrid.interface.update(true) } this.replace = function (dot) { @@ -77,7 +77,7 @@ DOTGRID.Tool = function () { dot.settings.size = { width: dot.settings.width, height: dot.settings.height } } if (this.settings && (this.settings.size.width != dot.settings.size.width || this.settings.size.height != dot.settings.size.height)) { - DOTGRID.setSize({ width: dot.settings.size.width, height: dot.settings.size.height }) + dotgrid.setSize({ width: dot.settings.size.width, height: dot.settings.size.height }) } this.layers = dot.layers @@ -85,46 +85,46 @@ DOTGRID.Tool = function () { this.settings = dot.settings this.clear() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) - DOTGRID.history.push(this.layers) + dotgrid.renderer.update() + dotgrid.interface.update(true) + dotgrid.history.push(this.layers) } // EDIT - this.remove_segment = function () { + this.removeSegment = function () { if (this.vertices.length > 0) { this.clear(); return } this.layer().pop() this.clear() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + dotgrid.interface.update(true) } - this.remove_segments_at = function (pos) { - for (const segment_id in this.layer()) { - let segment = this.layer()[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] + this.removeSegmentsAt = function (pos) { + for (const segmentId in this.layer()) { + let segment = this.layer()[segmentId] + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] if (Math.abs(pos.x) == Math.abs(vertex.x) && Math.abs(pos.y) == Math.abs(vertex.y)) { - segment.vertices.splice(vertex_id, 1) + segment.vertices.splice(vertexId, 1) } } if (segment.vertices.length < 2) { - this.layers[this.index].splice(segment_id, 1) + this.layers[this.index].splice(segmentId, 1) } } this.clear() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + dotgrid.interface.update(true) } - this.select_segment_at = function (pos, source = this.layer()) { + this.selectSegmentAt = function (pos, source = this.layer()) { let target_segment = null - for (const segment_id in source) { - let segment = source[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] + for (const segmentId in source) { + let segment = source[segmentId] + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] if (vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)) { return segment } @@ -133,17 +133,17 @@ DOTGRID.Tool = function () { return null } - this.add_vertex = function (pos) { + this.addVertex = function (pos) { pos = { x: Math.abs(pos.x), y: Math.abs(pos.y) } this.vertices.push(pos) - DOTGRID.interface.update(true) + dotgrid.interface.update(true) } - this.vertex_at = function (pos) { - for (const segment_id in this.layer()) { - let segment = this.layer()[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] + this.vertexAt = function (pos) { + for (const segmentId in this.layer()) { + let segment = this.layer()[segmentId] + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] if (vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)) { return vertex } @@ -152,8 +152,8 @@ DOTGRID.Tool = function () { return null } - this.add_segment = function (type, vertices) { - let append_target = this.can_append({ type: type, vertices: vertices }) + this.addSegment = function (type, vertices) { + let append_target = this.canAppend({ type: type, vertices: vertices }) if (append_target) { this.layer()[append_target].vertices = this.layer()[append_target].vertices.concat(vertices) } else { @@ -165,13 +165,13 @@ DOTGRID.Tool = function () { if (!this.layer()) { this.layers[this.index] = [] } if (!this.canCast(type)) { console.warn('Cannot cast'); return } - this.add_segment(type, this.vertices.slice()) + this.addSegment(type, this.vertices.slice()) - DOTGRID.history.push(this.layers) + dotgrid.history.push(this.layers) this.clear() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + dotgrid.interface.update(true) console.log(`Casted ${type} -> ${this.layer().length} elements`) } @@ -196,25 +196,25 @@ DOTGRID.Tool = function () { } else { console.warn('Unknown', type) } - DOTGRID.interface.update(true) - DOTGRID.renderer.update() + dotgrid.interface.update(true) + dotgrid.renderer.update() } this.misc = function (type) { - DOTGRID.picker.start() + dotgrid.picker.start() } this.source = function (type) { - if (type == 'grid') { DOTGRID.renderer.toggle() } + if (type == 'grid') { dotgrid.renderer.toggle() } if (type == 'screen') { app.toggle_fullscreen() } - if (type == 'open') { DOTGRID.open() } - if (type == 'save') { DOTGRID.save() } - if (type == 'render') { DOTGRID.render() } - if (type == 'export') { DOTGRID.export() } + if (type == 'open') { dotgrid.open() } + if (type == 'save') { dotgrid.save() } + if (type == 'render') { dotgrid.render() } + if (type == 'export') { dotgrid.export() } } - this.can_append = function (content) { + this.canAppend = function (content) { for (const id in this.layer()) { let stroke = this.layer()[id] if (stroke.type != content.type) { continue } @@ -245,78 +245,77 @@ DOTGRID.Tool = function () { } this.paths = function () { - let l1 = new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: -10, y: -10 }, 1) - let l2 = new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: -10, y: -10 }, 1) - let l3 = new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: -10, y: -10 }, 1) + let l1 = new Generator(dotgrid.tool.layers[0], dotgrid.tool.styles[0]).toString({ x: 0, y: 0 }, 1) + let l2 = new Generator(dotgrid.tool.layers[1], dotgrid.tool.styles[1]).toString({ x: 0, y: 0 }, 1) + let l3 = new Generator(dotgrid.tool.layers[2], dotgrid.tool.styles[2]).toString({ x: 0, y: 0 }, 1) return [l1, l2, l3] } this.path = function () { - return new Generator(DOTGRID.tool.layer(), DOTGRID.tool.style()).toString({ x: -10, y: -10 }, 1) + return new Generator(dotgrid.tool.layer(), dotgrid.tool.style()).toString({ x: 0, y: 0 }, 1) } this.translate = function (a, b) { - for (const segment_id in this.layer()) { - let segment = this.layer()[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] + for (const segmentId in this.layer()) { + let segment = this.layer()[segmentId] + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] if (vertex.x == Math.abs(a.x) && vertex.y == Math.abs(a.y)) { - segment.vertices[vertex_id] = { x: Math.abs(b.x), y: Math.abs(b.y) } + segment.vertices[vertexId] = { x: Math.abs(b.x), y: Math.abs(b.y) } } } } - DOTGRID.history.push(this.layers) + dotgrid.history.push(this.layers) this.clear() - DOTGRID.renderer.update() + dotgrid.renderer.update() } - this.translate_multi = function (a, b) { + this.translateMulti = function (a, b) { const offset = { x: a.x - b.x, y: a.y - b.y } - const segment = this.select_segment_at(a) + const segment = this.selectSegmentAt(a) if (!segment) { return } - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] - segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y } + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] + segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y } } - DOTGRID.history.push(this.layers) + dotgrid.history.push(this.layers) this.clear() - DOTGRID.renderer.update() + dotgrid.renderer.update() } - this.translate_layer = function (a, b) { - console.log(a, b) + this.translateLayer = function (a, b) { const offset = { x: a.x - b.x, y: a.y - b.y } - for (const segment_id in this.layer()) { - let segment = this.layer()[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] - segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y } + for (const segmentId in this.layer()) { + let segment = this.layer()[segmentId] + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] + segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y } } } - DOTGRID.history.push(this.layers) + dotgrid.history.push(this.layers) this.clear() - DOTGRID.renderer.update() + dotgrid.renderer.update() } - this.translate_copy = function (a, b) { + this.translateCopy = function (a, b) { const offset = { x: a.x - b.x, y: a.y - b.y } - const segment = this.select_segment_at(a, copy(this.layer())) + const segment = this.selectSegmentAt(a, copy(this.layer())) if (!segment) { return } - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] - segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y } + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] + segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y } } this.layer().push(segment) - DOTGRID.history.push(this.layers) + dotgrid.history.push(this.layers) this.clear() - DOTGRID.renderer.update() + dotgrid.renderer.update() } this.merge = function () { @@ -324,9 +323,9 @@ DOTGRID.Tool = function () { this.erase() this.layers[this.index] = merged - DOTGRID.history.push(this.layers) + dotgrid.history.push(this.layers) this.clear() - DOTGRID.renderer.update() + dotgrid.renderer.update() } // Style @@ -347,22 +346,22 @@ DOTGRID.Tool = function () { return this.layers[this.index] } - this.select_layer = function (id) { + this.selectLayer = function (id) { this.index = clamp(id, 0, 2) this.clear() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + dotgrid.interface.update(true) console.log(`layer:${this.index}`) } - this.select_next_layer = function () { + this.selectNextLayer = function () { this.index = this.index >= 2 ? 0 : this.index++ - this.select_layer(this.index) + this.selectLayer(this.index) } - this.select_prev_layer = function () { + this.selectPrevLayer = function () { this.index = this.index >= 0 ? 2 : this.index-- - this.select_layer(this.index) + this.selectLayer(this.index) } function copy (data) { return data ? JSON.parse(JSON.stringify(data)) : [] } diff --git a/web/events.js b/web/events.js index cd67fc5..b4bcf26 100644 --- a/web/events.js +++ b/web/events.js @@ -12,12 +12,12 @@ document.onkeyup = (e) => if((e.ctrlKey || e.metaKey) && ch == "e"){ DOTGRID.export(); e.preventDefault(); return; } if(ch == "backspace" && e.ctrlKey){ DOTGRID.theme.reset(); e.preventDefault(); } - if(ch == "backspace"){ DOTGRID.tool.remove_segment(); e.preventDefault(); } + if(ch == "backspace"){ DOTGRID.tool.removeSegment(); e.preventDefault(); } if(ch == "escape"){ DOTGRID.tool.clear(); DOTGRID.picker.stop(); e.preventDefault(); } - if(ch == "1"){ DOTGRID.tool.select_layer(0); e.preventDefault(); } - if(ch == "2"){ DOTGRID.tool.select_layer(1); e.preventDefault(); } - if(ch == "3"){ DOTGRID.tool.select_layer(2); e.preventDefault(); } + if(ch == "1"){ DOTGRID.tool.selectLayer(0); e.preventDefault(); } + if(ch == "2"){ DOTGRID.tool.selectLayer(1); e.preventDefault(); } + if(ch == "3"){ DOTGRID.tool.selectLayer(2); e.preventDefault(); } if(ch == "h"){ DOTGRID.renderer.toggle(); e.preventDefault(); } if(ch == "?"){ DOTGRID.reset(); DOTGRID.theme.reset(); e.preventDefault(); } @@ -47,5 +47,5 @@ document.onkeyup = (e) => document.onkeydown = (e) => { - if(e.keyCode == 9){ DOTGRID.tool.select_next_layer(); e.preventDefault(); } + if(e.keyCode == 9){ DOTGRID.tool.selectNextLayer(); e.preventDefault(); } } \ No newline at end of file From 23c53ef37ef5d64840a91abddca8a5b9bdeea592 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 15:51:57 +1200 Subject: [PATCH 10/20] Renamed classes --- desktop/sources/scripts/cursor.js | 2 +- desktop/sources/scripts/dotgrid.js | 6 +-- desktop/sources/scripts/interface.js | 70 ++++++++++++++-------------- desktop/sources/scripts/picker.js | 2 +- 4 files changed, 40 insertions(+), 40 deletions(-) diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index 5dcfd91..5eb0fd3 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Cursor = function () { +function Cursor () { this.pos = { x: 0, y: 0 } this.translation = null this.operation = null diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index c724f3d..2b3de75 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -19,10 +19,10 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.manager = new Manager(this) this.renderer = new Renderer(this) this.tool = new Tool(this) - this.interface = new this.Interface() + this.interface = new Interface(this) + this.picker = new Picker(this) + this.cursor = new Cursor(this) - this.picker = new this.Picker() - this.cursor = new this.Cursor() host.appendChild(this.renderer.el) this.manager.install() diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index f58858b..1ac054c 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Interface = function () { +function Interface (dotgrid) { this.el = document.createElement('div') this.el.id = 'interface' @@ -51,10 +51,10 @@ DOTGRID.Interface = function () { ${name == 'depth' ? `` : ''} @@ -65,63 +65,63 @@ DOTGRID.Interface = function () { } } this.menu_el.innerHTML = html - this.menu_el.appendChild(DOTGRID.picker.el) + this.menu_el.appendChild(dotgrid.picker.el) } this.over = function (type, name) { - DOTGRID.cursor.operation = {} - DOTGRID.cursor.operation[type] = name + dotgrid.cursor.operation = {} + dotgrid.cursor.operation[type] = name this.update(true) - DOTGRID.renderer.update(true) + dotgrid.renderer.update(true) } this.out = function (type, name) { - DOTGRID.cursor.operation = '' - DOTGRID.renderer.update(true) + dotgrid.cursor.operation = '' + dotgrid.renderer.update(true) } this.up = function (type, name) { - if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return } + if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } this.update(true) - DOTGRID.renderer.update(true) + dotgrid.renderer.update(true) } this.down = function (type, name) { - if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return } + if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } - DOTGRID.tool[type](name) + dotgrid.tool[type](name) this.update(true) - DOTGRID.renderer.update(true) + dotgrid.renderer.update(true) } this.prev_operation = null this.update = function (force = false, id) { - if (this.prev_operation == DOTGRID.cursor.operation && force == false) { return } + if (this.prev_operation == dotgrid.cursor.operation && force == false) { return } let multi_vertices = null - let segments = DOTGRID.tool.layer() - const sum_segments = DOTGRID.tool.length() + let segments = dotgrid.tool.layer() + const sum_segments = dotgrid.tool.length() for (const i in segments) { if (segments[i].vertices.length > 2) { multi_vertices = true; break } } - document.getElementById('option_line').className.baseVal = !DOTGRID.tool.canCast('line') ? 'icon inactive' : 'icon' - document.getElementById('option_arc_c').className.baseVal = !DOTGRID.tool.canCast('arc_c') ? 'icon inactive' : 'icon' - document.getElementById('option_arc_r').className.baseVal = !DOTGRID.tool.canCast('arc_r') ? 'icon inactive' : 'icon' - document.getElementById('option_bezier').className.baseVal = !DOTGRID.tool.canCast('bezier') ? 'icon inactive' : 'icon' - document.getElementById('option_close').className.baseVal = !DOTGRID.tool.canCast('close') ? 'icon inactive' : 'icon' + document.getElementById('option_line').className.baseVal = !dotgrid.tool.canCast('line') ? 'icon inactive' : 'icon' + document.getElementById('option_arc_c').className.baseVal = !dotgrid.tool.canCast('arc_c') ? 'icon inactive' : 'icon' + document.getElementById('option_arc_r').className.baseVal = !dotgrid.tool.canCast('arc_r') ? 'icon inactive' : 'icon' + document.getElementById('option_bezier').className.baseVal = !dotgrid.tool.canCast('bezier') ? 'icon inactive' : 'icon' + document.getElementById('option_close').className.baseVal = !dotgrid.tool.canCast('close') ? 'icon inactive' : 'icon' - document.getElementById('option_thickness').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_linecap').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_linejoin').className.baseVal = DOTGRID.tool.layer().length < 1 || !multi_vertices ? 'icon inactive' : 'icon' - document.getElementById('option_mirror').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_fill').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_thickness').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_linecap').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_linejoin').className.baseVal = dotgrid.tool.layer().length < 1 || !multi_vertices ? 'icon inactive' : 'icon' + document.getElementById('option_mirror').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_fill').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_color').children[0].style.fill = DOTGRID.tool.style().color - document.getElementById('option_color').children[0].style.stroke = DOTGRID.tool.style().color + document.getElementById('option_color').children[0].style.fill = dotgrid.tool.style().color + document.getElementById('option_color').children[0].style.stroke = dotgrid.tool.style().color document.getElementById('option_color').className.baseVal = 'icon' // Source @@ -130,15 +130,15 @@ DOTGRID.Interface = function () { document.getElementById('option_export').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' document.getElementById('option_render').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' - document.getElementById('option_grid').className.baseVal = DOTGRID.renderer.showExtras ? 'icon inactive source' : 'icon source' + document.getElementById('option_grid').className.baseVal = dotgrid.renderer.showExtras ? 'icon inactive source' : 'icon source' // Grid - if (DOTGRID.renderer.showExtras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') } + if (dotgrid.renderer.showExtras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') } // Mirror - if (DOTGRID.tool.style().mirror_style == 0) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 1) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 2) { document.getElementById('mirror_path').setAttribute('d', 'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240') } else if (DOTGRID.tool.style().mirror_style == 3) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 4) { document.getElementById('mirror_path').setAttribute('d', 'M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ') } + if (dotgrid.tool.style().mirror_style == 0) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210') } else if (dotgrid.tool.style().mirror_style == 1) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210') } else if (dotgrid.tool.style().mirror_style == 2) { document.getElementById('mirror_path').setAttribute('d', 'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240') } else if (dotgrid.tool.style().mirror_style == 3) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } else if (dotgrid.tool.style().mirror_style == 4) { document.getElementById('mirror_path').setAttribute('d', 'M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ') } - this.prev_operation = DOTGRID.cursor.operation + this.prev_operation = dotgrid.cursor.operation } this.toggle = function () { diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 823f273..2a157e9 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Picker = function () { +function Picker (dotgrid) { this.memory = '' this.el = document.createElement('div') this.el.id = 'picker' From d4812be0a821a6b0f393718e80a10cdf8ad34024 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 16:19:50 +1200 Subject: [PATCH 11/20] Cleaning up specs --- desktop/sources/scripts/cursor.js | 2 +- desktop/sources/scripts/dotgrid.js | 25 +++++++++++-------------- desktop/sources/scripts/renderer.js | 8 ++++---- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index 5eb0fd3..8f979c2 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -89,7 +89,7 @@ function Cursor () { } this.pos_snap = function (pos) { - const grid = DOTGRID.tool.settings.size.width / DOTGRID.grid_x + const grid = DOTGRID.tool.settings.size.width / DOTGRID.grid.x return { x: clamp(step(pos.x, grid), grid, DOTGRID.tool.settings.size.width), y: clamp(step(pos.y, grid), grid, DOTGRID.tool.settings.size.height + grid) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 2b3de75..e67ef91 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -1,6 +1,6 @@ 'use strict' -function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { +function Dotgrid (width, height) { this.controller = null const defaultTheme = { background: '#eee', f_high: '#000', f_med: '#999', f_low: '#ccc', f_inv: '#000', b_high: '#000', b_med: '#888', b_low: '#aaa', b_inv: '#ffb545' } @@ -8,10 +8,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.theme = new Theme(defaultTheme) this.history = new History() - this.grid_x = grid_x - this.grid_y = grid_y - this.block_x = block_x - this.block_y = block_y + this.grid = {x:20,y:20} // ISU @@ -121,11 +118,11 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { console.log('No window') } - this.grid_x = size.width / 15 - this.grid_y = size.height / 15 + this.grid.x = size.width / 15 + this.grid.y = size.height / 15 - this.grid_width = this.tool.settings.size.width / this.grid_x - this.grid_height = this.tool.settings.size.height / this.grid_y + this.grid_width = this.tool.settings.size.width / this.grid.x + this.grid_height = this.tool.settings.size.height / this.grid.y DOTGRID.renderer.resize(size) @@ -170,11 +167,11 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { DOTGRID.tool.settings.size.width = size.width DOTGRID.tool.settings.size.height = size.height - DOTGRID.grid_x = size.width / 15 - DOTGRID.grid_y = size.height / 15 + DOTGRID.grid.x = size.width / 15 + DOTGRID.grid.y = size.height / 15 - DOTGRID.grid_width = DOTGRID.tool.settings.size.width / DOTGRID.grid_x - DOTGRID.grid_height = DOTGRID.tool.settings.size.height / DOTGRID.grid_y + DOTGRID.grid_width = DOTGRID.tool.settings.size.width / DOTGRID.grid.x + DOTGRID.grid_height = DOTGRID.tool.settings.size.height / DOTGRID.grid.y DOTGRID.renderer.resize(size) @@ -263,4 +260,4 @@ function isEqual (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) diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index e6b8b00..03d8ab7 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -93,12 +93,12 @@ function Renderer (dotgrid) { const cursor = { x: parseInt(dotgrid.cursor.pos.x / dotgrid.grid_width), y: parseInt(dotgrid.cursor.pos.y / dotgrid.grid_width) } - for (let x = dotgrid.grid_x - 1; x >= 0; x--) { - for (let y = dotgrid.grid_y; y >= 0; y--) { - let is_step = x % dotgrid.block_x == 0 && y % dotgrid.block_y == 0 + for (let x = dotgrid.grid.x - 1; x >= 0; x--) { + for (let y = dotgrid.grid.y; y >= 0; y--) { + let is_step = x % 4 == 0 && y % 4 == 0 // Color let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low - if ((y == 0 || y == dotgrid.grid_y) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == dotgrid.grid_x - 1) && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x == x + 1 && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } + if ((y == 0 || y == dotgrid.grid.y) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == dotgrid.grid.x - 1) && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x == x + 1 && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } this.drawMarker({ x: parseInt(x * dotgrid.grid_width) + dotgrid.grid_width, From 136ffa55fc2609460a638c59abff516818b079c3 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 16:27:59 +1200 Subject: [PATCH 12/20] Some progress --- desktop/sources/scripts/dotgrid.js | 40 +++++++++++++++-------------- desktop/sources/scripts/renderer.js | 12 ++++----- 2 files changed, 27 insertions(+), 25 deletions(-) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index e67ef91..7881b9f 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -8,7 +8,7 @@ function Dotgrid (width, height) { this.theme = new Theme(defaultTheme) this.history = new History() - this.grid = {x:20,y:20} + this.grid = { x: 20, y: 20, width: 0, height: 0 } // ISU @@ -118,16 +118,16 @@ function Dotgrid (width, height) { console.log('No window') } - this.grid.x = size.width / 15 - this.grid.y = size.height / 15 - - this.grid_width = this.tool.settings.size.width / this.grid.x - this.grid_height = this.tool.settings.size.height / this.grid.y - - DOTGRID.renderer.resize(size) + this.grid = { + x: size.width / 15, + y: size.height / 15, + width: this.tool.settings.size.width / size.width / 15, + height: this.tool.settings.size.height / size.height / 15 + } + this.renderer.resize(size) this.interface.update() - DOTGRID.renderer.update() + this.renderer.update() } this.set_zoom = function (scale) { @@ -151,29 +151,31 @@ function Dotgrid (width, height) { this.history.clear() this.tool.reset() this.reset() - DOTGRID.renderer.update() - DOTGRID.interface.update(true) + this.renderer.update() + this.interface.update(true) } this.resize = function () { const size = { width: step(window.innerWidth - 90, 15), height: step(window.innerHeight - 120, 15) } - if (size.width == DOTGRID.tool.settings.size.width && size.height == DOTGRID.tool.settings.size.height) { + if (size.width == this.tool.settings.size.width && size.height == this.tool.settings.size.height) { return } console.log(`Resized: ${size.width}x${size.height}`) - DOTGRID.tool.settings.size.width = size.width - DOTGRID.tool.settings.size.height = size.height + this.tool.settings.size.width = size.width + this.tool.settings.size.height = size.height - DOTGRID.grid.x = size.width / 15 - DOTGRID.grid.y = size.height / 15 + this.grid = { + x: size.width / 15, + y: size.height / 15 + } - DOTGRID.grid_width = DOTGRID.tool.settings.size.width / DOTGRID.grid.x - DOTGRID.grid_height = DOTGRID.tool.settings.size.height / DOTGRID.grid.y + this.grid.width = this.tool.settings.size.width / this.grid.x + this.grid.height = this.tool.settings.size.height / this.grid.y - DOTGRID.renderer.resize(size) + this.renderer.resize(size) document.title = `Dotgrid — ${size.width}x${size.height}` } diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 03d8ab7..19c948a 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -60,13 +60,13 @@ function Renderer (dotgrid) { if (dotgrid.tool.style().mirror_style === 0) { return } - const middle = { x: dotgrid.tool.settings.size.width + (dotgrid.grid_width), y: dotgrid.tool.settings.size.height + (this.scale * dotgrid.grid_height) } + const middle = { x: dotgrid.tool.settings.size.width + (dotgrid.grid.width), y: dotgrid.tool.settings.size.height + (this.scale * dotgrid.grid.height) } if (dotgrid.tool.style().mirror_style === 1 || dotgrid.tool.style().mirror_style === 3) { - this.drawRule({ x: middle.x, y: dotgrid.grid_height * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height + dotgrid.grid_height) * this.scale }) + this.drawRule({ x: middle.x, y: dotgrid.grid.height * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height + dotgrid.grid.height) * this.scale }) } if (dotgrid.tool.style().mirror_style === 2 || dotgrid.tool.style().mirror_style === 3) { - this.drawRule({ x: dotgrid.grid_width * this.scale, y: middle.y }, { x: (dotgrid.tool.settings.size.width + dotgrid.grid_width) * this.scale, y: middle.y }) + this.drawRule({ x: dotgrid.grid.width * this.scale, y: middle.y }, { x: (dotgrid.tool.settings.size.width + dotgrid.grid.width) * this.scale, y: middle.y }) } } @@ -91,7 +91,7 @@ function Renderer (dotgrid) { this.drawGrid = function () { if (!this.showExtras) { return } - const cursor = { x: parseInt(dotgrid.cursor.pos.x / dotgrid.grid_width), y: parseInt(dotgrid.cursor.pos.y / dotgrid.grid_width) } + const cursor = { x: parseInt(dotgrid.cursor.pos.x / dotgrid.grid.width), y: parseInt(dotgrid.cursor.pos.y / dotgrid.grid.width) } for (let x = dotgrid.grid.x - 1; x >= 0; x--) { for (let y = dotgrid.grid.y; y >= 0; y--) { @@ -101,8 +101,8 @@ function Renderer (dotgrid) { if ((y == 0 || y == dotgrid.grid.y) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == dotgrid.grid.x - 1) && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x == x + 1 && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } this.drawMarker({ - x: parseInt(x * dotgrid.grid_width) + dotgrid.grid_width, - y: parseInt(y * dotgrid.grid_height) + dotgrid.grid_height + x: parseInt(x * dotgrid.grid.width) + dotgrid.grid.width, + y: parseInt(y * dotgrid.grid.height) + dotgrid.grid.height }, is_step ? 2.5 : 1.5, color) } } From 6ae606d8766a0b8bd1928565500c745add1dbea2 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 16:44:24 +1200 Subject: [PATCH 13/20] Aligned renderer --- desktop/sources/scripts/dotgrid.js | 18 +++++++----------- desktop/sources/scripts/renderer.js | 8 ++++---- 2 files changed, 11 insertions(+), 15 deletions(-) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 7881b9f..9d3eb39 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -1,18 +1,15 @@ 'use strict' function Dotgrid (width, height) { - this.controller = null - const defaultTheme = { background: '#eee', f_high: '#000', f_med: '#999', f_low: '#ccc', f_inv: '#000', b_high: '#000', b_med: '#888', b_low: '#aaa', b_inv: '#ffb545' } - this.theme = new Theme(defaultTheme) - this.history = new History() - this.grid = { x: 20, y: 20, width: 0, height: 0 } // ISU this.install = function (host) { + this.theme = new Theme(defaultTheme) + this.history = new History() this.manager = new Manager(this) this.renderer = new Renderer(this) this.tool = new Tool(this) @@ -121,8 +118,8 @@ function Dotgrid (width, height) { this.grid = { x: size.width / 15, y: size.height / 15, - width: this.tool.settings.size.width / size.width / 15, - height: this.tool.settings.size.height / size.height / 15 + width: 15, + height: 15 } this.renderer.resize(size) @@ -169,12 +166,11 @@ function Dotgrid (width, height) { this.grid = { x: size.width / 15, - y: size.height / 15 + y: size.height / 15, + width: 15, + height: 15 } - this.grid.width = this.tool.settings.size.width / this.grid.x - this.grid.height = this.tool.settings.size.height / this.grid.y - this.renderer.resize(size) document.title = `Dotgrid — ${size.width}x${size.height}` diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 19c948a..620bb32 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -23,8 +23,8 @@ function Renderer (dotgrid) { this.drawMirror() this.drawRulers() - this.drawRender() // this.drawGrid() + this.drawRender() // this.drawVertices() this.drawHandles() this.drawTranslation() @@ -255,13 +255,13 @@ function Renderer (dotgrid) { this.drawRender = function () { let img = new Image() img.src = dotgrid.manager.svg64() - this.context.drawImage(img, 0, 0, this.el.width, this.el.height) + this.context.drawImage(img, 0, 0, this.el.width - 30, this.el.height - 30) } this.drawDebug = function () { this.context.strokeRect(0, 0, this.el.width, this.el.height) - this.context.strokeRect(this.el.width / 2, 0, this.el.width, this.el.height) - this.context.strokeRect(0, this.el.height / 2, this.el.width, this.el.height) + this.context.strokeRect((this.el.width / 2) + 15, 0, this.el.width, this.el.height) + this.context.strokeRect(0, (this.el.height / 2) + 15, this.el.width, this.el.height) } function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } From ac753cd9ceb80f8a18dfbc9ef59cb23ef290c160 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 16:46:26 +1200 Subject: [PATCH 14/20] Fixed issue with interface --- desktop/sources/scripts/interface.js | 8 ++++---- desktop/sources/scripts/renderer.js | 7 ------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index 1ac054c..ec2ab07 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -51,10 +51,10 @@ function Interface (dotgrid) { ${name == 'depth' ? `` : ''} diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index 620bb32..e71bb11 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -30,7 +30,6 @@ function Renderer (dotgrid) { this.drawTranslation() this.drawCursor() this.drawPreview() - this.drawDebug() } this.clear = function () { @@ -258,12 +257,6 @@ function Renderer (dotgrid) { this.context.drawImage(img, 0, 0, this.el.width - 30, this.el.height - 30) } - this.drawDebug = function () { - this.context.strokeRect(0, 0, this.el.width, this.el.height) - this.context.strokeRect((this.el.width / 2) + 15, 0, this.el.width, this.el.height) - this.context.strokeRect(0, (this.el.height / 2) + 15, this.el.width, this.el.height) - } - function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } function clamp (v, min, max) { return v < min ? min : v > max ? max : v } } From 44eb30cad588a5f51b26bb5f44e055279346420a Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 16:51:10 +1200 Subject: [PATCH 15/20] Fixed cropping issues --- desktop/sources/scripts/manager.js | 8 ++++---- desktop/sources/scripts/renderer.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/desktop/sources/scripts/manager.js b/desktop/sources/scripts/manager.js index b31d45f..01860f9 100644 --- a/desktop/sources/scripts/manager.js +++ b/desktop/sources/scripts/manager.js @@ -19,10 +19,10 @@ function Manager (dotgrid) { } this.update = function () { - 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 + this.el.setAttribute('width', (DOTGRID.tool.settings.size.width + 15) + 'px') + this.el.setAttribute('height', (DOTGRID.tool.settings.size.height + 15) + 'px') + this.el.style.width = (DOTGRID.tool.settings.size.width + 15) + this.el.style.height = DOTGRID.tool.settings.size.height + 15 const styles = DOTGRID.tool.styles const paths = DOTGRID.tool.paths() diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index e71bb11..f7ed476 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -254,7 +254,7 @@ function Renderer (dotgrid) { this.drawRender = function () { let img = new Image() img.src = dotgrid.manager.svg64() - this.context.drawImage(img, 0, 0, this.el.width - 30, this.el.height - 30) + this.context.drawImage(img, 0, 0, this.el.width, this.el.height) } function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } From 82dc0919c83256224f23f26aa9149bcd804dd571 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 16:53:28 +1200 Subject: [PATCH 16/20] cleanup --- desktop/main.js | 8 ++++---- desktop/sources/scripts/generator.js | 8 ++++---- desktop/sources/scripts/interface.js | 14 +++++++------- desktop/sources/scripts/lib/controller.js | 14 +++++++------- desktop/sources/scripts/picker.js | 4 ++-- 5 files changed, 24 insertions(+), 24 deletions(-) diff --git a/desktop/main.js b/desktop/main.js index 20058d3..a00c438 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -3,7 +3,7 @@ const path = require('path') const url = require('url') const shell = require('electron').shell -let is_shown = true +let isShown = true app.on('ready', () => { app.win = new BrowserWindow({ @@ -27,11 +27,11 @@ app.on('ready', () => { }) app.win.on('hide', function () { - is_shown = false + isShown = false }) app.win.on('show', function () { - is_shown = true + isShown = true }) app.on('window-all-closed', () => { @@ -59,7 +59,7 @@ app.toggle_visible = function () { if (process.platform == 'win32') { if (!app.win.isMinimized()) { app.win.minimize() } else { app.win.restore() } } else { - if (is_shown && !app.win.isFullScreen()) { app.win.hide() } else { app.win.show() } + if (isShown && !app.win.isFullScreen()) { app.win.hide() } else { app.win.show() } } } diff --git a/desktop/sources/scripts/generator.js b/desktop/sources/scripts/generator.js index 9ed7e05..410abe2 100644 --- a/desktop/sources/scripts/generator.js +++ b/desktop/sources/scripts/generator.js @@ -19,7 +19,7 @@ function Generator (layer, style) { // Rotate const center = { x: (DOTGRID.tool.settings.size.width / 2) + offset.x + (7.5), y: (DOTGRID.tool.settings.size.height / 2) + offset.y + 30 } - seg.vertices[k2] = rotate_point(seg.vertices[k2], center, angle) + seg.vertices[k2] = rotatePoint(seg.vertices[k2], center, angle) // Scale seg.vertices[k2].x *= scale @@ -40,7 +40,7 @@ function Generator (layer, style) { let vertex = vertices[id] let next = vertices[parseInt(id) + 1] - let after_next = vertices[parseInt(id) + 2] + let afterNext = vertices[parseInt(id) + 2] if (id == 0 && !prev || id == 0 && prev && (prev.x != vertex.x || prev.y != vertex.y)) { html += `M${vertex.x},${vertex.y} ` @@ -61,7 +61,7 @@ function Generator (layer, style) { let clock = mirror > 0 ? '1,1' : '1,0' html += this._arc(vertex, next, clock) } else if (type == 'bezier') { - html += this._bezier(next, after_next) + html += this._bezier(next, afterNext) skip = 1 } } @@ -113,5 +113,5 @@ function Generator (layer, style) { } function copy (data) { return data ? JSON.parse(JSON.stringify(data)) : [] } - function rotate_point (point, origin, angle) { angle = angle * Math.PI / 180.0; return { x: (Math.cos(angle) * (point.x - origin.x) - Math.sin(angle) * (point.y - origin.y) + origin.x).toFixed(1), y: (Math.sin(angle) * (point.x - origin.x) + Math.cos(angle) * (point.y - origin.y) + origin.y).toFixed(1) } } + function rotatePoint (point, origin, angle) { angle = angle * Math.PI / 180.0; return { x: (Math.cos(angle) * (point.x - origin.x) - Math.sin(angle) * (point.y - origin.y) + origin.x).toFixed(1), y: (Math.sin(angle) * (point.x - origin.x) + Math.cos(angle) * (point.y - origin.y) + origin.y).toFixed(1) } } } diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index ec2ab07..51bdfff 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -100,12 +100,12 @@ function Interface (dotgrid) { this.update = function (force = false, id) { if (this.prev_operation == dotgrid.cursor.operation && force == false) { return } - let multi_vertices = null + let multiVertices = null let segments = dotgrid.tool.layer() - const sum_segments = dotgrid.tool.length() + const sumSegments = dotgrid.tool.length() for (const i in segments) { - if (segments[i].vertices.length > 2) { multi_vertices = true; break } + if (segments[i].vertices.length > 2) { multiVertices = true; break } } document.getElementById('option_line').className.baseVal = !dotgrid.tool.canCast('line') ? 'icon inactive' : 'icon' @@ -116,7 +116,7 @@ function Interface (dotgrid) { document.getElementById('option_thickness').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' document.getElementById('option_linecap').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_linejoin').className.baseVal = dotgrid.tool.layer().length < 1 || !multi_vertices ? 'icon inactive' : 'icon' + document.getElementById('option_linejoin').className.baseVal = dotgrid.tool.layer().length < 1 || !multiVertices ? 'icon inactive' : 'icon' document.getElementById('option_mirror').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' document.getElementById('option_fill').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' @@ -126,9 +126,9 @@ function Interface (dotgrid) { // Source - document.getElementById('option_save').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' - document.getElementById('option_export').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' - document.getElementById('option_render').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' + document.getElementById('option_save').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source' + document.getElementById('option_export').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source' + document.getElementById('option_render').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source' document.getElementById('option_grid').className.baseVal = dotgrid.renderer.showExtras ? 'icon inactive source' : 'icon source' diff --git a/desktop/sources/scripts/lib/controller.js b/desktop/sources/scripts/lib/controller.js index 1448b26..546e29d 100644 --- a/desktop/sources/scripts/lib/controller.js +++ b/desktop/sources/scripts/lib/controller.js @@ -62,18 +62,18 @@ function Controller () { } this.generate_svg = function (m) { - let svg_html = '' + let html = '' for (const id in this.layout) { let key = this.layout[id] let acc = this.accelerator_for_key(key.name, m) - svg_html += `` - svg_html += `` - svg_html += `${key.name.toUpperCase()}` - svg_html += acc && acc.basic ? `${acc.basic}` : '' - svg_html += acc && acc.ctrl ? `${acc.ctrl}` : '' + html += `` + html += `` + html += `${key.name.toUpperCase()}` + html += acc && acc.basic ? `${acc.basic}` : '' + html += acc && acc.ctrl ? `${acc.ctrl}` : '' } - return `${svg_html}` + return `${html}` } this.documentation = function () { diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 2a157e9..1647597 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -61,7 +61,7 @@ function Picker (dotgrid) { } this.listen = function (e, is_down = false) { - if (is_down && !is_color_char(e.key)) { + if (is_down && !isColorChar(e.key)) { e.preventDefault() return } @@ -90,7 +90,7 @@ function Picker (dotgrid) { return re.test(val) } - function is_color_char (val) { + function isColorChar (val) { const re = /[0-9A-Fa-f]/g return re.test(val) } From 60a8c6292775b5e7ec815cd39afce3cbe491d3ab Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 10 Jan 2019 08:35:10 +1200 Subject: [PATCH 17/20] Cleaned specs --- desktop/sources/scripts/cursor.js | 5 ++--- desktop/sources/scripts/dotgrid.js | 23 ++++++------------- desktop/sources/scripts/renderer.js | 35 ++++++++++++++++------------- 3 files changed, 29 insertions(+), 34 deletions(-) diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index 8f979c2..e50b0f5 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -89,10 +89,9 @@ function Cursor () { } this.pos_snap = function (pos) { - const grid = DOTGRID.tool.settings.size.width / DOTGRID.grid.x return { - x: clamp(step(pos.x, grid), grid, DOTGRID.tool.settings.size.width), - y: clamp(step(pos.y, grid), grid, DOTGRID.tool.settings.size.height + grid) + x: clamp(step(pos.x, 15), 15, DOTGRID.tool.settings.size.width), + y: clamp(step(pos.y, 15), 15, DOTGRID.tool.settings.size.height + 15) } } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 9d3eb39..f96ed59 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -3,8 +3,6 @@ function Dotgrid (width, height) { const defaultTheme = { background: '#eee', f_high: '#000', f_med: '#999', f_low: '#ccc', f_inv: '#000', b_high: '#000', b_med: '#888', b_low: '#aaa', b_inv: '#ffb545' } - this.grid = { x: 20, y: 20, width: 0, height: 0 } - // ISU this.install = function (host) { @@ -102,6 +100,13 @@ function Dotgrid (width, height) { // Basics + this.getSize = function () { + return { markers: { + w: parseInt(this.tool.settings.size.width / 15), + h: parseInt(this.tool.settings.size.height / 15) } + } + } + this.setSize = function (size = { width: 300, height: 300 }, ui = true, scale = 1) { size = { width: clamp(step(size.width, 15), 105, 1080), height: clamp(step(size.height, 15), 120, 1080) } @@ -115,13 +120,6 @@ function Dotgrid (width, height) { console.log('No window') } - this.grid = { - x: size.width / 15, - y: size.height / 15, - width: 15, - height: 15 - } - this.renderer.resize(size) this.interface.update() this.renderer.update() @@ -164,13 +162,6 @@ function Dotgrid (width, height) { this.tool.settings.size.width = size.width this.tool.settings.size.height = size.height - this.grid = { - x: size.width / 15, - y: size.height / 15, - width: 15, - height: 15 - } - this.renderer.resize(size) document.title = `Dotgrid — ${size.width}x${size.height}` diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index f7ed476..ee95abb 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -18,13 +18,19 @@ function Renderer (dotgrid) { this.update = function (force = false) { dotgrid.manager.update() + let render = new Image() + render.onload = () => { + this.draw(render) + } + render.src = dotgrid.manager.svg64() + } + this.draw = function (render) { this.clear() - this.drawMirror() this.drawRulers() this.drawGrid() - this.drawRender() // + this.drawRender(render) // this.drawVertices() this.drawHandles() this.drawTranslation() @@ -59,13 +65,13 @@ function Renderer (dotgrid) { if (dotgrid.tool.style().mirror_style === 0) { return } - const middle = { x: dotgrid.tool.settings.size.width + (dotgrid.grid.width), y: dotgrid.tool.settings.size.height + (this.scale * dotgrid.grid.height) } + const middle = { x: dotgrid.tool.settings.size.width + 15, y: dotgrid.tool.settings.size.height + (this.scale * 15) } if (dotgrid.tool.style().mirror_style === 1 || dotgrid.tool.style().mirror_style === 3) { - this.drawRule({ x: middle.x, y: dotgrid.grid.height * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height + dotgrid.grid.height) * this.scale }) + this.drawRule({ x: middle.x, y: 15 * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height + 15) * this.scale }) } if (dotgrid.tool.style().mirror_style === 2 || dotgrid.tool.style().mirror_style === 3) { - this.drawRule({ x: dotgrid.grid.width * this.scale, y: middle.y }, { x: (dotgrid.tool.settings.size.width + dotgrid.grid.width) * this.scale, y: middle.y }) + this.drawRule({ x: 15 * this.scale, y: middle.y }, { x: (dotgrid.tool.settings.size.width + 15) * this.scale, y: middle.y }) } } @@ -90,18 +96,19 @@ function Renderer (dotgrid) { this.drawGrid = function () { if (!this.showExtras) { return } - const cursor = { x: parseInt(dotgrid.cursor.pos.x / dotgrid.grid.width), y: parseInt(dotgrid.cursor.pos.y / dotgrid.grid.width) } + const cursor = { x: parseInt(dotgrid.cursor.pos.x / 15), y: parseInt(dotgrid.cursor.pos.y / 15) } + const markers = dotgrid.getSize().markers - for (let x = dotgrid.grid.x - 1; x >= 0; x--) { - for (let y = dotgrid.grid.y; y >= 0; y--) { + for (let x = markers.w - 1; x >= 0; x--) { + for (let y = markers.h; y >= 0; y--) { let is_step = x % 4 == 0 && y % 4 == 0 // Color let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low - if ((y == 0 || y == dotgrid.grid.y) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == dotgrid.grid.x - 1) && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x == x + 1 && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } + if ((y == 0 || y == markers.h) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == markers.w - 1) && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x == x + 1 && cursor.y == y + 1) { color = dotgrid.theme.active.b_high } this.drawMarker({ - x: parseInt(x * dotgrid.grid.width) + dotgrid.grid.width, - y: parseInt(y * dotgrid.grid.height) + dotgrid.grid.height + x: parseInt(x * 15) + 15, + y: parseInt(y * 15) + 15 }, is_step ? 2.5 : 1.5, color) } } @@ -251,10 +258,8 @@ function Renderer (dotgrid) { this.context.restore() } - this.drawRender = function () { - let img = new Image() - img.src = dotgrid.manager.svg64() - this.context.drawImage(img, 0, 0, this.el.width, this.el.height) + this.drawRender = function (render) { + this.context.drawImage(render, 0, 0, this.el.width, this.el.height) } function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) } From 24a7b7625456c9943a245ab7d6735633a967bcd1 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 10 Jan 2019 08:41:41 +1200 Subject: [PATCH 18/20] Cleanup --- desktop/sources/scripts/cursor.js | 16 ++++++++-------- desktop/sources/scripts/dotgrid.js | 30 ++---------------------------- desktop/sources/scripts/manager.js | 24 ++++++++++++++++++++++++ 3 files changed, 34 insertions(+), 36 deletions(-) diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index e50b0f5..b317606 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -17,7 +17,7 @@ function Cursor () { } this.down = function (e) { - this.pos = this.pos_from_event(e) + this.pos = this.atEvent(e) // Translation if (DOTGRID.tool.vertexAt(this.pos)) { @@ -32,7 +32,7 @@ function Cursor () { this.last_pos = { x: 0, y: 0 } this.move = function (e) { - this.pos = this.pos_from_event(e) + this.pos = this.atEvent(e) // Translation if (this.translation) { @@ -50,7 +50,7 @@ function Cursor () { } this.up = function (e) { - this.pos = this.pos_from_event(e) + this.pos = this.atEvent(e) if (this.translation && !is_equal(this.translation.from, this.translation.to)) { if (this.translation.layer === true) { DOTGRID.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translateMulti(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) } @@ -67,7 +67,7 @@ function Cursor () { } this.alt = function (e) { - this.pos = this.pos_from_event(e) + this.pos = this.atEvent(e) DOTGRID.tool.removeSegmentsAt(this.pos) e.preventDefault() @@ -77,18 +77,18 @@ function Cursor () { // Position Mods - this.pos_from_event = function (e) { - return this.pos_snap(this.pos_relative({ x: e.clientX, y: e.clientY })) + this.atEvent = function (e) { + return this.snapPos(this.relativePos({ x: e.clientX, y: e.clientY })) } - this.pos_relative = function (pos) { + this.relativePos = function (pos) { return { x: pos.x - DOTGRID.renderer.el.offsetLeft, y: pos.y - DOTGRID.renderer.el.offsetTop } } - this.pos_snap = function (pos) { + this.snapPos = function (pos) { return { x: clamp(step(pos.x, 15), 15, DOTGRID.tool.settings.size.width), y: clamp(step(pos.y, 15), 15, DOTGRID.tool.settings.size.height + 15) diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index f96ed59..a57da88 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -52,7 +52,7 @@ function Dotgrid (width, height) { // File this.new = function () { - this.set_zoom(1.0) + this.setZoom(1.0) this.setSize({ width: 300, height: 300 }) this.history.push(this.tool.layers) this.clear() @@ -72,32 +72,6 @@ function Dotgrid (width, height) { }) } - function grab (base64, name) { - const link = document.createElement('a') - link.setAttribute('href', base64) - link.setAttribute('download', name) - link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window })) - } - - this.save = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } - - this.manager.toGRID(grab) - } - - this.export = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } - - this.manager.toSVG(grab) - } - - 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.manager.toPNG(size, grab) - } - // Basics this.getSize = function () { @@ -125,7 +99,7 @@ function Dotgrid (width, height) { this.renderer.update() } - this.set_zoom = function (scale) { + this.setZoom = function (scale) { this.setSize({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale) try { diff --git a/desktop/sources/scripts/manager.js b/desktop/sources/scripts/manager.js index 01860f9..1595e34 100644 --- a/desktop/sources/scripts/manager.js +++ b/desktop/sources/scripts/manager.js @@ -79,4 +79,28 @@ function Manager (dotgrid) { const file = new Blob([text], { type: 'text/plain' }) callback(URL.createObjectURL(file), 'export.grid') } + + // Helpers + + this.save = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } + this.toGRID(grab) + } + + this.export = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } + this.toSVG(grab) + } + + this.render = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return } + this.toPNG({ width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }, grab) + } + + function grab (base64, name) { + const link = document.createElement('a') + link.setAttribute('href', base64) + link.setAttribute('download', name) + link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window })) + } } From 03cb438b9bf154f2f472255efd3a987c80738662 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 10 Jan 2019 08:45:50 +1200 Subject: [PATCH 19/20] Reverted io --- desktop/sources/scripts/cursor.js | 2 +- desktop/sources/scripts/dotgrid.js | 22 ++++++++++++++++++++++ desktop/sources/scripts/manager.js | 24 ------------------------ 3 files changed, 23 insertions(+), 25 deletions(-) diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index b317606..be617e2 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -91,7 +91,7 @@ function Cursor () { this.snapPos = function (pos) { return { x: clamp(step(pos.x, 15), 15, DOTGRID.tool.settings.size.width), - y: clamp(step(pos.y, 15), 15, DOTGRID.tool.settings.size.height + 15) + y: clamp(step(pos.y, 15), 15, DOTGRID.tool.settings.size.height) } } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index a57da88..0bd8e4e 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -72,6 +72,28 @@ function Dotgrid (width, height) { }) } + this.save = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } + this.manager.toGRID(grab) + } + + this.export = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } + this.manager.toSVG(grab) + } + + this.render = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return } + this.manager.toPNG({ width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }, grab) + } + + function grab (base64, name) { + const link = document.createElement('a') + link.setAttribute('href', base64) + link.setAttribute('download', name) + link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window })) + } + // Basics this.getSize = function () { diff --git a/desktop/sources/scripts/manager.js b/desktop/sources/scripts/manager.js index 1595e34..01860f9 100644 --- a/desktop/sources/scripts/manager.js +++ b/desktop/sources/scripts/manager.js @@ -79,28 +79,4 @@ function Manager (dotgrid) { const file = new Blob([text], { type: 'text/plain' }) callback(URL.createObjectURL(file), 'export.grid') } - - // Helpers - - this.save = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } - this.toGRID(grab) - } - - this.export = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } - this.toSVG(grab) - } - - this.render = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return } - this.toPNG({ width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }, grab) - } - - function grab (base64, name) { - const link = document.createElement('a') - link.setAttribute('href', base64) - link.setAttribute('download', name) - link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window })) - } } From fe9af9b4092c6bf11b135130fb341b16c88bcbda Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 10 Jan 2019 09:00:52 +1200 Subject: [PATCH 20/20] Ready for merge --- desktop/main.js | 4 +-- desktop/sources/index.html | 20 +++++++-------- desktop/sources/scripts/dotgrid.js | 40 +++++++++++++++++++----------- desktop/sources/scripts/tool.js | 2 +- index.html | 2 +- 5 files changed, 40 insertions(+), 28 deletions(-) diff --git a/desktop/main.js b/desktop/main.js index a00c438..c61e540 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -51,11 +51,11 @@ app.inspect = function () { app.win.toggleDevTools() } -app.toggle_fullscreen = function () { +app.toggleFullscreen = function () { app.win.setFullScreen(!app.win.isFullScreen()) } -app.toggle_visible = function () { +app.toggleVisible = function () { if (process.platform == 'win32') { if (!app.win.isMinimized()) { app.win.minimize() } else { app.win.restore() } } else { diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 356ffab..1f12af5 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -4,20 +4,20 @@ + - - + + - - + + - - + @@ -35,8 +35,8 @@ DOTGRID.controller = new Controller(); DOTGRID.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); - DOTGRID.controller.add("default","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); - DOTGRID.controller.add("default","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); + DOTGRID.controller.add("default","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter"); + DOTGRID.controller.add("default","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H"); DOTGRID.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); DOTGRID.controller.add("default","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace"); DOTGRID.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); @@ -94,8 +94,8 @@ DOTGRID.controller.add("default","Theme","Download Themes..",() => { 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"); + DOTGRID.controller.add("picker","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter"); + DOTGRID.controller.add("picker","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H"); DOTGRID.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); DOTGRID.controller.add("picker","*","Documentation",() => { DOTGRID.controller.docs(); },"CmdOrCtrl+Esc"); DOTGRID.controller.add("picker","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace"); diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 0bd8e4e..968cb72 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -1,7 +1,17 @@ 'use strict' function Dotgrid (width, height) { - const defaultTheme = { background: '#eee', f_high: '#000', f_med: '#999', f_low: '#ccc', f_inv: '#000', b_high: '#000', b_med: '#888', b_low: '#aaa', b_inv: '#ffb545' } + const defaultTheme = { + background: '#eee', + f_high: '#000', + f_med: '#999', + f_low: '#ccc', + f_inv: '#000', + b_high: '#000', + b_med: '#888', + b_low: '#aaa', + b_inv: '#ffb545' + } // ISU @@ -49,6 +59,19 @@ function Dotgrid (width, height) { DOTGRID.renderer.update() } + this.clear = function () { + this.history.clear() + this.tool.reset() + this.reset() + this.renderer.update() + this.interface.update(true) + } + + this.reset = function () { + this.tool.clear() + this.update() + } + // File this.new = function () { @@ -133,19 +156,6 @@ function Dotgrid (width, height) { // Draw - this.reset = function () { - this.tool.clear() - this.update() - } - - this.clear = function () { - this.history.clear() - this.tool.reset() - this.reset() - this.renderer.update() - this.interface.update(true) - } - this.resize = function () { const size = { width: step(window.innerWidth - 90, 15), height: step(window.innerHeight - 120, 15) } @@ -163,6 +173,8 @@ function Dotgrid (width, height) { document.title = `Dotgrid — ${size.width}x${size.height}` } + // Events + this.drag = function (e) { e.preventDefault() e.stopPropagation() diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index a224028..57cba69 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -206,7 +206,7 @@ function Tool (dotgrid) { this.source = function (type) { if (type == 'grid') { dotgrid.renderer.toggle() } - if (type == 'screen') { app.toggle_fullscreen() } + if (type == 'screen') { app.toggleFullscreen() } if (type == 'open') { dotgrid.open() } if (type == 'save') { dotgrid.save() } diff --git a/index.html b/index.html index d1885c2..0589ac7 100644 --- a/index.html +++ b/index.html @@ -21,11 +21,11 @@ + -