Progress on cursor

sources/links/main.css

@@ -1,12 +1,15 @@
 body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
 *:focus {outline: none; }
 
+* { cursor: none }
+
 yu { display:block; }
 
 #ronin { background:#eee; height: 100vh; width:100vw; }
 #grid { z-index:1;position: fixed; }
 #guide { z-index:700;position: fixed; }
 #render { z-index:800; position: fixed; }
+#cursor { z-index:800; position: fixed; }
 #commander { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px;  -webkit-user-select: none;-webkit-app-region: drag; z-index:900;}
 #commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 20px;font-size: 11px;color: black; margin-left:20px; }
 #hint { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px; font-size: 11px;color: #999; margin-left:20px; }

sources/scripts/core/cursor.js

@@ -1,15 +1,35 @@
 function Cursor(rune)
 {
+  Layer.call(this);
+
+  this.el.id = "cursor";
   this.line = {origin:null,from:null,to:null,destination:null};
   this.is_down = false;
-
   this.query = null;
-
   this.mode = "vertex";
 
+  this.draw_cursor = function(pos,touch = false)
+  {
+    this.clear();
+
+    var ctx = this.context();
+    var radius = ronin.brush.settings.size;
+
+    ctx.beginPath();
+    ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false);
+    ctx.strokeStyle = "#000";
+    ctx.lineWidth = 4.5;
+    ctx.stroke();
+    ctx.strokeStyle = touch ? "#000" : "#fff";
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+    ctx.closePath();
+  }
+
   this.mouse_down = function(e)
   {
     e.preventDefault();
+    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY},true);
 
     ronin.cursor.line.origin = {x:e.clientX,y:e.clientY};
     ronin.cursor.line.from = {x:e.clientX,y:e.clientY};
@@ -25,6 +45,7 @@ function Cursor(rune)
   this.mouse_move = function(e)
   {
     e.preventDefault();
+    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY});
 
     if(!ronin.cursor.line.from){ return; }
 
@@ -48,6 +69,7 @@ function Cursor(rune)
   this.mouse_up = function(e)
   {   
     e.preventDefault();
+    ronin.cursor.draw_cursor({x:e.clientX,y:e.clientY},true);
     
     ronin.cursor.line.destination = {x:e.clientX,y:e.clientY};
 

sources/scripts/layers/grid.js

@@ -26,6 +26,7 @@ function Grid()
     ctx.arc(x, y, 1.5, 0, 2 * Math.PI, false);
     ctx.fillStyle = is_marker ? '#000' : '#ccc';
     ctx.fill();
+    ctx.closePath();
   }
 
   this.resize_to = function(size)

sources/scripts/modules/frame.js

@@ -52,5 +52,6 @@ function Frame()
     ronin.render.resize_to(size);
     ronin.grid.resize_to(size);
     ronin.guide.resize_to(size);
+    ronin.cursor.resize_to(size);
   }
 }

sources/scripts/ronin.js

@@ -25,6 +25,7 @@ function Ronin()
     grid : this.grid,
     guide : this.guide,
     render : this.render,
+    cursor : this.cursor
   };
 
   this.modules = {
@@ -46,6 +47,7 @@ function Ronin()
     this.grid.install();
     this.guide.install();
     this.render.install();
+    this.cursor.install();
 
     this.commander.install();
     this.hint.install();
@@ -57,9 +59,9 @@ function Ronin()
   {
     window.addEventListener('dragover', ronin.io.drag_over);
     window.addEventListener('drop', ronin.io.drop);
-    ronin.render.el.addEventListener('mousedown', ronin.cursor.mouse_down);
-    ronin.render.el.addEventListener('mousemove', ronin.cursor.mouse_move);
-    ronin.render.el.addEventListener('mouseup', ronin.cursor.mouse_up);
+    ronin.cursor.el.addEventListener('mousedown', ronin.cursor.mouse_down);
+    ronin.cursor.el.addEventListener('mousemove', ronin.cursor.mouse_move);
+    ronin.cursor.el.addEventListener('mouseup', ronin.cursor.mouse_up);
     window.addEventListener('keydown', ronin.keyboard.key_down);
     ronin.commander.input_el.addEventListener('input', ronin.commander.on_input);
 
@@ -67,6 +69,7 @@ function Ronin()
     this.render.update();
     this.grid.update();
     this.guide.update();
+    this.cursor.update();
 
     // this.commander.input_el.value = "io import:~/Desktop/test.png anchor=$";
     // this.commander.input_el.value = "path stroke:$+";