-
+
diff --git a/links/main.css b/links/main.css
index a8649e8..582c38e 100644
--- a/links/main.css
+++ b/links/main.css
@@ -2,7 +2,9 @@ body { margin:0px; padding:0px; overflow:hidden;}
canvas:hover { cursor: crosshair;}
+#guides { position:fixed; z-index:1000;}
+
#commander { display:none; }
#commander.visible { display:block; }
#commander.hidden { display:none; }
-#commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;}
+#commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;}
\ No newline at end of file
diff --git a/scripts/commander.js b/scripts/commander.js
index 10b99c6..1dff1a0 100644
--- a/scripts/commander.js
+++ b/scripts/commander.js
@@ -20,30 +20,30 @@ function Commander(element,element_input)
var parts = this.element_input.value.split(" ");
// Canvas
- if(parts[0] == ":@"){
+ if(parts[0] == "@"){
canvas.setAttribute('width',parts[1]+"px");
canvas.setAttribute('height',parts[2]+"px");
}
// Brush
- if(parts[0] == ":+"){
+ if(parts[0] == "+"){
parts.shift();
brush.add(parts);
}
- if(parts[0] == ":-"){
+ if(parts[0] == "-"){
parts.shift();
brush.remove(parts);
}
// Save
- if(parts[0] == ":$"){
+ if(parts[0] == "$"){
var d=canvas.toDataURL("image/png");
var w=window.open('about:blank','image from canvas');
w.document.write("
"+parts[1]+"![from canvas]("+d+")
");
}
// Load
- if(parts[0] == ":/"){
+ if(parts[0] == "/"){
base_image = new Image();
base_image.src = 'img/base.png';
base_image.onload = function(){
@@ -52,8 +52,9 @@ function Commander(element,element_input)
}
// Guides
- if(parts[0] == ":|"){
- console.log("!!");
+ if(parts[0] == "|"){
+ parts.shift();
+ ronin.add_guide(parts);
}
this.hide();
}
@@ -63,12 +64,13 @@ function Commander(element,element_input)
var parts = this.element_input.value.split(" ");
// Guides
- if(parts[0] == ":|"){
- console.log("!!");
+ if(parts[0] == "|"){
+ parts.shift();
+ ronin.guide(parts);
}
// Draw
- if(parts[0] == ":/"){
+ if(parts[0] == "/"){
base_image = new Image();
base_image.src = 'img/base.png';
base_image.onload = function(){
diff --git a/scripts/guide.js b/scripts/guide.js
new file mode 100644
index 0000000..2a3e138
--- /dev/null
+++ b/scripts/guide.js
@@ -0,0 +1,36 @@
+function Guide(position,rect)
+{
+ this.position = position;
+ this.rect = rect;
+
+ this.draw = function(context)
+ {
+ context.beginPath();
+
+ if(this.position.x > 0 && this.position.y === 0){
+ context.moveTo(this.position.x,0);
+ context.lineTo(this.position.x,canvas.height);
+ }
+ else if(this.position.x === 0 && this.position.y > 0){
+ context.moveTo(0,this.position.y);
+ context.lineTo(canvas.width,this.position.y);
+ }
+ else if(this.position.x > 0 && this.position.y > 0 && this.rect.w > 0 && this.rect.h > 0){
+ context.moveTo(this.position.x,0);
+ context.lineTo(this.position.x,200);
+ context.lineTo(x + w,y);
+ context.lineTo(x + w,y + h);
+ context.lineTo(x,y + h);
+ context.lineTo(x,y);
+ }
+ else{
+ console.log(this.position);
+ }
+
+ context.lineCap="round";
+ context.lineWidth = 1;
+ context.strokeStyle = "rgba(255,0,0,1)";
+ context.stroke();
+ context.closePath();
+ }
+}
\ No newline at end of file
diff --git a/scripts/keyboard.js b/scripts/keyboard.js
index d8a1674..72e2710 100644
--- a/scripts/keyboard.js
+++ b/scripts/keyboard.js
@@ -18,8 +18,6 @@ function Keyboard()
{
if(this.is_locked === true){ return; }
- commander.passive();
-
switch (event.keyCode)
{
case 9: this.key_tab(); break;
@@ -32,6 +30,8 @@ function Keyboard()
case 186: this.key_colon(); break;
case 27: this.key_escape(); break;
}
+
+ commander.passive();
};
this.key_tab = function()
diff --git a/scripts/main.js b/scripts/main.js
index 65c400a..3e5bb21 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,4 +1,7 @@
var ronin = new Ronin();
+ronin.element = document.getElementById('ronin');
+ronin.guides_element = document.getElementById('guides');
+ronin.guides_context = ronin.guides_element.getContext('2d');
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
@@ -6,21 +9,21 @@ var brush = new Brush();
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
-canvas.addEventListener('mousemove', function(e) {
+document.addEventListener('mousemove', function(e) {
brush.draw(e);
}, false);
-canvas.addEventListener('mousedown', function(e) {
+document.addEventListener('mousedown', function(e) {
if(e.which != 1){ return; }
brush.draw_start(e);
}, false);
-canvas.addEventListener('mouseup', function(e) {
+document.addEventListener('mouseup', function(e) {
brush.draw_stop(e);
}, false);
var keyboard = new Keyboard();
-document.onkeydown = function myFunction(){ keyboard.listen(event); };
+document.onkeyup = function myFunction(){ keyboard.listen(event); };
/* brush experiments
diff --git a/scripts/pointer.js b/scripts/pointer.js
index 2523c8d..aecc562 100644
--- a/scripts/pointer.js
+++ b/scripts/pointer.js
@@ -16,6 +16,7 @@ function Pointer(offset = new Position(), color = new Color('000000'))
context.lineWidth = this.thickness();
context.strokeStyle = "rgba("+this.color.rgb().r+","+this.color.rgb().g+","+this.color.rgb().b+","+1+")";
context.stroke();
+ context.closePath();
this.position_prev = this.position();
}
diff --git a/scripts/position.js b/scripts/position.js
index 8207143..77a2e18 100644
--- a/scripts/position.js
+++ b/scripts/position.js
@@ -1,7 +1,7 @@
function Position(x = 0,y = 0)
{
- this.x = x;
- this.y = y;
+ this.x = parseFloat(x);
+ this.y = parseFloat(y);
this.is_equal = function(target)
{
diff --git a/scripts/rect.js b/scripts/rect.js
new file mode 100644
index 0000000..b461815
--- /dev/null
+++ b/scripts/rect.js
@@ -0,0 +1,5 @@
+function Rect(w = 0,h = 0)
+{
+ this.w = parseFloat(w);
+ this.h = parseFloat(h);
+}
\ No newline at end of file
diff --git a/scripts/ronin.js b/scripts/ronin.js
index 8d88769..689dbae 100644
--- a/scripts/ronin.js
+++ b/scripts/ronin.js
@@ -1,3 +1,46 @@
function Ronin()
{
+ this.element = null;
+ this.guides_element = null;
+ this.guides_context = null;
+ this.guides = [];
+
+ this.draw_guides = function()
+ {
+ this.guides_context.clearRect(0, 0, canvas.width, canvas.height);
+
+ for (i = 0; i < this.guides.length; i++) {
+ this.guides[i].draw(this.guides_context);
+ }
+ }
+
+ this.guide = function(p)
+ {
+ return ;
+
+ // guides_context = document.getElementById('guides').getContext('2d');
+ // guides_context.clearRect(0, 0, canvas.width, canvas.height);
+
+ var x = p[0] ? p[0] : 0 ;
+ var y = p[1] ? p[1] : 0 ;
+ var w = p[2] ? p[2] : 0 ;
+ var h = p[3] ? p[3] : 0 ;
+
+ var g = new Guide(new Position(x,y), new Rect(w,h));
+
+ g.draw(guides_context);
+ }
+
+ this.add_guide = function(p)
+ {
+ var x = p[0] ? p[0] : 0 ;
+ var y = p[1] ? p[1] : 0 ;
+ var w = p[2] ? p[2] : 0 ;
+ var h = p[3] ? p[3] : 0 ;
+
+ var g = new Guide(new Position(x,y), new Rect(w,h));
+
+ this.guides.push(g);
+ this.draw_guides();
+ }
}
\ No newline at end of file