From a9f76f61009840b9b3ffe1939ed0aed4820fe7b5 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sun, 21 May 2017 14:12:51 -1000 Subject: [PATCH] Fixed issues with cursor --- index.html | 7 +- links/main.css | 4 +- presets/default.rin | 2 +- scripts/core/init.js | 27 ----- scripts/core/keyboard.js | 4 + scripts/core/ronin.js | 39 ++++--- scripts/modules/brush.js | 13 --- scripts/modules/brush.pointer.js | 2 +- scripts/modules/cursor.js | 170 +++++++++++++++---------------- scripts/modules/default.js | 26 ++--- scripts/modules/eye.js | 10 -- scripts/modules/frame.js | 8 +- scripts/modules/layer.js | 10 -- scripts/modules/module.js | 8 -- scripts/modules/overlay.js | 11 -- scripts/modules/render.js | 22 ---- scripts/modules/source.js | 1 - scripts/modules/terminal.js | 2 +- scripts/units/position.js | 6 +- 19 files changed, 137 insertions(+), 235 deletions(-) delete mode 100644 scripts/core/init.js diff --git a/index.html b/index.html index 7b52aff..64e20e8 100644 --- a/index.html +++ b/index.html @@ -55,6 +55,11 @@
- + diff --git a/links/main.css b/links/main.css index a9fd84b..5b1d7ef 100644 --- a/links/main.css +++ b/links/main.css @@ -1,7 +1,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;} *:focus {outline: none; } -#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: center center; } +#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: 0px 0px; } #frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background:white;} #frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;} #overlay { position:absolute; z-index:1000;} @@ -15,7 +15,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" #terminal input:focus { color:#fff; } #terminal #logs { position:fixed; bottom:30px; border-bottom:1px solid #222; } -#terminal #logs .module { font-family: 'input_mono_regular'; color:red; } +#terminal #logs .module { font-family: 'input_mono_regular'; color:#ccc; } #terminal #widget { text-align: right} #terminal #widget .mouse { color:white; } diff --git a/presets/default.rin b/presets/default.rin index 4605975..34965bf 100644 --- a/presets/default.rin +++ b/presets/default.rin @@ -9,6 +9,6 @@ path.stroke M105,240 a-45,-45 0 0,0 -45,-45 M150,240 a-90,-90 0 0,0 -90,-90 M150 type:size 10 type:color white type.write 38,262 "RONIN" -type.write 38,252 "B07" +type.write 38,252 "B08" brush:color #000000 brush:size 10 diff --git a/scripts/core/init.js b/scripts/core/init.js deleted file mode 100644 index b4ff873..0000000 --- a/scripts/core/init.js +++ /dev/null @@ -1,27 +0,0 @@ -var ronin = new Ronin(); -ronin.element = document.getElementById('ronin'); -ronin.frame.element = document.getElementById('frame'); -ronin.cursor.element = document.getElementById('cursor'); -ronin.terminal.element = document.getElementById('terminal'); -ronin.cursor.mode = ronin.brush; - -// Cursor - -document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false); -document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e));}, false); -document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e));}, false); -// document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false); -window.addEventListener('resize', function(){ ronin.on_resize(); }, true); - -// Keyboard - -var keyboard = new Keyboard(); -document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); }; -document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); }; - -ronin.install(); - -var target_file = window.location.hash ? window.location.hash : "default"; -target_file = target_file.substr(1,target_file.length-1); - -ronin.start(window.location.hash ? target_file+".rin" : "default.rin"); \ No newline at end of file diff --git a/scripts/core/keyboard.js b/scripts/core/keyboard.js index 200df91..6349bcb 100644 --- a/scripts/core/keyboard.js +++ b/scripts/core/keyboard.js @@ -3,6 +3,9 @@ function Keyboard() this.shift_held = false; this.alt_held = false; + document.onkeyup = function myFunction(){ keyboard.listen_onkeyup(event); }; + document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); }; + this.listen_onkeydown = function(event) { if(event.shiftKey == true){ @@ -44,6 +47,7 @@ function Keyboard() // Passive ronin.widget.update(); ronin.terminal.update(); + ronin.cursor.update(); }; this.key_tab = function() diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index a2afa3f..f86a334 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -35,20 +35,29 @@ function Ronin() this.modules[this.cursor.name] = this.cursor; this.modules[this.terminal.name] = this.terminal; - // + // document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false); + window.addEventListener('resize', function(){ ronin.on_resize(); }, true); this.install = function() { + ronin.element = document.getElementById('ronin'); + ronin.frame.element = document.getElementById('frame'); + ronin.cursor.element = document.getElementById('cursor'); + ronin.terminal.element = document.getElementById('terminal'); + for(var key in this.modules){ this.modules[key].install(); } - // this.terminal.install(); this.widget.install(); + ronin.cursor.mode = ronin.brush; + this.on_drag(); } - this.start = function(target_file) + this.start = function(hash = null) { + var target_file = hash.length > 2 ? hash.substr(1,hash.length-1)+".rin" : "default.rin" + ronin.terminal.update(); ronin.widget.update(); ronin.terminal.input.focus(); @@ -59,19 +68,12 @@ function Ronin() this.position_in_canvas = function(e) { - var x = e.clientX; - var y = e.clientY; - // Canvas Size - x += (-window.innerWidth/2) + (parseInt(this.frame.element.style.width)/2); - y += (-window.innerHeight/2) + (parseInt(this.frame.element.style.height)/2); + // x -= parseInt(this.frame.element.style.left) - parseInt(this.frame.element.style.width/2); + var x = e.clientX - parseInt(this.frame.element.style.left); + var y = e.clientY - parseInt(this.frame.element.style.top); return new Position(x,y); } - this.position_in_window = function(p) - { - return new Position(p.x + parseInt(this.frame.element.style.marginLeft),p.y + parseInt(this.frame.element.style.marginTop)); - } - this.timestamp = function() { var currentdate = new Date(); @@ -83,6 +85,17 @@ function Ronin() { } + this.on_drag = function() + { + // Position Background + var bg_offset_parts = ronin.element.style.backgroundPosition == "" ? [0,0] : ronin.element.style.backgroundPosition.split(" "); + + var x = parseInt(ronin.frame.element.style.left)/4; + var y = parseInt(ronin.frame.element.style.top)/4; + + ronin.element.style.backgroundPosition = x+"px "+y+"px"; + } + this.filename = "default.rin"; this.load = function readTextFile(name) diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index 73da673..a78d166 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -20,19 +20,6 @@ function Brush(rune) return 1, "ok"; } - - this.passive = function(cmd) - { - if(cmd.rect()){ - var x = isNaN(cmd.rect().width) ? 0 : cmd.rect().width; - var y = isNaN(cmd.rect().height) ? 0 : cmd.rect().height; - var pos = new Position(x+","+y); - ronin.overlay.draw(pos); - } - if(cmd.angle() && cmd.position()){ - ronin.overlay.draw(cmd.position()); - } - } this.size_up = function() { diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index 60a2001..d7529a4 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -64,7 +64,7 @@ function Pointer(offset = new Position()) ronin.frame.context().lineCap="round"; ronin.frame.context().lineWidth = this.thickness(); - ronin.frame.context().strokeStyle = new Color(ronin.brush.settings.color).rgba(); + ronin.frame.context().strokeStyle = ronin.brush.settings.color; ronin.frame.context().stroke(); ronin.frame.context().closePath(); diff --git a/scripts/modules/cursor.js b/scripts/modules/cursor.js index 917a3a8..9dba183 100644 --- a/scripts/modules/cursor.js +++ b/scripts/modules/cursor.js @@ -6,15 +6,95 @@ function Cursor(rune) this.mode = null; this.position = new Position(); + this.position_in_window = new Position(); - this.passive = function(cmd) + document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e),e);}, false); + document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e),e);}, false); + document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e),e);}, false); + + this.update = function(event = null) + { + if(event && event.altKey == true && event.shiftKey == true){ + this.set_mode(ronin.frame.active_layer); + } + else if(event && event.altKey == true){ + this.set_mode(ronin.default); + } + else{ + this.set_mode(ronin.brush); + } + } + + this.set_mode = function(mode = ronin.brush) + { + if(!mode){ return; } + + if(this.mode == mode){ return; } + this.mode = mode; + document.body.setAttribute("class",this.mode.name); + ronin.widget.update(); + } + + this.mouse_down = function(position,e) + { + if(this.layer){ this.layer.clear(); } + + this.position = ronin.magnet.update_mouse(position); + this.position_in_window = new Position(e.clientX,e.clientY); + + if(this.mode.constructor.name != Cursor.name){ + this.mode.mouse_from = this.position; + this.mode.mouse_held = true; + if(!position.is_outside()){ + this.mode.mouse_down(this.position); + } + } + } + + this.mouse_move = function(position,e) { if(!this.layer){ this.create_layer(); } + + this.layer.clear(); + + this.position = ronin.magnet.update_mouse(position); + this.position_in_window = new Position(e.clientX,e.clientY); + + if(this.mode){this.mode.mouse_pointer(this.position);} + else{ this.mouse_pointer(this.position);} + + if(this.mode.mouse_from == null){ return; } + + var rect = new Rect(); + rect.width = this.position.x - this.mode.mouse_from.x; + rect.height = this.position.y - this.mode.mouse_from.y; + + if(this.mode.constructor.name != Cursor.name){ + this.mode.mouse_move(this.position,rect); + this.mode.mouse_prev = this.position; + } + } + + this.mouse_up = function(position,e) + { + this.position = ronin.magnet.update_mouse(position); + this.position_in_window = new Position(e.clientX,e.clientY); + + var rect = new Rect(); + rect.width = this.position.x - this.mode.mouse_from.x; + rect.height = this.position.y - this.mode.mouse_from.y; + + if(!this.mode){ return; } + + if(this.mode.constructor.name != Cursor.name){ + if(!position.is_outside()){ + this.mode.mouse_up(this.position,rect); + } + this.mode.mouse_held = false; + } + this.mode.mouse_from = null; } - this.active = function(cmd) - { - } this.draw_pointer_arrow = function(position,size = 1) { @@ -135,88 +215,6 @@ function Cursor(rune) this.pointer_last = position; } - this.update = function(event) - { - console.log("!") - if(event.altKey == true && event.shiftKey == true){ - this.set_mode(ronin.frame.active_layer); - } - else if(event.altKey == true){ - this.set_mode(ronin.default); - } - else{ - this.set_mode(ronin.brush); - } - } - - this.set_mode = function(mode = ronin.brush) - { - if(!mode){ return; } - - if(this.mode == mode){ return; } - this.mode = mode; - document.body.setAttribute("class",this.mode.name); - ronin.widget.update(); - } - - this.mouse_down = function(position) - { - if(this.layer){ this.layer.clear(); } - - this.position = ronin.magnet.update_mouse(position); - - if(this.mode.constructor.name != Cursor.name){ - this.mode.mouse_from = this.position; - this.mode.mouse_held = true; - if(!position.is_outside()){ - this.mode.mouse_down(this.position); - } - } - } - - this.mouse_move = function(position) - { - if(!this.layer){ this.create_layer(); } - - this.layer.clear(); - - this.position = ronin.magnet.update_mouse(position); - - if(this.mode){this.mode.mouse_pointer(this.position);} - else{ this.mouse_pointer(this.position);} - - if(this.mode.mouse_from == null){ return; } - - var rect = new Rect(); - rect.width = this.position.x - this.mode.mouse_from.x; - rect.height = this.position.y - this.mode.mouse_from.y; - - if(this.mode.constructor.name != Cursor.name){ - this.mode.mouse_move(this.position,rect); - this.mode.mouse_prev = this.position; - } - // ronin.terminal.update_hint(); - } - - this.mouse_up = function(position) - { - this.position = ronin.magnet.update_mouse(position); - - var rect = new Rect(); - rect.width = this.position.x - this.mode.mouse_from.x; - rect.height = this.position.y - this.mode.mouse_from.y; - - if(!this.mode){ return; } - - if(this.mode.constructor.name != Cursor.name){ - if(!position.is_outside()){ - this.mode.mouse_up(this.position,rect); - } - this.mode.mouse_held = false; - } - this.mode.mouse_from = null; - } - this.release = function() { this.mode.mouse_held = false; diff --git a/scripts/modules/default.js b/scripts/modules/default.js index bfec344..179d8a6 100644 --- a/scripts/modules/default.js +++ b/scripts/modules/default.js @@ -1,11 +1,6 @@ function Default(rune) { Module.call(this,rune); - - this.hint = function() - { - return ""; - } // Cursor @@ -25,26 +20,21 @@ function Default(rune) this.mouse_down = function(position) { - this.drag_from = ronin.position_in_window(position); + this.drag_from = ronin.cursor.position_in_window; } this.mouse_move = function(position) { if(this.drag_from === null){ return; } - - position = ronin.position_in_window(position); - - var offset_x = this.drag_from.x - position.x; - var offset_y = this.drag_from.y - position.y; - this.drag_offset_x -= offset_x; - this.drag_offset_y -= offset_y; - - ronin.frame.element.style.marginLeft = -(ronin.frame.settings["size"].width/2) + this.drag_offset_x; - ronin.frame.element.style.marginTop = -(ronin.frame.settings["size"].height/2) + this.drag_offset_y; - ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px"; + var offset = ronin.cursor.position_in_window.offset(this.drag_from); + + ronin.frame.element.style.left = parseInt(ronin.frame.element.style.left) + offset.x; + ronin.frame.element.style.top = parseInt(ronin.frame.element.style.top) + offset.y; - this.drag_from = new Position(position.x,position.y); + ronin.on_drag(); + + this.drag_from = ronin.cursor.position_in_window; } this.mouse_up = function(event) diff --git a/scripts/modules/eye.js b/scripts/modules/eye.js index a4ac325..e2f3c5e 100644 --- a/scripts/modules/eye.js +++ b/scripts/modules/eye.js @@ -2,16 +2,6 @@ function Eye(rune) { Module.call(this,rune); - // Module - - this.active = function(cmd) - { - } - - this.passive = function(cmd) - { - } - // TODO: If a rect is given, return the average color this.color_picker = function(position,rect = null) { diff --git a/scripts/modules/frame.js b/scripts/modules/frame.js index 590b7e5..db22be4 100644 --- a/scripts/modules/frame.js +++ b/scripts/modules/frame.js @@ -85,7 +85,7 @@ function Frame(rune) Object.keys(ronin.frame.layers).forEach(function (key) { ronin.frame.layers[key].blink(); }); - setTimeout(function(){ ronin.frame.blink(); }, 30); + setTimeout(function(){ ronin.frame.blink(); }, 300); } this.select_layer = function(layer) @@ -140,12 +140,6 @@ function Frame(rune) ronin.overlay.draw_pointer(position); } - this.mouse_move = function(position,rect) - { - // ronin.terminal.input_element.value = "frame."+ronin.terminal.method_name+" "+this.mouse_from.render()+" "+rect.render()+" "; - ronin.terminal.passive(); - } - this.mouse_up = function(position,rect) { } diff --git a/scripts/modules/layer.js b/scripts/modules/layer.js index b99a617..634c728 100644 --- a/scripts/modules/layer.js +++ b/scripts/modules/layer.js @@ -152,12 +152,6 @@ function Layer(name,manager = null) { return "Move"; } - - this.mouse_down = function(position) - { - // ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" 0,0"; - ronin.terminal.passive(); - } this.mouse_move = function(position) { @@ -167,9 +161,6 @@ function Layer(name,manager = null) ronin.overlay.draw_cross(this.mouse_from); ronin.overlay.draw_cross(position); ronin.overlay.draw_line(this.mouse_from,position); - - // ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" "+offset.render(); - ronin.terminal.passive(); } this.mouse_up = function(position) @@ -182,7 +173,6 @@ function Layer(name,manager = null) ronin.overlay.draw_line(this.mouse_from,position); // ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" "+offset.render(); - ronin.terminal.passive(); // if(this.coordinates.length == 0){ // this.coordinates.push("M"+position.render()); diff --git a/scripts/modules/module.js b/scripts/modules/module.js index e277a6f..7e46ef5 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -31,14 +31,6 @@ function Module(rune) return this.layer; } - this.active = function(cmd) - { - } - - this.passive = function(cmd) - { - } - this.update_setting = function(name,value) { this.settings[name] = value.content.join(" "); diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js index 139b035..02e4cdd 100644 --- a/scripts/modules/overlay.js +++ b/scripts/modules/overlay.js @@ -6,17 +6,6 @@ function Overlay(rune) this.color = new Color("#ffffff"); - this.passive = function(cmd) - { - this.draw(cmd.position(),cmd.rect()); - } - - this.active = function(cmd) - { - if(cmd.bang()){ this.guides = []; } - if(cmd.color()){ this.color = cmd.color(); } - } - // draw this.draw = function(position,rect) diff --git a/scripts/modules/render.js b/scripts/modules/render.js index a858ae4..3e32a66 100644 --- a/scripts/modules/render.js +++ b/scripts/modules/render.js @@ -13,28 +13,6 @@ function Render(rune) this.collection["saturate"] = new Filter_Saturate(); this.collection["contrast"] = new Filter_Contrast(); - this.active = function(cmd) - { - if(!this.layer){ this.create_layer(); } - - var name = cmd.content[0]; - - if(!this.collection[name]){ return; } - - return this.collection[name].render(cmd); - } - - this.passive = function(cmd) - { - if(!this.layer){ this.create_layer(); } - - var name = cmd.content[0]; - - if(!this.collection[name]){ return; } - - return this.collection[name].preview(cmd); - } - this.hint = function(content) { var name = content.trim().replace(this.rune,"").trim().split(" ")[0]; diff --git a/scripts/modules/source.js b/scripts/modules/source.js index c32fe57..a12a47f 100644 --- a/scripts/modules/source.js +++ b/scripts/modules/source.js @@ -96,7 +96,6 @@ function Source(rune) this.coordinates = []; this.last_pos = null; ronin.terminal.input.value = ""; - ronin.terminal.passive(); ronin.overlay.get_layer(true).clear(); } } \ No newline at end of file diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index 13a0e12..124fce7 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -108,6 +108,6 @@ function Log(host,message,error = false) this.error = error; this.element = document.createElement("log"); this.element.setAttribute("class",error ? "error" : "okay"); - this.element.innerHTML = ""+host.name+": "+message; + this.element.innerHTML = ""+host.name+" "+message; console.log(this.host.constructor.name,this.message); } \ No newline at end of file diff --git a/scripts/units/position.js b/scripts/units/position.js index 5ff98ab..d9a63ba 100644 --- a/scripts/units/position.js +++ b/scripts/units/position.js @@ -4,9 +4,9 @@ function Position(position_str = "0,0",y = null) this.example = "100,150"; this.position_str = position_str; - - this.x = y != null ? position_str : parseFloat(this.position_str.split(",")[0]); - this.y = y != null ? y : parseFloat(this.position_str.split(",")[1]); + + this.x = y != null ? position_str : parseFloat(position_str.split(",")[0]); + this.y = y != null ? y : parseFloat(position_str.split(",")[1]); this.add = function(position) {