Can now drag files on canvas

scripts/core/ronin.js

@@ -1,7 +1,7 @@
 function Ronin()
 {
   this.modules  = {};
-  this.element  = null;  
+  this.element  = document.getElementById('ronin');  
   
   this.default  = new Default("`");
 
@@ -40,7 +40,6 @@ function Ronin()
 
   this.install = function()
   {
-    ronin.element = document.getElementById('ronin');
     ronin.frame.element = document.getElementById('frame');
     ronin.cursor.element = document.getElementById('cursor');
     ronin.terminal.element = document.getElementById('terminal');
@@ -138,4 +137,38 @@ function Ronin()
     ronin.widget.update();
     ronin.terminal.update();
   }
+
+  // Drag file on canvas
+
+  this.element.addEventListener('dragover',function(e)
+  { 
+    e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; 
+  });
+
+  this.element.addEventListener('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 = base_image.naturalWidth;
+      var height = base_image.naturalHeight;
+
+      // Display as large as the canvas
+      var ratio = ronin.frame.size.width/width;
+      ronin.frame.active_layer.context().drawImage(base_image, 0,0,width * ratio,height * ratio);
+    }
+    reader.readAsDataURL(file);
+  });
+  
 }