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>
<body>
<div id='ronin'>
<div id='cursor'></div>
<div id='surface'></div>
<div id='widget'>Loading..</div>
<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;}
*: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; }
#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 .cursor { text-align: right;margin-top: 5px;position: absolute;right:0px}
#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.visible { display:block; }

22
scripts/core/cursor.js
View File

@ -10,6 +10,8 @@ function Cursor(rune)
this.magnetism = null;
this.grid = new Position(4,4);
this.element = null;
this.layer = null;
this.install = function()
@ -104,6 +106,22 @@ function Cursor(rune)
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)
@ -121,14 +139,18 @@ function Cursor(rune)
this.mouse_move = function(position)
{
this.update_element(position);
if(this.magnetism){
position = this.magnetic_position(position);
}
this.position = position;
if(this.mode.constructor.name != Cursor.name){
this.mode.mouse_move(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.surface.element = document.getElementById('surface');
ronin.widget.element = document.getElementById('widget');
ronin.cursor.element = document.getElementById('cursor');
ronin.cursor.mode = ronin.brush;
var commander = new Commander(document.getElementById("commander"),document.getElementById("commander_input"));