Progress, implementing color picker

sources/scripts/modules/brush.js

@@ -2,18 +2,10 @@ function Brush()
 {
   Module.call(this,"brush");
 
-  this.settings = {size:4,color:"#000"};
-
   this.pointers = [
     new Pointer({offset:{x:0,y:0}})
   ];
 
-  this.ports.speed = new Port(this,"speed",false,true,0,50,"The cursor speed");
-  this.ports.distance = new Port(this,"distance",false,true,0,9999,"The cursor distance");
-  this.ports.red = new Port(this,"red",true,true,0,255,"The brush color value(red)");
-  this.ports.green = new Port(this,"green",true,true,0,255,"The brush color value(green)");
-  this.ports.blue = new Port(this,"blue",true,true,0,255,"The brush color value(blue)");
-
   this.methods.add = new Method("add","x,y&mirror_x,mirror_y","Add a new pointer to the brush",function(q){
     var offset = q.length ? q[0] : q;
     var mirror = q.length ? q[1] : null;
@@ -28,14 +20,14 @@ function Brush()
     var pixel = ronin.render.context().getImageData(q.x*2, q.y*2, 1, 1).data;
     var c = new Color().rgb_to_hex(pixel);
     var color = new Color(c);
-    ronin.brush.settings.color = color.hex;
+    ronin.cursor.color = color.hex;
   })
 
   this.absolute_thickness = 0;
 
   this.thickness = function(line)
   {
-    var t = this.settings.size * this.ports.speed;
+    var t = ronin.cursor.size * this.ports.speed;
     this.absolute_thickness = t > this.absolute_thickness ? this.absolute_thickness+0.5 : this.absolute_thickness-0.5;
     return this.absolute_thickness * 3;
   }
@@ -75,7 +67,7 @@ function Brush()
 
   this.mod_size = function(mod)
   {
-    this.settings.size = clamp(this.settings.size+mod,1,100);
+    ronin.cursor.size = clamp(ronin.cursor.size+mod,1,100);
   }
 
   function clamp(v, min, max)
@@ -100,7 +92,7 @@ function Pointer(options)
 
   this.color = function(line)
   {
-    return ronin.brush.settings.color;
+    return ronin.cursor.color;
   }
 
   this.stroke = function(line)
@@ -118,7 +110,7 @@ function Pointer(options)
     ctx.lineTo((line.to.x * 2) + this.options.offset.x,(line.to.y * 2) + this.options.offset.y);
     ctx.lineCap="round";
     ctx.lineWidth = this.thickness(line);
-    ctx.strokeStyle = ronin.brush.settings.color;
+    ctx.strokeStyle = ronin.cursor.color;
     ctx.stroke();
     ctx.closePath();
   }

sources/scripts/modules/frame.js

@@ -30,7 +30,7 @@ function Frame()
   });
 
   this.methods.fill = new Method("fill","#f00","Fill entire canvas with color",function(q){
-    ronin.render.fill(q ? q : ronin.brush.settings.color);
+    ronin.render.fill(q ? q : ronin.cursor.color);
   });
 
   this.methods.inspect = new Method("inspect","","View canvas details",function(q){

sources/scripts/modules/magnet.js

@@ -2,27 +2,28 @@ function Magnet()
 {
   Module.call(this,"magnet","Cursor magnetisation settings, changes are reflected on the grid layer.");
 
-  this.settings = {size:0,step:4};
+  this.size = 0;
+  this.step = 4;
 
   this.methods.lock = new Method("lock","10","Magnetize cursor",function(q){
     var size = parseInt(q);
     if(size < 5){ this.unlock(); return; }
-    ronin.magnet.settings.size = size;
-    ronin.grid.draw(size,ronin.magnet.settings.step);
+    ronin.magnet.size = size;
+    ronin.grid.draw(size,ronin.magnet.step);
   })
 
   this.methods.unlock = new Method("unlock","","Release cursor",function(q){
-    ronin.magnet.settings.size = 0;
+    ronin.magnet.size = 0;
     ronin.grid.clear();
   })
 
   this.filter = function(pos)
   {
-    if(this.settings.size < 5){
+    if(this.size < 5){
       return pos;
     }
 
-    var s = this.settings.size;
+    var s = this.size;
     return {x:parseInt(pos.x/s)*s,y:parseInt(pos.y/s)*s};
   }
 }

sources/scripts/modules/path.js

@@ -2,7 +2,7 @@ function Path()
 {
   Module.call(this,"path","Trace lines and draw shapes.");
 
-  this.settings = {thickness:4,color:"red",cap:"square"};
+  this.settings = {cap:"square"};
   
   this.methods.stroke = new Method("stroke","x,y&","",function(q){
     ronin.preview.clear();
@@ -13,8 +13,8 @@ function Path()
 
     ctx.beginPath();
     ctx.lineCap = ronin.path.settings.cap;
-    ctx.lineWidth = ronin.path.settings.thickness;
-    ctx.strokeStyle = ronin.path.settings.color;
+    ctx.lineWidth = ronin.cursor.size;
+    ctx.strokeStyle = ronin.cursor.color;
     ctx.stroke(new Path2D(path));
     ctx.closePath();
   });
@@ -28,8 +28,8 @@ function Path()
 
     ctx.beginPath();
     ctx.lineCap = ronin.path.settings.cap;
-    ctx.lineWidth = ronin.path.settings.thickness;
-    ctx.fillStyle = ronin.path.settings.color;
+    ctx.lineWidth = ronin.cursor.size;
+    ctx.fillStyle = ronin.cursor.color;
     ctx.fill(new Path2D(path));
     ctx.closePath();
   });
@@ -39,8 +39,8 @@ function Path()
     var ctx = ronin.render.context();
     ctx.beginPath();
     ctx.lineCap = ronin.path.settings.cap;
-    ctx.lineWidth = ronin.path.settings.thickness;
-    ctx.strokeStyle = ronin.path.settings.color;
+    ctx.lineWidth = ronin.cursor.size;
+    ctx.strokeStyle = ronin.cursor.color;
     ctx.stroke(new Path2D(path));
     ctx.closePath();
   });
@@ -55,8 +55,8 @@ function Path()
     var ctx = ronin.preview.context();
     ctx.beginPath();
     ctx.lineCap = q.settings.cap ? q.settings.cap : ronin.path.settings.cap;
-    ctx.lineWidth = q.settings.thickness ? q.settings.thickness : ronin.path.settings.thickness;
-    ctx.strokeStyle = q.settings.color ? q.settings.color : ronin.path.settings.color;
+    ctx.lineWidth = ronin.cursor.size;
+    ctx.strokeStyle = ronin.cursor.color;
     ctx.stroke(new Path2D(path));
     ctx.closePath();
   }

sources/scripts/modules/type.js

@@ -10,8 +10,6 @@ function Type()
     var size = rect.height * 2
     ronin.preview.clear();
 
-    console.log(ronin.type.settings);
-
     ronin.render.context().textAlign = ronin.type.settings.anchor;
     ronin.render.context().font = size+"px "+ronin.type.settings.font.replace("+"," ");
     ronin.render.context().fillText(q[0].replace("+"," "),rect.x * 2,(rect.y * 2)+size);