Working copy

sources/index.html

@@ -5,6 +5,7 @@
     <script type="text/javascript" src="scripts/modules/brush.js"></script>
     <script type="text/javascript" src="scripts/modules/eraser.js"></script>
     <script type="text/javascript" src="scripts/modules/line.js"></script>
+    <script type="text/javascript" src="scripts/modules/io.js"></script>
 
     <script type="text/javascript" src="scripts/layer.js"></script>
     <script type="text/javascript" src="scripts/layers/grid.js"></script>
@@ -13,7 +14,6 @@
 
     <script type="text/javascript" src="scripts/docs.js"></script>
     <script type="text/javascript" src="scripts/port.js"></script>
-    <script type="text/javascript" src="scripts/io.js"></script>
     <script type="text/javascript" src="scripts/query.js"></script>
     <script type="text/javascript" src="scripts/keyboard.js"></script>
     <script type="text/javascript" src="scripts/cursor.js"></script>

sources/scripts/io.js

@@ -1,51 +0,0 @@
-function IO()
-{
-  this.render = function()
-  {
-    var fs = require('fs');
-    var data = ronin.render.to_data().replace(/^data:image\/\w+;base64,/, "");
-    var buf = new Buffer(data, 'base64');
-
-    dialog.showSaveDialog((fileName) => {
-      if (fileName === undefined){ return; }
-      fs.writeFile(fileName+'.png', buf);
-    }); 
-  }
-
-  this.drag_over = function(e)
-  {
-    e.stopPropagation();
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'copy';
-  }
-
-  this.drop = function(e)
-  {
-    e.stopPropagation();
-    e.preventDefault();
-    var files = e.dataTransfer.files;
-    var file = files[0];
-
-    if (!file.type.match(/image.*/)) { console.log("Not image"); return false; }
-
-    var reader = new FileReader();
-    
-    reader.onload = function(event)
-    {
-      base_image = new Image();
-      base_image.src = event.target.result;
-
-      var width = parseInt(base_image.naturalWidth * 0.5);
-      var height = parseInt(base_image.naturalHeight * 0.5);
-
-      if(height > 900){
-        width *= 0.5;
-        height *= 0.5;
-      }
-
-      ronin.frame.resize_to({width:width,height:height});
-      ronin.render.context().drawImage(base_image, 0,0,width * 2,height * 2);
-    }
-    reader.readAsDataURL(file);
-  }
-}

sources/scripts/modules/io.js

@@ -0,0 +1,95 @@
+function IO()
+{
+  Module.call(this,"io");
+
+  this.settings = {rect:"25,25|200x200"};
+
+  this.methods = {};
+
+  this.methods.import = function(q)
+  {
+    var filepath = dialog.showOpenDialog({properties: ['openFile']});
+
+    if(!filepath){ console.log("Nothing to load"); return; }
+
+    fs.readFile(filepath[0], 'utf-8', (err, data) => {
+      if(err){ alert("An error ocurred reading the file :" + err.message); return; }
+      
+      var img = new Image();
+      img.src = filepath[0];
+        
+      img.onload = function() {
+        ronin.io.draw_image(img);
+      }
+    });
+  }
+
+  this.render = function()
+  {
+    var fs = require('fs');
+    var data = ronin.render.to_data().replace(/^data:image\/\w+;base64,/, "");
+    var buf = new Buffer(data, 'base64');
+
+    dialog.showSaveDialog((fileName) => {
+      if (fileName === undefined){ return; }
+      fs.writeFile(fileName+'.png', buf);
+    }); 
+  }
+
+  this.drag_over = function(e)
+  {
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+  }
+
+  this.drop = function(e)
+  {
+    e.stopPropagation();
+    e.preventDefault();
+    var files = e.dataTransfer.files;
+    var file = files[0];
+
+    console.log(file);
+
+    if (!file.type.match(/image.*/)) { console.log("Not image"); return false; }
+
+    var reader = new FileReader();
+    
+    reader.onload = function(event)
+    {
+      ronin.io.inject(event.target.result);
+    }
+    reader.readAsDataURL(file);
+  }
+
+  this.inject = function(data_url)
+  {  
+
+    var width = parseInt(img.naturalWidth * 0.5);
+    var height = parseInt(img.naturalHeight * 0.5);
+
+    if(height > 900){
+      width *= 0.5;
+      height *= 0.5;
+    }
+
+    img.onload = function() {
+      ronin.render.context().drawImage(img, 0,0,width * 2,height * 2);
+    }
+  }
+
+  this.draw_image = function(img)
+  {
+    var width = parseInt(img.naturalWidth * 0.5);
+    var height = parseInt(img.naturalHeight * 0.5);
+
+    if(height > 900){
+      width *= 0.5;
+      height *= 0.5;
+    }
+
+    console.log(width,height);
+    ronin.render.context().drawImage(img, 0,0,width * 2,height * 2);    
+  }
+}

sources/scripts/modules/path.js

@@ -0,0 +1,4 @@
+function Path()
+{
+  Module.call(this,"path");
+}

sources/scripts/query.js

@@ -78,6 +78,9 @@ function Query(query_str)
 
   function parse_unit(unit_str)
   {
+    if(unit_str.indexOf(".") > -1 && unit_str.indexOf("/") > -1 ){
+      return unit_str;
+    }
     if(unit_str.indexOf("|") > -1 && unit_str.indexOf(",") > -1 && unit_str.indexOf("x") > -1){
       return Object.assign(parse_unit(unit_str.split("|")[0]), parse_unit(unit_str.split("|")[1]));
     }
@@ -87,7 +90,7 @@ function Query(query_str)
     if(unit_str.indexOf("x") > -1){
       return {width:parseInt(unit_str.split("x")[0]),height:parseInt(unit_str.split("x")[1])};
     }
-    if(unit_str.indexOf(".") > -1){
+    if(unit_str.indexOf(".") > -1 ){
       return parseFloat(unit_str);
     }
     return unit_str;

sources/scripts/ronin.js

@@ -3,7 +3,6 @@ function Ronin()
   this.el = document.createElement('yu');
   this.el.id = "ronin";
 
-  this.io = new IO();
   this.keyboard = new Keyboard();
   this.commander = new Commander();
   this.cursor = new Cursor();
@@ -14,6 +13,7 @@ function Ronin()
   this.guide = new Guide();
   this.render = new Render();
 
+  this.io = new IO();
   this.brush = new Brush();
   this.eraser = new Eraser();
   this.frame = new Frame();
@@ -27,9 +27,9 @@ function Ronin()
 
   this.modules = {
     brush : this.brush,
-    eraser : this.eraser,
     frame : this.frame,
     line : this.line,
+    io : this.io,
   };
   
   this.install = function()
@@ -64,6 +64,6 @@ function Ronin()
     this.grid.update();
     this.guide.update();
 
-    this.commander.input_el.value = "frame rescale:0.5";
+    this.commander.input_el.value = "io import:~/Desktop/test.png rect=$";
   }
 }