Optimized managed layers

scripts/modules/cursor.js

@@ -0,0 +1,157 @@
+function Cursor(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Rect,Position,Bang];
+  this.variables  = {};
+
+  this.mode = null;
+  this.position = new Position();
+  this.magnetism = null;
+  this.grid = new Position(4,4);
+
+  this.element = null;
+
+  this.passive = function(cmd)
+  {
+    if(!cmd.rect()){ return; }
+
+    if(!this.layer){ this.create_layer(); }
+
+    this.layer.clear();
+    this.draw(cmd.rect(),cmd.position());
+  }
+
+  this.active = function(cmd)
+  {
+    if(!this.layer){ this.create_layer(); }
+
+    this.layer.clear();
+
+    if(cmd.bang()){
+      this.magnetism = null;
+      this.layer.remove(this);
+    }
+
+    if(cmd.position()){
+      this.grid = cmd.position();
+    }
+
+    if(cmd.rect()){
+      this.magnetism = cmd.rect();
+      this.draw(cmd.rect(),this.grid);
+    }
+  }
+
+  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(ronin.module){
+      this.set_mode(ronin.module);
+    }
+    else if(event.altKey == true && event.shiftKey == true){
+      this.set_mode(ronin.surface.active_layer);
+    }
+    else if(event.altKey == true){
+      this.set_mode(ronin.surface);
+    }
+    else{
+      this.set_mode(ronin.brush);
+    }
+  }
+  
+  this.set_mode = function(mode)
+  {
+    if(this.mode == mode){ return; }
+    this.mode = mode;
+    document.body.setAttribute("class",this.mode.constructor.name);
+  }
+
+  // 
+
+  this.magnetic_position = function(position)
+  {
+    var x = parseInt(position.x / this.magnetism.width) * this.magnetism.width;
+    var y = parseInt(position.y / this.magnetism.width) * this.magnetism.width;
+
+    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)
+  {
+    if(this.magnetism){
+      position = this.magnetic_position(position);
+    }
+
+    this.position = position;
+    if(this.mode.constructor.name != Cursor.name){
+      this.mode.mouse_down(position);  
+    }
+    ronin.widget.update();
+  }
+  
+  this.mouse_move = function(position)
+  {
+    if(this.magnetism){
+      position = this.magnetic_position(position);
+    }
+    this.update_element(position);
+
+    this.position = position;
+
+    if(this.mode.constructor.name != Cursor.name){
+      this.mode.mouse_move(position);  
+    }
+
+  }
+  
+  this.mouse_up = function(position)
+  {
+    if(this.magnetism){
+      position = this.magnetic_position(position);
+    }
+
+    this.position = position;
+    if(this.mode.constructor.name != Cursor.name){
+      this.mode.mouse_up(position);  
+    }
+    ronin.widget.update();
+    commander.element_input.focus();
+  }
+}

scripts/modules/file.save.js

@@ -6,17 +6,11 @@ function FileSave(rune)
   this.variables  = {"format" : "[png/jpg/svg]"};
 
   this.docs = "Creates a new window with a image of the resulting canvas in the specified format.";
-  
-  this.layer = null;
-
-  this.install = function()
-  {
-    this.layer = new Layer("Save.Export",this);
-    ronin.surface.add_layer(this.layer);
-  }
 
   this.active = function(cmd)
   {
+    if(!this.layer){ this.create_layer(); }
+
     var d = null;
 
     var w = window.open('about:blank','image from canvas');
@@ -31,11 +25,11 @@ function FileSave(rune)
       w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
     }
     
-    this.layer.clear();
+    this.layer.remove(this);
   }
 
   this.merge = function()
-  {    
+  {
     var a = [];
     Object.keys(ronin.surface.layers).forEach(function (key) {
       if(!ronin.surface.layers[key].manager){ 

scripts/modules/module.js

@@ -4,6 +4,7 @@ function Module(rune)
   this.element = null;
   this.parameters = [];
   this.variables  = {};
+  this.layer = null;
 
   this.docs = "Missing documentation.";
   
@@ -12,6 +13,13 @@ function Module(rune)
     console.log("Installing "+ronin.modules[this.rune].constructor.name);
   }
 
+  this.create_layer = function()
+  {
+    this.layer = new Layer(this.constructor.name+".Preview",this);
+    this.layer.element.setAttribute("style","z-index:7000");
+    ronin.surface.add_layer(this.layer);
+  }
+
   this.active = function(cmd)
   {
     console.log("Nothing to do.");
@@ -88,4 +96,9 @@ function Module(rune)
   this.mouse_up = function(position)
   {
   }
+
+  this.key_escape = function()
+  {
+    
+  }
 }

scripts/modules/overlay.js

@@ -5,7 +5,6 @@ function Overlay(rune)
   this.parameters = [Position,Rect,Color];
   
   this.color = new Color("#ffffff");
-  this.layer = null;
 
   this.install = function()
   {

scripts/modules/render.js

@@ -11,18 +11,11 @@ function Render(rune)
   this.collection["stencil"] = new Filter_Stencil();
   this.collection["invert"] = new Filter_Invert();
   this.collection["chromatic"] = new Filter_Chromatic();
-
-  this.layer = null;
-
-  this.install = function()
-  {
-    this.layer = new Layer("Render.Preview",this);
-    this.layer.element.setAttribute("style","z-index:9000");
-    ronin.surface.add_layer(this.layer);
-  }
   
   this.active = function(cmd)
   {
+    if(!this.layer){ this.create_layer(); }
+
     var name = cmd.content[0];
 
     if(!this.collection[name]){ return; }
@@ -32,6 +25,8 @@ function Render(rune)
   
   this.passive = function(cmd)
   {
+    if(!this.layer){ this.create_layer(); }
+    
     var name = cmd.content[0];
     if(!this.collection[name]){ return; }
 

scripts/modules/surface.js

@@ -57,10 +57,9 @@ function Surface(rune)
   {
     console.log("Creating layer:"+layer.name+"("+(layer.manager ? layer.manager.constructor.name : "")+")"); 
 
+    layer.resize(this.size);
     this.layers[layer.name] = layer;
-    this.active_layer = layer;
     this.element.appendChild(layer.element);
-    this.active_layer.resize(this.size);
   }
   
   this.passive = function(cmd)

scripts/modules/surface.layer.js

@@ -25,6 +25,13 @@ function Layer(name,manager = null)
     this.context().clearRect(0, 0, this.element.width, this.element.height);
   }
 
+  this.remove = function(manager)
+  {
+    manager.layer = null;
+    ronin.surface.layers[this.name].element.outerHTML = "";
+    delete ronin.surface.layers[this.name];
+  }
+
   this.context = function()
   {
     return this.element.getContext('2d');

scripts/modules/typographe.js

@@ -5,19 +5,10 @@ function Typographe(rune)
   this.parameters = [Position,Color,Value];
   this.variables  = {"text" : null, "font" : "Georgia"};
 
-  this.layer = null;
-
-  this.install = function()
-  {
-    this.layer = new Layer("Typographe.Preview",this);
-    this.layer.element.setAttribute("style","z-index:7000;opacity:0.25");
-    ronin.surface.add_layer(this.layer);
-  }
-
   this.active = function(cmd)
   {
-    this.layer.clear();
-    ronin.overlay.clear();
+    if(this.layer){ this.layer.remove(this); }
+
     if(cmd.variable("text")){
       this.add_text(ronin.surface.active_layer.context(),cmd);
     }
@@ -25,7 +16,8 @@ function Typographe(rune)
 
   this.passive = function(cmd)
   {
-    this.layer.clear();
+    if(!this.layer){ this.create_layer(); }
+
     if(cmd.variable("text")){
       this.add_text(this.layer.context(),cmd);
     }

scripts/modules/vector.js

@@ -5,22 +5,16 @@ function Vector(rune)
   this.parameters = [Any];
   this.variables  = {"fill_color" : "none","stroke_width" : 5,"stroke_color" : "#ffffff", "line_cap" : "square"};
 
-  this.layer = null;
   this.coordinates = [];
   this.last_pos = null;
   this.paths = [];
-
-  this.install = function()
-  {
-    this.layer = new Layer("Vector.Preview",this);
-    this.layer.element.setAttribute("style","z-index:8000;opacity:0.75");
-    ronin.surface.add_layer(this.layer);
-  }
   
   // Module
   
   this.passive = function(cmd)
   {
+    if(!this.layer){ this.create_layer(); }
+
     this.layer.clear();
     this.layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "square";
     this.layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : 10;
@@ -32,7 +26,9 @@ function Vector(rune)
   {
     this.paths.push(this.create_path());
     this.coordinates = [];
-    this.layer.clear();
+
+    this.layer.remove(this);
+
     ronin.surface.active_layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "square";
     ronin.surface.active_layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : 10;
     ronin.surface.active_layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";