Custom pointer

links/main.css

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

scripts/modules/cursor.js

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

scripts/modules/file.load.js

@@ -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();
     
@@ -35,15 +35,32 @@ function FileLoad(rune)
   
   this.passive = function(cmd)
   {    
-    if(!cmd.filepath() && !cmd.value()){ return; }
+    ronin.overlay.draw(cmd.position(),cmd.rect());
+  }
 
-    var position = cmd.position() ? cmd.position() : new Position();
+  this.mouse_mode = function()
+  {
+    return "Place";
+  }
 
-    if(position && cmd.rect()){
-      ronin.overlay.draw(position,cmd.rect());
-    }
-    else if(position){
-      ronin.overlay.draw(position);
-    }
+  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();
   }
 }

scripts/modules/terminal.js

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