diff --git a/links/main.css b/links/main.css
index 1717b0a..51c80aa 100644
--- a/links/main.css
+++ b/links/main.css
@@ -1,12 +1,13 @@
-body { margin:0px; padding:0px; overflow:hidden;}
+body { margin:0px; padding:0px; overflow:hidden; font-family:courier,monospace;}
*:focus {outline: none; }
canvas:hover { cursor: crosshair;}
#ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);}
-
-#overlay { position:fixed; z-index:1000;}
-#workspace { position:fixed; background:#efefef; border-radius:3px;}
+#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px;}
+#overlay { position:absolute; z-index:1000;}
+#workspace { position:absolute; background:#efefef; border-radius:3px;}
+#widget { color:#efefef; position:absolute; font-size:11px; line-height:30px;}
#commander { display:none; z-index: 2000; position:fixed; }
#commander.visible { display:block; }
diff --git a/scripts/modules/hint.js b/scripts/hint.js
similarity index 100%
rename from scripts/modules/hint.js
rename to scripts/hint.js
diff --git a/scripts/init.js b/scripts/init.js
index 7db1dee..07a1172 100644
--- a/scripts/init.js
+++ b/scripts/init.js
@@ -2,6 +2,8 @@ var ronin = new Ronin();
ronin.canvas.element = document.getElementById('workspace');
ronin.overlay.element = document.getElementById('overlay');
ronin.hint.element = document.getElementById('commander_hint');
+ronin.surface = document.getElementById('surface');
+ronin.widget.element = document.getElementById('widget');
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));
@@ -9,15 +11,15 @@ var commander = new Commander(document.getElementById("commander"),document.getE
document.addEventListener('mousemove', function(e) {
if(e.which == 1){ ronin.brush.draw(e); }
- if(e.which == 2){ ronin.canvas.drag(e); ronin.overlay.drag(e); }
+ if(e.which == 2){ ronin.drag(e); }
}, false);
document.addEventListener('mousedown', function(e) {
if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); }
- if(e.which == 2){ ronin.canvas.drag_start(e); ronin.canvas.drag(e); ronin.overlay.drag_start(e); ronin.overlay.drag(e); }
+ if(e.which == 2){ ronin.drag_start(e); ronin.drag(e); }
}, false);
document.addEventListener('mouseup', function(e) {
if(e.which == 1){ ronin.brush.draw_stop(e); }
- if(e.which == 2){ ronin.canvas.drag_stop(e); ronin.overlay.drag_stop(e); }
+ if(e.which == 2){ ronin.drag_stop(e) }
document.getElementById("commander_input").focus();
}, false);
diff --git a/scripts/module.js b/scripts/module.js
index d9b3496..2a79282 100644
--- a/scripts/module.js
+++ b/scripts/module.js
@@ -16,4 +16,9 @@ function Module()
{
return "unknown";
}
+
+ this.widget = function()
+ {
+ return "";
+ }
}
\ No newline at end of file
diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js
index 32a7ead..16cfe75 100644
--- a/scripts/modules/brush.js
+++ b/scripts/modules/brush.js
@@ -41,6 +41,7 @@ function Brush()
if(cmd.value()){
this.size = cmd.value().float;
}
+ ronin.widget.update();
}
this.passive = function(cmd)
@@ -67,7 +68,7 @@ function Brush()
{
if(this.is_drawing === false){return;}
- this.position = new Position(e.clientX - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.canvas.element.style.top));
+ this.position = new Position(e.clientX - parseFloat(ronin.surface.style.left) - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top));
for (i = 0; i < this.pointers.length; i++) {
this.pointers[i].draw();
@@ -92,4 +93,8 @@ function Brush()
}
}
+ this.widget = function()
+ {
+ return "> "+this.size+"
"+this.color.render()+" ";
+ }
}
\ No newline at end of file
diff --git a/scripts/modules/canvas.js b/scripts/modules/canvas.js
index c7c4ecb..a5c96f4 100644
--- a/scripts/modules/canvas.js
+++ b/scripts/modules/canvas.js
@@ -37,6 +37,11 @@ function Canvas(element)
this.element.setAttribute('height',rect.height+"px");
this.element.style.left = (window.innerWidth/2)-(rect.width/2);
this.element.style.top = (window.innerHeight/2)-(rect.height/2);
+
+ ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
+ ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
+
+ ronin.widget.update();
}
this.context = function()
@@ -49,28 +54,8 @@ function Canvas(element)
this.context().clearRect(0, 0, this.element.width, this.element.height);
}
- // Drag
-
- this.drag_from = null;
-
- this.drag_start = function(e)
+ this.widget = function()
{
- this.drag_from = new Position(e.clientX,e.clientY);
- }
-
- this.drag = function(e)
- {
- if(e.which != 2){ return; }
-
- var offset_x = this.drag_from.x - e.clientX;
- this.element.style.left = parseInt(this.element.style.left) - offset_x;
- var offset_y = this.drag_from.y - e.clientY;
- this.element.style.top = parseInt(this.element.style.top) - offset_y;
- this.drag_from = new Position(e.clientX,e.clientY);
- }
-
- this.drag_stop = function(e)
- {
- this.drag_from = null;
+ return "@ "+this.element.width+"x"+this.element.height+" ";
}
}
\ No newline at end of file
diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js
index 5b5deca..e410068 100644
--- a/scripts/modules/overlay.js
+++ b/scripts/modules/overlay.js
@@ -137,29 +137,4 @@ function Overlay(element)
{
this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height);
}
-
- // Drag
-
- this.drag_from = null;
-
- this.drag_start = function(e)
- {
- this.drag_from = new Position(e.clientX,e.clientY);
- }
-
- this.drag = function(e)
- {
- if(e.which != 2){ return; }
-
- var offset_x = this.drag_from.x - e.clientX;
- this.element.style.left = parseInt(this.element.style.left) - offset_x;
- var offset_y = this.drag_from.y - e.clientY;
- this.element.style.top = parseInt(this.element.style.top) - offset_y;
- this.drag_from = new Position(e.clientX,e.clientY);
- }
-
- this.drag_stop = function(e)
- {
- this.drag_from = null;
- }
}
\ No newline at end of file
diff --git a/scripts/ronin.js b/scripts/ronin.js
index 540bc93..784185f 100644
--- a/scripts/ronin.js
+++ b/scripts/ronin.js
@@ -3,6 +3,9 @@ function Ronin()
this.modules = {};
this.hint = new Hint();
+ this.widget = new Widget();
+ this.surface = null;
+
this.canvas = new Canvas();
this.overlay = new Overlay();
this.brush = new Brush();
@@ -18,4 +21,29 @@ function Ronin()
this.modules[":"] = this.filter;
this.modules["-"] = this.stroke;
this.modules["+"] = this.vector;
+
+ // Drag
+
+ this.drag_from = null;
+
+ this.drag_start = function(e)
+ {
+ this.drag_from = new Position(e.clientX,e.clientY);
+ }
+
+ this.drag = function(e)
+ {
+ if(e.which != 2){ return; }
+
+ var offset_x = this.drag_from.x - e.clientX;
+ this.surface.style.left = this.surface.style.left ? parseInt(this.surface.style.left) - offset_x : offset_x;
+ var offset_y = this.drag_from.y - e.clientY;
+ this.surface.style.top = this.surface.style.top ? parseInt(this.surface.style.top) - offset_y : offset_y;
+ this.drag_from = new Position(e.clientX,e.clientY);
+ }
+
+ this.drag_stop = function(e)
+ {
+ this.drag_from = null;
+ }
}
\ No newline at end of file
diff --git a/scripts/widget.js b/scripts/widget.js
new file mode 100644
index 0000000..eeb0508
--- /dev/null
+++ b/scripts/widget.js
@@ -0,0 +1,15 @@
+function Widget()
+{
+ this.element = null;
+
+ this.update = function()
+ {
+ var s = "";
+
+ for (var key in ronin.modules){
+ s += ronin.modules[key].widget();
+ }
+
+ this.element.innerHTML = s;
+ }
+}
\ No newline at end of file