From c0af5e74293bbb9e684cb1bba33ea0ffa5af6cde Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 22 Dec 2018 10:07:46 +1200 Subject: [PATCH] Improved controls --- desktop/sources/index.html | 7 +- desktop/sources/scripts/dotgrid.js | 5 +- desktop/sources/scripts/guide.js | 18 ++- desktop/sources/scripts/lib/theme.js | 163 +++++++++++++-------------- 4 files changed, 102 insertions(+), 91 deletions(-) diff --git a/desktop/sources/index.html b/desktop/sources/index.html index cd8728d..20d88c6 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -88,10 +88,9 @@ 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","Theme","Noir",() => { DOTGRID.theme.noir(); },"CmdOrCtrl+Shift+1"); - DOTGRID.controller.add("default","Theme","Pale",() => { DOTGRID.theme.pale(); },"CmdOrCtrl+Shift+2"); - DOTGRID.controller.add("default","Theme","Invert",() => { DOTGRID.theme.invert(); },"CmdOrCtrl+Shift+I"); - DOTGRID.controller.add("default","Theme","Install",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); }); + 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"); diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index c25c231..b1bb3d5 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -2,7 +2,10 @@ function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) { this.controller = null - this.theme = new Theme() + + 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 diff --git a/desktop/sources/scripts/guide.js b/desktop/sources/scripts/guide.js index 633dc72..7a7b015 100644 --- a/desktop/sources/scripts/guide.js +++ b/desktop/sources/scripts/guide.js @@ -21,6 +21,7 @@ DOTGRID.Guide = function () { this.el.getContext('2d').restore() + this.draw_mirror() this.draw_rulers() if (DOTGRID.tool.index == 2) { this.draw_markers(); this.draw_vertices() } @@ -55,6 +56,19 @@ DOTGRID.Guide = function () { this.update() } + this.draw_mirror = function () { + 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.draw_rule({ 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.draw_rule({ x: DOTGRID.grid_width * 2, y: middle.y }, { x: (DOTGRID.tool.settings.size.width + DOTGRID.grid_width) * 2, y: middle.y }) + } + } + this.draw_handles = function () { if (!this.show_extras) { return } @@ -197,6 +211,8 @@ DOTGRID.Guide = function () { this.draw_translation = function () { if (!DOTGRID.cursor.translation) { return } + console.log(DOTGRID.cursor.translation) + let ctx = this.el.getContext('2d') ctx.beginPath() @@ -204,7 +220,7 @@ DOTGRID.Guide = function () { 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.theme.active.f_low + 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() diff --git a/desktop/sources/scripts/lib/theme.js b/desktop/sources/scripts/lib/theme.js index 4125f35..78cbff0 100644 --- a/desktop/sources/scripts/lib/theme.js +++ b/desktop/sources/scripts/lib/theme.js @@ -1,20 +1,13 @@ 'use strict' -function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#ccc', f_low: '#999', f_inv: '#fff', b_high: '#888', b_med: '#666', b_low: '#444', b_inv: '#000' }) { +function Theme (_default) { const themer = this + this.active = _default + this.el = document.createElement('style') this.el.type = 'text/css' - this.callback - this.active - - this.collection = { - default: default_theme, - noir: { background: '#222', f_high: '#fff', f_med: '#ccc', f_low: '#999', f_inv: '#fff', b_high: '#888', b_med: '#666', b_low: '#444', b_inv: '#000' }, - pale: { background: '#e1e1e1', f_high: '#000', f_med: '#777', f_low: '#fff', f_inv: '#000', b_high: '#eee', b_med: '#999', b_low: '#ccc', b_inv: '#fff' } - } - this.install = function (host = document.body, callback) { console.log('Theme', 'Installing..') host.appendChild(this.el) @@ -23,51 +16,91 @@ function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#c this.start = function () { console.log('Theme', 'Starting..') - const storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default - this.load(!storage.background ? this.collection.default : storage) + if (isJson(localStorage.theme)) { + const storage = JSON.parse(localStorage.theme) + if (validate(storage)) { + console.log('Theme', 'Found theme in localStorage!') + this.load(storage) + return + } + } + this.load(_default) } - this.save = function (theme) { - console.log('Theme', 'Saving..') - this.active = theme + this.load = function (data) { + const theme = parse(data) + if (!validate(theme)) { console.warn('Theme', 'Not a theme', theme); return } + console.log('Theme', `Loading theme with background ${theme.background}.`) + this.el.innerHTML = `:root { --background: ${theme.background}; --f_high: ${theme.f_high}; --f_med: ${theme.f_med}; --f_low: ${theme.f_low}; --f_inv: ${theme.f_inv}; --b_high: ${theme.b_high}; --b_med: ${theme.b_med}; --b_low: ${theme.b_low}; --b_inv: ${theme.b_inv}; }` localStorage.setItem('theme', JSON.stringify(theme)) - } - - this.load = function (theme, fall_back = this.collection.noir) { - if (!theme || !theme.background) { console.warn('Theme', 'Not a theme', theme); return } - - this.save(theme) - this.apply(theme) - + this.active = theme if (this.callback) { this.callback() } } - this.apply = function (theme) { - this.el.innerHTML = ` - :root { - --background: ${theme.background}; - --f_high: ${theme.f_high}; - --f_med: ${theme.f_med}; - --f_low: ${theme.f_low}; - --f_inv: ${theme.f_inv}; - --b_high: ${theme.b_high}; - --b_med: ${theme.b_med}; - --b_low: ${theme.b_low}; - --b_inv: ${theme.b_inv}; - }` + this.reset = function () { + this.load(_default) } - this.parse = function (any) { - if (any && any.background) { return any } else if (any && any.data) { return any.data } else if (any && is_json(any)) { return JSON.parse(any) } else if (any && is_html(any)) { return this.extract(any) } - + function parse (any) { + if (any && any.background) { return any } else if (any && any.data) { return any.data } else if (any && isJson(any)) { return JSON.parse(any) } else if (any && isHtml(any)) { return extract(any) } return null } - this.extract = function (text) { - const svg = new DOMParser().parseFromString(text, 'text/xml') + // Drag + this.drag = function (e) { + e.stopPropagation() + e.preventDefault() + e.dataTransfer.dropEffect = 'copy' + } + + this.drop = function (e) { + e.preventDefault() + e.stopPropagation() + const file = e.dataTransfer.files[0] + if (!file || !file.name) { console.warn('Theme', 'Unnamed file.'); return } + if (file.name.indexOf('.thm') < 0 && file.name.indexOf('.svg') < 0) { console.warn('Theme', 'Skipped, not a theme'); return } + const reader = new FileReader() + reader.onload = function (e) { + themer.load(e.target.result) + } + reader.readAsText(file) + } + + this.open = function () { + const fs = require('fs') + const { dialog, app } = require('electron').remote + let paths = dialog.showOpenDialog(app.win, { properties: ['openFile'], filters: [{ name: 'Themes', extensions: ['svg'] }] }) + if (!paths) { console.log('Nothing to load') } + fs.readFile(paths[0], 'utf8', function (err, data) { + if (err) throw err + themer.load(data) + }) + } + + window.addEventListener('dragover', this.drag) + window.addEventListener('drop', this.drop) + + // Helpers + + function validate (json) { + if (!json) { return false } + if (!json.background) { return false } + if (!json.f_high) { return false } + if (!json.f_med) { return false } + if (!json.f_low) { return false } + if (!json.f_inv) { return false } + if (!json.b_high) { return false } + if (!json.b_med) { return false } + if (!json.b_low) { return false } + if (!json.b_inv) { return false } + return true + } + + function extract (text) { + const svg = new DOMParser().parseFromString(text, 'text/xml') try { return { 'background': svg.getElementById('background').getAttribute('fill'), @@ -85,51 +118,11 @@ function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#c } } - this.reset = function () { - this.load(this.collection.default) + function isJson (text) { + try { JSON.parse(text); return true } catch (error) { return false } } - // Defaults - - this.pale = function () { - this.load(this.collection.pale) + function isHtml (text) { + try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false } } - - this.noir = function () { - this.load(this.collection.noir) - } - - this.invert = function () { - this.load(this.active.background == this.collection.noir.background ? this.collection.pale : this.collection.noir) - } - - // Drag - - this.drag = function (e) { - e.stopPropagation() - e.preventDefault() - e.dataTransfer.dropEffect = 'copy' - } - - this.drop = function (e) { - e.preventDefault() - e.stopPropagation() - - const file = e.dataTransfer.files[0] - - if (!file || !file.name) { console.warn('Theme', 'Unnamed file.'); return } - if (file.name.indexOf('.thm') < 0 && file.name.indexOf('.svg') < 0) { console.warn('Theme', 'Skipped, not a theme'); return } - - const reader = new FileReader() - reader.onload = function (e) { - themer.load(themer.parse(e.target.result)) - } - reader.readAsText(file) - } - - window.addEventListener('dragover', this.drag) - window.addEventListener('drop', this.drop) - - function is_json (text) { try { JSON.parse(text); return true } catch (error) { return false } } - function is_html (text) { try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false } } }