Brought back the layer.move

links/main.css

@@ -1,7 +1,7 @@
 body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace;}
 *:focus {outline: none; }
 
-#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: 0px 0px; }
+#ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: 0px 0px;}
 #frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background-image:url(../media/graphics/void.svg); background-position:0px 0px; }
 #frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
 #overlay { position:absolute; z-index:1000;}

presets/default.rin

@@ -1,16 +1,17 @@
 frame.resize 300x300 
 frame.select main 
-layer.fill #ff0000 
+layer.fill #ffffff 
-render.stencil 45' #000000
+render.stencil 45' #dddddd
 path:line_width 43
-path:line_color #EEEEEE
+path:line_color #000000
 path:line_cap square
 path.stroke M105,240 a-45,-45 0 0,0 -45,-45 M150,240 a-90,-90 0 0,0 -90,-90 M150,60 a90,90 0 0,0 90,90 M195,60 a45,45 0 0,0 45,45 M60,105 a45,-45 0 0,0 45,-45 M240,195 a-45,45 0 0,0 -45,45
 type:size 10
-type:color white
+type:color #000000
 type.write 38,262 "RONIN"
-type.write 38,252 "B08"
+type:font "DIN Medium"
-brush:color #000000
+type.write 38,252 "B09"
+brush:color #ff0000
 brush:size 2
 path:line_width 20
 path:line_color #999999

scripts/modules/brush.js

@@ -64,10 +64,10 @@ function Brush(rune)
   this.mouse_mode = function()
   {
     if(keyboard.shift_held == true){
-      return "Eraser "+this.settings.size;
+      return "Erase "+this.settings.size;
     }
     else{
-      return "Brush <i style='color:"+this.settings["color"]+"'>&#9679;</i> "+this.settings.size;  
+      return "Paint <i style='color:"+this.settings["color"]+"'>&#9679;</i> "+this.settings.size;  
     }
   }
   

scripts/modules/brush.pointer.js

@@ -1,4 +1,4 @@
-function Pointer(offset = new Position(), color = new Color().hex, scale = 1)
+function Pointer(offset = new Position(), color = null, scale = 1)
 {
   this.offset = offset;
   this.color = color;
@@ -68,7 +68,7 @@ function Pointer(offset = new Position(), color = new Color().hex, scale = 1)
 
     ronin.frame.context().lineCap="round";
     ronin.frame.context().lineWidth = this.thickness();
-    ronin.frame.context().strokeStyle = this.color;
+    ronin.frame.context().strokeStyle = this.color ? this.color : ronin.brush.color;
     ronin.frame.context().stroke();
     ronin.frame.context().closePath();
 
@@ -125,7 +125,7 @@ function Pointer(offset = new Position(), color = new Color().hex, scale = 1)
     ronin.frame.context().beginPath();
     ronin.frame.context().arc(this.position().x, this.position().y, radius/2, 0, 2 * Math.PI, false);
     ronin.frame.context().lineWidth = 0;
-    ronin.frame.context().fillStyle = this.color;
+    ronin.frame.context().fillStyle = this.color ? this.color : ronin.brush.color;
     ronin.frame.context().fill();
     ronin.frame.context().closePath();
   }

scripts/modules/cursor.js

@@ -14,7 +14,10 @@ function Cursor(rune)
 
   this.update = function(event = null)
   {
-    if(ronin.terminal.cmd().module()){
+    if(this.is_inside){
+      this.set_mode(ronin.default)
+    }
+    else if(ronin.terminal.cmd().module()){
       this.set_mode(ronin.terminal.cmd().module());
     }
     else if(event && event.altKey == true && event.shiftKey == true){
@@ -51,15 +54,24 @@ function Cursor(rune)
       if(!position.is_outside()){
         this.mode.mouse_down(this.position);  
       }
+      else{
+        ronin.cursor.set_mode(ronin.default);
+        ronin.default.mouse_down(this.position);
+      }
     }
   }
   
   this.mouse_move = function(position,e)
   {
     if(!this.layer){ this.create_layer(); }
+
+    // On/Out
+    if(position.is_outside()){ this.mouse_outside(); }
+    else{ this.mouse_inside(); }
       
     this.layer.clear();
 
+    // Magnet
     this.position = ronin.magnet.update_mouse(position);
     this.position_in_window = new Position(e.clientX,e.clientY);
 
@@ -98,6 +110,29 @@ function Cursor(rune)
     this.mode.mouse_from = null;
   }
 
+  // over/out
+
+  this.is_inside = false;
+
+  this.mouse_outside = function()
+  {
+    if(this.is_inside){ return; }
+
+    this.is_inside = true;
+    this.update();
+
+    console.log("over")
+  }
+
+  this.mouse_inside = function()
+  {
+    if(!this.is_inside){ return; }
+
+    this.is_inside = false;
+    this.update();
+    console.log("off") 
+  }
+
   this.draw_pointer_arrow = function(position,size = 1)
   {
     if(!this.layer){ this.create_layer(); }
@@ -135,7 +170,7 @@ function Cursor(rune)
     this.layer.context().beginPath();
     this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false);
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = this.settings.color;
+    this.layer.context().strokeStyle = ronin.brush.color;
     this.layer.context().stroke();
     this.layer.context().closePath();
 
@@ -197,6 +232,7 @@ function Cursor(rune)
 
   this.draw_pointer = function(position,size = 1)
   {
+    if(!this.is_inside){ return; }
     if(!this.layer){ this.create_layer(); }
 
     this.pointer_last = this.pointer_last ? this.pointer_last : position;
@@ -246,7 +282,7 @@ function Cursor(rune)
 
   this.widget = function()
   {
-    return "<span class='mouse'>"+this.mode.mouse_mode()+"</span>";
+    return "<span class='mouse'>"+this.mode.name+"."+this.mode.mouse_mode()+"</span>";
   }
   
   this.key_escape = function()

scripts/modules/default.js

@@ -15,16 +15,16 @@ function Default(rune)
   }
   
   this.drag_from = null;
-  this.drag_offset_x = 0;
-  this.drag_offset_y = 0;
 
   this.mouse_down = function(position)
   {
+    console.log("down")
     this.drag_from = ronin.cursor.position_in_window;
   }
   
   this.mouse_move = function(position)
   {
+    console.log("move")
     if(this.drag_from === null){ return; }
 
     var offset = ronin.cursor.position_in_window.offset(this.drag_from);
@@ -39,6 +39,7 @@ function Default(rune)
   
   this.mouse_up = function(event)
   {
+    console.log("up")
     this.drag_from = null;
   }
 }

scripts/modules/layer.js

@@ -153,80 +153,30 @@ function Layer(name,manager = null)
     return "Move";
   }
   
+  this.drag_from = null;
+
+  this.mouse_down = function(position)
+  {
+    this.drag_from = ronin.cursor.position_in_window;
+  }
+
   this.mouse_move = function(position)
   {
-    var offset = new Position((-this.mouse_from.x + position.x)+","+(-this.mouse_from.y + position.y));
+    if(this.drag_from === null){ return; }
 
-    ronin.overlay.get_layer(true).clear();
+    var offset = ronin.cursor.position_in_window.offset(this.drag_from);
-    ronin.overlay.draw_cross(this.mouse_from);
+
-    ronin.overlay.draw_cross(position);
+    var data = this.data();
-    ronin.overlay.draw_line(this.mouse_from,position);
+    this.clear();
+    this.context().putImageData(data, offset.x * 2, offset.y * 2);
+
+    this.drag_from = ronin.cursor.position_in_window;
   }
   
   this.mouse_up = function(position)
   {
-    var offset = new Position((-this.mouse_from.x + position.x)+","+(-this.mouse_from.y + position.y));
+    this.drag_from = null;
-
-    ronin.overlay.get_layer(true).clear();
-    ronin.overlay.draw_circle(position);
-    ronin.overlay.draw_circle(this.mouse_from);
-    ronin.overlay.draw_line(this.mouse_from,position);
-
-    // ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" "+offset.render();
-
-    // if(this.coordinates.length == 0){
-    //   this.coordinates.push("M"+position.render());
-    // }
-    // else{
-    //   var offset = this.last_pos ? position.offset(this.last_pos) : position;
-
-    //   if(keyboard.shift_held == true && keyboard.alt_held == true){
-    //     this.coordinates.push("M"+position.render());
-    //   }
-    //   else if(keyboard.shift_held == true){
-    //     this.coordinates.push("a"+offset.render()+" 0 0,1 "+offset.render());
-    //   }
-    //   else if(keyboard.alt_held == true){
-    //    this.coordinates.push("a"+offset.render()+" 0 0,0 "+offset.render()); 
-    //   }
-    //   else{
-    //     this.coordinates.push("l"+offset.render());
-    //   }
-    // }
-
-    // ronin.terminal.input_element.value = "path."+ronin.terminal.method_name+" "+this.create_path();
-    // this.last_pos = position;
-    // ronin.terminal.passive();
   }
-  
-  // this.move_from = null;
-
-  // this.mouse_down = function(position)
-  // {
-  //   this.move_from = ronin.position_in_window(position);
-  // }
-  
-  // this.mouse_move = function(position)
-  // {
-  //   if(this.move_from === null){ return; }
-
-  //   position = ronin.position_in_window(position);
-    
-  //   var offset_x = this.move_from.x - position.x;
-  //   var offset_y = this.move_from.y - position.y;
-
-  //   var imageData = this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2);
-  //   this.clear();
-  //   this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2);
-
-  //   this.move_from = new Position(position.x,position.y);
-    
-  // }
-  
-  // this.mouse_up = function(event)
-  // {
-  //   this.move_from = null;
-  // }
 
   // Blink