Improved ports flow

README.md

@@ -13,11 +13,11 @@ Ronin is a simple open-source graphic design tool.
 ### Methods
 
 ### Ports
-- `speed->` (I:*false* 0, O:*true* 50), The cursor speed.
+- `speed->` *0/50* The cursor speed.
-- `distance->` (I:*false* 0, O:*true* 9999), The cursor distance.
+- `distance->` *0/9999* The cursor distance.
-- `->red->` (I:*true* 0, O:*true* 255), The brush color value(red).
+- `->red->` *0/255* The brush color value(red).
-- `->green->` (I:*true* 0, O:*true* 255), The brush color value(green).
+- `->green->` *0/255* The brush color value(green).
-- `->blue->` (I:*true* 0, O:*true* 255), The brush color value(blue).
+- `->blue->` *0/255* The brush color value(blue).
 
 ## eraser
 ### Settings
@@ -40,13 +40,14 @@ Ronin is a simple open-source graphic design tool.
 
 ## line
 ### Settings
-- `steps`, default 100
 
 ### Methods
 - `tween:`, no details.
 - `stroke:`, no details.
 
 ### Ports
+- `step->` *0/100* The tween line index..
+- `->thickness->` *4/100* The tween line thickness..
 
 
 ## License

sources/scripts/commander.js

@@ -24,6 +24,8 @@ function Commander()
       ronin.modules[q.module].settings[setting_id] = setting_value;
     }
     
+    ronin.modules[q.module].routes = q.routes;
+
     // Run methods
     for(method_id in q.methods){
       var method_param = q.methods[method_id];
@@ -31,7 +33,6 @@ function Commander()
       ronin.modules[q.module].methods[method_id](method_param);
     }
 
-    ronin.modules[q.module].routes = q.routes;
 
     ronin.commander.input_el.value = "";
     ronin.hint.update();

sources/scripts/docs.js

@@ -73,7 +73,7 @@ function Docs()
     for(port_name in ports){
       var port = ports[port_name];
       console.log(ports);
-      html += "- `"+(port.input ? '->' : '')+""+port.name+""+(port.output ? '->' : '')+"` (I:*"+port.input+"* "+port.value+", O:*"+port.output+"* "+port.max+"), "+port.docs+".\n";
+      html += "- `"+(port.input ? '->' : '')+""+port.name+""+(port.output ? '->' : '')+"` *"+port.value+"/"+port.max+"* "+port.docs+".\n";
     }
     return html;  
   }

sources/scripts/module.js

@@ -17,7 +17,7 @@ function Module(name)
 
     for(route_id in this.routes){
       var route_val = this.routes[route_id];
-      html += route_val+"->"+route_id+" ";
+      html += route_id+"->"+route_val+" ";
     }
 
     return html.trim() != "" ? "<b>"+this.name+"</b> "+html.trim() : "";

sources/scripts/modules/brush.js

@@ -12,11 +12,11 @@ function Brush()
 
   this.ports = {};
 
-  this.ports.speed = new Port("speed",false,true,0,50,"The cursor speed");
+  this.ports.speed = new Port(this,"speed",false,true,0,50,"The cursor speed");
-  this.ports.distance = new Port("distance",false,true,0,9999,"The cursor distance");
+  this.ports.distance = new Port(this,"distance",false,true,0,9999,"The cursor distance");
-  this.ports.red = new Port("red",true,true,0,255,"The brush color value(red)");
+  this.ports.red = new Port(this,"red",true,true,0,255,"The brush color value(red)");
-  this.ports.green = new Port("green",true,true,0,255,"The brush color value(green)");
+  this.ports.green = new Port(this,"green",true,true,0,255,"The brush color value(green)");
-  this.ports.blue = new Port("blue",true,true,0,255,"The brush color value(blue)");
+  this.ports.blue = new Port(this,"blue",true,true,0,255,"The brush color value(blue)");
 
   this.thickness = function(line)
   {

sources/scripts/modules/line.js

@@ -2,29 +2,28 @@ function Line()
 {
   Module.call(this,"line");
 
-  this.settings = {steps:100};
-
   this.methods = {};
 
   this.ports = {};
+  this.ports.step = new Port(this,"step",false,true,0,100,"The tween line index.");
+  this.ports.thickness = new Port(this,"thickness",true,true,4,100,"The tween line thickness.");
 
-  this.methods.tween = function(q)
+  this.methods.tween = function(q) // line tween:$&$>>$&$ step->thickness
   {
     var from = q.from;
     var to = q.to;
 
-    var s = 0;
+    ronin.line.ports.step.value = 0;
-    while(s < ronin.line.settings.steps){
+    while(ronin.line.ports.step.value < ronin.line.ports.step.max){
-      var progress = s/parseFloat(ronin.line.settings.steps);
+      var progress = ronin.line.ports.step.value/parseFloat(ronin.line.ports.step.max);
       var new_positions = tween_positions(from,to,progress);
       ronin.line.stroke_multi(new_positions);
-      s += 1;
+      ronin.line.ports.step.write(ronin.line.ports.step.value+1);
     }
   }
 
   this.methods.stroke = function(q)
   {
-    console.log(q)
     ronin.line.stroke_multi(q)
   }
 
@@ -47,12 +46,17 @@ function Line()
     ctx.moveTo((from.x * 2),(from.y * 2));
     ctx.lineTo((to.x * 2),(to.y * 2));
     ctx.lineCap="round";
-    ctx.lineWidth = 4;
+    ctx.lineWidth = clamp(ronin.line.ports.thickness.value,1,200) * 0.1;
     ctx.strokeStyle = "#000";
     ctx.stroke();
     ctx.closePath();
   }
   
+  function clamp(v, min, max)
+  { 
+    return v < min ? min : v > max ? max : v; 
+  }
+
   function tween_positions(froms,tos,progress)
   {
     var a = [];

sources/scripts/port.js

@@ -1,9 +1,21 @@
-function Port(name,input,output,value,max,docs)
+function Port(host,name,input,output,value,max,docs)
 {
+  this.host = host;
+
   this.name = name;
   this.input = input;
   this.output = output;
   this.value = value;
   this.max = max;
   this.docs = docs;
+
+  this.write = function(value)
+  {
+    this.value = value;
+    var target = this.host.routes[this.name];
+
+    if(!target){ console.log("No output for",this.name); return; }
+    
+    this.host.ports[target].write(this.value);
+  }
 }

sources/scripts/query.js

@@ -20,8 +20,8 @@ function Query(query_str)
       this.settings[key] = value;
     }
     else if(part.indexOf("->") > -1){
-      var key = part.indexOf("->") > -1 ? part.split("->")[1] : "any";
+      var key = part.indexOf("->") > -1 ? part.split("->")[0] : "any";
-      var value = part.indexOf("->") > -1 ? part.split("->")[0] : part;
+      var value = part.indexOf("->") > -1 ? part.split("->")[1] : part;
       this.routes[key] = value;
     }
   }