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 += `