Implementing source.load()

desktop/sources/scripts/cursor.js

@@ -90,8 +90,8 @@ function Cursor () {
 
   this.snapPos = function (pos) {
     return {
-      x: clamp(step(pos.x, 15), 0, dotgrid.tool.settings.size.width),
-      y: clamp(step(pos.y, 15), 0, dotgrid.tool.settings.size.height)
+      x: clamp(step(pos.x, 15), 15, dotgrid.tool.settings.size.width - 15),
+      y: clamp(step(pos.y, 15), 15, dotgrid.tool.settings.size.height - 15)
     }
   }
 

desktop/sources/scripts/dotgrid.js

@@ -56,6 +56,7 @@ function Dotgrid () {
     window.addEventListener('drop', dotgrid.drag)
 
     this.source.new()
+    this.onResize()
 
     setTimeout(() => { document.body.className += ' ready' }, 250)
   }
@@ -106,6 +107,7 @@ function Dotgrid () {
     if (this.requireResize() === false) { return }
     console.log('Dotgrid', `Will resize to: ${printSize(this.getRequiredSize())}`)
     this.setWindowSize(this.getRequiredSize())
+    this.update()
   }
 
   this.setWindowSize = function (size) {
@@ -177,8 +179,7 @@ function Dotgrid () {
 
     reader.onload = function (e) {
       const data = e.target && e.target.result ? e.target.result : ''
-      if (data && !isJson(data)) { return }
-      dotgrid.tool.replace(JSON.parse(`${data}`))
+      dotgrid.source.load(filename, data)
       dotgrid.fitSize()
     }
     reader.readAsText(file)

desktop/sources/scripts/lib/theme.js

@@ -125,5 +125,3 @@ function Theme (_default) {
     try { new DOMParser().parseFromString(text, 'text/xml'); return true } catch (error) { return false }
   }
 }
-
-module.exports = Theme

desktop/sources/scripts/renderer.js

@@ -107,17 +107,12 @@ function Renderer (dotgrid) {
     for (let x = markers.w - 1; x >= 0; x--) {
       for (let y = markers.h - 1; y >= 0; y--) {
         let isStep = x % 4 === 0 && y % 4 === 0
-
         // Don't draw margins
         if (x === 0 || y === 0) { continue }
-        // Color
-        let color = isStep ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low
-        if ((y === 0 || y === markers.h) && cursor.x === x + 1) { color = dotgrid.theme.active.b_high } else if ((x === 0 || x === markers.w - 1) && cursor.y === y + 1) { color = dotgrid.theme.active.b_high } else if (cursor.x === x + 1 && cursor.y === y + 1) { color = dotgrid.theme.active.b_high }
-
         this.drawMarker({
           x: parseInt(x * 15),
           y: parseInt(y * 15)
-        }, isStep ? 2.5 : 1.5, color)
+        }, isStep ? 2.5 : 1.5, isStep ? dotgrid.theme.active.b_med : dotgrid.theme.active.b_low)
       }
     }
   }

desktop/sources/scripts/source.js

@@ -16,10 +16,17 @@ 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()))
+      this.load(paths[0], data)
     })
   }
 
+  this.load = function (path, data) {
+    if (!path || isJson(data) === false) { return }
+    const parsed = JSON.parse(`${data}`)
+    console.log(path)
+    dotgrid.tool.replace(parsed)
+  }
+
   this.save = function () {
     if (dotgrid.tool.length() < 1) { console.warn('Nothing to save'); return }
     dotgrid.manager.toGRID(grab)
@@ -41,4 +48,6 @@ function Source (dotgrid) {
     link.setAttribute('download', name)
     link.dispatchEvent(new MouseEvent(`click`, { bubbles: true, cancelable: true, view: window }))
   }
+
+  function isJson (text) { try { JSON.parse(text); return true } catch (error) { return false } }
 }

desktop/sources/scripts/tool.js

@@ -213,10 +213,10 @@ function Tool (dotgrid) {
     if (type === 'grid') { dotgrid.renderer.toggle() }
     if (type === 'screen') { app.toggleFullscreen() }
 
-    if (type === 'open') { dotgrid.open() }
-    if (type === 'save') { dotgrid.save() }
-    if (type === 'render') { dotgrid.render() }
-    if (type === 'export') { dotgrid.export() }
+    if (type === 'open') { dotgrid.source.open() }
+    if (type === 'save') { dotgrid.source.save() }
+    if (type === 'render') { dotgrid.source.render() }
+    if (type === 'export') { dotgrid.source.export() }
   }
 
   this.canAppend = function (content, index = this.index) {

index.html

@@ -30,9 +30,9 @@
     <script type="text/javascript" src="desktop/sources/scripts/tool.js"></script>
     <script type="text/javascript" src="desktop/sources/scripts/generator.js"></script>
     <script type="text/javascript" src="desktop/sources/scripts/picker.js"></script>
+    <script type="text/javascript" src="desktop/sources/scripts//source.js"></script>
     <!-- Web Specific -->
     <script type="text/javascript" src="web/events.js"></script>
-    <script type="text/javascript" src="web/source.js"></script>
     <!-- Styles -->
     <link rel="stylesheet" type="text/css" href="desktop/sources/links/reset.css"/>
     <link rel="stylesheet" type="text/css" href="desktop/sources/links/fonts.css"/>
@@ -45,8 +45,11 @@
       'use strict';
       function Listener(){}
       const dialog = null;
+
+      const dotgrid = new Dotgrid()
       dotgrid.install(document.body);
-      dotgrid.start();
+
+      window.addEventListener('load', () => { dotgrid.start(); })
     </script>
   </body>
 </html>