Improved controls
This commit is contained in:
parent
5360cca5df
commit
c0af5e7429
@ -88,10 +88,9 @@
|
|||||||
DOTGRID.controller.add("default","View","Color Picker",() => { DOTGRID.picker.start(); },"G");
|
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.guide.toggle(); },"H");
|
||||||
|
|
||||||
DOTGRID.controller.add("default","Theme","Noir",() => { DOTGRID.theme.noir(); },"CmdOrCtrl+Shift+1");
|
DOTGRID.controller.add("default","Theme","Open Theme",() => { DOTGRID.theme.open(); },"CmdOrCtrl+Shift+o")
|
||||||
DOTGRID.controller.add("default","Theme","Pale",() => { DOTGRID.theme.pale(); },"CmdOrCtrl+Shift+2");
|
DOTGRID.controller.add("default","Theme","Reset Theme",() => { DOTGRID.theme.reset(); },"CmdOrCtrl+Shift+Backspace")
|
||||||
DOTGRID.controller.add("default","Theme","Invert",() => { DOTGRID.theme.invert(); },"CmdOrCtrl+Shift+I");
|
DOTGRID.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes'); })
|
||||||
DOTGRID.controller.add("default","Theme","Install",() => { 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","*","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","*","Fullscreen",() => { app.toggle_fullscreen(); },"CmdOrCtrl+Enter");
|
||||||
|
@ -2,7 +2,10 @@
|
|||||||
|
|
||||||
function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
function Dotgrid (width, height, grid_x, grid_y, block_x, block_y) {
|
||||||
this.controller = null
|
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.history = new History()
|
||||||
|
|
||||||
this.grid_x = grid_x
|
this.grid_x = grid_x
|
||||||
|
@ -21,6 +21,7 @@ DOTGRID.Guide = function () {
|
|||||||
|
|
||||||
this.el.getContext('2d').restore()
|
this.el.getContext('2d').restore()
|
||||||
|
|
||||||
|
this.draw_mirror()
|
||||||
this.draw_rulers()
|
this.draw_rulers()
|
||||||
|
|
||||||
if (DOTGRID.tool.index == 2) { this.draw_markers(); this.draw_vertices() }
|
if (DOTGRID.tool.index == 2) { this.draw_markers(); this.draw_vertices() }
|
||||||
@ -55,6 +56,19 @@ DOTGRID.Guide = function () {
|
|||||||
this.update()
|
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 () {
|
this.draw_handles = function () {
|
||||||
if (!this.show_extras) { return }
|
if (!this.show_extras) { return }
|
||||||
|
|
||||||
@ -197,6 +211,8 @@ DOTGRID.Guide = function () {
|
|||||||
this.draw_translation = function () {
|
this.draw_translation = function () {
|
||||||
if (!DOTGRID.cursor.translation) { return }
|
if (!DOTGRID.cursor.translation) { return }
|
||||||
|
|
||||||
|
console.log(DOTGRID.cursor.translation)
|
||||||
|
|
||||||
let ctx = this.el.getContext('2d')
|
let ctx = this.el.getContext('2d')
|
||||||
|
|
||||||
ctx.beginPath()
|
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.lineTo((DOTGRID.cursor.translation.to.x * this.scale), (DOTGRID.cursor.translation.to.y * this.scale))
|
||||||
ctx.lineCap = 'round'
|
ctx.lineCap = 'round'
|
||||||
ctx.lineWidth = 5
|
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.setLineDash([5, 10])
|
||||||
ctx.stroke()
|
ctx.stroke()
|
||||||
ctx.closePath()
|
ctx.closePath()
|
||||||
|
@ -1,20 +1,13 @@
|
|||||||
'use strict'
|
'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
|
const themer = this
|
||||||
|
|
||||||
|
this.active = _default
|
||||||
|
|
||||||
this.el = document.createElement('style')
|
this.el = document.createElement('style')
|
||||||
this.el.type = 'text/css'
|
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) {
|
this.install = function (host = document.body, callback) {
|
||||||
console.log('Theme', 'Installing..')
|
console.log('Theme', 'Installing..')
|
||||||
host.appendChild(this.el)
|
host.appendChild(this.el)
|
||||||
@ -23,51 +16,91 @@ function Theme (default_theme = { background: '#222', f_high: '#fff', f_med: '#c
|
|||||||
|
|
||||||
this.start = function () {
|
this.start = function () {
|
||||||
console.log('Theme', 'Starting..')
|
console.log('Theme', 'Starting..')
|
||||||
const storage = is_json(localStorage.theme) ? JSON.parse(localStorage.theme) : this.collection.default
|
if (isJson(localStorage.theme)) {
|
||||||
this.load(!storage.background ? this.collection.default : storage)
|
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) {
|
this.load = function (data) {
|
||||||
console.log('Theme', 'Saving..')
|
const theme = parse(data)
|
||||||
this.active = theme
|
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))
|
localStorage.setItem('theme', JSON.stringify(theme))
|
||||||
}
|
this.active = 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)
|
|
||||||
|
|
||||||
if (this.callback) {
|
if (this.callback) {
|
||||||
this.callback()
|
this.callback()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.apply = function (theme) {
|
this.reset = function () {
|
||||||
this.el.innerHTML = `
|
this.load(_default)
|
||||||
: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.parse = function (any) {
|
function parse (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) }
|
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
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
this.extract = function (text) {
|
// Drag
|
||||||
const svg = new DOMParser().parseFromString(text, 'text/xml')
|
|
||||||
|
|
||||||
|
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 {
|
try {
|
||||||
return {
|
return {
|
||||||
'background': svg.getElementById('background').getAttribute('fill'),
|
'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 () {
|
function isJson (text) {
|
||||||
this.load(this.collection.default)
|
try { JSON.parse(text); return true } catch (error) { return false }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Defaults
|
function isHtml (text) {
|
||||||
|
try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false }
|
||||||
this.pale = function () {
|
|
||||||
this.load(this.collection.pale)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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 } }
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user