diff --git a/desktop/main.js b/desktop/main.js index 20058d3..c61e540 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -3,7 +3,7 @@ const path = require('path') const url = require('url') const shell = require('electron').shell -let is_shown = true +let isShown = true app.on('ready', () => { app.win = new BrowserWindow({ @@ -27,11 +27,11 @@ app.on('ready', () => { }) app.win.on('hide', function () { - is_shown = false + isShown = false }) app.win.on('show', function () { - is_shown = true + isShown = true }) app.on('window-all-closed', () => { @@ -51,15 +51,15 @@ app.inspect = function () { app.win.toggleDevTools() } -app.toggle_fullscreen = function () { +app.toggleFullscreen = function () { app.win.setFullScreen(!app.win.isFullScreen()) } -app.toggle_visible = function () { +app.toggleVisible = function () { if (process.platform == 'win32') { if (!app.win.isMinimized()) { app.win.minimize() } else { app.win.restore() } } else { - if (is_shown && !app.win.isFullScreen()) { app.win.hide() } else { app.win.show() } + if (isShown && !app.win.isFullScreen()) { app.win.hide() } else { app.win.show() } } } diff --git a/desktop/sources/index.html b/desktop/sources/index.html index b97d513..1f12af5 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -4,20 +4,20 @@ + - - + + - - + + - - + @@ -35,8 +35,8 @@ DOTGRID.controller = new Controller(); DOTGRID.controller.add("default","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); - DOTGRID.controller.add("default","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); - DOTGRID.controller.add("default","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); + DOTGRID.controller.add("default","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter"); + DOTGRID.controller.add("default","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H"); DOTGRID.controller.add("default","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); DOTGRID.controller.add("default","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace"); DOTGRID.controller.add("default","*","Quit",() => { app.exit(); },"CmdOrCtrl+Q"); @@ -71,31 +71,31 @@ 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.guide.update() },"Enter"); - DOTGRID.controller.add("default","Manual","Move Up",() => { DOTGRID.cursor.pos.y -= 15; DOTGRID.guide.update() },"Up"); - DOTGRID.controller.add("default","Manual","Move Right",() => { DOTGRID.cursor.pos.x += 15; DOTGRID.guide.update() },"Right"); - DOTGRID.controller.add("default","Manual","Move Down",() => { DOTGRID.cursor.pos.y += 15; DOTGRID.guide.update() },"Down"); - DOTGRID.controller.add("default","Manual","Move Left",() => { DOTGRID.cursor.pos.x -= 15; DOTGRID.guide.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 Segment",() => { DOTGRID.tool.remove_segment(); },"Backspace"); + 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.removeSegmentsAt(DOTGRID.cursor.pos); },"Shift+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","Middleground",() => { DOTGRID.tool.select_layer(1) },"CmdOrCtrl+2"); - DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.select_layer(2) },"CmdOrCtrl+3"); - DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.select_next_layer() },"Tab"); - DOTGRID.controller.add("default","Layers","Prev Layer",() => { DOTGRID.tool.select_prev_layer() },"Shift+Tab"); + DOTGRID.controller.add("default","Layers","Foreground",() => { DOTGRID.tool.selectLayer(0) },"CmdOrCtrl+1"); + DOTGRID.controller.add("default","Layers","Middleground",() => { DOTGRID.tool.selectLayer(1) },"CmdOrCtrl+2"); + DOTGRID.controller.add("default","Layers","Background",() => { DOTGRID.tool.selectLayer(2) },"CmdOrCtrl+3"); + DOTGRID.controller.add("default","Layers","Next Layer",() => { DOTGRID.tool.selectNextLayer() },"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"); - DOTGRID.controller.add("default","View","Toggle Grid",() => { DOTGRID.guide.toggle(); },"H"); + DOTGRID.controller.add("default","View","Toggle Grid",() => { DOTGRID.renderer.toggle(); },"H"); DOTGRID.controller.add("default","Theme","Open Theme",() => { DOTGRID.theme.open(); },"CmdOrCtrl+Shift+o") DOTGRID.controller.add("default","Theme","Reset Theme",() => { DOTGRID.theme.reset(); },"CmdOrCtrl+Shift+Backspace") DOTGRID.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); }) DOTGRID.controller.add("picker","*","About",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Dotgrid'); },"CmdOrCtrl+,"); - DOTGRID.controller.add("picker","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter"); - DOTGRID.controller.add("picker","*","Hide",() => { app.toggle_visible(); },"CmdOrCtrl+H"); + DOTGRID.controller.add("picker","*","Fullscreen",() => { app.toggleFullscreen(); },"CmdOrCtrl+Enter"); + DOTGRID.controller.add("picker","*","Hide",() => { app.toggleVisible(); },"CmdOrCtrl+H"); DOTGRID.controller.add("picker","*","Inspect",() => { app.inspect(); },"CmdOrCtrl+."); DOTGRID.controller.add("picker","*","Documentation",() => { DOTGRID.controller.docs(); },"CmdOrCtrl+Esc"); DOTGRID.controller.add("picker","*","Reset",() => { DOTGRID.reset(); DOTGRID.theme.reset(); },"CmdOrCtrl+Backspace"); diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index e4c67be..e70f773 100644 --- a/desktop/sources/links/main.css +++ b/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%;} diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index cd229e7..be617e2 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Cursor = function () { +function Cursor () { this.pos = { x: 0, y: 0 } this.translation = null this.operation = null @@ -17,14 +17,14 @@ DOTGRID.Cursor = function () { } this.down = function (e) { - this.pos = this.pos_from_event(e) + this.pos = this.atEvent(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) } - DOTGRID.guide.update() + DOTGRID.renderer.update() DOTGRID.interface.update() e.preventDefault() } @@ -32,7 +32,7 @@ DOTGRID.Cursor = function () { this.last_pos = { x: 0, y: 0 } this.move = function (e) { - this.pos = this.pos_from_event(e) + this.pos = this.atEvent(e) // Translation if (this.translation) { @@ -40,7 +40,7 @@ DOTGRID.Cursor = function () { } if (this.last_pos.x != this.pos.x || this.last_pos.y != this.pos.y) { - DOTGRID.guide.update() + DOTGRID.renderer.update() } DOTGRID.interface.update() @@ -50,26 +50,26 @@ DOTGRID.Cursor = function () { } this.up = function (e) { - this.pos = this.pos_from_event(e) + this.pos = this.atEvent(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() } this.translate() DOTGRID.interface.update() - DOTGRID.guide.update() + DOTGRID.renderer.update() e.preventDefault() } this.alt = function (e) { - this.pos = this.pos_from_event(e) + this.pos = this.atEvent(e) - DOTGRID.tool.remove_segments_at(this.pos) + DOTGRID.tool.removeSegmentsAt(this.pos) e.preventDefault() setTimeout(() => { DOTGRID.tool.clear() }, 150) @@ -77,22 +77,21 @@ DOTGRID.Cursor = function () { // Position Mods - this.pos_from_event = function (e) { - return this.pos_snap(this.pos_relative({ x: e.clientX, y: e.clientY })) + this.atEvent = function (e) { + return this.snapPos(this.relativePos({ x: e.clientX, y: e.clientY })) } - this.pos_relative = function (pos) { + this.relativePos = function (pos) { return { - x: pos.x - DOTGRID.guide.el.offsetLeft, - y: pos.y - DOTGRID.guide.el.offsetTop + x: pos.x - DOTGRID.renderer.el.offsetLeft, + y: pos.y - DOTGRID.renderer.el.offsetTop } } - this.pos_snap = function (pos) { - const grid = DOTGRID.tool.settings.size.width / DOTGRID.grid_x + this.snapPos = function (pos) { return { - x: clamp(step(pos.x, grid), grid, DOTGRID.tool.settings.size.width), - y: clamp(step(pos.y, grid), grid, DOTGRID.tool.settings.size.height + grid) + x: clamp(step(pos.x, 15), 15, DOTGRID.tool.settings.size.width), + y: clamp(step(pos.y, 15), 15, DOTGRID.tool.settings.size.height) } } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 61bfcdb..968cb72 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -1,29 +1,33 @@ 'use strict' -function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { - this.controller = null - - const defaultTheme = { background: '#eee', f_high: '#000', f_med: '#999', f_low: '#ccc', f_inv: '#000', b_high: '#000', b_med: '#888', b_low: '#aaa', b_inv: '#ffb545' } - - this.theme = new Theme(defaultTheme) - this.history = new History() - - this.grid_x = grid_x - this.grid_y = grid_y - this.block_x = block_x - this.block_y = block_y +function Dotgrid (width, height) { + const defaultTheme = { + background: '#eee', + f_high: '#000', + f_med: '#999', + f_low: '#ccc', + f_inv: '#000', + b_high: '#000', + b_med: '#888', + b_low: '#aaa', + b_inv: '#ffb545' + } // ISU this.install = function (host) { - this.guide = new this.Guide() - this.tool = new this.Tool() - this.interface = new this.Interface() - this.renderer = new this.Renderer() - this.picker = new this.Picker() - this.cursor = new this.Cursor() - host.appendChild(this.guide.el) + this.theme = new Theme(defaultTheme) + this.history = new History() + this.manager = new Manager(this) + this.renderer = new Renderer(this) + this.tool = new Tool(this) + this.interface = new Interface(this) + this.picker = new Picker(this) + this.cursor = new Cursor(this) + host.appendChild(this.renderer.el) + + this.manager.install() this.interface.install(host) this.theme.install(host, this.update) } @@ -31,7 +35,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.start = function () { this.theme.start() this.tool.start() - this.guide.start() + this.renderer.start() this.interface.start() document.addEventListener('mousedown', function (e) { DOTGRID.cursor.down(e) }, false) @@ -50,15 +54,29 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.update = function () { DOTGRID.resize() + DOTGRID.manager.update() DOTGRID.interface.update() - DOTGRID.guide.update() + DOTGRID.renderer.update() + } + + this.clear = function () { + this.history.clear() + this.tool.reset() + this.reset() + this.renderer.update() + this.interface.update(true) + } + + this.reset = function () { + this.tool.clear() + this.update() } // File this.new = function () { - this.set_zoom(1.0) - this.set_size({ width: 300, height: 300 }) + this.setZoom(1.0) + this.setSize({ width: 300, height: 300 }) this.history.push(this.tool.layers) this.clear() } @@ -73,10 +91,25 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { fs.readFile(paths[0], 'utf-8', (err, data) => { if (err) { alert('An error ocurred reading the file :' + err.message); return } this.tool.replace(JSON.parse(data.toString().trim())) - this.guide.update() + this.renderer.update() }) } + this.save = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } + this.manager.toGRID(grab) + } + + this.export = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } + this.manager.toSVG(grab) + } + + this.render = function () { + if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return } + this.manager.toPNG({ width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 }, grab) + } + function grab (base64, name) { const link = document.createElement('a') link.setAttribute('href', base64) @@ -84,28 +117,16 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window })) } - this.save = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to save'); return } - - this.renderer.to_grid(grab) - } - - this.export = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to export'); return } - - this.renderer.to_svg(grab) - } - - this.render = function () { - if (DOTGRID.tool.length() < 1) { console.warn('Nothing to render'); return } - - const size = { width: DOTGRID.tool.settings.size.width * 2, height: DOTGRID.tool.settings.size.height * 2 } - this.renderer.to_png(size, grab) - } - // Basics - this.set_size = function (size = { width: 300, height: 300 }, ui = true, scale = 1) { + this.getSize = function () { + return { markers: { + w: parseInt(this.tool.settings.size.width / 15), + h: parseInt(this.tool.settings.size.height / 15) } + } + } + + this.setSize = function (size = { width: 300, height: 300 }, ui = true, scale = 1) { size = { width: clamp(step(size.width, 15), 105, 1080), height: clamp(step(size.height, 15), 120, 1080) } this.tool.settings.size.width = size.width @@ -113,25 +134,18 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { try { const win = require('electron').remote.getCurrentWindow() - win.setSize((size.width + 100) * scale, (size.height + 100 + (ui ? 10 : 0)) * scale, true) + win.setSize((size.width + 100) * scale, (size.height + 100) * scale, true) } catch (err) { console.log('No window') } - this.grid_x = size.width / 15 - this.grid_y = size.height / 15 - - this.grid_width = this.tool.settings.size.width / this.grid_x - this.grid_height = this.tool.settings.size.height / this.grid_y - - DOTGRID.guide.resize(size) - + this.renderer.resize(size) this.interface.update() - DOTGRID.guide.update() + this.renderer.update() } - this.set_zoom = function (scale) { - this.set_size({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale) + this.setZoom = function (scale) { + this.setSize({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale) try { webFrame.setZoomFactor(scale) @@ -142,42 +156,25 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { // Draw - this.reset = function () { - this.tool.clear() - this.update() - } - - this.clear = function () { - this.history.clear() - this.tool.reset() - this.reset() - DOTGRID.guide.update() - DOTGRID.interface.update(true) - } - this.resize = function () { const size = { width: step(window.innerWidth - 90, 15), height: step(window.innerHeight - 120, 15) } - if (size.width == DOTGRID.tool.settings.size.width && size.height == DOTGRID.tool.settings.size.height) { + if (size.width == this.tool.settings.size.width && size.height == this.tool.settings.size.height) { return } console.log(`Resized: ${size.width}x${size.height}`) - DOTGRID.tool.settings.size.width = size.width - DOTGRID.tool.settings.size.height = size.height + this.tool.settings.size.width = size.width + this.tool.settings.size.height = size.height - DOTGRID.grid_x = size.width / 15 - DOTGRID.grid_y = size.height / 15 - - DOTGRID.grid_width = DOTGRID.tool.settings.size.width / DOTGRID.grid_x - DOTGRID.grid_height = DOTGRID.tool.settings.size.height / DOTGRID.grid_y - - DOTGRID.guide.resize(size) + this.renderer.resize(size) document.title = `Dotgrid — ${size.width}x${size.height}` } + // Events + this.drag = function (e) { e.preventDefault() e.stopPropagation() @@ -193,38 +190,38 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { const data = e.target && e.target.result ? e.target.result : '' if (data && !isJson(data)) { return } DOTGRID.tool.replace(JSON.parse(`${data}`)) - DOTGRID.guide.update() + DOTGRID.renderer.update() } reader.readAsText(file) } this.copy = function (e) { - DOTGRID.guide.update() + DOTGRID.renderer.update() if (e.target !== this.picker.input) { e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer())) e.clipboardData.setData('text/plain', DOTGRID.tool.path()) - e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML) - e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML) + e.clipboardData.setData('text/html', DOTGRID.manager.svg_el.outerHTML) + e.clipboardData.setData('text/svg+xml', DOTGRID.manager.svg_el.outerHTML) e.preventDefault() } - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.cut = function (e) { - DOTGRID.guide.update() + DOTGRID.renderer.update() if (e.target !== this.picker.input) { e.clipboardData.setData('text/source', DOTGRID.tool.export(DOTGRID.tool.layer())) e.clipboardData.setData('text/plain', DOTGRID.tool.export(DOTGRID.tool.layer())) - e.clipboardData.setData('text/html', DOTGRID.renderer.svg_el.outerHTML) - e.clipboardData.setData('text/svg+xml', DOTGRID.renderer.svg_el.outerHTML) + e.clipboardData.setData('text/html', DOTGRID.manager.svg_el.outerHTML) + e.clipboardData.setData('text/svg+xml', DOTGRID.manager.svg_el.outerHTML) DOTGRID.tool.layers[DOTGRID.tool.index] = [] e.preventDefault() } - DOTGRID.guide.update() + DOTGRID.renderer.update() } this.paste = function (e) { @@ -237,7 +234,7 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { e.preventDefault() } - DOTGRID.guide.update() + DOTGRID.renderer.update() } } @@ -260,4 +257,4 @@ function isEqual (a, b) { return a && b && a.x == b.x && a.y == b.y } function clamp (v, min, max) { return v < min ? min : v > max ? max : v } function step (v, s) { return Math.round(v / s) * s } -const DOTGRID = new Dotgrid(300, 300, 20, 20, 4, 4) +const DOTGRID = new Dotgrid(300, 300) diff --git a/desktop/sources/scripts/generator.js b/desktop/sources/scripts/generator.js index 8e99a5f..410abe2 100644 --- a/desktop/sources/scripts/generator.js +++ b/desktop/sources/scripts/generator.js @@ -19,7 +19,7 @@ function Generator (layer, style) { // Rotate const center = { x: (DOTGRID.tool.settings.size.width / 2) + offset.x + (7.5), y: (DOTGRID.tool.settings.size.height / 2) + offset.y + 30 } - seg.vertices[k2] = rotate_point(seg.vertices[k2], center, angle) + seg.vertices[k2] = rotatePoint(seg.vertices[k2], center, angle) // Scale seg.vertices[k2].x *= scale @@ -40,7 +40,7 @@ function Generator (layer, style) { let vertex = vertices[id] let next = vertices[parseInt(id) + 1] - let after_next = vertices[parseInt(id) + 2] + let afterNext = vertices[parseInt(id) + 2] if (id == 0 && !prev || id == 0 && prev && (prev.x != vertex.x || prev.y != vertex.y)) { html += `M${vertex.x},${vertex.y} ` @@ -61,7 +61,7 @@ function Generator (layer, style) { let clock = mirror > 0 ? '1,1' : '1,0' html += this._arc(vertex, next, clock) } else if (type == 'bezier') { - html += this._bezier(next, after_next) + html += this._bezier(next, afterNext) skip = 1 } } @@ -109,20 +109,9 @@ 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 } function copy (data) { return data ? JSON.parse(JSON.stringify(data)) : [] } - function rotate_point (point, origin, angle) { angle = angle * Math.PI / 180.0; return { x: (Math.cos(angle) * (point.x - origin.x) - Math.sin(angle) * (point.y - origin.y) + origin.x).toFixed(1), y: (Math.sin(angle) * (point.x - origin.x) + Math.cos(angle) * (point.y - origin.y) + origin.y).toFixed(1) } } + function rotatePoint (point, origin, angle) { angle = angle * Math.PI / 180.0; return { x: (Math.cos(angle) * (point.x - origin.x) - Math.sin(angle) * (point.y - origin.y) + origin.x).toFixed(1), y: (Math.sin(angle) * (point.x - origin.x) + Math.cos(angle) * (point.y - origin.y) + origin.y).toFixed(1) } } } diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js deleted file mode 100644 index f00e48c..0000000 --- a/desktop/sources/scripts/guide.js +++ /dev/null @@ -1,276 +0,0 @@ -'use strict' - -DOTGRID.Guide = function () { - this.el = document.createElement('canvas') - this.el.id = 'guide' - this.el.width = 640 - this.el.height = 640 - this.el.style.width = '320px' - this.el.style.height = '320px' - this.showExtras = true - - this.scale = 2 - - this.start = function () { - this.clear() - this.update() - } - - this.update = function (force = false) { - this.clear() - - this.el.getContext('2d').restore() - - this.drawMirror() - this.drawRulers() - - if (DOTGRID.tool.index == 2) { this.drawMarkers(); this.drawVertices() } - 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.drawMarkers(); this.drawVertices() } - 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.drawMarkers(); this.drawVertices() } - this.drawPath(new Generator(DOTGRID.tool.layers[0], DOTGRID.tool.styles[0]).toString({ x: 0, y: 0 }, this.scale), DOTGRID.tool.styles[0]) - - this.drawHandles() - this.drawTranslation() - this.drawCursor() - this.drawPreview() - } - - this.clear = function () { - this.el.getContext('2d').clearRect(0, 0, this.el.width * this.scale, this.el.height * this.scale) - } - - this.toggle = function () { - this.showExtras = !this.showExtras - this.update() - DOTGRID.interface.update(true) - } - - this.resize = function (size) { - const offset = 15 - this.el.width = (size.width + offset) * this.scale - this.el.height = (size.height + (offset * 2)) * this.scale - this.el.style.width = (size.width + offset) + 'px' - this.el.style.height = (size.height + (offset * 2)) + 'px' - - this.update() - } - - this.drawMirror = function () { - if (!this.showExtras) { 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) } - - if (DOTGRID.tool.style().mirror_style === 1 || DOTGRID.tool.style().mirror_style === 3) { - 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) { - this.drawRule({ x: DOTGRID.grid_width * 2, y: middle.y }, { x: (DOTGRID.tool.settings.size.width + DOTGRID.grid_width) * 2, y: middle.y }) - } - } - - this.drawHandles = function () { - if (!this.showExtras) { return } - - for (const segment_id in DOTGRID.tool.layer()) { - const segment = DOTGRID.tool.layer()[segment_id] - for (const vertex_id in segment.vertices) { - const vertex = segment.vertices[vertex_id] - this.drawHandle(vertex) - } - } - } - - this.drawVertices = function () { - for (const id in DOTGRID.tool.vertices) { - this.drawVertex(DOTGRID.tool.vertices[id]) - } - } - - this.drawMarkers = function () { - if (!this.showExtras) { return } - - const cursor = { x: parseInt(DOTGRID.cursor.pos.x / DOTGRID.grid_width), y: parseInt(DOTGRID.cursor.pos.y / DOTGRID.grid_width) } - - for (let x = DOTGRID.grid_x - 1; x >= 0; x--) { - for (let y = DOTGRID.grid_y; y >= 0; y--) { - let is_step = x % DOTGRID.block_x == 0 && y % DOTGRID.block_y == 0 - // Color - 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 } - - this.drawMarker({ - x: parseInt(x * DOTGRID.grid_width) + DOTGRID.grid_width, - y: parseInt(y * DOTGRID.grid_height) + DOTGRID.grid_height - }, is_step ? 2.5 : 1.5, color) - } - } - } - - 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.drawRuler = function (pos) { - let offset = 15 * this.scale - let top = offset - let bottom = (DOTGRID.tool.settings.size.height * this.scale) + offset - let left = offset - let right = (DOTGRID.tool.settings.size.width * this.scale) - - // Translation - this.drawRule({ x: pos.x * this.scale, y: top }, { x: pos.x * this.scale, y: bottom }) - this.drawRule({ x: left, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale }) - } - - this.drawRulers = function () { - if (!DOTGRID.cursor.translation) { return } - - let ctx = this.el.getContext('2d') - - this.drawRuler(DOTGRID.cursor.translation.to) - - ctx.setLineDash([]) - ctx.restore() - } - - 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 } - if (operation == 'close') { return } - - let path = new Generator([{ vertices: DOTGRID.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2) - let style = { - color: DOTGRID.theme.active.f_med, - thickness: 2, - strokeLinecap: 'round', - strokeLinejoin: 'round', - strokeLineDash: [5, 15] - } - this.drawPath(path, style) - - ctx.setLineDash([]) - ctx.restore() - } - - 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 } -} diff --git a/desktop/sources/scripts/interface.js b/desktop/sources/scripts/interface.js index ea50d46..51bdfff 100644 --- a/desktop/sources/scripts/interface.js +++ b/desktop/sources/scripts/interface.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Interface = function () { +function Interface (dotgrid) { this.el = document.createElement('div') this.el.id = 'interface' @@ -65,80 +65,80 @@ DOTGRID.Interface = function () { } } this.menu_el.innerHTML = html - this.menu_el.appendChild(DOTGRID.picker.el) + this.menu_el.appendChild(dotgrid.picker.el) } this.over = function (type, name) { - DOTGRID.cursor.operation = {} - DOTGRID.cursor.operation[type] = name + dotgrid.cursor.operation = {} + dotgrid.cursor.operation[type] = name this.update(true) - DOTGRID.guide.update(true) + dotgrid.renderer.update(true) } this.out = function (type, name) { - DOTGRID.cursor.operation = '' - DOTGRID.guide.update(true) + dotgrid.cursor.operation = '' + dotgrid.renderer.update(true) } this.up = function (type, name) { - if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return } + if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } this.update(true) - DOTGRID.guide.update(true) + dotgrid.renderer.update(true) } this.down = function (type, name) { - if (!DOTGRID.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, DOTGRID.tool); return } + if (!dotgrid.tool[type]) { console.warn(`Unknown option(type): ${type}.${name}`, dotgrid.tool); return } - DOTGRID.tool[type](name) + dotgrid.tool[type](name) this.update(true) - DOTGRID.guide.update(true) + dotgrid.renderer.update(true) } this.prev_operation = null this.update = function (force = false, id) { - if (this.prev_operation == DOTGRID.cursor.operation && force == false) { return } + if (this.prev_operation == dotgrid.cursor.operation && force == false) { return } - let multi_vertices = null - let segments = DOTGRID.tool.layer() - const sum_segments = DOTGRID.tool.length() + let multiVertices = null + let segments = dotgrid.tool.layer() + const sumSegments = dotgrid.tool.length() for (const i in segments) { - if (segments[i].vertices.length > 2) { multi_vertices = true; break } + if (segments[i].vertices.length > 2) { multiVertices = true; break } } - document.getElementById('option_line').className.baseVal = !DOTGRID.tool.canCast('line') ? '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.canCast('arc_r') ? 'icon inactive' : 'icon' - document.getElementById('option_bezier').className.baseVal = !DOTGRID.tool.canCast('bezier') ? 'icon inactive' : 'icon' - document.getElementById('option_close').className.baseVal = !DOTGRID.tool.canCast('close') ? '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.canCast('arc_c') ? '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.canCast('bezier') ? '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_linecap').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_linejoin').className.baseVal = DOTGRID.tool.layer().length < 1 || !multi_vertices ? 'icon inactive' : 'icon' - document.getElementById('option_mirror').className.baseVal = DOTGRID.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_fill').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_linejoin').className.baseVal = dotgrid.tool.layer().length < 1 || !multiVertices ? 'icon inactive' : 'icon' + document.getElementById('option_mirror').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' + document.getElementById('option_fill').className.baseVal = dotgrid.tool.layer().length < 1 ? 'icon inactive' : 'icon' - document.getElementById('option_color').children[0].style.fill = DOTGRID.tool.style().color - document.getElementById('option_color').children[0].style.stroke = DOTGRID.tool.style().color + document.getElementById('option_color').children[0].style.fill = dotgrid.tool.style().color + document.getElementById('option_color').children[0].style.stroke = dotgrid.tool.style().color document.getElementById('option_color').className.baseVal = 'icon' // Source - document.getElementById('option_save').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_save').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source' + document.getElementById('option_export').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source' + document.getElementById('option_render').className.baseVal = sumSegments < 1 ? 'icon inactive source' : 'icon source' - document.getElementById('option_grid').className.baseVal = DOTGRID.guide.showExtras ? 'icon inactive source' : 'icon source' + document.getElementById('option_grid').className.baseVal = dotgrid.renderer.showExtras ? 'icon inactive source' : 'icon source' // Grid - 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 ') } + if (dotgrid.renderer.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 - 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 ') } - this.prev_operation = DOTGRID.cursor.operation + this.prev_operation = dotgrid.cursor.operation } this.toggle = function () { diff --git a/desktop/sources/scripts/lib/controller.js b/desktop/sources/scripts/lib/controller.js index 1448b26..546e29d 100644 --- a/desktop/sources/scripts/lib/controller.js +++ b/desktop/sources/scripts/lib/controller.js @@ -62,18 +62,18 @@ function Controller () { } this.generate_svg = function (m) { - let svg_html = '' + let html = '' for (const id in this.layout) { let key = this.layout[id] let acc = this.accelerator_for_key(key.name, m) - svg_html += `` - svg_html += `` - svg_html += `${key.name.toUpperCase()}` - svg_html += acc && acc.basic ? `${acc.basic}` : '' - svg_html += acc && acc.ctrl ? `${acc.ctrl}` : '' + html += `` + html += `` + html += `${key.name.toUpperCase()}` + html += acc && acc.basic ? `${acc.basic}` : '' + html += acc && acc.ctrl ? `${acc.ctrl}` : '' } - return `${svg_html}` + return `${html}` } this.documentation = function () { diff --git a/desktop/sources/scripts/manager.js b/desktop/sources/scripts/manager.js new file mode 100644 index 0000000..01860f9 --- /dev/null +++ b/desktop/sources/scripts/manager.js @@ -0,0 +1,82 @@ +'use strict' + +// Manages the SVG file + +function Manager (dotgrid) { + // Create SVG parts + this.el = document.createElementNS('http://www.w3.org/2000/svg', 'svg') + this.el.setAttribute('xmlns', 'http://www.w3.org/2000/svg') + this.el.setAttribute('baseProfile', 'full') + this.el.setAttribute('version', '1.1') + this.el.style.fill = 'none' + + this.layers = [] + + this.install = function () { + this.el.appendChild(this.layers[2] = document.createElementNS('http://www.w3.org/2000/svg', 'path')) + this.el.appendChild(this.layers[1] = document.createElementNS('http://www.w3.org/2000/svg', 'path')) + this.el.appendChild(this.layers[0] = document.createElementNS('http://www.w3.org/2000/svg', 'path')) + } + + this.update = function () { + this.el.setAttribute('width', (DOTGRID.tool.settings.size.width + 15) + 'px') + this.el.setAttribute('height', (DOTGRID.tool.settings.size.height + 15) + 'px') + this.el.style.width = (DOTGRID.tool.settings.size.width + 15) + this.el.style.height = DOTGRID.tool.settings.size.height + 15 + + const styles = DOTGRID.tool.styles + const paths = DOTGRID.tool.paths() + + for (const id in this.layers) { + const style = styles[id] + const path = paths[id] + const layer = this.layers[id] + layer.style.strokeWidth = style.thickness + layer.style.strokeLinecap = style.strokeLinecap + layer.style.strokeLinejoin = style.strokeLinejoin + layer.style.stroke = style.color + layer.style.fill = style.fill + layer.style.transform = style.transform + layer.setAttribute('d', paths[id]) + } + } + + this.svg64 = function () { + let xml = new XMLSerializer().serializeToString(this.el) + let svg64 = btoa(xml) + let b64Start = 'data:image/svg+xml;base64,' + return b64Start + svg64 + } + + // Exporters + + this.toPNG = function (size = DOTGRID.tool.settings.size, callback) { + this.update() + + let image64 = this.svg64() + let img = new Image() + let canvas = document.createElement('canvas') + canvas.width = (size.width) * 2 + canvas.height = (size.height) * 2 + img.onload = function () { + canvas.getContext('2d').drawImage(img, 0, 0, (size.width) * 2, (size.height) * 2) + callback(canvas.toDataURL('image/png'), 'export.png') + } + img.src = image64 + } + + this.toSVG = function (callback) { + this.update() + + const image64 = this.svg64() + callback(image64, 'export.svg') + } + + this.toGRID = function (callback) { + this.update() + + const text = DOTGRID.tool.export() + const file = new Blob([text], { type: 'text/plain' }) + callback(URL.createObjectURL(file), 'export.grid') + } +} diff --git a/desktop/sources/scripts/picker.js b/desktop/sources/scripts/picker.js index 87319ed..1647597 100644 --- a/desktop/sources/scripts/picker.js +++ b/desktop/sources/scripts/picker.js @@ -1,6 +1,6 @@ 'use strict' -DOTGRID.Picker = function () { +function Picker (dotgrid) { this.memory = '' this.el = document.createElement('div') this.el.id = 'picker' @@ -46,7 +46,7 @@ DOTGRID.Picker = function () { try { DOTGRID.controller.set() } catch (err) { console.log('No controller') } - setTimeout(() => { DOTGRID.interface.update(true); DOTGRID.guide.update() }, 250) + setTimeout(() => { DOTGRID.interface.update(true); DOTGRID.renderer.update() }, 250) } this.validate = function () { @@ -61,7 +61,7 @@ DOTGRID.Picker = function () { } this.listen = function (e, is_down = false) { - if (is_down && !is_color_char(e.key)) { + if (is_down && !isColorChar(e.key)) { e.preventDefault() return } @@ -90,7 +90,7 @@ DOTGRID.Picker = function () { return re.test(val) } - function is_color_char (val) { + function isColorChar (val) { const re = /[0-9A-Fa-f]/g return re.test(val) } diff --git a/desktop/sources/scripts/renderer.js b/desktop/sources/scripts/renderer.js index dda0e17..ee95abb 100644 --- a/desktop/sources/scripts/renderer.js +++ b/desktop/sources/scripts/renderer.js @@ -1,89 +1,267 @@ 'use strict' -DOTGRID.Renderer = function () { - // Create SVG parts - this.svg_el = document.createElementNS('http://www.w3.org/2000/svg', 'svg') - this.svg_el.setAttribute('xmlns', 'http://www.w3.org/2000/svg') - this.svg_el.setAttribute('baseProfile', 'full') - this.svg_el.setAttribute('version', '1.1') - this.svg_el.style.fill = 'none' +function Renderer (dotgrid) { + this.el = document.createElement('canvas') + this.el.id = 'guide' + this.el.width = 640 + this.el.height = 640 + this.el.style.width = '320px' + this.el.style.height = '320px' + this.context = this.el.getContext('2d') + this.showExtras = true - this.layer_1 = document.createElementNS('http://www.w3.org/2000/svg', 'path') - this.layer_2 = document.createElementNS('http://www.w3.org/2000/svg', 'path') - this.layer_3 = document.createElementNS('http://www.w3.org/2000/svg', 'path') + this.scale = 2 - this.svg_el.appendChild(this.layer_3) - this.svg_el.appendChild(this.layer_2) - this.svg_el.appendChild(this.layer_1) - - this.update = function () { - this.svg_el.setAttribute('width', (DOTGRID.tool.settings.size.width - (5)) + 'px') - this.svg_el.setAttribute('height', (DOTGRID.tool.settings.size.height + (10)) + 'px') - this.svg_el.style.width = (DOTGRID.tool.settings.size.width - (5)) - this.svg_el.style.height = DOTGRID.tool.settings.size.height + (10) - this.svg_el.style.strokeWidth = DOTGRID.tool.style().thickness - - let styles = DOTGRID.tool.styles - let paths = DOTGRID.tool.paths() - - this.layer_1.style.strokeWidth = styles[0].thickness - this.layer_1.style.strokeLinecap = styles[0].strokeLinecap - this.layer_1.style.strokeLinejoin = styles[0].strokeLinejoin - this.layer_1.style.stroke = styles[0].color - this.layer_1.style.fill = styles[0].fill - this.layer_1.setAttribute('d', paths[0]) - - this.layer_2.style.strokeWidth = styles[1].thickness - this.layer_2.style.strokeLinecap = styles[1].strokeLinecap - this.layer_2.style.strokeLinejoin = styles[1].strokeLinejoin - this.layer_2.style.stroke = styles[1].color - this.layer_2.style.fill = styles[1].fill - this.layer_2.setAttribute('d', paths[1]) - - this.layer_3.style.strokeWidth = styles[2].thickness - this.layer_3.style.strokeLinecap = styles[2].strokeLinecap - this.layer_3.style.strokeLinejoin = styles[2].strokeLinejoin - this.layer_3.style.stroke = styles[2].color - this.layer_3.style.fill = styles[2].fill - this.layer_3.setAttribute('d', paths[2]) - } - - this.svg64 = function () { + this.start = function () { this.update() - - let xml = new XMLSerializer().serializeToString(this.svg_el) - let svg64 = btoa(xml) - let b64Start = 'data:image/svg+xml;base64,' - return b64Start + svg64 } - this.to_png = function (size = DOTGRID.tool.settings.size, callback) { - let image64 = this.svg64() - let img = new Image() - - let canvas = document.createElement('canvas') - - canvas.width = (size.width) * 2 - canvas.height = (size.height + 30) * 2 - - let ctx = canvas.getContext('2d') - - img.onload = function () { - ctx.drawImage(img, 0, 0, (size.width) * 2, (size.height + 30) * 2) - let data = canvas.toDataURL('image/png') - callback(data, 'export.png') + this.update = function (force = false) { + dotgrid.manager.update() + let render = new Image() + render.onload = () => { + this.draw(render) } - img.src = image64 + render.src = dotgrid.manager.svg64() } - this.to_svg = function (callback) { - const image64 = this.svg64() - callback(image64, 'export.svg') + this.draw = function (render) { + this.clear() + this.drawMirror() + this.drawRulers() + this.drawGrid() + this.drawRender(render) // + this.drawVertices() + this.drawHandles() + this.drawTranslation() + this.drawCursor() + this.drawPreview() } - this.to_grid = function (callback) { - const text = DOTGRID.tool.export() - const file = new Blob([text], { type: 'text/plain' }) - callback(URL.createObjectURL(file), 'export.grid') + this.clear = function () { + this.context.clearRect(0, 0, this.el.width * this.scale, this.el.height * this.scale) } + + this.toggle = function () { + this.showExtras = !this.showExtras + this.update() + dotgrid.interface.update(true) + } + + this.resize = function (size) { + const pad = 15 + this.el.width = (size.width + pad) * this.scale + this.el.height = (size.height + pad) * this.scale + this.el.style.width = (size.width + pad) + 'px' + this.el.style.height = (size.height + pad) + 'px' + + this.update() + } + + // Collections + + this.drawMirror = function () { + if (!this.showExtras) { return } + + if (dotgrid.tool.style().mirror_style === 0) { return } + + const middle = { x: dotgrid.tool.settings.size.width + 15, y: dotgrid.tool.settings.size.height + (this.scale * 15) } + + if (dotgrid.tool.style().mirror_style === 1 || dotgrid.tool.style().mirror_style === 3) { + this.drawRule({ x: middle.x, y: 15 * this.scale }, { x: middle.x, y: (dotgrid.tool.settings.size.height + 15) * this.scale }) + } + if (dotgrid.tool.style().mirror_style === 2 || dotgrid.tool.style().mirror_style === 3) { + this.drawRule({ x: 15 * this.scale, y: middle.y }, { x: (dotgrid.tool.settings.size.width + 15) * this.scale, y: middle.y }) + } + } + + this.drawHandles = function () { + if (!this.showExtras) { return } + + for (const segmentId in dotgrid.tool.layer()) { + const segment = dotgrid.tool.layer()[segmentId] + for (const vertexId in segment.vertices) { + const vertex = segment.vertices[vertexId] + this.drawHandle(vertex) + } + } + } + + this.drawVertices = function () { + for (const id in dotgrid.tool.vertices) { + this.drawVertex(dotgrid.tool.vertices[id]) + } + } + + this.drawGrid = function () { + if (!this.showExtras) { return } + + const cursor = { x: parseInt(dotgrid.cursor.pos.x / 15), y: parseInt(dotgrid.cursor.pos.y / 15) } + const markers = dotgrid.getSize().markers + + for (let x = markers.w - 1; x >= 0; x--) { + for (let y = markers.h; y >= 0; y--) { + let is_step = x % 4 == 0 && y % 4 == 0 + // Color + let color = is_step ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low + if ((y == 0 || y == markers.h) && cursor.x == x + 1) { color = dotgrid.theme.active.b_high } else if ((x == 0 || x == markers.w - 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.drawMarker({ + x: parseInt(x * 15) + 15, + y: parseInt(y * 15) + 15 + }, is_step ? 2.5 : 1.5, color) + } + } + } + + this.drawRulers = function () { + if (!dotgrid.cursor.translation) { return } + + const pos = dotgrid.cursor.translation.to + const bottom = (dotgrid.tool.settings.size.height * this.scale) + const right = (dotgrid.tool.settings.size.width * this.scale) + + this.drawRule({ x: pos.x * this.scale, y: 0 }, { x: pos.x * this.scale, y: bottom }) + this.drawRule({ x: 0, y: pos.y * this.scale }, { x: right, y: pos.y * this.scale }) + } + + this.drawPreview = function () { + let operation = dotgrid.cursor.operation && dotgrid.cursor.operation.cast ? dotgrid.cursor.operation.cast : null + + if (!dotgrid.tool.canCast(operation)) { return } + if (operation == 'close') { return } + + let path = new Generator([{ vertices: dotgrid.tool.vertices, type: operation }]).toString({ x: 0, y: 0 }, 2) + let style = { + color: dotgrid.theme.active.f_med, + thickness: 2, + strokeLinecap: 'round', + strokeLinejoin: 'round', + strokeLineDash: [5, 15] + } + this.drawPath(path, style) + } + + // 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 (render) { + this.context.drawImage(render, 0, 0, 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 } } diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index a4d8e04..57cba69 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -1,21 +1,21 @@ 'use strict' -DOTGRID.Tool = function () { +function Tool (dotgrid) { this.index = 0 this.settings = { size: { width: 300, height: 300 } } this.layers = [[], [], []] this.styles = [ - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0 }, - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0 }, - { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0 } + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform: 'rotate(45)' }, + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#0f0', fill: 'none', mirror_style: 0, transform: 'rotate(45)' }, + { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#00f', fill: 'none', mirror_style: 0, transform: 'rotate(45)' } ] this.vertices = [] 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[1].color = DOTGRID.theme.active.f_med - this.styles[2].color = DOTGRID.theme.active.f_low + this.styles[0].color = dotgrid.theme.active.f_high + this.styles[1].color = dotgrid.theme.active.f_med + 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.guide.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + dotgrid.interface.update(true) } this.undo = function () { - this.layers = DOTGRID.history.prev() - DOTGRID.guide.update() - DOTGRID.interface.update(true) + this.layers = dotgrid.history.prev() + dotgrid.renderer.update() + dotgrid.interface.update(true) } this.redo = function () { - this.layers = DOTGRID.history.next() - DOTGRID.guide.update() - DOTGRID.interface.update(true) + this.layers = dotgrid.history.next() + dotgrid.renderer.update() + 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.guide.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + 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.set_size({ 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.guide.update() - DOTGRID.interface.update(true) - DOTGRID.history.push(this.layers) + dotgrid.renderer.update() + dotgrid.interface.update(true) + 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.guide.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + dotgrid.interface.update(true) } - this.remove_segments_at = function (pos) { - for (const segment_id in this.layer()) { - let segment = this.layer()[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] + this.removeSegmentsAt = function (pos) { + for (const segmentId in this.layer()) { + let segment = this.layer()[segmentId] + for (const vertexId in segment.vertices) { + 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.guide.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + 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) { - let segment = source[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] + for (const segmentId in source) { + let segment = source[segmentId] + for (const vertexId in segment.vertices) { + 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) { - for (const segment_id in this.layer()) { - let segment = this.layer()[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] + this.vertexAt = function (pos) { + for (const segmentId in this.layer()) { + let segment = this.layer()[segmentId] + for (const vertexId in segment.vertices) { + 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) { - let append_target = this.can_append({ type: type, vertices: vertices }) + this.addSegment = function (type, 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.guide.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + 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.guide.update() + dotgrid.interface.update(true) + dotgrid.renderer.update() } this.misc = function (type) { - DOTGRID.picker.start() + dotgrid.picker.start() } this.source = function (type) { - if (type == 'grid') { DOTGRID.guide.toggle() } - if (type == 'screen') { app.toggle_fullscreen() } + if (type == 'grid') { dotgrid.renderer.toggle() } + if (type == 'screen') { app.toggleFullscreen() } - if (type == 'open') { DOTGRID.open() } - if (type == 'save') { DOTGRID.save() } - if (type == 'render') { DOTGRID.render() } - if (type == 'export') { DOTGRID.export() } + if (type == 'open') { dotgrid.open() } + if (type == 'save') { dotgrid.save() } + if (type == 'render') { dotgrid.render() } + 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 l2 = new Generator(DOTGRID.tool.layers[1], DOTGRID.tool.styles[1]).toString({ x: -10, y: -10 }, 1) - let l3 = new Generator(DOTGRID.tool.layers[2], DOTGRID.tool.styles[2]).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: 0, y: 0 }, 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()) { - let segment = this.layer()[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] + for (const segmentId in this.layer()) { + let segment = this.layer()[segmentId] + for (const vertexId in segment.vertices) { + 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.guide.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) { - let vertex = segment.vertices[vertex_id] - segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y } + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] + 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.guide.update() + dotgrid.renderer.update() } - this.translate_layer = function (a, b) { - console.log(a, b) + this.translateLayer = function (a, b) { const offset = { x: a.x - b.x, y: a.y - b.y } - for (const segment_id in this.layer()) { - let segment = this.layer()[segment_id] - for (const vertex_id in segment.vertices) { - let vertex = segment.vertices[vertex_id] - segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y } + for (const segmentId in this.layer()) { + let segment = this.layer()[segmentId] + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] + 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.guide.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) { - let vertex = segment.vertices[vertex_id] - segment.vertices[vertex_id] = { x: vertex.x - offset.x, y: vertex.y - offset.y } + for (const vertexId in segment.vertices) { + let vertex = segment.vertices[vertexId] + 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.guide.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.guide.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.guide.update() - DOTGRID.interface.update(true) + dotgrid.renderer.update() + 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)) : [] } diff --git a/index.html b/index.html index 737d621..0589ac7 100644 --- a/index.html +++ b/index.html @@ -21,10 +21,11 @@ + - - + + diff --git a/web/events.js b/web/events.js index 4924b79..b4bcf26 100644 --- a/web/events.js +++ b/web/events.js @@ -12,14 +12,14 @@ 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 == "2"){ DOTGRID.tool.select_layer(1); e.preventDefault(); } - if(ch == "3"){ DOTGRID.tool.select_layer(2); e.preventDefault(); } + if(ch == "1"){ DOTGRID.tool.selectLayer(0); e.preventDefault(); } + if(ch == "2"){ DOTGRID.tool.selectLayer(1); e.preventDefault(); } + if(ch == "3"){ DOTGRID.tool.selectLayer(2); e.preventDefault(); } - if(ch == "h"){ DOTGRID.guide.toggle(); e.preventDefault(); } + if(ch == "h"){ DOTGRID.renderer.toggle(); e.preventDefault(); } if(ch == "?"){ DOTGRID.reset(); DOTGRID.theme.reset(); e.preventDefault(); } if(ch == "a"){ DOTGRID.tool.cast("line"); 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(); } } \ No newline at end of file