Minor cleanup

desktop/sources/index.html

@@ -71,19 +71,19 @@
         DOTGRID.controller.add("default","Effect","Thicker +5",() => { DOTGRID.tool.toggle("thickness",5) },"]");
         DOTGRID.controller.add("default","Effect","Thinner -5",() => { DOTGRID.tool.toggle("thickness",-5) },"[");
 
-        DOTGRID.controller.add("default","Manual","Add Point",() => { DOTGRID.tool.add_vertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter");
+        DOTGRID.controller.add("default","Manual","Add Point",() => { DOTGRID.tool.addVertex(DOTGRID.cursor.pos); DOTGRID.renderer.update() },"Enter");
         DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.renderer.update() },"Up");
         DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.renderer.update() },"Right");
         DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.renderer.update() },"Down");
         DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.renderer.update() },"Left");
-        DOTGRID.controller.add("default","Manual","Remove Point",() => { DOTGRID.tool.remove_segments_at(DOTGRID.cursor.pos); },"Shift+Backspace");
+        DOTGRID.controller.add("default","Manual","Remove Point",() => { DOTGRID.tool.removeSegmentsAt(DOTGRID.cursor.pos); },"Shift+Backspace");
-        DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.remove_segment(); },"Backspace");
+        DOTGRID.controller.add("default","Manual","Remove Segment",() => { DOTGRID.tool.removeSegment(); },"Backspace");
 
-        DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.select_layer(0) },"CmdOrCtrl+1");
+        DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.selectLayer(0) },"CmdOrCtrl+1");
-        DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.select_layer(1) },"CmdOrCtrl+2");
+        DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.selectLayer(1) },"CmdOrCtrl+2");
-        DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.select_layer(2) },"CmdOrCtrl+3");
+        DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.selectLayer(2) },"CmdOrCtrl+3");
-        DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.select_next_layer() },"Tab");
+        DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.selectNextLayer() },"Tab");
-        DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.select_prev_layer() },"Shift+Tab");
+        DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.selectPrevLayer() },"Shift+Tab");
         DOTGRID.controller.add("default","Layers","Merge Layers",() => { DOTGRID.tool.merge() },"M");
 
         DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G");

desktop/sources/links/main.css

@@ -8,7 +8,7 @@ body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: non
 
 /* Interface */
 
-#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:45px; height:30px; max-width:calc(100vw - 90px); overflow: hidden;}
+#interface { font-size: 11px;line-height: 30px;text-transform: uppercase;-webkit-app-region: no-drag; transition: all 150ms; width: 100%; position:fixed; bottom:20px; left:35px; height:30px; max-width:calc(100vw - 80px); overflow: hidden;}
 #interface.hidden { bottom:10px;opacity: 0 }
 #interface.visible { bottom:20px; opacity: 1 }
 #interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;}

desktop/sources/scripts/cursor.js

@@ -20,7 +20,7 @@ DOTGRID.Cursor = function () {
     this.pos = this.pos_from_event(e)
 
     // Translation
-    if (DOTGRID.tool.vertex_at(this.pos)) {
+    if (DOTGRID.tool.vertexAt(this.pos)) {
       this.translate(this.pos, this.pos, e.shiftKey, e.ctrlKey || e.metaKey, e.altKey)
     }
 
@@ -53,9 +53,9 @@ DOTGRID.Cursor = function () {
     this.pos = this.pos_from_event(e)
 
     if (this.translation && !is_equal(this.translation.from, this.translation.to)) {
-      if (this.translation.layer === true) { DOTGRID.tool.translate_layer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translate_copy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translate_multi(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) }
+      if (this.translation.layer === true) { DOTGRID.tool.translateLayer(this.translation.from, this.translation.to) } else if (this.translation.copy) { DOTGRID.tool.translateCopy(this.translation.from, this.translation.to) } else if (this.translation.multi) { DOTGRID.tool.translateMulti(this.translation.from, this.translation.to) } else { DOTGRID.tool.translate(this.translation.from, this.translation.to) }
     } else if (e.target.id == 'guide') {
-      DOTGRID.tool.add_vertex({ x: this.pos.x, y: this.pos.y })
+      DOTGRID.tool.addVertex({ x: this.pos.x, y: this.pos.y })
       DOTGRID.picker.stop()
     }
 
@@ -69,7 +69,7 @@ DOTGRID.Cursor = function () {
   this.alt = function (e) {
     this.pos = this.pos_from_event(e)
 
-    DOTGRID.tool.remove_segments_at(this.pos)
+    DOTGRID.tool.removeSegmentsAt(this.pos)
     e.preventDefault()
 
     setTimeout(() => { DOTGRID.tool.clear() }, 150)

desktop/sources/scripts/dotgrid.js

@@ -18,7 +18,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
   this.install = function (host) {
     this.manager = new Manager(this)
     this.renderer = new Renderer(this)
-    this.tool = new this.Tool()
+    this.tool = new Tool(this)
     this.interface = new this.Interface()
 
     this.picker = new this.Picker()

desktop/sources/scripts/generator.js

@@ -109,17 +109,6 @@ function Generator (layer, style) {
       s += this.convert(operate(this.layer, offset, scale, mirror), mirror)
     }
 
-    // if (mirror == 3) {
-    //   s += this.convert(operate(this.layer, offset, scale, mirror, 120), mirror)
-    //   s += this.convert(operate(this.layer, offset, scale, mirror, 240), mirror)
-    // }
-    // if (mirror == 4) {
-    //   s += this.convert(operate(this.layer, offset, scale, mirror, 72), mirror)
-    //   s += this.convert(operate(this.layer, offset, scale, mirror, 144), mirror)
-    //   s += this.convert(operate(this.layer, offset, scale, mirror, 216), mirror)
-    //   s += this.convert(operate(this.layer, offset, scale, mirror, 288), mirror)
-    // }
-
     return s
   }
 

desktop/sources/scripts/renderer.js

@@ -23,13 +23,14 @@ function Renderer (dotgrid) {
 
     this.drawMirror()
     this.drawRulers()
-    this.drawRender()
+    this.drawRender() //
     this.drawGrid()
     this.drawVertices()
     this.drawHandles()
     this.drawTranslation()
     this.drawCursor()
     this.drawPreview()
+    this.drawDebug()
   }
 
   this.clear = function () {
@@ -43,10 +44,11 @@ function Renderer (dotgrid) {
   }
 
   this.resize = function (size) {
-    this.el.width = size.width * this.scale
+    const pad = 15
-    this.el.height = size.height * this.scale
+    this.el.width = (size.width + pad) * this.scale
-    this.el.style.width = size.width + 'px'
+    this.el.height = (size.height + pad) * this.scale
-    this.el.style.height = size.height + 'px'
+    this.el.style.width = (size.width + pad) + 'px'
+    this.el.style.height = (size.height + pad) + 'px'
 
     this.update()
   }
@@ -71,10 +73,10 @@ function Renderer (dotgrid) {
   this.drawHandles = function () {
     if (!this.showExtras) { return }
 
-    for (const segment_id in dotgrid.tool.layer()) {
+    for (const segmentId in dotgrid.tool.layer()) {
-      const segment = dotgrid.tool.layer()[segment_id]
+      const segment = dotgrid.tool.layer()[segmentId]
-      for (const vertex_id in segment.vertices) {
+      for (const vertexId in segment.vertices) {
-        const vertex = segment.vertices[vertex_id]
+        const vertex = segment.vertices[vertexId]
         this.drawHandle(vertex)
       }
     }
@@ -256,6 +258,12 @@ function Renderer (dotgrid) {
     this.context.drawImage(img, 0, 0, this.el.width, this.el.height)
   }
 
+  this.drawDebug = function () {
+    this.context.strokeRect(0, 0, this.el.width, this.el.height)
+    this.context.strokeRect(this.el.width / 2, 0, this.el.width, this.el.height)
+    this.context.strokeRect(0, this.el.height / 2, this.el.width, this.el.height)
+  }
+
   function isEqual (a, b) { return a && b && Math.abs(a.x) == Math.abs(b.x) && Math.abs(a.y) == Math.abs(b.y) }
   function clamp (v, min, max) { return v < min ? min : v > max ? max : v }
 }

desktop/sources/scripts/tool.js

@@ -1,6 +1,6 @@
 'use strict'
 
-DOTGRID.Tool = function () {
+function Tool (dotgrid) {
   this.index = 0
   this.settings = { size: { width: 300, height: 300 } }
   this.layers = [[], [], []]
@@ -13,9 +13,9 @@ DOTGRID.Tool = function () {
   this.reqs = { line: 2, arc_c: 2, arc_r: 2, arc_c_full: 2, arc_r_full: 2, bezier: 3, close: 0 }
 
   this.start = function () {
-    this.styles[0].color = DOTGRID.theme.active.f_high
+    this.styles[0].color = dotgrid.theme.active.f_high
-    this.styles[1].color = DOTGRID.theme.active.f_med
+    this.styles[1].color = dotgrid.theme.active.f_med
-    this.styles[2].color = DOTGRID.theme.active.f_low
+    this.styles[2].color = dotgrid.theme.active.f_low
   }
 
   this.erase = function () {
@@ -36,20 +36,20 @@ DOTGRID.Tool = function () {
 
   this.clear = function () {
     this.vertices = []
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
   }
 
   this.undo = function () {
-    this.layers = DOTGRID.history.prev()
+    this.layers = dotgrid.history.prev()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
   }
 
   this.redo = function () {
-    this.layers = DOTGRID.history.next()
+    this.layers = dotgrid.history.next()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
   }
 
   this.length = function () {
@@ -64,10 +64,10 @@ DOTGRID.Tool = function () {
 
   this.import = function (layer) {
     this.layers[this.index] = this.layers[this.index].concat(layer)
-    DOTGRID.history.push(this.layers)
+    dotgrid.history.push(this.layers)
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
   }
 
   this.replace = function (dot) {
@@ -77,7 +77,7 @@ DOTGRID.Tool = function () {
       dot.settings.size = { width: dot.settings.width, height: dot.settings.height }
     }
     if (this.settings && (this.settings.size.width != dot.settings.size.width || this.settings.size.height != dot.settings.size.height)) {
-      DOTGRID.setSize({ width: dot.settings.size.width, height: dot.settings.size.height })
+      dotgrid.setSize({ width: dot.settings.size.width, height: dot.settings.size.height })
     }
 
     this.layers = dot.layers
@@ -85,46 +85,46 @@ DOTGRID.Tool = function () {
     this.settings = dot.settings
 
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
-    DOTGRID.history.push(this.layers)
+    dotgrid.history.push(this.layers)
   }
 
   // EDIT
 
-  this.remove_segment = function () {
+  this.removeSegment = function () {
     if (this.vertices.length > 0) { this.clear(); return }
 
     this.layer().pop()
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
   }
 
-  this.remove_segments_at = function (pos) {
+  this.removeSegmentsAt = function (pos) {
-    for (const segment_id in this.layer()) {
+    for (const segmentId in this.layer()) {
-      let segment = this.layer()[segment_id]
+      let segment = this.layer()[segmentId]
-      for (const vertex_id in segment.vertices) {
+      for (const vertexId in segment.vertices) {
-        let vertex = segment.vertices[vertex_id]
+        let vertex = segment.vertices[vertexId]
         if (Math.abs(pos.x) == Math.abs(vertex.x) && Math.abs(pos.y) == Math.abs(vertex.y)) {
-          segment.vertices.splice(vertex_id, 1)
+          segment.vertices.splice(vertexId, 1)
         }
       }
       if (segment.vertices.length < 2) {
-        this.layers[this.index].splice(segment_id, 1)
+        this.layers[this.index].splice(segmentId, 1)
       }
     }
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
   }
 
-  this.select_segment_at = function (pos, source = this.layer()) {
+  this.selectSegmentAt = function (pos, source = this.layer()) {
     let target_segment = null
-    for (const segment_id in source) {
+    for (const segmentId in source) {
-      let segment = source[segment_id]
+      let segment = source[segmentId]
-      for (const vertex_id in segment.vertices) {
+      for (const vertexId in segment.vertices) {
-        let vertex = segment.vertices[vertex_id]
+        let vertex = segment.vertices[vertexId]
         if (vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)) {
           return segment
         }
@@ -133,17 +133,17 @@ DOTGRID.Tool = function () {
     return null
   }
 
-  this.add_vertex = function (pos) {
+  this.addVertex = function (pos) {
     pos = { x: Math.abs(pos.x), y: Math.abs(pos.y) }
     this.vertices.push(pos)
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
   }
 
-  this.vertex_at = function (pos) {
+  this.vertexAt = function (pos) {
-    for (const segment_id in this.layer()) {
+    for (const segmentId in this.layer()) {
-      let segment = this.layer()[segment_id]
+      let segment = this.layer()[segmentId]
-      for (const vertex_id in segment.vertices) {
+      for (const vertexId in segment.vertices) {
-        let vertex = segment.vertices[vertex_id]
+        let vertex = segment.vertices[vertexId]
         if (vertex.x == Math.abs(pos.x) && vertex.y == Math.abs(pos.y)) {
           return vertex
         }
@@ -152,8 +152,8 @@ DOTGRID.Tool = function () {
     return null
   }
 
-  this.add_segment = function (type, vertices) {
+  this.addSegment = function (type, vertices) {
-    let append_target = this.can_append({ type: type, vertices: vertices })
+    let append_target = this.canAppend({ type: type, vertices: vertices })
     if (append_target) {
       this.layer()[append_target].vertices = this.layer()[append_target].vertices.concat(vertices)
     } else {
@@ -165,13 +165,13 @@ DOTGRID.Tool = function () {
     if (!this.layer()) { this.layers[this.index] = [] }
     if (!this.canCast(type)) { console.warn('Cannot cast'); return }
 
-    this.add_segment(type, this.vertices.slice())
+    this.addSegment(type, this.vertices.slice())
 
-    DOTGRID.history.push(this.layers)
+    dotgrid.history.push(this.layers)
 
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
 
     console.log(`Casted ${type} -> ${this.layer().length} elements`)
   }
@@ -196,25 +196,25 @@ DOTGRID.Tool = function () {
     } else {
       console.warn('Unknown', type)
     }
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
   }
 
   this.misc = function (type) {
-    DOTGRID.picker.start()
+    dotgrid.picker.start()
   }
 
   this.source = function (type) {
-    if (type == 'grid') { DOTGRID.renderer.toggle() }
+    if (type == 'grid') { dotgrid.renderer.toggle() }
     if (type == 'screen') { app.toggle_fullscreen() }
 
-    if (type == 'open') { DOTGRID.open() }
+    if (type == 'open') { dotgrid.open() }
-    if (type == 'save') { DOTGRID.save() }
+    if (type == 'save') { dotgrid.save() }
-    if (type == 'render') { DOTGRID.render() }
+    if (type == 'render') { dotgrid.render() }
-    if (type == 'export') { DOTGRID.export() }
+    if (type == 'export') { dotgrid.export() }
   }
 
-  this.can_append = function (content) {
+  this.canAppend = function (content) {
     for (const id in this.layer()) {
       let stroke = this.layer()[id]
       if (stroke.type != content.type) { continue }
@@ -245,78 +245,77 @@ DOTGRID.Tool = function () {
   }
 
   this.paths = function () {
-    let l1 = new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: -10, y: -10 }, 1)
+    let l1 = new Generator(dotgrid.tool.layers[0], dotgrid.tool.styles[0]).toString({ x: 0, y: 0 }, 1)
-    let l2 = new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: -10, y: -10 }, 1)
+    let l2 = new Generator(dotgrid.tool.layers[1], dotgrid.tool.styles[1]).toString({ x: 0, y: 0 }, 1)
-    let l3 = new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).toString({ x: -10, y: -10 }, 1)
+    let l3 = new Generator(dotgrid.tool.layers[2], dotgrid.tool.styles[2]).toString({ x: 0, y: 0 }, 1)
 
     return [l1, l2, l3]
   }
 
   this.path = function () {
-    return new Generator(DOTGRID.tool.layer(), DOTGRID.tool.style()).toString({ x: -10, y: -10 }, 1)
+    return new Generator(dotgrid.tool.layer(), dotgrid.tool.style()).toString({ x: 0, y: 0 }, 1)
   }
 
   this.translate = function (a, b) {
-    for (const segment_id in this.layer()) {
+    for (const segmentId in this.layer()) {
-      let segment = this.layer()[segment_id]
+      let segment = this.layer()[segmentId]
-      for (const vertex_id in segment.vertices) {
+      for (const vertexId in segment.vertices) {
-        let vertex = segment.vertices[vertex_id]
+        let vertex = segment.vertices[vertexId]
         if (vertex.x == Math.abs(a.x) && vertex.y == Math.abs(a.y)) {
-          segment.vertices[vertex_id] = { x: Math.abs(b.x), y: Math.abs(b.y) }
+          segment.vertices[vertexId] = { x: Math.abs(b.x), y: Math.abs(b.y) }
         }
       }
     }
-    DOTGRID.history.push(this.layers)
+    dotgrid.history.push(this.layers)
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
   }
 
-  this.translate_multi = function (a, b) {
+  this.translateMulti = function (a, b) {
     const offset = { x: a.x - b.x, y: a.y - b.y }
-    const segment = this.select_segment_at(a)
+    const segment = this.selectSegmentAt(a)
 
     if (!segment) { return }
 
-    for (const vertex_id in segment.vertices) {
+    for (const vertexId in segment.vertices) {
-      let vertex = segment.vertices[vertex_id]
+      let vertex = segment.vertices[vertexId]
-      segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
+      segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
     }
 
-    DOTGRID.history.push(this.layers)
+    dotgrid.history.push(this.layers)
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
   }
 
-  this.translate_layer = function (a, b) {
+  this.translateLayer = function (a, b) {
-    console.log(a, b)
     const offset = { x: a.x - b.x, y: a.y - b.y }
-    for (const segment_id in this.layer()) {
+    for (const segmentId in this.layer()) {
-      let segment = this.layer()[segment_id]
+      let segment = this.layer()[segmentId]
-      for (const vertex_id in segment.vertices) {
+      for (const vertexId in segment.vertices) {
-        let vertex = segment.vertices[vertex_id]
+        let vertex = segment.vertices[vertexId]
-        segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
+        segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
       }
     }
-    DOTGRID.history.push(this.layers)
+    dotgrid.history.push(this.layers)
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
   }
 
-  this.translate_copy = function (a, b) {
+  this.translateCopy = function (a, b) {
     const offset = { x: a.x - b.x, y: a.y - b.y }
-    const segment = this.select_segment_at(a, copy(this.layer()))
+    const segment = this.selectSegmentAt(a, copy(this.layer()))
 
     if (!segment) { return }
 
-    for (const vertex_id in segment.vertices) {
+    for (const vertexId in segment.vertices) {
-      let vertex = segment.vertices[vertex_id]
+      let vertex = segment.vertices[vertexId]
-      segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
+      segment.vertices[vertexId] = { x: vertex.x - offset.x, y: vertex.y - offset.y }
     }
     this.layer().push(segment)
 
-    DOTGRID.history.push(this.layers)
+    dotgrid.history.push(this.layers)
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
   }
 
   this.merge = function () {
@@ -324,9 +323,9 @@ DOTGRID.Tool = function () {
     this.erase()
     this.layers[this.index] = merged
 
-    DOTGRID.history.push(this.layers)
+    dotgrid.history.push(this.layers)
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
   }
 
   // Style
@@ -347,22 +346,22 @@ DOTGRID.Tool = function () {
     return this.layers[this.index]
   }
 
-  this.select_layer = function (id) {
+  this.selectLayer = function (id) {
     this.index = clamp(id, 0, 2)
     this.clear()
-    DOTGRID.renderer.update()
+    dotgrid.renderer.update()
-    DOTGRID.interface.update(true)
+    dotgrid.interface.update(true)
     console.log(`layer:${this.index}`)
   }
 
-  this.select_next_layer = function () {
+  this.selectNextLayer = function () {
     this.index = this.index >= 2 ? 0 : this.index++
-    this.select_layer(this.index)
+    this.selectLayer(this.index)
   }
 
-  this.select_prev_layer = function () {
+  this.selectPrevLayer = function () {
     this.index = this.index >= 0 ? 2 : this.index--
-    this.select_layer(this.index)
+    this.selectLayer(this.index)
   }
 
   function copy (data) { return data ? JSON.parse(JSON.stringify(data)) : [] }

web/events.js

@@ -12,12 +12,12 @@ document.onkeyup = (e) =>
   if((e.ctrlKey || e.metaKey) && ch == "e"){ DOTGRID.export(); e.preventDefault(); return; }
 
   if(ch == "backspace" && e.ctrlKey){ DOTGRID.theme.reset(); e.preventDefault(); }
-  if(ch == "backspace"){ DOTGRID.tool.remove_segment(); e.preventDefault(); }
+  if(ch == "backspace"){ DOTGRID.tool.removeSegment(); e.preventDefault(); }
   if(ch == "escape"){ DOTGRID.tool.clear(); DOTGRID.picker.stop(); e.preventDefault(); }
 
-  if(ch == "1"){ DOTGRID.tool.select_layer(0); e.preventDefault(); }
+  if(ch == "1"){ DOTGRID.tool.selectLayer(0); e.preventDefault(); }
-  if(ch == "2"){ DOTGRID.tool.select_layer(1); e.preventDefault(); }
+  if(ch == "2"){ DOTGRID.tool.selectLayer(1); e.preventDefault(); }
-  if(ch == "3"){ DOTGRID.tool.select_layer(2); e.preventDefault(); }  
+  if(ch == "3"){ DOTGRID.tool.selectLayer(2); e.preventDefault(); }  
 
   if(ch == "h"){ DOTGRID.renderer.toggle(); e.preventDefault(); }
   if(ch == "?"){ DOTGRID.reset(); DOTGRID.theme.reset(); e.preventDefault(); }
@@ -47,5 +47,5 @@ document.onkeyup = (e) =>
 
 document.onkeydown = (e) => 
 {
-  if(e.keyCode == 9){ DOTGRID.tool.select_next_layer(); e.preventDefault(); }
+  if(e.keyCode == 9){ DOTGRID.tool.selectNextLayer(); e.preventDefault(); }
 }