diff --git a/desktop/sources/scripts/dotgrid.js b/desktop/sources/scripts/dotgrid.js index 6589691..473de73 100644 --- a/desktop/sources/scripts/dotgrid.js +++ b/desktop/sources/scripts/dotgrid.js @@ -16,6 +16,7 @@ function Dotgrid () { // ISU this.install = function (host) { + console.info('Dotgrid', 'Installing..') this.theme = new Theme(defaultTheme) this.history = new History() @@ -32,15 +33,17 @@ function Dotgrid () { this.manager.install() this.interface.install(host) - this.theme.install(host, this.update) + this.theme.install(host, () => { this.update() }) } this.start = function () { + console.info('Dotgrid', 'Starting..') this.theme.start() this.tool.start() this.renderer.start() this.interface.start() + // Add events document.addEventListener('mousedown', function (e) { dotgrid.cursor.down(e) }, false) document.addEventListener('mousemove', function (e) { dotgrid.cursor.move(e) }, false) document.addEventListener('contextmenu', function (e) { dotgrid.cursor.alt(e) }, false) @@ -48,6 +51,8 @@ function Dotgrid () { document.addEventListener('copy', function (e) { dotgrid.copy(e) }, false) document.addEventListener('cut', function (e) { dotgrid.cut(e) }, false) document.addEventListener('paste', function (e) { dotgrid.paste(e) }, false) + window.addEventListener('resize', function (e) { dotgrid.update() }, false) + window.addEventListener('dragover', function (e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy' }) window.addEventListener('drop', dotgrid.drag) this.source.new() @@ -56,7 +61,6 @@ function Dotgrid () { } this.update = function () { - this.resize() this.manager.update() this.interface.update() this.renderer.update() @@ -104,21 +108,43 @@ function Dotgrid () { this.renderer.update() } - 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) { - return - } - - console.log(`Resized to: ${size.width}x${size.height}`) - - this.tool.settings.size.width = size.width - this.tool.settings.size.height = size.height - - this.renderer.resize(size) + this.fitSize = function(){ + if (this.requireResize() === false) { return } + console.log('Dotgrid', `Will resize to: ${printSize(this.getRequiredSize())}`) + this.setWindowSize(this.getPaddedSize()) + } + this.setWindowSize = function (size) { document.title = `Dotgrid — ${size.width}x${size.height}` + const win = require('electron').remote.getCurrentWindow() + win.setSize(size.width, size.height, false) + } + + this.getWindowSize = function () { + return { width: window.innerWidth, height: window.innerHeight } + } + + this.getProjectSize = function () { + return this.tool.settings.size + } + + this.getPaddedSize = function () { + return { width: this.getWindowSize().width - 90, height: this.getWindowSize().height - 120 } + } + + this.getRequiredSize = function () { + return { width: step(this.getProjectSize().width, 15) + 90, height: step(this.getProjectSize().height, 15) + 120 } + } + + this.requireResize = function () { + const _padded = this.getPaddedSize() + const _required = this.getRequiredSize() + const offset = { width: _padded.width - _required.width, height: _padded.height - _required.height } + if (offset.width !== 0 || offset.height !== 0) { + console.log(`Dotgrid`, `Require ${printSize(_required)}, but padded is ${printSize(_padded)}(${printSize(offset)})`) + return true + } + return false } this.modZoom = function (mod = 0, set = false) { @@ -157,7 +183,7 @@ function Dotgrid () { const data = e.target && e.target.result ? e.target.result : '' if (data && !isJson(data)) { return } dotgrid.tool.replace(JSON.parse(`${data}`)) - dotgrid.renderer.update() + dotgrid.fitSize() } reader.readAsText(file) } @@ -205,20 +231,11 @@ function Dotgrid () { } } -window.addEventListener('resize', function (e) { - dotgrid.update() -}, false) - -window.addEventListener('dragover', function (e) { - e.stopPropagation() - e.preventDefault() - e.dataTransfer.dropEffect = 'copy' -}) - String.prototype.capitalize = function () { return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase() } +function printSize (size) { return `${size.width}x${size.height}` } function isJson (text) { try { JSON.parse(text); return true } catch (error) { return false } } 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 } diff --git a/desktop/sources/scripts/lib/theme.js b/desktop/sources/scripts/lib/theme.js index 6fb3c41..0c12a55 100644 --- a/desktop/sources/scripts/lib/theme.js +++ b/desktop/sources/scripts/lib/theme.js @@ -29,7 +29,7 @@ function Theme (_default) { this.load = function (data) { const theme = parse(data) if (!validate(theme)) { console.warn('Theme', 'Not a theme', theme); return } - console.log('Theme', `Load theme, background: ${theme.background}.`) + console.log('Theme', `Loaded 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}; }` localStorage.setItem('theme', JSON.stringify(theme)) this.active = theme @@ -125,3 +125,5 @@ function Theme (_default) { try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false } } } + +module.exports = Theme diff --git a/desktop/sources/scripts/source.js b/desktop/sources/scripts/source.js index 6d6df7e..d1445bd 100644 --- a/desktop/sources/scripts/source.js +++ b/desktop/sources/scripts/source.js @@ -17,7 +17,6 @@ function Source (dotgrid) { fs.readFile(paths[0], 'utf-8', (err, data) => { if (err) { alert('An error ocurred reading the file :' + err.message); return } dotgrid.tool.replace(JSON.parse(data.toString().trim())) - dotgrid.renderer.update() }) } diff --git a/desktop/sources/scripts/tool.js b/desktop/sources/scripts/tool.js index 4fa2db3..bddd542 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: 0, height: 0 }, crest: false } + this.settings = { size: { width: 600, height: 300 }, crest: false } this.layers = [[], [], []] this.styles = [ { thickness: 10, strokeLinecap: 'round', strokeLinejoin: 'round', color: '#f00', fill: 'none', mirror_style: 0, transform: 'rotate(45)' }, @@ -77,15 +77,13 @@ function Tool (dotgrid) { if (dot.settings.width && dot.settings.height) { dot.settings.size = { width: dot.settings.width, height: dot.settings.height } } - if (this.settings && (this.settings.size.width !== dot.settings.size.width || this.settings.size.height !== dot.settings.size.height)) { - dotgrid.setSize({ width: dot.settings.size.width, height: dot.settings.size.height }) - } this.layers = dot.layers this.styles = dot.styles this.settings = dot.settings this.clear() + dotgrid.fitSize() dotgrid.renderer.update() dotgrid.interface.update(true) dotgrid.history.push(this.layers)