From 05805a2b6b81c857131fecc82974f0728cf71141 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Thu, 7 Feb 2019 16:06:55 +1200 Subject: [PATCH] Changed default launch size --- desktop/main.js | 26 ++-- desktop/sources/links/main.css | 8 +- desktop/sources/scripts/cursor.js | 4 +- desktop/sources/scripts/dotgrid.js | 15 +-- desktop/sources/scripts/lib/controller.js | 149 +++------------------- desktop/sources/scripts/tool.js | 2 +- 6 files changed, 45 insertions(+), 159 deletions(-) diff --git a/desktop/main.js b/desktop/main.js index f7f348b..abeea36 100644 --- a/desktop/main.js +++ b/desktop/main.js @@ -1,25 +1,27 @@ -const { app, BrowserWindow, webFrame, Menu, dialog } = require('electron') +const { app, BrowserWindow, webFrame, Menu } = require('electron') const path = require('path') const url = require('url') const shell = require('electron').shell let isShown = true +app.win = null + app.on('ready', () => { app.win = new BrowserWindow({ - width: 405, + width: 700, height: 430, - minWidth: 405, - minHeight: 430, - webPreferences: { zoomFactor: 1.0 }, - backgroundColor: '#000', - frame: false, - autoHideMenuBar: true, - icon: __dirname + '/icon.ico' + minWidth: 320, + minHeight: 320, + resizable: true, + icon: __dirname + '/icon.ico', + frame: process.platform === 'win32', + skipTaskbar: process.platform !== 'win32', + autoHideMenuBar: process.platform !== 'win32' }) app.win.loadURL(`file://${__dirname}/sources/index.html`) - // app.inspect(); + // app.inspect() app.win.on('closed', () => { win = null @@ -56,14 +58,14 @@ app.toggleFullscreen = function () { } app.toggleVisible = function () { - if (process.platform == 'win32') { + if (process.platform === 'win32') { if (!app.win.isMinimized()) { app.win.minimize() } else { app.win.restore() } } else { if (isShown && !app.win.isFullScreen()) { app.win.hide() } else { app.win.show() } } } -app.inject_menu = function (menu) { +app.injectMenu = function (menu) { try { Menu.setApplicationMenu(Menu.buildFromTemplate(menu)) } catch (err) { diff --git a/desktop/sources/links/main.css b/desktop/sources/links/main.css index 7ccd089..d0aabc9 100644 --- a/desktop/sources/links/main.css +++ b/desktop/sources/links/main.css @@ -1,4 +1,4 @@ -body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; transition: background-color 500ms; -webkit-app-region: drag; padding: 35px;width:calc(100vw - 60px);height:calc(100vh - 60px)} +body { padding: 0px; font-family: 'input_mono_regular'; -webkit-user-select: none; overflow: hidden; transition: background-color 500ms; -webkit-app-region: drag; padding: 30px;width:calc(100vw - 60px);height:calc(100vh - 60px)} /* Core */ @@ -8,9 +8,9 @@ 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 - 85px); 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:30px; left:40px; height:30px; max-width:calc(100vw - 85px); overflow: hidden;} #interface.hidden { bottom:10px !important;opacity: 0 !important } -#interface.visible { bottom:20px !important; opacity: 1 !important} +#interface.visible { bottom:30px !important; opacity: 1 !important} #interface #menu { opacity: 1; position: absolute; top:0px; transition: all 250ms; z-index: 900; overflow: hidden; height:30px; width:100%;} #interface #menu svg.icon { width:30px; height:30px; margin-right:-9px; opacity: 0.6; transition: opacity 250ms; } #interface #menu svg.icon.inactive { opacity: 0.2 } @@ -43,7 +43,7 @@ body.web #interface #menu #option_open { display: none; } body #guide { opacity: 0; transition: opacity 500ms; } body.ready #guide { opacity: 1 } body #interface { opacity: 0; transition: opacity 250ms, bottom 500ms; bottom:15px; } -body.ready #interface { opacity: 1; bottom:20px; } +body.ready #interface { opacity: 1; bottom:30px; } @media (max-width: 560px) { #interface #menu svg.icon.source { opacity: 0; } diff --git a/desktop/sources/scripts/cursor.js b/desktop/sources/scripts/cursor.js index be617e2..e0f1305 100644 --- a/desktop/sources/scripts/cursor.js +++ b/desktop/sources/scripts/cursor.js @@ -52,7 +52,7 @@ function Cursor () { this.up = function (e) { this.pos = this.atEvent(e) - if (this.translation && !is_equal(this.translation.from, this.translation.to)) { + if (this.translation && !isEqual(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.addVertex({ x: this.pos.x, y: this.pos.y }) @@ -95,5 +95,5 @@ function Cursor () { } } - function is_equal (a, b) { return a.x == b.x && a.y == b.y } + function isEqual (a, b) { return a.x == b.x && a.y == b.y } } diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 1bf3084..d20bc21 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -1,6 +1,6 @@ 'use strict' -function Dotgrid (width, height) { +function Dotgrid () { const defaultTheme = { background: '#eee', f_high: '#000', @@ -77,7 +77,6 @@ function Dotgrid (width, height) { this.new = function () { this.setZoom(1.0) - this.setSize({ width: 300, height: 325 }) this.history.push(this.tool.layers) this.clear() } @@ -127,7 +126,7 @@ function Dotgrid (width, height) { } } - this.setSize = function (size = { width: 300, height: 300 }, ui = true, scale = 1) { + this.setSize = function (size = { width: 600, 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 @@ -135,7 +134,7 @@ function Dotgrid (width, height) { try { const win = require('electron').remote.getCurrentWindow() - win.setSize((size.width + 100) * scale, (size.height + 100) * scale, true) + win.setSize((size.width + 100) * scale, (size.height + 100) * scale, false) } catch (err) { console.log('No window') } @@ -148,11 +147,11 @@ function Dotgrid (width, height) { this.resize = function () { const size = { width: step(window.innerWidth - 90, 15), height: step(window.innerHeight - 120, 15) } - if (size.width == this.tool.settings.size.width && size.height == this.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}`) + console.log(`Resized to: ${size.width}x${size.height}`) this.tool.settings.size.width = size.width this.tool.settings.size.height = size.height @@ -163,8 +162,6 @@ function Dotgrid (width, height) { } this.setZoom = function (scale) { - this.setSize({ width: this.tool.settings.size.width, height: this.tool.settings.size.height }, true, scale) - try { webFrame.setZoomFactor(scale) } catch (err) { @@ -256,4 +253,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) +const DOTGRID = new Dotgrid() diff --git a/desktop/sources/scripts/lib/controller.js b/desktop/sources/scripts/lib/controller.js index 546e29d..c7ed963 100644 --- a/desktop/sources/scripts/lib/controller.js +++ b/desktop/sources/scripts/lib/controller.js @@ -1,6 +1,9 @@ 'use strict' function Controller () { + const fs = require('fs') + const { dialog, app } = require('electron').remote + this.menu = { default: {} } this.mode = 'default' @@ -13,7 +16,6 @@ function Controller () { if (!this.menu[mode]) { this.menu[mode] = {} } if (!this.menu[mode][cat]) { this.menu[mode][cat] = {} } this.menu[mode][cat][label] = { fn: fn, accelerator: accelerator } - console.log(`${mode}/${cat}/${label} <${accelerator}>`) } this.add_role = function (mode, cat, label) { @@ -22,18 +24,22 @@ function Controller () { this.menu[mode][cat][label] = { role: label } } + this.clearCat = function (mode, cat) { + if (this.menu[mode]) { this.menu[mode][cat] = {} } + } + this.set = function (mode = 'default') { this.mode = mode this.commit() } this.format = function () { - let f = [] - let m = this.menu[this.mode] + const f = [] + const m = this.menu[this.mode] for (const cat in m) { - let submenu = [] + const submenu = [] for (const name in m[cat]) { - let option = m[cat][name] + const option = m[cat][name] if (option.role) { submenu.push({ role: option.role }) } else { @@ -46,140 +52,21 @@ function Controller () { } this.commit = function () { - this.app.inject_menu(this.format()) - } - - this.docs = function () { - console.log('Generating docs..') - let svg = this.generate_svg(this.format()) - let txt = this.documentation(this.format()) - dialog.showSaveDialog((fileName) => { - if (fileName === undefined) { return } - fileName = fileName.substr(-4, 4) != '.svg' ? fileName + '.svg' : fileName - fs.writeFile(fileName, svg) - fs.writeFile(fileName.replace('.svg', '.md'), txt) - }) - } - - this.generate_svg = function (m) { - let html = '' - - for (const id in this.layout) { - let key = this.layout[id] - let acc = this.accelerator_for_key(key.name, m) - html += `` - html += `` - html += `${key.name.toUpperCase()}` - html += acc && acc.basic ? `${acc.basic}` : '' - html += acc && acc.ctrl ? `${acc.ctrl}` : '' - } - return `${html}` - } - - this.documentation = function () { - let txt = '' - - txt += this.documentation_for_mode('default', this.menu.default) - - for (name in this.menu) { - if (name == 'default') { continue } - txt += this.documentation_for_mode(name, this.menu[name]) - } - return txt - } - - this.documentation_for_mode = function (name, mode) { - let txt = `## ${name} Mode\n\n` - - for (const id in mode) { - if (id == '*') { continue } - txt += `### ${id}\n` - for (const name in mode[id]) { - let option = mode[id][name] - txt += `- ${name}: \`${option.accelerator}\`\n` - } - txt += '\n' - } - - return txt + '\n' + this.app.injectMenu(this.format()) } this.accelerator_for_key = function (key, menu) { - let acc = { basic: null, ctrl: null } - for (const cat in menu) { - let options = menu[cat] + const acc = { basic: null, ctrl: null } + for (cat in menu) { + const options = menu[cat] for (const id in options.submenu) { - let option = options.submenu[id]; if (option.role) { continue } - acc.basic = (option.accelerator.toLowerCase() == key.toLowerCase()) ? option.label.toUpperCase().replace('TOGGLE ', '').substr(0, 8).trim() : acc.basic - acc.ctrl = (option.accelerator.toLowerCase() == ('CmdOrCtrl+' + key).toLowerCase()) ? option.label.toUpperCase().replace('TOGGLE ', '').substr(0, 8).trim() : acc.ctrl + const option = options.submenu[id]; if (option.role) { continue } + acc.basic = (option.accelerator.toLowerCase() === key.toLowerCase()) ? option.label.toUpperCase().replace('TOGGLE ', '').substr(0, 8).trim() : acc.basic + acc.ctrl = (option.accelerator.toLowerCase() === ('CmdOrCtrl+' + key).toLowerCase()) ? option.label.toUpperCase().replace('TOGGLE ', '').substr(0, 8).trim() : acc.ctrl } } return acc } - - this.layout = [ - { x: 0, y: 0, width: 60, height: 60, name: 'esc' }, - { x: 60, y: 0, width: 60, height: 60, name: '1' }, - { x: 120, y: 0, width: 60, height: 60, name: '2' }, - { x: 180, y: 0, width: 60, height: 60, name: '3' }, - { x: 240, y: 0, width: 60, height: 60, name: '4' }, - { x: 300, y: 0, width: 60, height: 60, name: '5' }, - { x: 360, y: 0, width: 60, height: 60, name: '6' }, - { x: 420, y: 0, width: 60, height: 60, name: '7' }, - { x: 480, y: 0, width: 60, height: 60, name: '8' }, - { x: 540, y: 0, width: 60, height: 60, name: '9' }, - { x: 600, y: 0, width: 60, height: 60, name: '0' }, - { x: 660, y: 0, width: 60, height: 60, name: '-' }, - { x: 720, y: 0, width: 60, height: 60, name: 'plus' }, - { x: 780, y: 0, width: 120, height: 60, name: 'backspace' }, - { x: 0, y: 60, width: 90, height: 60, name: 'tab' }, - { x: 90, y: 60, width: 60, height: 60, name: 'q' }, - { x: 150, y: 60, width: 60, height: 60, name: 'w' }, - { x: 210, y: 60, width: 60, height: 60, name: 'e' }, - { x: 270, y: 60, width: 60, height: 60, name: 'r' }, - { x: 330, y: 60, width: 60, height: 60, name: 't' }, - { x: 390, y: 60, width: 60, height: 60, name: 'y' }, - { x: 450, y: 60, width: 60, height: 60, name: 'u' }, - { x: 510, y: 60, width: 60, height: 60, name: 'i' }, - { x: 570, y: 60, width: 60, height: 60, name: 'o' }, - { x: 630, y: 60, width: 60, height: 60, name: 'p' }, - { x: 690, y: 60, width: 60, height: 60, name: '[' }, - { x: 750, y: 60, width: 60, height: 60, name: ']' }, - { x: 810, y: 60, width: 90, height: 60, name: '|' }, - { x: 0, y: 120, width: 105, height: 60, name: 'caps' }, - { x: 105, y: 120, width: 60, height: 60, name: 'a' }, - { x: 165, y: 120, width: 60, height: 60, name: 's' }, - { x: 225, y: 120, width: 60, height: 60, name: 'd' }, - { x: 285, y: 120, width: 60, height: 60, name: 'f' }, - { x: 345, y: 120, width: 60, height: 60, name: 'g' }, - { x: 405, y: 120, width: 60, height: 60, name: 'h' }, - { x: 465, y: 120, width: 60, height: 60, name: 'j' }, - { x: 525, y: 120, width: 60, height: 60, name: 'k' }, - { x: 585, y: 120, width: 60, height: 60, name: 'l' }, - { x: 645, y: 120, width: 60, height: 60, name: ';' }, - { x: 705, y: 120, width: 60, height: 60, name: "'" }, - { x: 765, y: 120, width: 135, height: 60, name: 'enter' }, - { x: 0, y: 180, width: 135, height: 60, name: 'shift' }, - { x: 135, y: 180, width: 60, height: 60, name: 'z' }, - { x: 195, y: 180, width: 60, height: 60, name: 'x' }, - { x: 255, y: 180, width: 60, height: 60, name: 'c' }, - { x: 315, y: 180, width: 60, height: 60, name: 'v' }, - { x: 375, y: 180, width: 60, height: 60, name: 'b' }, - { x: 435, y: 180, width: 60, height: 60, name: 'n' }, - { x: 495, y: 180, width: 60, height: 60, name: 'm' }, - { x: 555, y: 180, width: 60, height: 60, name: ',' }, - { x: 615, y: 180, width: 60, height: 60, name: '.' }, - { x: 675, y: 180, width: 60, height: 60, name: '/' }, - { x: 735, y: 180, width: 165, height: 60, name: 'capslock' }, - { x: 0, y: 240, width: 90, height: 60, name: 'ctrl' }, - { x: 90, y: 240, width: 90, height: 60, name: 'cmd' }, - { x: 180, y: 240, width: 90, height: 60, name: 'alt' }, - { x: 270, y: 240, width: 270, height: 60, name: 'space' }, - { x: 810, y: 240, width: 90, height: 60, name: 'ctrl' }, - { x: 720, y: 240, width: 90, height: 60, name: 'pn' }, - { x: 630, y: 240, width: 90, height: 60, name: 'fn' }, - { x: 540, y: 240, width: 90, height: 60, name: 'alt' } - ] } module.exports = new Controller() diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 132799c..43acc42 100644 --- a/desktop/sources/scripts/tool.js +++ b/desktop/sources/scripts/tool.js @@ -2,7 +2,7 @@ function Tool (dotgrid) { this.index = 0 - this.settings = { size: { width: 300, height: 300 }, crest: false } + this.settings = { size: { width: 0, height: 0 }, crest: false } this.layers = [[], [], []] this.styles = [ { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform: 'rotate(45)' },