Added blink layers

index.html

@@ -12,6 +12,7 @@
     <script type="text/javascript" src="scripts/units/variable.js"></script>
     <script type="text/javascript" src="scripts/units/range.js"></script>
     
+    <script type="text/javascript" src="scripts/modules/default.js"></script>
     <script type="text/javascript" src="scripts/modules/cursor.js"></script>
     <script type="text/javascript" src="scripts/modules/terminal.js"></script>
     <script type="text/javascript" src="scripts/modules/module.js"></script>

scripts/core/ronin.js

@@ -3,6 +3,7 @@ function Ronin()
   this.modules  = {};
   this.element  = null;  
   
+  this.default  = new Default("`");
   this.surface  = new Surface("@");
   this.fileload = new FileLoad("/");
   this.filesave = new FileSave("$");

scripts/modules/cursor.js

@@ -79,7 +79,7 @@ function Cursor(rune)
       this.set_mode(ronin.surface.active_layer);
     }
     else if(event.altKey == true){
-      this.set_mode(ronin.surface);
+      this.set_mode(ronin.default);
     }
     else{
       this.set_mode(ronin.brush);
@@ -124,7 +124,6 @@ function Cursor(rune)
     if(this.mode.constructor.name != Cursor.name){
       this.mode.mouse_down(position);  
     }
-    ronin.surface.update_widget();
   }
   
   this.mouse_move = function(position)
@@ -152,7 +151,6 @@ function Cursor(rune)
     if(this.mode.constructor.name != Cursor.name){
       this.mode.mouse_up(position);  
     }
-    ronin.surface.update_widget();
     ronin.terminal.input_element.focus();
   }
 }

scripts/modules/default.js

@@ -0,0 +1,44 @@
+function Default(rune)
+{
+  Module.call(this,rune);
+  
+  // Cursor
+  
+  this.widget_cursor = function()
+  {
+    return "Drag";
+  }
+  
+  this.drag_from = null;
+  this.drag_offset_x = 0;
+  this.drag_offset_y = 0;
+
+  this.mouse_down = function(position)
+  {
+    this.drag_from = ronin.position_in_window(position);
+  }
+  
+  this.mouse_move = function(position)
+  {
+    if(this.drag_from === null){ return; }
+    
+    position = ronin.position_in_window(position);
+    
+    var offset_x = this.drag_from.x - position.x;
+    var offset_y = this.drag_from.y - position.y;
+    this.drag_offset_x -= offset_x;
+    this.drag_offset_y -= offset_y;
+    
+    ronin.surface.element.style.marginLeft = -(ronin.surface.size.width/2) + this.drag_offset_x;
+    ronin.surface.element.style.marginTop = -(ronin.surface.size.height/2) + this.drag_offset_y;
+
+    ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px";
+
+    this.drag_from = new Position(position.x,position.y);
+  }
+  
+  this.mouse_up = function(event)
+  {
+    this.drag_from = null;
+  }
+}

scripts/modules/module.js

@@ -20,6 +20,12 @@ function Module(rune)
     ronin.surface.add_layer(this.layer);
   }
 
+  this.select_layer = function()
+  {
+    if(!this.layer){ this.create_layer(); }
+    return this.layer;
+  }
+
   this.active = function(cmd)
   {
   }

scripts/modules/overlay.js

@@ -50,6 +50,27 @@ function Overlay(rune)
     this.context().lineTo(position.x + rect.width,position.y + rect.height);
     this.context().lineTo(position.x,position.y + rect.height);
     this.context().lineTo(position.x,position.y);
+
+    // Limits
+    this.context().moveTo(position.x + (rect.width/2),position.y-2);
+    this.context().lineTo(position.x + (rect.width/2),position.y+2);
+    this.context().moveTo(position.x + (rect.width/2),position.y + rect.height-2);
+    this.context().lineTo(position.x + (rect.width/2),position.y + rect.height+2);
+    this.context().moveTo(position.x + rect.width-2,position.y + (rect.height/2));
+    this.context().lineTo(position.x + rect.width+2,position.y + (rect.height/2));
+    this.context().moveTo(position.x+2,position.y + (rect.height/2));
+    this.context().lineTo(position.x-2,position.y + (rect.height/2));
+
+    // Center
+    this.context().moveTo(position.x + (rect.width/2) + 3,position.y + (rect.height/2));
+    this.context().lineTo(position.x + (rect.width/2) + 5,position.y + (rect.height/2));
+    this.context().moveTo(position.x + (rect.width/2) - 3,position.y + (rect.height/2));
+    this.context().lineTo(position.x + (rect.width/2) - 5,position.y + (rect.height/2));
+
+    this.context().moveTo(position.x + (rect.width/2),position.y + (rect.height/2) + 3);
+    this.context().lineTo(position.x + (rect.width/2),position.y + (rect.height/2) + 5);
+    this.context().moveTo(position.x + (rect.width/2),position.y + (rect.height/2) - 3);
+    this.context().lineTo(position.x + (rect.width/2),position.y + (rect.height/2) - 5);
     
     this.context().lineCap="round";
     this.context().lineWidth = 1;
@@ -108,7 +129,7 @@ function Overlay(rune)
   
   this.context = function()
   {
-    if(!this.layer){ this.create_layer(); }
+    if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; }
     return this.layer.context();
   }
   

scripts/modules/surface.js

@@ -17,6 +17,15 @@ function Surface(rune)
   this.install = function()
   {
     this.element.appendChild(this.widget_element);
+    this.blink();
+  }
+
+  this.blink = function()
+  {
+    Object.keys(ronin.surface.layers).forEach(function (key) {
+      ronin.surface.layers[key].blink();
+    });
+    setTimeout(function(){ ronin.surface.blink(); }, 30);
   }
 
   this.active = function(cmd)
@@ -106,7 +115,7 @@ function Surface(rune)
   
   this.widget_cursor = function()
   {
-    return "Drag";
+    return "Crop";
   }
 
   // Widget
@@ -162,39 +171,38 @@ function Surface(rune)
   {
     return this.active_layer.context();
   }
-  
+
   // Cursor
   
-  this.drag_from = null;
-  this.drag_offset_x = 0;
-  this.drag_offset_y = 0;
+  this.live_draw_from = null;
 
   this.mouse_down = function(position)
   {
-    this.drag_from = ronin.position_in_window(position);
+    ronin.overlay.clear();
+    ronin.overlay.draw_pointer(position);
+    this.live_draw_from = position;
+    ronin.terminal.input_element.value = "| "+this.live_draw_from.render();
   }
   
   this.mouse_move = function(position)
   {
-    if(this.drag_from === null){ return; }
+    if(this.live_draw_from === null){ return; }
     
-    position = ronin.position_in_window(position);
+    ronin.overlay.clear();
     
-    var offset_x = this.drag_from.x - position.x;
-    var offset_y = this.drag_from.y - position.y;
-    this.drag_offset_x -= offset_x;
-    this.drag_offset_y -= offset_y;
-    
-    ronin.surface.element.style.marginLeft = -(this.size.width/2) + this.drag_offset_x;
-    ronin.surface.element.style.marginTop = -(this.size.height/2) + this.drag_offset_y;
+    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_rect(this.live_draw_from,rect);
+    ronin.terminal.input_element.value = "@ "+this.live_draw_from.render()+" "+rect.render();
 
-    ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px";
-
-    this.drag_from = new Position(position.x,position.y);
+    ronin.terminal.update_hint();
   }
   
-  this.mouse_up = function(event)
+  this.mouse_up = function(position)
   {
-    this.drag_from = null;
+    this.live_draw_from = null;
+    ronin.terminal.input_element.focus();
   }
 }

scripts/modules/surface.layer.js

@@ -67,14 +67,11 @@ function Layer(name,manager = null)
   this.mouse_down = function(position)
   {
     this.move_from = ronin.position_in_window(position);
-    ronin.stroke.new_stroke();
   }
   
   this.mouse_move = function(position)
   {
     if(this.move_from === null){ return; }
-    
-    ronin.stroke.append_stroke(position); // Save to stroke
 
     position = ronin.position_in_window(position);
     
@@ -92,6 +89,16 @@ function Layer(name,manager = null)
   this.mouse_up = function(event)
   {
     this.move_from = null;
-    ronin.stroke.save_stroke("move");
+  }
+
+  // Blink
+
+  this.is_blinking = false;
+
+  this.blink = function()
+  {
+    if(this.is_blinking == false){ return; }
+    
+    this.element.style.display = this.element.style.display == "none" ? "block" : "none";
   }
 }

scripts/modules/terminal.js

@@ -125,7 +125,7 @@ function Terminal(rune)
     ronin.terminal.input_element.setAttribute("style","color:"+ronin.brush.color.hex);
 
     if(content.indexOf(";") > -1){
-      this.hint_element.innerHTML = padding+" "+content.split(";").length+" commands";
+      this.hint_element.innerHTML = " "+content.split(";").length+" commands";
     }
     else if(ronin.module){
       this.hint_element.innerHTML = ronin.module.hint(content);  

scripts/modules/typographe.js

@@ -16,7 +16,7 @@ function Typographe(rune)
 
   this.passive = function(cmd)
   {
-    if(!this.layer){ this.create_layer(); }
+    if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; }
 
     if(cmd.variable("text")){
       this.layer.clear();