Further cleanu[
This commit is contained in:
Devine Lu Linvega
parent
945c77f948
commit
e79fae8a49
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user