Started implementing magnetism to custor

scripts/core/cursor.js

@@ -1,19 +1,70 @@
-function Cursor()
+function Cursor(rune)
 {
+  Module.call(this,rune);
+  
+  this.parameters = [Rect];
+  this.variables  = {};
+
   this.mode = null;
   this.position = new Position();
-  
+
+  this.layer = null;
+
+  this.install = function()
+  {
+    this.layer = new Layer("Cursor.Magnet",this);
+    this.layer.element.setAttribute("style","z-index:9000");
+    ronin.surface.add_layer(this.layer);
+  }
+
+  this.passive = function(cmd)
+  {
+    if(!cmd.rect()){ return; }
+
+    this.layer.clear();
+    this.draw(cmd.rect(),cmd.position());
+  }
+
+  this.active = function(cmd)
+  {
+    if(!cmd.rect()){ return; }
+    this.draw(cmd.rect(),cmd.position());
+  }
+
+  this.draw = function(rect,grid)
+  {
+    if(rect.width < 5 || rect.height < 5){ return; }
+
+    var horizontal = ronin.surface.size.width/rect.width;
+    var vertical = ronin.surface.size.height/rect.height;
+    
+    for (var x = 1; x < horizontal; x++) {
+      for (var y = 1; y < vertical; y++) {
+        var dot_position = new Position(x * rect.width, y * rect.height);
+        var size = 0.5;
+        if(grid && x % grid.x == 0 && y % grid.y == 0){ size = 1; }
+        this.draw_marker(dot_position,size);
+      }
+    }
+  }
+
+  this.draw_marker = function(position,size = 0.5)
+  {
+    var context = this.layer.context();
+    context.beginPath();
+    context.arc(position.x, position.y, size, 0, 2 * Math.PI, false);
+    context.fillStyle = 'white';
+    context.fill();
+  }
+
   this.update = function(event)
   {
-    if(event.ctrltKey === true && event.altKey === true && event.shiftKey === true){ /* */  }
-    else if(event.shiftKey === true && event.ctrlKey === true){ this.set_mode(ronin.eye); }
-    else if(event.shiftKey === true && event.altKey === true){ this.set_mode(ronin.surface.active_layer); }
-    else if(event.ctrltKey === true && event.altKey === true){ this.set_mode(ronin.overlay.compositor);  }
-    else if(event.ctrlKey === true){ this.set_mode(ronin.overlay); }
-    else if(event.altKey === true){ this.set_mode(ronin.surface); }
-    else if(event.shiftKey === true){ this.set_mode(ronin.eraser); }
-    else if(ronin.module){ this.set_mode(ronin.module); }
-    else{ this.set_mode(ronin.brush); }
+    if(event.altKey == true){
+      this.set_mode(ronin.surface);
+    }
+    else{
+      this.set_mode(ronin.brush);
+    }
   }
   
   this.set_mode = function(mode)
@@ -21,27 +72,31 @@ function Cursor()
     if(this.mode == mode){ return; }
     this.mode = mode;
     document.body.setAttribute("class",this.mode.constructor.name);
-    ronin.widget.update();
   }
   
   this.mouse_down = function(position)
   {
     this.position = position;
-    this.mode.mouse_down(position);
+    if(this.mode.constructor.name != Cursor.name){
+      this.mode.mouse_down(position);  
+    }
     ronin.widget.update();
-    // console.log(this.mode);
   }
   
   this.mouse_move = function(position)
   {
     this.position = position;
-    this.mode.mouse_move(position);
+    if(this.mode.constructor.name != Cursor.name){
+      this.mode.mouse_move(position);  
+    }
   }
   
   this.mouse_up = function(position)
   {
     this.position = position;
-    this.mode.mouse_up(position);
+    if(this.mode.constructor.name != Cursor.name){
+      this.mode.mouse_up(position);  
+    }
     ronin.widget.update();
     commander.element_input.focus();
   }

scripts/core/keyboard.js

@@ -1,7 +1,20 @@
 function Keyboard()
 {
+  this.shift_held = false;
+
+  this.listen_onkeydown = function(event)
+  {
+    if(event.shiftKey == true){
+      this.shift_held = true;
+    }
+    ronin.cursor.update(event);
+    ronin.widget.update();
+  }
+
   this.listen_onkeyup = function(event)
   {
+    this.shift_held = false;
+
     switch (event.key) {
       case "Enter": this.key_enter(); break;
       case "ArrowUp": this.key_arrow_up(); break;
@@ -29,11 +42,6 @@ function Keyboard()
     // ronin.cursor.set_mode(ronin.brush);
     ronin.widget.update();
   };
-  
-  this.listen_onkeydown = function(event)
-  {
-    ronin.cursor.update(event);
-  }
 
   this.key_tab = function()
   {

scripts/core/ronin.js

@@ -10,7 +10,6 @@ function Ronin()
   this.history  = new History("^");
   this.overlay  = new Overlay("|");
   this.brush    = new Brush(">");
-  this.eraser   = new Eraser(".");
   this.eye      = new Eye("*");
   this.render   = new Render("%");
   this.stroke   = new Stroke("_");
@@ -18,7 +17,7 @@ function Ronin()
   this.help     = new Help("?");
   this.typo     = new Typographe("&");
   
-  this.cursor   = new Cursor();
+  this.cursor   = new Cursor(".");
   
   this.modules[this.surface.rune]  = this.surface;
   this.modules[this.fileload.rune] = this.fileload;
@@ -27,13 +26,14 @@ function Ronin()
   this.modules[this.overlay.rune]  = this.overlay;
   this.modules[this.render.rune]   = this.render;
   this.modules[this.brush.rune]    = this.brush;
-  this.modules[this.eraser.rune]   = this.eraser;
   this.modules[this.eye.rune]      = this.eye;
   this.modules[this.typo.rune]     = this.typo;
   this.modules[this.stroke.rune]   = this.stroke;
   this.modules[this.vector.rune]   = this.vector;
   this.modules[this.help.rune]     = this.help;
 
+  this.modules[this.cursor.rune]   = this.cursor;
+
   // 
 
   this.install = function()

scripts/modules/brush.js

@@ -76,14 +76,33 @@ function Brush(rune)
   
   this.widget_cursor = function()
   {
-    var s = "> "+this.size+" "+this.color.hex+"<br />";
-
-    for (i = 0; i < ronin.brush.pointers.length; i++) {
-      s += ronin.brush.pointers[i].widget();
+    if(keyboard.shift_held == true){
+      return "Eraser "+this.size;
     }
-    return s;
+    else{
+      return "Brush("+ronin.brush.pointers.length+") "+this.size+" "+this.color.hex+"<br />";  
+    }
+  }
 
-    return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers";
+  // Eraser
+
+  this.erase = function()
+  {
+    if(!this.position_prev){this.position_prev = ronin.cursor.position; }
+    
+    var position = ronin.cursor.position;
+    
+    ronin.surface.context().beginPath();
+    ronin.surface.context().globalCompositeOperation="destination-out";
+    ronin.surface.context().moveTo(this.position_prev.x,this.position_prev.y);
+    ronin.surface.context().lineTo(position.x,position.y);
+    ronin.surface.context().lineCap="round";
+    ronin.surface.context().lineWidth = this.size * 5;
+    ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
+    ronin.surface.context().stroke();
+    ronin.surface.context().closePath();
+    
+    this.position_prev = position;
   }
   
   // Cursor
@@ -93,33 +112,40 @@ function Brush(rune)
   this.mouse_down = function(position)
   {
     this.is_drawing = true;
+    this.position_prev = null;
     
-    for (i = 0; i < ronin.brush.pointers.length; i++) {
-      ronin.brush.pointers[i].start();
+    if(keyboard.shift_held == true){
+      this.erase();
+    }
+    else{
+      for (i = 0; i < ronin.brush.pointers.length; i++) {
+        ronin.brush.pointers[i].start();
+      }
     }
     
-    ronin.stroke.new_stroke();
   }
   
   this.mouse_move = function(position)
   {
     if(this.is_drawing === false){ return; }
-  
-    for (i = 0; i < ronin.brush.pointers.length; i++) {
-      ronin.brush.pointers[i].draw();
-    }
     
-    ronin.stroke.append_stroke(position);
+    if(keyboard.shift_held == true){
+      this.erase();
+    }
+    else{
+      for (i = 0; i < ronin.brush.pointers.length; i++) {
+        ronin.brush.pointers[i].draw();
+      }
+    }
   }
   
   this.mouse_up = function(position)
   {
     this.is_drawing = false;
+    this.position_prev = null;
     
     for (i = 0; i < ronin.brush.pointers.length; i++) {
       ronin.brush.pointers[i].stop();
     }
-    
-    ronin.stroke.save_stroke("brush");
   }
 }