Implemented crop

sources/index.html

@@ -6,6 +6,7 @@
     <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/layer.js"></script>
     <script type="text/javascript" src="scripts/grid.js"></script>
     <script type="text/javascript" src="scripts/guide.js"></script>
     <script type="text/javascript" src="scripts/io.js"></script>

sources/scripts/commander.js

@@ -35,6 +35,7 @@ function Commander()
 
     ronin.commander.input_el.value = "";
     ronin.hint.update();
+    ronin.guide.update();
   }
 
   this.on_input = function(e)
@@ -56,6 +57,7 @@ function Commander()
   this.inject = function(str,entry_code = "$")
   {
     ronin.commander.input_el.value = ronin.commander.input_el.value.replace(entry_code,str);
+    ronin.guide.update();
   }
 
   this.query = function()

sources/scripts/cursor.js

@@ -41,7 +41,7 @@ function Cursor(rune)
     if(distance_between(ronin.cursor.line.origin,ronin.cursor.line.destination) > 10){
       var offset = ronin.cursor.line.origin.x+","+ronin.cursor.line.origin.y;
       var rect = (ronin.cursor.line.destination.x - ronin.cursor.line.origin.x)+"x"+(ronin.cursor.line.destination.y - ronin.cursor.line.origin.y);
-      ronin.commander.inject(offset+"%"+rect);
+      ronin.commander.inject(offset+"|"+rect);
     }
     else{
       ronin.commander.inject(e.clientX+","+e.clientY);

sources/scripts/grid.js

@@ -1,21 +1,8 @@
 function Grid()
 {
-  this.el = document.createElement('canvas'); this.el.id = "grid";
+  Layer.call(this);
 
-  this.install = function()
+  this.el.id = "grid";
-  {
-    ronin.el.appendChild(this.el);
-  }
-
-  this.update = function()
-  {
-    this.el.width = window.innerWidth * 2;
-    this.el.height = window.innerHeight * 2;
-    this.el.style.width = (window.innerWidth)+"px";
-    this.el.style.height = (window.innerHeight)+"px";
-
-    this.draw();
-  }
 
   this.draw = function()
   {
@@ -41,11 +28,6 @@ function Grid()
     ctx.fill();
   }
 
-  this.context = function()
-  {
-    return this.el.getContext('2d');
-  }
-
   this.resize_to = function(size)
   {
     this.el.width = size.width * 2;
@@ -55,9 +37,4 @@ function Grid()
 
     this.draw();
   }
-
-  this.clear = function()
-  {
-    ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
-  }
 }

sources/scripts/guide.js

@@ -1,25 +1,88 @@
 function Guide()
 {
-  this.el = document.createElement('canvas'); this.el.id = "guide";
+  Layer.call(this);
   
-  this.install = function()
+  this.el.id = "guide";
-  {
-    ronin.el.appendChild(this.el);
-  }
 
   this.update = function()
   {
-    var u = ronin.guide.find_unit();
+    this.el.width = window.innerWidth * 2;
+    this.el.height = window.innerHeight * 2;
+    this.el.style.width = (window.innerWidth)+"px";
+    this.el.style.height = (window.innerHeight)+"px";
 
-    console.log(u);
+    var u = ronin.guide.find_unit();
-    // if(u.x){ this.draw_pos(u); }
+    if(!u){ return; }
-    // if(u.width){ this.draw_rect(u); }
+
+    this.clear();
+    this.draw(u)
+  }
+
+  this.draw = function(u)
+  {    
+    if(u.x && u.y){
+      this.draw_pos(u);
+    }
+    if(u.width && u.height){
+      this.draw_rect(u);
+    }
+  }
+
+  this.draw_rect = function(u)
+  {
+    var ctx = this.context();
+
+    u.x = !u.x ? 0 : u.x;
+    u.y = !u.y ? 0 : u.y;
+
+    var offset = {x:u.x * 2, y:u.y * 2};
+    var rect = {width:u.width * 2,height:u.height * 2};
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="source-over";
+    ctx.moveTo(offset.x,offset.y);
+    ctx.lineTo(offset.x + rect.width,offset.y);
+    ctx.lineTo(offset.x + rect.width,offset.y + rect.height);
+    ctx.lineTo(offset.x,offset.y + rect.height);
+    ctx.lineTo(offset.x,offset.y);
+    ctx.lineCap="round";
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "#000";
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  this.draw_pos = function(u)
+  {
+    var ctx = this.context();
+
+    var offset = 2;
+    var radius = 5;
+
+    var pos = {x:u.x * 2, y:u.y * 2};
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="source-over";
+    ctx.moveTo(pos.x+offset,pos.y);
+    ctx.lineTo(pos.x+radius,pos.y);
+    ctx.moveTo(pos.x,pos.y+offset);
+    ctx.lineTo(pos.x,pos.y+radius);
+    ctx.moveTo(pos.x-offset,pos.y);
+    ctx.lineTo(pos.x-radius,pos.y);
+    ctx.moveTo(pos.x,pos.y-offset);
+    ctx.lineTo(pos.x,pos.y-radius);
+    ctx.lineCap="round";
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "#000";
+    ctx.stroke();
+    ctx.closePath();
   }
 
   this.find_unit = function(q = ronin.commander.query())
   {
     for(method_id in q.methods){
       var params = q.methods[method_id];
+      if(!params){ return null; }
       if(params.from){ return params.from[0]; }
       if(params[0]){ return params[0]; }
       return params;

sources/scripts/layer.js

@@ -0,0 +1,46 @@
+function Layer()
+{
+  this.el = document.createElement('canvas');
+
+  this.install = function()
+  {
+    ronin.el.appendChild(this.el);
+  }
+
+  this.update = function()
+  {
+    this.el.width = window.innerWidth * 2;
+    this.el.height = window.innerHeight * 2;
+    this.el.style.width = (window.innerWidth)+"px";
+    this.el.style.height = (window.innerHeight)+"px";
+  }
+
+  this.context = function()
+  {
+    return this.el.getContext('2d');
+  }
+
+  this.resize_to = function(size)
+  {
+    this.el.width = size.width * 2;
+    this.el.height = size.height * 2;
+    this.el.style.width = size.width+"px";
+    this.el.style.height = size.height+"px";
+  }
+
+  this.select = function(x,y,width,height)
+  {
+    return this.context().getImageData(x, y, width * 2, height * 2);
+  }
+
+  this.image = function()
+  {
+    return this.element.toDataURL('image/png');
+  }
+
+  this.clear = function()
+  {
+    console.log("Clear")
+    this.context().clearRect(0, 0, this.el.width * 2, this.el.height * 2);
+  }
+}

sources/scripts/modules/frame.js

@@ -20,7 +20,11 @@ function Frame()
 
   this.methods.crop = function(p)
   {
+    var data = ronin.render.select(p.x,p.y,p.width,p.height);
 
+    ronin.render.clear();
+    ronin.frame.resize_to(p);
+    ronin.render.context().putImageData(data, 0, 0);
   }
 
   this.resize_to = function(size)
@@ -33,5 +37,6 @@ function Frame()
     win.setSize(size.width,size.height);
     ronin.render.resize_to(size);
     ronin.grid.resize_to(size);
+    ronin.guide.resize_to(size);
   }
 }

sources/scripts/query.js

@@ -78,8 +78,8 @@ function Query(query_str)
 
   function parse_unit(unit_str)
   {
-    if(unit_str.indexOf("%") > -1 && unit_str.indexOf(",") > -1 && unit_str.indexOf("x") > -1){
+    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]));
+      return Object.assign(parse_unit(unit_str.split("|")[0]), parse_unit(unit_str.split("|")[1]));
     }
     if(unit_str.indexOf(",") > -1){
       return {x:parseInt(unit_str.split(",")[0]),y:parseInt(unit_str.split(",")[1])};

sources/scripts/render.js

@@ -1,35 +1,6 @@
 function Render()
 {
-  this.el = document.createElement('canvas'); this.el.id = "render";
+  Layer.call(this);
   
-  this.install = function()
+  this.el.id = "render";
-  {
-    ronin.el.appendChild(this.el);
-  }
-
-  this.update = function()
-  {
-    this.el.width = window.innerWidth * 2;
-    this.el.height = window.innerHeight * 2;
-    this.el.style.width = (window.innerWidth)+"px";
-    this.el.style.height = (window.innerHeight)+"px";
-  }
-
-  this.context = function()
-  {
-    return this.el.getContext('2d');
-  }
-
-  this.resize_to = function(size)
-  {
-    this.el.width = size.width * 2;
-    this.el.height = size.height * 2;
-    this.el.style.width = size.width+"px";
-    this.el.style.height = size.height+"px";
-  }
-
-  this.clear = function()
-  {
-    ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
-  }
 }

sources/scripts/ronin.js

@@ -29,7 +29,9 @@ function Ronin()
     document.body.appendChild(this.el);
 
     this.grid.install();
+    this.guide.install();
     this.render.install();
+
     this.commander.install();
     this.hint.install();
 
@@ -49,7 +51,8 @@ function Ronin()
     console.log("Ronin","Started");
     this.render.update();
     this.grid.update();
+    this.guide.update();
 
-    this.commander.input_el.value = "line tween:$&$&$>>$&$&$";
+    this.commander.input_el.value = "frame crop:$";
   }
 }