dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed issues with cursor

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-05-21 14:12:51 -10:00
parent 8ded549ae8
commit a9f76f6100
19 changed files with 137 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -55,6 +55,11 @@
<div id='frame'></div>
<div id='terminal'></div>
</div>
<script type="text/javascript" src="scripts/core/init.js"></script>
<script type="text/javascript">
var ronin = new Ronin();
var keyboard = new Keyboard();
ronin.install();
ronin.start(window.location.hash);
</script>
</body>
</html>

4
links/main.css
View File

@ -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; }

2
presets/default.rin
View File

@ -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

27
scripts/core/init.js
View File

@ -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");

4
scripts/core/keyboard.js
View File

@ -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()

39
scripts/core/ronin.js
View File

@ -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)

13
scripts/modules/brush.js
View File

@ -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()
{

2
scripts/modules/brush.pointer.js
View File

@ -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();

170
scripts/modules/cursor.js
View File

@ -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;

26
scripts/modules/default.js
View File

@ -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)

10
scripts/modules/eye.js
View File

@ -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)
{

8
scripts/modules/frame.js
View File

@ -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)
{
}

10
scripts/modules/layer.js
View File

@ -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());

8
scripts/modules/module.js
View File

@ -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(" ");

11
scripts/modules/overlay.js
View File

@ -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)

22
scripts/modules/render.js
View File

@ -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];

1
scripts/modules/source.js
View File

@ -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();
}
}

2
scripts/modules/terminal.js
View File

@ -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 = "<span class='module'>"+host.name+"</span>: "+message;
this.element.innerHTML = "<span class='module'>"+host.name+"</span> "+message;
console.log(this.host.constructor.name,this.message);
}

6
scripts/units/position.js
View File

@ -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)
{