Improved brush

links/main.css

@@ -2,7 +2,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 *:focus {outline: none; }
 
 #ronin { background:#ddd; width:100%; height:100%; overflow:hidden; background-image:url(../media/graphics/grid.svg); background-position: center center; }
-#frame { background:none; width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px;  border-radius: 3px}
+#frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left: calc(40vw + 15px); top:100px; background:white;}
 #frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
 #overlay { position:absolute; z-index:1000;}
 #frame { cursor:none;}

scripts/core/command.js

@@ -12,6 +12,7 @@ function Command(content)
   this.module = function()
   {
     var module_name = null;
+
     if(content.indexOf(".") > -1){
       module_name = content.split(" ")[0].split(".")[0]
     }
@@ -27,13 +28,22 @@ function Command(content)
   this.method = function()
   {
     var module = this.module();
-    if(!module){ return null; }
+    if(!module || content.indexOf(".") < 0){ return null; }
 
     var method_name = content.indexOf(".") > -1 ? content.split(" ")[0].split(".")[1] : "default";
     return module.methods[method_name] ? module.methods[method_name] : null;
   }
 
-  this.params = function()
+  this.setting = function()
+  {
+    var module = this.module();
+    if(!module || content.indexOf(":") < 0){ return null; }
+
+    var setting_name = this.parts[0].split(":")[1];
+    return module.settings[setting_name] ? setting_name : null;
+  }
+
+  this.values = function()
   {
     var a = this.content.split(" ");
     a.shift();
@@ -118,19 +128,6 @@ function Command(content)
     }
     return null;
   }
-  
-  this.setting = function(name)
-  {
-    for (i = 0; i < this.parts.length; i++) {
-      if(this.parts[i].indexOf("=") >= 0){
-        var parts = this.parts[i].split("=");
-        if(parts[0] == name){
-          return new Setting(parts[0],parts[1]);
-        }
-      }
-    }
-    return null;
-  }
 
   this.text = function()
   {

scripts/modules/brush.js

@@ -3,7 +3,7 @@ function Brush(rune)
   Module.call(this,rune);
   
   this.parameters = [];
-  this.settings  = {"color":"#ffffff","size":2};
+  this.settings  = {color:"#000","size":2};
   this.pointers = [new Pointer(new Position("0,0"))];
 
   this.add_method(new Method("add_pointer",["Position"]));

scripts/modules/brush.pointer.js

@@ -1,4 +1,4 @@
-function Pointer(offset = new Position(), color = new Color('000000'))
+function Pointer(offset = new Position())
 {
   this.offset = offset;
   this.mirror = null;
@@ -64,7 +64,7 @@ function Pointer(offset = new Position(), color = new Color('000000'))
 
     ronin.frame.context().lineCap="round";
     ronin.frame.context().lineWidth = this.thickness();
-    ronin.frame.context().strokeStyle = new Color(ronin.brush.settings["color"]).rgba();
+    ronin.frame.context().strokeStyle = new Color(ronin.brush.settings.color).rgba();
     ronin.frame.context().stroke();
     ronin.frame.context().closePath();
 

scripts/modules/cursor.js

@@ -2,7 +2,7 @@ function Cursor(rune)
 {
   Module.call(this,rune);
   
-  this.settings = {};
+  this.settings = {color: "#999999"};
 
   this.mode = null;
   this.position = new Position();
@@ -31,7 +31,7 @@ function Cursor(rune)
     
     this.layer.context().lineCap="round";
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = "white";
+    this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
     this.layer.context().closePath();
 
@@ -49,21 +49,21 @@ function Cursor(rune)
     this.layer.context().lineTo(position.x,position.y);
     this.layer.context().lineCap="round";
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = "white";
+    this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
     this.layer.context().closePath();
 
     this.layer.context().beginPath();
     this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false);
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = "white";
+    this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
     this.layer.context().closePath();
 
     this.layer.context().beginPath();
     this.layer.context().arc(position.x, position.y, (size/2)+1, 0, 2 * Math.PI, false);
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = "black";
+    this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
     this.layer.context().closePath();
 
@@ -87,7 +87,7 @@ function Cursor(rune)
     
     this.layer.context().lineCap="round";
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = "white";
+    this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
     this.layer.context().closePath();
 
@@ -105,13 +105,13 @@ function Cursor(rune)
     this.layer.context().lineTo(position.x,position.y);
     this.layer.context().lineCap="round";
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = "white";
+    this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
     this.layer.context().closePath();
 
     this.layer.context().beginPath();
     this.layer.context().arc(position.x, position.y, 0.5, 0, 2 * Math.PI, false);
-    this.layer.context().fillStyle = 'white';
+    this.layer.context().fillStyle = this.settings.color;
     this.layer.context().fill();
     this.layer.context().closePath();
 
@@ -128,7 +128,7 @@ function Cursor(rune)
     
     this.layer.context().lineCap="round";
     this.layer.context().lineWidth = 1;
-    this.layer.context().strokeStyle = "white";
+    this.layer.context().strokeStyle = this.settings.color;
     this.layer.context().stroke();
     this.layer.context().closePath();
 
@@ -137,8 +137,7 @@ function Cursor(rune)
 
   this.update = function(event)
   {
-    // this.set_mode(ronin.brush);
-    return;
+    console.log("!")
     if(event.altKey == true && event.shiftKey == true){
       this.set_mode(ronin.frame.active_layer);
     }
@@ -152,7 +151,7 @@ function Cursor(rune)
   
   this.set_mode = function(mode = ronin.brush)
   {
-    if(!mode){ mode = ronin.brush; }
+    if(!mode){ return; }
 
     if(this.mode == mode){ return; }
     this.mode = mode;

scripts/modules/magnet.js

@@ -87,6 +87,12 @@ function Magnet(rune)
     return this.magnetic_position(position); 
   }
 
+  this.widget = function()
+  {
+    if(this.settings["grid"].width < 2 || this.settings["grid"].height < 2){ return ""; }
+    return this.settings["grid"].render();
+  }
+
   this.key_escape = function()
   {
     if(this.layer){ this.layer.remove(this); }

scripts/modules/path.js

@@ -24,7 +24,7 @@ function Path(rune)
     context.lineCap = this.settings["line_cap"];
     context.lineWidth = this.settings["line_width"];
     context.strokeStyle = this.settings["line_color"];
-    context.stroke(new Path2D(cmd.params()));
+    context.stroke(new Path2D(cmd.values()));
     context.closePath();
 
     if(!preview){ this.coordinates = []; this.last_pos = null; }
@@ -32,7 +32,7 @@ function Path(rune)
     return 1, preview ? "preview" : "ok";
   }
 
-  this.fill = function(params,preview = false)
+  this.fill = function(cmd,preview = false)
   {
     if(!ronin.path.layer){ ronin.path.create_layer(); ronin.path.layer.is_blinking = true; }
 
@@ -40,8 +40,12 @@ function Path(rune)
 
     var context = preview ? this.context() : ronin.frame.context();
 
+    context.beginPath();
     context.fillStyle = this.settings["fill_color"];
-    context.fill(new Path2D(params.content));
+    context.fill(new Path2D(cmd.values()));
+    context.closePath();
+
+    if(!preview){ this.coordinates = []; this.last_pos = null; }
 
     return 1, preview ? "preview" : "ok";
   }
@@ -93,20 +97,24 @@ function Path(rune)
 
   this.mouse_down = function(position)
   {
-    var line = "path.stroke "+this.create_path();
+    var method = ronin.terminal.cmd().method().name;
+    var line = "path."+method+" "+this.create_path();
     line += "M"+position.render();
     ronin.terminal.update(line);
   }
   
   this.mouse_move = function(position)
   {
-    var line = "path.stroke "+this.create_path();
+    var method = ronin.terminal.cmd().method().name;
+    var line = "path."+method+" "+this.create_path();
     line += "L"+position.render();
     ronin.terminal.update(line);
   }
   
   this.mouse_up = function(position)
   {
+    var method = ronin.terminal.cmd().method().name;
+
     if(this.coordinates.length == 0){
       this.coordinates.push("M"+position.render());
     }
@@ -127,7 +135,7 @@ function Path(rune)
       }
     }
 
-    ronin.terminal.update("path.stroke "+this.create_path());
+    ronin.terminal.update("path."+method+" "+this.create_path());
     this.last_pos = position;
   }
 

scripts/modules/terminal.js

@@ -32,10 +32,16 @@ function Terminal(rune)
     var command = this.cmd();
     var module  = command.module();
     var method  = command.method();
+    var setting = command.setting();
 
     if(method){
       method.run(command);
     }
+
+    if(setting){
+      module.settings[setting] = command.values();
+      console.log(module.settings)
+    }
     this.hint_element.innerHTML = "";
     this.input.value = "";
   }