This commit is contained in:
neauoire 2019-11-08 11:19:27 -05:00
parent c9165d876c
commit fe35350fb1
5 changed files with 72 additions and 34 deletions

View File

@ -18,10 +18,10 @@ function Dotgrid () {
this.install = function (host) {
console.info('Dotgrid', 'Installing..')
this.acels = new Acels()
this.theme = new Theme()
this.history = new History()
this.source = new Source()
this.acels = new Acels(this)
this.theme = new Theme(this)
this.history = new History(this)
this.source = new Source(this)
this.manager = new Manager(this)
this.renderer = new Renderer(this)
@ -45,9 +45,9 @@ function Dotgrid () {
this.acels.set('File', 'New', 'CmdOrCtrl+N', () => { this.source.new() })
this.acels.set('File', 'Open', 'CmdOrCtrl+O', () => { this.source.open('grid', this.whenOpen) })
this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('dotgrid','grid' , this.tool.export(), 'text/plain') })
this.acels.set('File', 'Export Vector', 'CmdOrCtrl+E', () => { this.source.write('dotgrid','svg', this.manager.toString(), 'image/svg+xml') })
this.acels.set('File', 'Export Image', 'CmdOrCtrl+Shift+E', () => { this.manager.toPNG(this.tool.settings.size, (dataUrl) => { this.source.download('dotgrid','png', dataUrl, 'image/png') }) })
this.acels.set('File', 'Save', 'CmdOrCtrl+S', () => { this.source.write('dotgrid', 'grid', this.tool.export(), 'text/plain') })
this.acels.set('File', 'Export Vector', 'CmdOrCtrl+E', () => { this.source.write('dotgrid', 'svg', this.manager.toString(), 'image/svg+xml') })
this.acels.set('File', 'Export Image', 'CmdOrCtrl+Shift+E', () => { this.manager.toPNG(this.tool.settings.size, (dataUrl) => { this.source.download('dotgrid', 'png', dataUrl, 'image/png') }) })
this.acels.set('File', 'Revert', 'CmdOrCtrl+W', () => { this.source.revert() })
this.acels.set('History', 'Undo', 'CmdOrCtrl+Z', () => { this.history.undo() })
this.acels.set('History', 'Redo', 'CmdOrCtrl+Shift+Z', () => { this.history.redo() })
@ -81,6 +81,7 @@ function Dotgrid () {
this.acels.set('View', 'Color Picker', 'G', () => { this.picker.start() })
this.acels.set('View', 'Toggle Grid', 'H', () => { this.renderer.toggle() })
this.acels.install(window)
this.acels.pipe(this)
this.manager.install()
this.interface.install(host)
@ -121,9 +122,9 @@ function Dotgrid () {
this.update()
}
this.whenOpen = (file,data) => {
console.log(data)
this.whenOpen = (file, data) => {
this.tool.replace(JSON.parse(data))
this.onResize()
}
// Resize Tools
@ -207,7 +208,7 @@ function Dotgrid () {
const file = e.dataTransfer.files[0]
if (file.name.indexOf('.grid') > -1) {
this.source.load(e.dataTransfer.files[0], this.whenOpen)
this.source.read(e.dataTransfer.files[0], this.whenOpen)
}
}
@ -252,6 +253,13 @@ function Dotgrid () {
this.renderer.update()
}
this.onKeyDown = (e) => {
}
this.onKeyUp = (e) => {
}
function sizeOffset (a, b) { return { width: a.width - b.width, height: a.height - b.height } }
function printSize (size) { return `${size.width}x${size.height}` }
function isJson (text) { try { JSON.parse(text); return true } catch (error) { return false } }

View File

@ -1,7 +1,9 @@
'use strict'
function Acels () {
function Acels (client) {
this.all = {}
this.roles = {}
this.pipe = null
this.install = (host = window) => {
host.addEventListener('keydown', this.onKeyDown, false)
@ -13,6 +15,10 @@ function Acels () {
this.all[accelerator] = { cat, name, downfn, upfn, accelerator }
}
this.add = (cat, role) => {
this.all[':' + role] = { cat, name: role, role }
}
this.get = (accelerator) => {
return this.all[accelerator]
}
@ -27,29 +33,36 @@ function Acels () {
}
this.convert = (event) => {
const accelerator = event.key.substr(0, 1).toUpperCase() + event.key.substr(1)
const accelerator = event.key === ' ' ? 'Space' : event.key.substr(0, 1).toUpperCase() + event.key.substr(1)
if ((event.ctrlKey || event.metaKey) && event.shiftKey) {
return `CmdOrCtrl+Shift+${accelerator}`
}
if (event.shiftKey) {
return `Shift+${accelerator}`
}
if (event.altKey) {
return `Alt+${accelerator}`
}
if (event.ctrlKey || event.metaKey) {
return `CmdOrCtrl+${accelerator}`
}
return accelerator
}
this.pipe = (obj) => {
this.pipe = obj
}
this.onKeyDown = (e) => {
const target = this.get(this.convert(e))
if (!target || !target.downfn) { return }
if (!target || !target.downfn) { return this.pipe ? this.pipe.onKeyDown(e) : null }
target.downfn()
e.preventDefault()
}
this.onKeyUp = (e) => {
const target = this.get(this.convert(e))
if (!target || !target.upfn) { return }
if (!target || !target.upfn) { return this.pipe ? this.pipe.onKeyUp(e) : null }
target.upfn()
e.preventDefault()
}
@ -60,7 +73,7 @@ function Acels () {
for (const cat in cats) {
text += `\n### ${cat}\n\n`
for (const item of cats[cat]) {
text += `- \`${item.accelerator}\`: ${item.info}\n`
text += item.accelerator ? `- \`${item.accelerator}\`: ${item.info}\n` : ''
}
}
return text.trim()
@ -71,7 +84,7 @@ function Acels () {
let text = ''
for (const cat in cats) {
for (const item of cats[cat]) {
text += `${cat}: ${item.name} | ${item.accelerator}\n`
text += item.accelerator ? `${cat}: ${item.name} | ${item.accelerator}\n` : ''
}
}
return text.trim()
@ -87,12 +100,19 @@ function Acels () {
label: name,
submenu: [
{ label: 'About', click: () => { require('electron').shell.openExternal('https://github.com/hundredrabbits/' + name) } },
{ label: 'Download Themes', click: () => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes') } },
{
label: 'Theme',
submenu: [
{ label: 'Download Themes', click: () => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes') } },
{ label: 'Open Theme', click: () => { client.theme.open() } },
{ label: 'Reset Theme', click: () => { client.theme.reset() } }
]
},
{ label: 'Fullscreen', accelerator: 'CmdOrCtrl+Enter', click: () => { app.toggleFullscreen() } },
{ label: 'Hide', accelerator: 'CmdOrCtrl+H', click: () => { app.toggleVisible() } },
{ label: 'Toggle Menubar', accelerator: 'Alt+H', click: () => { app.toggleMenubar() } },
{ label: 'Inspect', accelerator: 'CmdOrCtrl+.', click: () => { app.inspect() } },
{ label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: () => { app.exit() } }
{ role: 'quit' }
]
})

View File

@ -3,7 +3,7 @@
/* global FileReader */
/* global MouseEvent */
function Source () {
function Source (client) {
this.cache = {}
this.install = () => {
@ -58,10 +58,6 @@ function Source () {
this.write(name, ext, content, type, callback)
}
this.revert = () => {
}
// I/O
this.read = (file, callback) => {

View File

@ -4,7 +4,7 @@
/* global FileReader */
/* global DOMParser */
function Theme () {
function Theme (client) {
this.el = document.createElement('style')
this.el.type = 'text/css'
@ -32,7 +32,7 @@ function Theme () {
if (isJson(localStorage.theme)) {
const storage = JSON.parse(localStorage.theme)
if (isValid(storage)) {
console.log('Theme', 'Loading localStorage..')
console.log('Theme', 'Loading theme in localStorage..')
this.load(storage)
return
}
@ -40,6 +40,16 @@ function Theme () {
this.load(this.default)
}
this.open = () => {
console.log('Theme', 'Open theme..')
const input = document.createElement('input')
input.type = 'file'
input.onchange = (e) => {
this.read(e.target.files[0], this.load)
}
input.click()
}
this.load = (data) => {
const theme = this.parse(data)
if (!isValid(theme)) { console.warn('Theme', 'Invalid format'); return }
@ -84,16 +94,20 @@ function Theme () {
this.drop = (e) => {
e.preventDefault()
const file = e.dataTransfer.files[0]
if (!file || !file.name) { console.warn('Theme', 'Could not read file.'); return }
if (file.name.indexOf('.svg') < 0) { console.warn('Theme', 'Not a SVG file.'); return }
const reader = new FileReader()
reader.onload = (e) => {
this.load(e.target.result)
if (file.name.indexOf('.svg') > -1) {
this.read(file, this.load)
}
reader.readAsText(file)
e.stopPropagation()
}
this.read = (file, callback) => {
const reader = new FileReader()
reader.onload = (event) => {
callback(event.target.result)
}
reader.readAsText(file, 'UTF-8')
}
// Helpers
function extract (xml) {

View File

@ -206,9 +206,9 @@ function Tool (dotgrid) {
this.source = function (type) {
if (type === 'grid') { dotgrid.renderer.toggle() }
if (type === 'open') { dotgrid.source.open('grid', dotgrid.whenOpen) }
if (type === 'save') { dotgrid.source.download('dotgrid','grid', dotgrid.tool.export(), 'text/plain') }
if (type === 'export') { dotgrid.source.download('dotgrid','svg', dotgrid.manager.toString(), 'image/svg+xml') }
if (type === 'render') { dotgrid.manager.toPNG(dotgrid.tool.settings.size, (dataUrl) => { dotgrid.source.download('dotgrid','png', dataUrl, 'image/png') }) }
if (type === 'save') { dotgrid.source.download('dotgrid', 'grid', dotgrid.tool.export(), 'text/plain') }
if (type === 'export') { dotgrid.source.download('dotgrid', 'svg', dotgrid.manager.toString(), 'image/svg+xml') }
if (type === 'render') { dotgrid.manager.toPNG(dotgrid.tool.settings.size, (dataUrl) => { dotgrid.source.download('dotgrid', 'png', dataUrl, 'image/png') }) }
}
this.canAppend = function (content, index = this.index) {