Renamed some variables

This commit is contained in:
Devine Lu Linvega 2019-01-08 18:22:14 +12:00
parent 56c9e21699
commit 6bcaeccc5c
3 changed files with 50 additions and 50 deletions

View File

@ -7,7 +7,7 @@ DOTGRID.Guide = function () {
this.el.height = 640 this.el.height = 640
this.el.style.width = '320px' this.el.style.width = '320px'
this.el.style.height = '320px' this.el.style.height = '320px'
this.show_extras = true this.showExtras = true
this.scale = 2 this.scale = 2
@ -21,20 +21,20 @@ DOTGRID.Guide = function () {
this.el.getContext('2d').restore() this.el.getContext('2d').restore()
this.draw_mirror() this.drawMirror()
this.draw_rulers() this.drawRulers()
if (DOTGRID.tool.index == 2) { this.draw_markers(); this.draw_vertices() } if (DOTGRID.tool.index == 2) { this.drawMarkers(); this.drawVertices() }
this.draw_path(new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[2]) this.drawPath(new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[2])
if (DOTGRID.tool.index == 1) { this.draw_markers(); this.draw_vertices() } if (DOTGRID.tool.index == 1) { this.drawMarkers(); this.drawVertices() }
this.draw_path(new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[1]) this.drawPath(new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[1])
if (DOTGRID.tool.index == 0) { this.draw_markers(); this.draw_vertices() } if (DOTGRID.tool.index == 0) { this.drawMarkers(); this.drawVertices() }
this.draw_path(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0]) this.drawPath(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0])
this.draw_handles() this.drawHandles()
this.draw_translation() this.drawTranslation()
this.draw_cursor() this.drawCursor()
this.draw_preview() this.drawPreview()
} }
this.clear = function () { this.clear = function () {
@ -42,7 +42,7 @@ DOTGRID.Guide = function () {
} }
this.toggle = function () { this.toggle = function () {
this.show_extras = !this.show_extras this.showExtras = !this.showExtras
this.update() this.update()
DOTGRID.interface.update(true) DOTGRID.interface.update(true)
} }
@ -57,41 +57,41 @@ DOTGRID.Guide = function () {
this.update() this.update()
} }
this.draw_mirror = function () { this.drawMirror = function () {
if (!this.show_extras) { return } if (!this.showExtras) { return }
if (DOTGRID.tool.style().mirror_style === 0) { return } 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 + (2 * DOTGRID.grid_height) } const middle = { x: DOTGRID.tool.settings.size.width + (DOTGRID.grid_width), y: DOTGRID.tool.settings.size.height + (2 * DOTGRID.grid_height) }
if (DOTGRID.tool.style().mirror_style === 1 || DOTGRID.tool.style().mirror_style === 3) { if (DOTGRID.tool.style().mirror_style === 1 || DOTGRID.tool.style().mirror_style === 3) {
this.draw_rule({ x: middle.x, y: DOTGRID.grid_height * 2 }, { x: middle.x, y: (DOTGRID.tool.settings.size.height + DOTGRID.grid_height) * 2 }) this.drawRule({ x: middle.x, y: DOTGRID.grid_height * 2 }, { x: middle.x, y: (DOTGRID.tool.settings.size.height + DOTGRID.grid_height) * 2 })
} }
if (DOTGRID.tool.style().mirror_style === 2 || DOTGRID.tool.style().mirror_style === 3) { if (DOTGRID.tool.style().mirror_style === 2 || DOTGRID.tool.style().mirror_style === 3) {
this.draw_rule({ x: DOTGRID.grid_width * 2, y: middle.y }, { x: (DOTGRID.tool.settings.size.width + DOTGRID.grid_width) * 2, y: middle.y }) this.drawRule({ x: DOTGRID.grid_width * 2, y: middle.y }, { x: (DOTGRID.tool.settings.size.width + DOTGRID.grid_width) * 2, y: middle.y })
} }
} }
this.draw_handles = function () { this.drawHandles = function () {
if (!this.show_extras) { return } if (!this.showExtras) { return }
for (const segment_id in DOTGRID.tool.layer()) { for (const segment_id in DOTGRID.tool.layer()) {
const segment = DOTGRID.tool.layer()[segment_id] const segment = DOTGRID.tool.layer()[segment_id]
for (const vertex_id in segment.vertices) { for (const vertex_id in segment.vertices) {
const vertex = segment.vertices[vertex_id] const vertex = segment.vertices[vertex_id]
this.draw_handle(vertex) this.drawHandle(vertex)
} }
} }
} }
this.draw_vertices = function () { this.drawVertices = function () {
for (const id in DOTGRID.tool.vertices) { for (const id in DOTGRID.tool.vertices) {
this.draw_vertex(DOTGRID.tool.vertices[id]) this.drawVertex(DOTGRID.tool.vertices[id])
} }
} }
this.draw_markers = function () { this.drawMarkers = function () {
if (!this.show_extras) { return } 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 / DOTGRID.grid_width), y: parseInt(DOTGRID.cursor.pos.y / DOTGRID.grid_width) }
@ -102,7 +102,7 @@ DOTGRID.Guide = function () {
let color = is_step ? DOTGRID.theme.active.b_med : DOTGRID.theme.active.b_low 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 == 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 }
this.draw_marker({ this.drawMarker({
x: parseInt(x * DOTGRID.grid_width) + DOTGRID.grid_width, x: parseInt(x * DOTGRID.grid_width) + DOTGRID.grid_width,
y: parseInt(y * DOTGRID.grid_height) + DOTGRID.grid_height y: parseInt(y * DOTGRID.grid_height) + DOTGRID.grid_height
}, is_step ? 2.5 : 1.5, color) }, is_step ? 2.5 : 1.5, color)
@ -110,7 +110,7 @@ DOTGRID.Guide = function () {
} }
} }
this.draw_marker = function (pos, radius = 1, color) { this.drawMarker = function (pos, radius = 1, color) {
let ctx = this.el.getContext('2d') let ctx = this.el.getContext('2d')
ctx.beginPath() ctx.beginPath()
ctx.lineWidth = 2 ctx.lineWidth = 2
@ -120,7 +120,7 @@ DOTGRID.Guide = function () {
ctx.closePath() ctx.closePath()
} }
this.draw_vertex = function (pos, radius = 5) { this.drawVertex = function (pos, radius = 5) {
let ctx = this.el.getContext('2d') let ctx = this.el.getContext('2d')
ctx.beginPath() ctx.beginPath()
ctx.lineWidth = 2 ctx.lineWidth = 2
@ -130,7 +130,7 @@ DOTGRID.Guide = function () {
ctx.closePath() ctx.closePath()
} }
this.draw_rule = function (from, to) { this.drawRule = function (from, to) {
let ctx = this.el.getContext('2d') let ctx = this.el.getContext('2d')
ctx.beginPath() ctx.beginPath()
@ -143,7 +143,7 @@ DOTGRID.Guide = function () {
ctx.closePath() ctx.closePath()
} }
this.draw_ruler = function (pos) { this.drawRuler = function (pos) {
let offset = 15 * this.scale let offset = 15 * this.scale
let top = offset let top = offset
let bottom = (DOTGRID.tool.settings.size.height * this.scale) + offset let bottom = (DOTGRID.tool.settings.size.height * this.scale) + offset
@ -151,22 +151,22 @@ DOTGRID.Guide = function () {
let right = (DOTGRID.tool.settings.size.width * this.scale) let right = (DOTGRID.tool.settings.size.width * this.scale)
// Translation // Translation
this.draw_rule({ x: pos.x * this.scale, y: top }, { x: pos.x * this.scale, y: bottom }) this.drawRule({ x: pos.x * this.scale, y: top }, { x: pos.x * this.scale, y: bottom })
this.draw_rule({ x: left, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale }) this.drawRule({ x: left, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale })
} }
this.draw_rulers = function () { this.drawRulers = function () {
if (!DOTGRID.cursor.translation) { return } if (!DOTGRID.cursor.translation) { return }
let ctx = this.el.getContext('2d') let ctx = this.el.getContext('2d')
this.draw_ruler(DOTGRID.cursor.translation.to) this.drawRuler(DOTGRID.cursor.translation.to)
ctx.setLineDash([]) ctx.setLineDash([])
ctx.restore() ctx.restore()
} }
this.draw_handle = function (pos, radius = 6) { this.drawHandle = function (pos, radius = 6) {
let ctx = this.el.getContext('2d') let ctx = this.el.getContext('2d')
ctx.beginPath() ctx.beginPath()
@ -192,7 +192,7 @@ DOTGRID.Guide = function () {
ctx.closePath() ctx.closePath()
} }
this.draw_path = function (path, style) { this.drawPath = function (path, style) {
let ctx = this.el.getContext('2d') let ctx = this.el.getContext('2d')
let p = new Path2D(path) let p = new Path2D(path)
@ -211,7 +211,7 @@ DOTGRID.Guide = function () {
ctx.stroke(p) ctx.stroke(p)
} }
this.draw_translation = function () { this.drawTranslation = function () {
if (!DOTGRID.cursor.translation) { return } if (!DOTGRID.cursor.translation) { return }
let ctx = this.el.getContext('2d') let ctx = this.el.getContext('2d')
@ -230,7 +230,7 @@ DOTGRID.Guide = function () {
ctx.restore() ctx.restore()
} }
this.draw_cursor = function (pos = DOTGRID.cursor.pos, radius = DOTGRID.tool.style().thickness - 1) { this.drawCursor = function (pos = DOTGRID.cursor.pos, radius = DOTGRID.tool.style().thickness - 1) {
let ctx = this.el.getContext('2d') let ctx = this.el.getContext('2d')
ctx.beginPath() ctx.beginPath()
@ -250,11 +250,11 @@ DOTGRID.Guide = function () {
ctx.closePath() ctx.closePath()
} }
this.draw_preview = function () { this.drawPreview = function () {
let ctx = this.el.getContext('2d') 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.can_cast(operation)) { return } if (!DOTGRID.tool.canCast(operation)) { return }
if (operation == 'close') { return } if (operation == 'close') { return }
let path = new Generator([{ vertices: DOTGRID.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2) let path = new Generator([{ vertices: DOTGRID.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2)
@ -265,7 +265,7 @@ DOTGRID.Guide = function () {
strokeLinejoin: 'round', strokeLinejoin: 'round',
strokeLineDash: [5, 15] strokeLineDash: [5, 15]
} }
this.draw_path(path, style) this.drawPath(path, style)
ctx.setLineDash([]) ctx.setLineDash([])
ctx.restore() ctx.restore()

View File

@ -108,11 +108,11 @@ DOTGRID.Interface = function () {
if (segments[i].vertices.length > 2) { multi_vertices = true; break } if (segments[i].vertices.length > 2) { multi_vertices = true; break }
} }
document.getElementById('option_line').className.baseVal = !DOTGRID.tool.can_cast('line') ? 'icon inactive' : 'icon' document.getElementById('option_line').className.baseVal = !DOTGRID.tool.canCast('line') ? 'icon inactive' : 'icon'
document.getElementById('option_arc_c').className.baseVal = !DOTGRID.tool.can_cast('arc_c') ? 'icon inactive' : 'icon' document.getElementById('option_arc_c').className.baseVal = !DOTGRID.tool.canCast('arc_c') ? 'icon inactive' : 'icon'
document.getElementById('option_arc_r').className.baseVal = !DOTGRID.tool.can_cast('arc_r') ? 'icon inactive' : 'icon' document.getElementById('option_arc_r').className.baseVal = !DOTGRID.tool.canCast('arc_r') ? 'icon inactive' : 'icon'
document.getElementById('option_bezier').className.baseVal = !DOTGRID.tool.can_cast('bezier') ? 'icon inactive' : 'icon' document.getElementById('option_bezier').className.baseVal = !DOTGRID.tool.canCast('bezier') ? 'icon inactive' : 'icon'
document.getElementById('option_close').className.baseVal = !DOTGRID.tool.can_cast('close') ? 'icon inactive' : 'icon' document.getElementById('option_close').className.baseVal = !DOTGRID.tool.canCast('close') ? 'icon inactive' : 'icon'
document.getElementById('option_thickness').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' document.getElementById('option_thickness').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon'
document.getElementById('option_linecap').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' document.getElementById('option_linecap').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon'
@ -130,10 +130,10 @@ DOTGRID.Interface = function () {
document.getElementById('option_export').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' document.getElementById('option_export').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_render').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source' document.getElementById('option_render').className.baseVal = sum_segments < 1 ? 'icon inactive source' : 'icon source'
document.getElementById('option_grid').className.baseVal = DOTGRID.guide.show_extras ? 'icon inactive source' : 'icon source' document.getElementById('option_grid').className.baseVal = DOTGRID.guide.showExtras ? 'icon inactive source' : 'icon source'
// Grid // Grid
if (DOTGRID.guide.show_extras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') } if (DOTGRID.guide.showExtras) { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 Q155,65 245,155 M155,125 A30,30 0 0,1 185,155 A30,30 0 0,1 155,185 A30,30 0 0,1 125,155 A30,30 0 0,1 155,125 ') } else { document.getElementById('grid_path').setAttribute('d', 'M65,155 Q155,245 245,155 M65,155 ') }
// Mirror // Mirror
if (DOTGRID.tool.style().mirror_style == 0) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 1) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 2) { document.getElementById('mirror_path').setAttribute('d', 'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240') } else if (DOTGRID.tool.style().mirror_style == 3) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 4) { document.getElementById('mirror_path').setAttribute('d', 'M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ') } if (DOTGRID.tool.style().mirror_style == 0) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 M180,180 L180,180 L240,240 M210,90 L210,90 L180,120 M120,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 1) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L240,240 M180,120 L210,90 M120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 2) { document.getElementById('mirror_path').setAttribute('d', 'M210,90 L210,90 L90,210 M60,60 L60,60 L120,120 M180,180 L180,180 L240,240') } else if (DOTGRID.tool.style().mirror_style == 3) { document.getElementById('mirror_path').setAttribute('d', 'M60,60 L60,60 L120,120 L180,120 L210,90 M240,240 L240,240 L180,180 L120,180 L90,210') } else if (DOTGRID.tool.style().mirror_style == 4) { document.getElementById('mirror_path').setAttribute('d', 'M120,120 L120,120 L120,120 L180,120 M120,150 L120,150 L180,150 M120,180 L120,180 L180,180 L180,180 L180,180 L240,240 M120,210 L120,210 L180,210 M120,90 L120,90 L180,90 M60,60 L60,60 L120,120 ') }

View File

@ -163,7 +163,7 @@ DOTGRID.Tool = function () {
this.cast = function (type) { this.cast = function (type) {
if (!this.layer()) { this.layers[this.index] = [] } if (!this.layer()) { this.layers[this.index] = [] }
if (!this.can_cast(type)) { console.warn('Cannot cast'); return } if (!this.canCast(type)) { console.warn('Cannot cast'); return }
this.add_segment(type, this.vertices.slice()) this.add_segment(type, this.vertices.slice())
@ -227,7 +227,7 @@ DOTGRID.Tool = function () {
return false return false
} }
this.can_cast = function (type) { this.canCast = function (type) {
if (!type) { return false } if (!type) { return false }
// Cannot cast close twice // Cannot cast close twice
if (type == 'close') { if (type == 'close') {