Improved mouse_modes

index.html

@@ -22,7 +22,6 @@
     <script type="text/javascript" src="scripts/modules/brush.pointer.js"></script>
     <script type="text/javascript" src="scripts/modules/file.load.js"></script>
     <script type="text/javascript" src="scripts/modules/file.save.js"></script>
-    <script type="text/javascript" src="scripts/modules/help.js"></script>
     <script type="text/javascript" src="scripts/modules/surface.js"></script>
     <script type="text/javascript" src="scripts/modules/surface.layer.js"></script>
     <script type="text/javascript" src="scripts/modules/eye.js"></script>

links/main.css

@@ -16,6 +16,7 @@ canvas:hover { cursor: none;}
 #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;}
 #terminal hint { background:#000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw; color:#777; font-size:10px; white-space: pre;}
 #terminal hint b { font-family: "input_mono_regular"; color:#999; }
+#terminal hint i { font-style: italic; color:#fff; }
 #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; }

scripts/core/ronin.js

@@ -12,7 +12,6 @@ function Ronin()
   this.eye      = new Eye("*");
   this.render   = new Render("%");
   this.vector   = new Vector("+");
-  this.help     = new Help("?");
   this.typo     = new Typographe("&");
   this.cursor   = new Cursor(".");
   this.terminal = new Terminal(">");
@@ -26,7 +25,6 @@ function Ronin()
   this.modules[this.eye.rune]      = this.eye;
   this.modules[this.typo.rune]     = this.typo;
   this.modules[this.vector.rune]   = this.vector;
-  this.modules[this.help.rune]     = this.help;
   this.modules[this.terminal.rune] = this.terminal;
 
   this.modules[this.cursor.rune]   = this.cursor;

scripts/modules/brush.js

@@ -74,16 +74,6 @@ function Brush(rune)
     this.pointers.push(pointer);
   }
 
-  this.widget_cursor = function()
-  {
-    if(keyboard.shift_held == true){
-      return "Eraser "+this.size;
-    }
-    else{
-      return "<i style='color:"+this.color.hex+"'>&#9679;</i> Brush "+ronin.brush.pointers.length+"x "+this.size;  
-    }
-  }
-
   // Eraser
 
   this.erase = function()
@@ -107,6 +97,16 @@ function Brush(rune)
   
   // Cursor
   
+  this.mouse_mode = function()
+  {
+    if(keyboard.shift_held == true){
+      return "Eraser "+this.size;
+    }
+    else{
+      return "<i style='color:"+this.color.hex+"'>&#9679;</i> Brush "+ronin.brush.pointers.length+"x "+this.size;  
+    }
+  }
+
   this.is_drawing = false;
   
   this.mouse_down = function(position)
@@ -125,7 +125,7 @@ function Brush(rune)
     
   }
   
-  this.mouse_move = function(position)
+  this.mouse_move = function(position,rect)
   {
     if(this.is_drawing === false){ return; }
     
@@ -139,7 +139,7 @@ function Brush(rune)
     }
   }
   
-  this.mouse_up = function(position)
+  this.mouse_up = function(position,rect)
   {
     this.is_drawing = false;
     this.position_prev = null;

scripts/modules/cursor.js

@@ -121,13 +121,17 @@ function Cursor(rune)
     }
 
     this.position = position;
+
     if(this.mode.constructor.name != Cursor.name){
+      this.mode.mouse_from = position;
       this.mode.mouse_down(position);  
     }
   }
   
   this.mouse_move = function(position)
   {
+    if(this.mode.mouse_from == null){ return; }
+
     if(this.magnetism){
       position = this.magnetic_position(position);
     }
@@ -135,8 +139,12 @@ function Cursor(rune)
 
     this.position = position;
 
+    var rect = new Rect();
+    rect.width = this.position.x - this.mode.mouse_from.x;
+    rect.height = this.position.y - this.mode.mouse_from.y;
+
     if(this.mode.constructor.name != Cursor.name){
-      this.mode.mouse_move(position);  
+      this.mode.mouse_move(position,rect);  
     }
 
   }
@@ -148,9 +156,16 @@ function Cursor(rune)
     }
 
     this.position = position;
+
+    var rect = new Rect();
+    rect.width = this.position.x - this.mode.mouse_from.x;
+    rect.height = this.position.y - this.mode.mouse_from.y;
+
     if(this.mode.constructor.name != Cursor.name){
-      this.mode.mouse_up(position);  
+      this.mode.mouse_up(position,rect);  
     }
     ronin.terminal.input_element.focus();
+
+    this.mode.mouse_from = null;
   }
 }

scripts/modules/default.js

@@ -4,7 +4,7 @@ function Default(rune)
   
   // Cursor
   
-  this.widget_cursor = function()
+  this.mouse_mode = function()
   {
     return "Drag";
   }

scripts/modules/eye.js

@@ -12,11 +12,6 @@ function Eye(rune)
   {
   }
   
-  this.widget_cursor = function()
-  {
-    return "Eye";
-  }
-  
   // TODO: If a rect is given, return the average color
   this.color_picker = function(position,rect = null)
   {
@@ -26,39 +21,27 @@ function Eye(rune)
     ronin.terminal.update_hint();
   }
   
-  // Cursor
+  // Mouse
 
-  this.live_draw_from = null;
+  this.mouse_mode = function()
+  {
+    return "Eye";
+  }
 
   this.mouse_down = function(position)
   {
-    this.click = true;
-    this.live_draw_from = position;
     ronin.overlay.draw(position);
     this.color_picker(position);
   }
   
-  this.mouse_move = function(position)
+  this.mouse_move = function(position,rect)
   {
-    if(!this.click){ return; }
+    ronin.overlay.draw(this.mouse_from,rect);
-
-    var rect = new Rect();
-    rect.width = position.x - this.live_draw_from.x;
-    rect.height = position.y - this.live_draw_from.y;
-  
-    ronin.overlay.draw(this.live_draw_from,rect);
-
     this.color_picker(position,rect);
   }
   
-  this.mouse_up = function(position)
+  this.mouse_up = function(position,rect)
   {
-    this.click = null;
-
-    var rect = new Rect();
-    rect.width = position.x - this.live_draw_from.x;
-    rect.height = position.y - this.live_draw_from.y;
-
     this.color_picker(position,rect);
   }
 }

scripts/modules/help.js

@@ -1,56 +0,0 @@
-function Help(rune)
-{
-  Module.call(this,rune);
-
-  this.view = document.createElement("div");
-  
-  this.active = function(cmd)
-  {
-    s = "hello";
-
-    lines = [];
-
-    // Modules
-    // TODO: Have the modules return their own help string
-    lines.push("Modules: ");
-    Object.keys(ronin.modules).forEach(function (key) {
-      html = "";
-      var parameters = "";
-      html += "<i>"+key+"</i> "+ronin.modules[key].constructor.name+" ";
-      for (i = 0; i < ronin.modules[key].parameters.length; i++) {
-        html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
-      }
-      lines.push(html);
-    });
-
-    // Filters
-    lines.push("Filters: ");
-    for(var filter in ronin.modules["%"].collection){
-      html = filter+" ";
-      for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
-        html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
-      }
-      lines.push(html);
-    }
-
-    // Controls
-    lines.push("Controls: ");
-    lines.push("<b>ctrl</b> Draw Overlays\n");
-    lines.push("<b>alt</b> Drag Surface\n");
-    lines.push("<b>shift</b> Erase\n");
-    lines.push("<b>shift+ctrl</b> Eyedrop\n");
-    lines.push("<b>shift+alt</b> Move Layer\n");
-
-    // Units
-    lines.push("Units: ");
-    var units = [new Value(), new Position(), new Rect(), new Color(), new Angle(), new Variable(), new Bang()]
-    for(key in units){
-      lines.push(units[key].render());
-    }
-
-    // Print
-    for(line in lines){
-      ronin.terminal.log(new Log(this,lines[line]));
-    }
-  }
-}

scripts/modules/module.js

@@ -54,6 +54,8 @@ function Module(rune)
       h += variable+"="+ronin.module.variables[variable]+" ";
     }
 
+    h += ronin.module.mouse_mode() ? "<i>"+ronin.module.mouse_mode()+"</i>" : "";
+
     return this.pad(content)+h;    
   }
 
@@ -71,23 +73,29 @@ function Module(rune)
     return "";
   }
 
-  this.widget_cursor = function()
+  // Mouse
+
+  this.mouse_mode = function()
   {
-    return "Missing";
+    return null;
   }
 
+  this.mouse_from = null;
+  
   this.mouse_down = function(position)
   {
   }
   
-  this.mouse_move = function(position)
+  this.mouse_move = function(position,rect)
   {
   }
   
-  this.mouse_up = function(position)
+  this.mouse_up = function(position,rect)
   {
   }
 
+  // Keyboard
+
   this.key_escape = function()
   { 
   }

scripts/modules/surface.js

@@ -113,11 +113,6 @@ function Surface(rune)
     return this.rune+" "+this.size.render();
   }
 
-  this.widget_cursor = function()
-  {
-    return "Crop";
-  }
-
   // Widget
 
   this.update_widget = function()
@@ -130,7 +125,7 @@ function Surface(rune)
     }
     s += "</span>";
   
-    s += "<span class='cursor'>"+ronin.cursor.mode.widget_cursor()+"</span>";
+    s += "<span class='cursor'>"+ronin.cursor.mode.mouse_mode()+"</span>";
     
     var keys = Object.keys(ronin.surface.layers);
     var loc = keys.indexOf(this.active_layer.name);
@@ -174,35 +169,29 @@ function Surface(rune)
 
   // Cursor
 
-  this.live_draw_from = null;
+  this.mouse_mode = function()
+  { 
+    return "crop"; 
+  }
   
   this.mouse_down = function(position)
   {
     ronin.overlay.clear();
     ronin.overlay.draw_pointer(position);
-    this.live_draw_from = position;
+    ronin.terminal.input_element.value = "| "+this.mouse_from.render();
-    ronin.terminal.input_element.value = "| "+this.live_draw_from.render();
   }
   
-  this.mouse_move = function(position)
+  this.mouse_move = function(position,rect)
   {    
-    if(this.live_draw_from === null){ return; }
-    
     ronin.overlay.clear();
 
-    var rect = new Rect();
+    ronin.overlay.draw_rect(this.mouse_from,rect);
-    rect.width = position.x - this.live_draw_from.x;
+    ronin.terminal.input_element.value = "@ "+this.mouse_from.render()+" "+rect.render();
-    rect.height = position.y - this.live_draw_from.y;
-  
-    ronin.overlay.draw_rect(this.live_draw_from,rect);
-    ronin.terminal.input_element.value = "@ "+this.live_draw_from.render()+" "+rect.render();
 
     ronin.terminal.update_hint();
   }
   
-  this.mouse_up = function(position)
+  this.mouse_up = function(position,rect)
   {
-    this.live_draw_from = null;
-    ronin.terminal.input_element.focus();
   }
 }

scripts/modules/surface.layer.js

@@ -46,11 +46,6 @@ function Layer(name,manager = null)
 
   //
 
-  this.widget_cursor = function()
-  {
-    return "Move";
-  }
-
   this.widget = function()
   {
     var e_name = this.name;
@@ -62,6 +57,11 @@ function Layer(name,manager = null)
     return "<span class='"+e_class+"'>"+e_name+"</span>";
   }
 
+  this.mouse_mode = function()
+  {
+    return "Move";
+  }
+  
   this.move_from = null;
 
   this.mouse_down = function(position)

scripts/modules/typographe.js

@@ -43,7 +43,7 @@ function Typographe(rune)
 
   this.click = null;
 
-  this.widget_cursor = function()
+  this.mouse_mode = function()
   {
     return "Typographe";
   }

scripts/modules/vector.js

@@ -72,7 +72,7 @@ function Vector(rune)
 
   this.click = null;
 
-  this.widget_cursor = function()
+  this.mouse_mode = function()
   {
     if(keyboard.shift_held == true && keyboard.alt_held == true){
       return "Vector(Origin)";