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

Implemented a custom cursor!

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-01-24 08:34:32 -07:00
parent ceb01f8ae1
commit aa7bb5ff25
4 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -52,6 +52,7 @@
</head> </head>
<body> <body>
<div id='ronin'> <div id='ronin'>
<div id='cursor'></div>
<div id='surface'></div> <div id='surface'></div>
<div id='widget'>Loading..</div> <div id='widget'>Loading..</div>
<div id ='commander'> <div id ='commander'>

3
links/main.css
View File

@ -1,7 +1,7 @@
body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;} body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
*:focus {outline: none; } *:focus {outline: none; }
canvas:hover { cursor: crosshair;} canvas:hover { cursor: none;}
#ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; } #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:3px;} #surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:3px;}
@ -15,6 +15,7 @@ canvas:hover { cursor: crosshair;}
#widget .module .highlight.managed { background:red; color:black; } #widget .module .highlight.managed { background:red; color:black; }
#widget .cursor { text-align: right;margin-top: 5px;position: absolute;right:0px} #widget .cursor { text-align: right;margin-top: 5px;position: absolute;right:0px}
#widget .layer:hover { cursor:pointer;} #widget .layer:hover { cursor:pointer;}
#cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:10000; pointer-events: none}
#commander { display:none; z-index: 2000; position:fixed; } #commander { display:none; z-index: 2000; position:fixed; }
#commander.visible { display:block; } #commander.visible { display:block; }

22
scripts/core/cursor.js
View File

@ -10,6 +10,8 @@ function Cursor(rune)
this.magnetism = null; this.magnetism = null;
this.grid = new Position(4,4); this.grid = new Position(4,4);
this.element = null;
this.layer = null; this.layer = null;
this.install = function() this.install = function()
@ -104,6 +106,22 @@ function Cursor(rune)
return new Position(x,y); return new Position(x,y);
} }
this.update_element = function(position)
{
position = ronin.position_in_window(position);
this.element.style.left = (position.x + window.innerWidth/2);
this.element.style.top = (position.y + window.innerHeight/2);
var radius = this.mode && this.mode.size ? this.mode.size : 5;
this.element.style.width = radius;
this.element.style.height = radius;
this.element.style.borderRadius = radius;
this.element.style.marginLeft = -radius/2;
this.element.style.marginTop = -radius/2;
this.element.style.borderColor = this.mode && this.mode.color ? this.mode.color.hex : "#ff0000";
}
// //
this.mouse_down = function(position) this.mouse_down = function(position)
@ -121,14 +139,18 @@ function Cursor(rune)
this.mouse_move = function(position) this.mouse_move = function(position)
{ {
this.update_element(position);
if(this.magnetism){ if(this.magnetism){
position = this.magnetic_position(position); position = this.magnetic_position(position);
} }
this.position = position; this.position = position;
if(this.mode.constructor.name != Cursor.name){ if(this.mode.constructor.name != Cursor.name){
this.mode.mouse_move(position); this.mode.mouse_move(position);
} }
} }
this.mouse_up = function(position) this.mouse_up = function(position)

1
scripts/core/init.js
View File

@ -2,6 +2,7 @@ var ronin = new Ronin();
ronin.element = document.getElementById('ronin'); ronin.element = document.getElementById('ronin');
ronin.surface.element = document.getElementById('surface'); ronin.surface.element = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget'); ronin.widget.element = document.getElementById('widget');
ronin.cursor.element = document.getElementById('cursor');
ronin.cursor.mode = ronin.brush; ronin.cursor.mode = ronin.brush;
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input")); var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));