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

Custom pointer

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-03-17 15:03:34 -07:00
parent e8ef14a00c
commit ed5702beee
4 changed files with 79 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
links/main.css
View File

@ -1,8 +1,6 @@
body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
*:focus {outline: none; }
canvas:hover { cursor: none;}
#ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; }
#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;}
#surface > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
@ -10,7 +8,7 @@ canvas:hover { cursor: none;}
#surface widget span { display:inline-block; padding:2px 10px; }
#surface widget .cursor { position:absolute; bottom:0px; right:0px; }
#overlay { position:absolute; z-index:1000;}
#cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:8000; pointer-events: none}
#surface { cursor:none;}
#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;overflow: hidden;}
#terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900; color:white;}
@ -20,4 +18,5 @@ canvas:hover { cursor: none;}
#terminal logs { display: block;position: absolute;bottom:20px;width:100vw;color:white}
#terminal logs log { display: block; font-size:10px; line-height:25px; padding:0px 5px; color:#666;}
#terminal logs log .rune { color:white; }
#terminal logs log.error .rune { color:red; }
#terminal menu { display: inline-block;position: absolute;bottom: 0px;right: 0px;padding: 0px 5px;font-size: 10px;line-height: 20px;color:white }

59
scripts/modules/cursor.js
View File

@ -10,8 +10,6 @@ function Cursor(rune)
this.magnetism = null;
this.grid = new Position(4,4);
this.element = null;
this.passive = function(cmd)
{
if(!cmd.rect()){ return; }
@ -70,6 +68,49 @@ function Cursor(rune)
context.fill();
}
this.draw_pointer = function(position,size = 1)
{
if(!this.layer){ this.create_layer(); }
this.pointer_last = this.pointer_last ? this.pointer_last : position;
this.layer.clear();
this.layer.context().beginPath();
this.layer.context().moveTo(this.pointer_last.x,this.pointer_last.y);
this.layer.context().lineTo(position.x,position.y);
this.layer.context().lineCap="round";
this.layer.context().lineWidth = 1;
this.layer.context().strokeStyle = "white";
this.layer.context().stroke();
this.layer.context().closePath();
this.layer.context().beginPath();
this.layer.context().arc(position.x, position.y, 0.5, 0, 2 * Math.PI, false);
this.layer.context().fillStyle = 'white';
this.layer.context().fill();
this.layer.context().closePath();
this.layer.context().beginPath();
this.layer.context().moveTo(position.x + 2,position.y);
this.layer.context().lineTo(position.x + 5,position.y);
this.layer.context().moveTo(position.x,position.y + 2);
this.layer.context().lineTo(position.x,position.y + 5);
this.layer.context().moveTo(position.x - 2,position.y);
this.layer.context().lineTo(position.x - 5,position.y);
this.layer.context().moveTo(position.x,position.y - 2);
this.layer.context().lineTo(position.x,position.y - 5);
this.layer.context().lineCap="round";
this.layer.context().lineWidth = 1;
this.layer.context().strokeStyle = "white";
this.layer.context().stroke();
this.layer.context().closePath();
this.pointer_last = position;
}
this.update = function(event)
{
if(ronin.module){
@ -103,19 +144,12 @@ function Cursor(rune)
return new Position(x,y);
}
this.update_element = function(position)
{
position = ronin.position_in_window(position);
var radius = this.mode && this.mode.size ? this.mode.size : 5;
this.element.setAttribute("style","left:"+(position.x + window.innerWidth/2)+"px;top:"+(position.y + window.innerHeight/2)+"px;width:"+radius+"px;height:"+radius+"px;margin-left:"+(-(radius/2)-1)+"px;margin-top:"+(-(radius/2)-1)+"px;border:1px solid "+(this.mode && this.mode.color ? this.mode.color.hex : ronin.brush.color.hex));
}
//
this.mouse_down = function(position)
{
this.layer.clear();
if(this.magnetism){
position = this.magnetic_position(position);
}
@ -130,12 +164,13 @@ function Cursor(rune)
this.mouse_move = function(position)
{
this.draw_pointer(position);
if(this.mode.mouse_from == null){ return; }
if(this.magnetism){
position = this.magnetic_position(position);
}
this.update_element(position);
this.position = position;

39
scripts/modules/file.load.js
View File

@ -8,7 +8,7 @@ function FileLoad(rune)
{
ronin.overlay.clear();
if(!cmd.filepath() && !cmd.value()){ return; }
if(!cmd.filepath() && !cmd.value()){ ronin.terminal.log(new Log(this,"Missing image path.","error")); return; }
var position = cmd.position() ? cmd.position() : new Position();
@ -34,16 +34,33 @@ function FileLoad(rune)
}
this.passive = function(cmd)
{
ronin.overlay.draw(cmd.position(),cmd.rect());
}
this.mouse_mode = function()
{
if(!cmd.filepath() && !cmd.value()){ return; }
var position = cmd.position() ? cmd.position() : new Position();
if(position && cmd.rect()){
ronin.overlay.draw(position,cmd.rect());
}
else if(position){
ronin.overlay.draw(position);
}
return "Place";
}
this.mouse_down = function(position)
{
ronin.overlay.draw(position);
ronin.terminal.input_element.value = "/ "+position.render();
ronin.terminal.update_hint();
}
this.mouse_move = function(position,rect)
{
ronin.overlay.draw(this.mouse_from,rect);
ronin.terminal.input_element.value = "/ "+this.mouse_from.render()+" "+rect.render();
ronin.terminal.update_hint();
}
this.mouse_up = function(position,rect)
{
ronin.overlay.draw(this.mouse_from,rect);
ronin.terminal.input_element.value = "/ "+this.mouse_from.render()+" "+rect.render();
ronin.terminal.update_hint();
}
}

3
scripts/modules/terminal.js
View File

@ -169,8 +169,9 @@ function Terminal(rune)
// Log
function Log(host,message)
function Log(host,message,type = "default")
{
this.element = document.createElement("log");
this.element.setAttribute("class",type);
this.element.innerHTML = "<span class='rune'>"+host.rune+"</span> "+message;
}