Reworked the resizer

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 }

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

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()
     })
   }
 

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)