From 3b40d555c8da6d2b388a86410f82d376c3882ba3 Mon Sep 17 00:00:00 2001
From: Devine Lu Linvega <aliceffekt@gmail.com>
Date: Wed, 27 Sep 2017 12:43:27 +1300
Subject: [PATCH] Implemented crop
---
sources/index.html | 1 +
sources/scripts/commander.js | 2 +
sources/scripts/cursor.js | 2 +-
sources/scripts/grid.js | 27 +----------
sources/scripts/guide.js | 83 ++++++++++++++++++++++++++++----
sources/scripts/layer.js | 46 ++++++++++++++++++
sources/scripts/modules/frame.js | 7 ++-
sources/scripts/query.js | 4 +-
sources/scripts/render.js | 35 ++------------
sources/scripts/ronin.js | 5 +-
10 files changed, 140 insertions(+), 72 deletions(-)
create mode 100644 sources/scripts/layer.js
diff --git a/sources/index.html b/sources/index.html
index ae8dc44..1aa4a1c 100644
--- a/sources/index.html
+++ b/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>
diff --git a/sources/scripts/commander.js b/sources/scripts/commander.js
index 820c1a2..a24e601 100644
--- a/sources/scripts/commander.js
+++ b/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()
diff --git a/sources/scripts/cursor.js b/sources/scripts/cursor.js
index f216300..8106ec2 100644
--- a/sources/scripts/cursor.js
+++ b/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);
diff --git a/sources/scripts/grid.js b/sources/scripts/grid.js
index d1f06f6..d8b929c 100644
--- a/sources/scripts/grid.js
+++ b/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()
- {
- 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.el.id = "grid";
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);
- }
}
\ No newline at end of file
diff --git a/sources/scripts/guide.js b/sources/scripts/guide.js
index 4b4e4c0..3779be4 100644
--- a/sources/scripts/guide.js
+++ b/sources/scripts/guide.js
@@ -1,25 +1,88 @@
function Guide()
{
- this.el = document.createElement('canvas'); this.el.id = "guide";
-
- this.install = function()
- {
- ronin.el.appendChild(this.el);
- }
+ Layer.call(this);
+
+ this.el.id = "guide";
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);
- // if(u.x){ this.draw_pos(u); }
- // if(u.width){ this.draw_rect(u); }
+ var u = ronin.guide.find_unit();
+ if(!u){ return; }
+
+ 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;
diff --git a/sources/scripts/layer.js b/sources/scripts/layer.js
new file mode 100644
index 0000000..bd2f399
--- /dev/null
+++ b/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);
+ }
+}
\ No newline at end of file
diff --git a/sources/scripts/modules/frame.js b/sources/scripts/modules/frame.js
index 4f3c78a..00c684f 100644
--- a/sources/scripts/modules/frame.js
+++ b/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);
}
}
\ No newline at end of file
diff --git a/sources/scripts/query.js b/sources/scripts/query.js
index 65f43cb..b3e2a34 100644
--- a/sources/scripts/query.js
+++ b/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){
- return Object.assign(parse_unit(unit_str.split("%")[0]), parse_unit(unit_str.split("%")[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]));
}
if(unit_str.indexOf(",") > -1){
return {x:parseInt(unit_str.split(",")[0]),y:parseInt(unit_str.split(",")[1])};
diff --git a/sources/scripts/render.js b/sources/scripts/render.js
index 1adb7f5..e993d3b 100644
--- a/sources/scripts/render.js
+++ b/sources/scripts/render.js
@@ -1,35 +1,6 @@
function Render()
{
- this.el = document.createElement('canvas'); this.el.id = "render";
-
- 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.clear = function()
- {
- ronin.render.context().clearRect(0, 0, this.el.width, this.el.height);
- }
+ Layer.call(this);
+
+ this.el.id = "render";
}
\ No newline at end of file
diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js
index 6ab3e1e..feee9b6 100644
--- a/sources/scripts/ronin.js
+++ b/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:$";
}
}
\ No newline at end of file