-
+
diff --git a/links/main.css b/links/main.css
index c0c1230..2a662e1 100644
--- a/links/main.css
+++ b/links/main.css
@@ -3,7 +3,7 @@ body { margin:0px; padding:0px; overflow:hidden;}
canvas:hover { cursor: crosshair;}
-#guides { position:fixed; z-index:1000;}
+#overlay { position:fixed; z-index:1000;}
#commander { display:none; z-index: 2000; }
#commander.visible { display:block; }
diff --git a/scripts/brush.js b/scripts/brush.js
index 002a667..4593071 100644
--- a/scripts/brush.js
+++ b/scripts/brush.js
@@ -36,7 +36,7 @@ function Brush()
// Pointers
- this.pointers = [new Pointer(new Position(0,0))];
+ this.pointers = [new Pointer(new Position())];
this.add_pointer = function(pointer)
{
diff --git a/scripts/commander.js b/scripts/commander.js
index 53a2e1c..ff404cc 100644
--- a/scripts/commander.js
+++ b/scripts/commander.js
@@ -26,34 +26,34 @@ function Commander(element,element_input)
ronin.canvas.active(cmd);
break;
case "~":
- ronin.history.active(params);
+ ronin.history.active(cmd);
break;
case "$":
- ronin.save.active(params);
+ ronin.save.active(cmd);
break;
case "/":
- ronin.load.active(params);
+ ronin.load.active(cmd);
break;
case "&":
- ronin.brush.active(params);
+ ronin.brush.active(cmd);
break;
case ">":
- ronin.pointer.active(params);
+ ronin.pointer.active(cmd);
break;
case "|":
- ronin.overlay.active(params);
+ ronin.overlay.active(cmd);
break;
case "^":
- ronin.translate.active(params);
+ ronin.translate.active(cmd);
break;
case "=":
- ronin.zoom.active(params);
+ ronin.zoom.active(cmd);
break;
case "#":
- ronin.layers.active(params);
+ ronin.layers.active(cmd);
break;
case ":":
- ronin.filter.active(params);
+ ronin.filter.active(cmd);
break;
}
@@ -62,14 +62,6 @@ function Commander(element,element_input)
/*
var parts = command;
- // Canvas
- if(parts[0] == "@"){
- canvas.setAttribute('width',parts[1]+"px");
- canvas.setAttribute('height',parts[2]+"px");
- ronin.guides_element.setAttribute('width',parts[1]+"px");
- ronin.guides_element.setAttribute('height',parts[2]+"px");
- }
-
// Brush
if(parts[0] == "&"){
parts.shift();
@@ -121,31 +113,31 @@ function Commander(element,element_input)
ronin.canvas.passive(cmd);
break;
case "~":
- ronin.history.passive(params);
+ ronin.history.passive(cmd);
break;
case "/":
- ronin.load.passive(params);
+ ronin.load.passive(cmd);
break;
case "&":
- ronin.brush.passive(params);
+ ronin.brush.passive(cmd);
break;
case ">":
- ronin.pointer.passive(params);
+ ronin.pointer.passive(cmd);
break;
case "|":
- ronin.overlay.passive(params);
+ ronin.overlay.passive(cmd);
break;
case "^":
- ronin.translate.passive(params);
+ ronin.translate.passive(cmd);
break;
case "=":
- ronin.zoom.passive(params);
+ ronin.zoom.passive(cmd);
break;
case "#":
- ronin.layers.passive(params);
+ ronin.layers.passive(cmd);
break;
case ":":
- ronin.filter.passive(params);
+ ronin.filter.passive(cmd);
break;
}
diff --git a/scripts/main.js b/scripts/main.js
index 1c50151..a342699 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -3,7 +3,8 @@ var context = canvas.getContext('2d');
var ronin = new Ronin();
ronin.canvas.element = canvas;
-ronin.overlay.element = canvas;
+ronin.overlay.element = document.getElementById('overlay');
+ronin.overlay.context().imageSmoothingEnabled = false;
@@ -12,11 +13,9 @@ ronin.overlay.element = canvas;
ronin.element = document.getElementById('ronin');
-ronin.guides_element = document.getElementById('guides');
-ronin.guides_context = ronin.guides_element.getContext('2d');
-var brush = new Brush();
+// var brush = new Brush();
@@ -24,23 +23,21 @@ var brush = new Brush();
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
document.addEventListener('mousemove', function(e) {
- brush.draw(e);
+ // brush.draw(e);
}, false);
document.addEventListener('mousedown', function(e) {
if(e.which != 1){ return; }
- brush.draw_start(e);
+ // brush.draw_start(e);
}, false);
document.addEventListener('mouseup', function(e) {
- brush.draw_stop(e);
+ // brush.draw_stop(e);
}, false);
var keyboard = new Keyboard();
document.onkeyup = function myFunction(){ keyboard.listen(event); };
-ronin.guides_context.imageSmoothingEnabled= false
-
/* brush experiments
var mirror_test = new Pointer();
diff --git a/scripts/ronin.canvas.js b/scripts/ronin.canvas.js
index 8ff652a..cebffc0 100644
--- a/scripts/ronin.canvas.js
+++ b/scripts/ronin.canvas.js
@@ -12,7 +12,6 @@ function Canvas(element)
}
if(cmd.color()){
- console.log(cmd.color());
this.element.getContext('2d').beginPath();
this.element.getContext('2d').rect(0, 0, canvas.width, canvas.height);
this.element.getContext('2d').fillStyle = cmd.color().hex;
diff --git a/scripts/ronin.overlay.js b/scripts/ronin.overlay.js
index 70885fe..fd02b48 100644
--- a/scripts/ronin.overlay.js
+++ b/scripts/ronin.overlay.js
@@ -6,8 +6,90 @@ function Overlay(element)
// Module
- this.passive = function(p)
+ this.passive = function(cmd)
{
+ this.clear();
+
+ if(!cmd.position()){ return; }
+
+ if(cmd.rect()){
+ this.draw_rect(cmd.position(),cmd.rect());
+ }
+ else if(cmd.position().x > 0 && cmd.position().y > 0){
+ this.draw_pointer(cmd.position());
+ }
+ else if(cmd.position().x > 0 ){
+ this.draw_vertical_line(cmd.position());
+ }
+ else if(cmd.position().y > 0 ){
+ this.draw_horizontal_line(cmd.position());
+ }
+ }
+
+ this.active = function(cmd)
+ {
+
+ }
+
+ this.draw_rect = function(position,rect)
+ {
+ this.context().beginPath();
+
+ this.context().moveTo(position.x,position.y);
+ this.context().lineTo(position.x + rect.width,position.y);
+ this.context().lineTo(position.x + rect.width,position.y + rect.height);
+ this.context().lineTo(position.x,position.y + rect.height);
+ this.context().lineTo(position.x,position.y);
+
+ this.context().lineCap="round";
+ this.context().lineWidth = 1;
+ this.context().strokeStyle = "#ff0000";
+ this.context().stroke();
+ this.context().closePath();
+ }
+
+ this.draw_pointer = function(position)
+ {
+ this.context().beginPath();
+
+ this.context().moveTo(position.x,position.y);
+ this.context().lineTo(position.x + 10,position.y);
+ this.context().lineTo(position.x,position.y + 10);
+ this.context().lineTo(position.x,position.y);
+
+ this.context().lineCap="round";
+ this.context().lineWidth = 1;
+ this.context().strokeStyle = "#ff0000";
+ this.context().stroke();
+ this.context().closePath();
+ }
+
+ this.draw_vertical_line = function(position)
+ {
+ this.context().beginPath();
+
+ this.context().moveTo(position.x,0);
+ this.context().lineTo(position.x,this.element.height);
+
+ this.context().lineCap="round";
+ this.context().lineWidth = 1;
+ this.context().strokeStyle = "#ff0000";
+ this.context().stroke();
+ this.context().closePath();
+ }
+
+ this.draw_horizontal_line = function(position)
+ {
+ this.context().beginPath();
+
+ this.context().moveTo(position.x,0);
+ this.context().lineTo(position.x,this.element.height);
+
+ this.context().lineCap="round";
+ this.context().lineWidth = 1;
+ this.context().strokeStyle = "#ff0000";
+ this.context().stroke();
+ this.context().closePath();
}
this.resize = function(rect)
@@ -19,7 +101,7 @@ function Overlay(element)
this.show_guide = function(position,rect)
{
this.clear();
- context.beginPath();
+ this.context().beginPath();
this.context().moveTo(0,0);
this.context().lineTo(rect.width,0);
@@ -27,11 +109,11 @@ function Overlay(element)
this.context().lineTo(0,rect.height);
this.context().lineTo(0,0);
- context.lineCap="round";
- context.lineWidth = 1;
- context.strokeStyle = "#ff0000";
- context.stroke();
- context.closePath();
+ this.context().lineCap="round";
+ this.context().lineWidth = 1;
+ this.context().strokeStyle = "#ff0000";
+ this.context().stroke();
+ this.context().closePath();
}
this.context = function()
diff --git a/scripts/unit.position.js b/scripts/unit.position.js
index 77a2e18..00a9d91 100644
--- a/scripts/unit.position.js
+++ b/scripts/unit.position.js
@@ -1,7 +1,9 @@
-function Position(x = 0,y = 0)
+function Position(position_str)
{
- this.x = parseFloat(x);
- this.y = parseFloat(y);
+ this.position_str = position_str;
+
+ this.x = parseFloat(this.position_str.split(",")[0]);
+ this.y = parseFloat(this.position_str.split(",")[1]);
this.is_equal = function(target)
{