From e79fae8a4918b92f8ff31b8b1bdac6f9235db984 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 9 Jan 2019 15:24:58 +1200 Subject: [PATCH] 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)