Further cleanu[

This commit is contained in:
Devine Lu Linvega 2019-01-09 15:24:58 +12:00
parent 945c77f948
commit e79fae8a49

View File

@ -117,127 +117,7 @@ function Renderer (dotgrid) {
this.drawRule({ x: 0, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale }) 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 () { 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 }
@ -252,12 +132,125 @@ function Renderer (dotgrid) {
strokeLineDash: [5, 15] strokeLineDash: [5, 15]
} }
this.drawPath(path, style) 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() 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) this.context.drawImage(img, 0, 0, this.el.width, this.el.height)