From 173401554ded76f17469e2d5b8d1e4aa3aad1685 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Fri, 25 Nov 2016 13:57:07 -0600 Subject: [PATCH] Improved layout and added widget. --- index.html | 10 +++++++--- links/main.css | 9 +++++---- scripts/{modules => }/hint.js | 0 scripts/init.js | 8 +++++--- scripts/module.js | 5 +++++ scripts/modules/brush.js | 7 ++++++- scripts/modules/canvas.js | 29 +++++++---------------------- scripts/modules/overlay.js | 25 ------------------------- scripts/ronin.js | 28 ++++++++++++++++++++++++++++ scripts/widget.js | 15 +++++++++++++++ 10 files changed, 78 insertions(+), 58 deletions(-) rename scripts/{modules => }/hint.js (100%) create mode 100644 scripts/widget.js diff --git a/index.html b/index.html index a892b1f..f99d969 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,6 @@ - @@ -31,14 +30,19 @@ + + Ronin
- - +
+ + +
This is a test
+
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