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 })
|
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)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user