From 60a8c6292775b5e7ec815cd39afce3cbe491d3ab Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 10 Jan 2019 08:35:10 +1200 Subject: [PATCH] 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) }