From 3df9b21772c36b423449ad1830e5d3923913de32 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 15 Apr 2017 11:47:54 -1000 Subject: [PATCH] Improved Widgets --- index.html | 1 + links/main.css | 14 ++++++--- presets/default.rin | 4 ++- scripts/core/init.js | 2 +- scripts/core/keyboard.js | 4 +-- scripts/core/ronin.js | 2 ++ scripts/modules/brush.js | 20 ++++++++++--- scripts/modules/cursor.js | 5 ++++ scripts/modules/frame.js | 56 +++++++++++------------------------ scripts/modules/layer.js | 11 ------- scripts/modules/magnet.js | 14 ++++----- scripts/modules/module.js | 4 ++- scripts/modules/terminal.js | 3 +- scripts/modules/widget.js | 59 +++++++++++++++++++++++++++++++++++++ 14 files changed, 128 insertions(+), 71 deletions(-) create mode 100644 scripts/modules/widget.js diff --git a/index.html b/index.html index fc4735b..c3211a5 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,7 @@ + diff --git a/links/main.css b/links/main.css index fc752b9..3e30709 100644 --- a/links/main.css +++ b/links/main.css @@ -4,9 +4,6 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" #ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; } #frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;} #frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;} -#frame widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; } -#frame widget span { display:inline-block; padding:2px 10px; } -#frame widget .cursor { position:absolute; bottom:0px; right:0px; } #frame.bright widget { color:#000; } #overlay { position:absolute; z-index:1000;} #frame { cursor:none;} @@ -26,4 +23,13 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" #terminal.hide { height:25px; } #terminal.mini { height:120px; } -#terminal.full { height:100vh; } \ No newline at end of file +#terminal.full { height:100vh; } + +#widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; } +#widget span { display:inline-block; line-height:15px; padding:0px 5px; vertical-align: top; } +#widget span name { display: block; border-bottom: 1px solid #333; line-height:25px; margin-bottom:5px;} +#widget .cursor { } +#widget li { display:block; } +#widget li.active { color:#72dec2; } +#widget li.inactive { color:#fff; } +#widget li.managed { color:#777; } \ No newline at end of file diff --git a/presets/default.rin b/presets/default.rin index 78187e2..a248610 100644 --- a/presets/default.rin +++ b/presets/default.rin @@ -1,3 +1,5 @@ frame.select main ; frame.resize 400x400 ; -brush:color #ff00ff ; \ No newline at end of file +brush:color #ff0000 ; +brush.add_pointer 1,1 ; +brush.add_pointer 2,2 ; \ No newline at end of file diff --git a/scripts/core/init.js b/scripts/core/init.js index edf0a99..0906ad0 100644 --- a/scripts/core/init.js +++ b/scripts/core/init.js @@ -35,4 +35,4 @@ ronin.terminal.query("terminal.load default.rin"); ronin.terminal.input_element.focus(); ronin.terminal.update_hint(); -ronin.frame.update_widget(); \ No newline at end of file +ronin.widget.update(); \ No newline at end of file diff --git a/scripts/core/keyboard.js b/scripts/core/keyboard.js index 76892d6..541358e 100644 --- a/scripts/core/keyboard.js +++ b/scripts/core/keyboard.js @@ -12,7 +12,7 @@ function Keyboard() this.alt_held = true; } ronin.cursor.update(event); - ronin.frame.update_widget(); + ronin.widget.update(); ronin.terminal.update_hint(); } @@ -45,7 +45,7 @@ function Keyboard() // Passive ronin.terminal.passive(ronin.terminal.input_element.value); - ronin.frame.update_widget(); + ronin.widget.update(); ronin.terminal.update_hint(); }; diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index cf3c954..86c5ee5 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -19,6 +19,7 @@ function Ronin() this.overlay = new Overlay("|"); this.terminal = new Terminal(">"); this.cursor = new Cursor("."); + this.widget = new Widget("?"); this.modules[this.frame.constructor.name] = this.frame; this.modules[this.type.constructor.name] = this.type; @@ -43,6 +44,7 @@ function Ronin() } this.terminal.install(); + this.widget.install(); } this.cursors = []; diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index 8138d2a..1acefb1 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -17,7 +17,8 @@ function Brush(rune) pointer.offset = params.position() ? params.position() : new Position("0,0"); this.pointers.push(pointer); - ronin.terminal.log(new Log(this,"Added pointer at: "+pointer.offset)); + ronin.terminal.log(new Log(this,"Added pointer at: "+pointer.offset.render())); + ronin.widget.update(); } this.passive = function(cmd) @@ -36,14 +37,14 @@ function Brush(rune) this.size_up = function() { this.settings["size"] -= this.settings["size"] > 1 ? 1 : 0; - ronin.frame.update_widget(); + ronin.frame.widget.update(); ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.settings["size"])); } this.size_down = function() { this.settings["size"] += 1; - ronin.frame.update_widget(); + ronin.frame.widget.update(); ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.settings["size"])); } @@ -81,7 +82,7 @@ function Brush(rune) return "Eraser "+this.settings["size"]; } else{ - return "● Brush "+ronin.brush.pointers.length+"x "+this.settings["size"]; + return "Brush "+this.settings["size"]; } } @@ -119,4 +120,15 @@ function Brush(rune) ronin.brush.pointers[i].stop(); } } + + this.widget = function() + { + var s = "● Brush "+ronin.brush.pointers.length+"x "+this.settings["size"]+"
"; + + for(id in this.pointers){ + s += this.pointers[id].widget(); + } + return s; + + } } \ No newline at end of file diff --git a/scripts/modules/cursor.js b/scripts/modules/cursor.js index fa06e79..8d8d5c3 100644 --- a/scripts/modules/cursor.js +++ b/scripts/modules/cursor.js @@ -206,4 +206,9 @@ function Cursor(rune) ronin.terminal.update_hint(); this.mode.mouse_from = null; } + + this.widget = function() + { + return this.mode.mouse_mode(); + } } \ No newline at end of file diff --git a/scripts/modules/frame.js b/scripts/modules/frame.js index 2221556..6f3db9a 100644 --- a/scripts/modules/frame.js +++ b/scripts/modules/frame.js @@ -12,12 +12,9 @@ function Frame(rune) this.add_method(new Method("resize",[new Rect().name])); this.add_method(new Method("crop",[new Position().name,new Rect().name])); this.add_method(new Method("select",["text"])); - - this.widget_element = document.createElement("widget"); this.install = function() { - this.element.appendChild(this.widget_element); this.blink(); } @@ -99,42 +96,6 @@ function Frame(rune) this.element.appendChild(layer.element); } - this.widget = function() - { - if(!this.active_layer){ return ""; } - - return this.rune+" "+this.settings["size"].render(); - } - - // Widget - - this.update_widget = function() - { - if(!this.active_layer){ return; } - - var s = ""; - - s += ""; - for (var key in ronin.modules){ - s += ronin.modules[key].widget() ? ronin.modules[key].widget()+" " : ""; - } - s += ""; - - s += ""+ronin.cursor.mode.mouse_mode()+""; - - var keys = Object.keys(ronin.frame.layers); - var loc = keys.indexOf(this.active_layer.name); - - if(keys.length > 1){ - s += ""+ronin.frame.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")"; - } - else{ - s += ""+ronin.frame.active_layer.widget()+""; - } - - this.widget_element.innerHTML = s; - } - // Commands this.layer_up = function() @@ -177,4 +138,21 @@ function Frame(rune) this.mouse_up = function(position,rect) { } + + this.widget = function() + { + var s = ""; + for(layer in this.layers){ + if(this.active_layer.name == layer){ + s += "
  • "+layer+"
    • "; + } + else if(this.layers[layer].manager){ + s += "
  • "+this.layers[layer].manager.constructor.name+"*
    • "; + } + else{ + s += "
  • "+layer+"
    • "; + } + } + return s; + } } \ No newline at end of file diff --git a/scripts/modules/layer.js b/scripts/modules/layer.js index 631f5f1..e47a04b 100644 --- a/scripts/modules/layer.js +++ b/scripts/modules/layer.js @@ -131,17 +131,6 @@ function Layer(name,manager = null) // - this.widget = function() - { - var e_name = this.name; - var e_class = ""; - - if(ronin.frame.active_layer.name == this.name){ e_class += "highlight "; } - if(this.manager != null){ e_class += "managed "; } - - return ""+e_name+""; - } - this.mouse_pointer = function(position) { return ronin.cursor.draw_pointer_arrow(position); diff --git a/scripts/modules/magnet.js b/scripts/modules/magnet.js index f0dc7f1..9142348 100644 --- a/scripts/modules/magnet.js +++ b/scripts/modules/magnet.js @@ -72,13 +72,13 @@ function Magnet(rune) this.update_mouse = function(position) { - if(!this.layer){ this.create_layer(); } - - this.layer.clear(); - - this.draw_helper(position); - this.draw_grid(this.settings["grid"],this.settings["marker"]); - + if(this.settings["grid"].width > 4 || this.settings["grid"].height > 4){ + if(!this.layer){ this.create_layer(); } + this.layer.clear(); + this.draw_helper(position); + this.draw_grid(this.settings["grid"],this.settings["marker"]); + } + return this.magnetic_position(position); } diff --git a/scripts/modules/module.js b/scripts/modules/module.js index 346ae88..902d3cd 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -20,6 +20,7 @@ function Module(rune) this.create_layer = function() { + console.info("!!!!",this); this.layer = new Layer(this.constructor.name+".Preview",this); this.layer.element.setAttribute("style","z-index:7000"); ronin.frame.add_layer(this.layer); @@ -43,7 +44,7 @@ function Module(rune) { this.settings[name] = value.content.join(" "); ronin.terminal.log(new Log(this,"Updated setting: "+name+", to "+this.settings[name])); - ronin.frame.update_widget(); + ronin.widget.update(); } this.add_method = function(method) @@ -120,6 +121,7 @@ function Module(rune) this.key_escape = function() { + } this.key_delete = function() diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index 5f2719b..c5f08fa 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -94,8 +94,9 @@ function Terminal(rune) this.query = function(input_str) { + if(input_str.trim() == ""){ return; } if(this.locks.length > 0){ console.warn("Trying: "+input_str+", Locked: ",this.locks); return; } - console.warn(input_str); + this.lock("query"); this.input_element.value = ""; diff --git a/scripts/modules/widget.js b/scripts/modules/widget.js new file mode 100644 index 0000000..c7b94be --- /dev/null +++ b/scripts/modules/widget.js @@ -0,0 +1,59 @@ +function Widget(rune) +{ + Module.call(this,rune); + + this.element = document.createElement("div"); + this.element.setAttribute("id","widget"); + + this.install = function() + { + ronin.element.appendChild(this.element); + } + + this.update = function() + { + var s = ""; + + for (var key in ronin.modules){ + s += ronin.modules[key].widget() ? ""+key+""+ronin.modules[key].widget()+" " : ""; + } + + this.element.innerHTML = s; + } + + // this.widget = function() + // { + // if(!this.active_layer){ return ""; } + + // return this.rune+" "+this.settings["size"].render(); + // } + + // // Widget + + this.update_widget = function() + { + if(!this.active_layer){ return; } + + var s = ""; + + s += ""; + for (var key in ronin.modules){ + s += ronin.modules[key].widget() ? ronin.modules[key].widget()+" " : ""; + } + s += ""; + + s += ""+ronin.cursor.mode.mouse_mode()+""; + + var keys = Object.keys(ronin.frame.layers); + var loc = keys.indexOf(this.active_layer.name); + + if(keys.length > 1){ + s += ""+ronin.frame.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")"; + } + else{ + s += ""+ronin.frame.active_layer.widget()+""; + } + + this.widget_element.innerHTML = s; + } +} \ No newline at end of file