Added a few TODOs.

README.md

@@ -24,7 +24,7 @@ Missing documentation.
 
 ## frame
 
-Missing documentation.
+Manager for the canvas size
 
 ### Settings
 - `width`, default 930
@@ -39,7 +39,7 @@ Missing documentation.
 
 ## line
 
-Missing documentation.
+Drawing lines. Tween expects something in the `$&$>>$&$` format.
 
 ### Settings
 
@@ -49,11 +49,11 @@ Missing documentation.
 
 ### Ports
 - `step->` **(0/100)** The tween line index..
-- `->thickness->` **(4/100)** The tween line thickness..
+- `->thickness->` **(1/100)** The tween line thickness..
 
 ## io
 
-Missing documentation.
+File import/export tools.
 
 ### Settings
 - `anchor`, default [object Object]
@@ -67,7 +67,7 @@ Missing documentation.
 
 ## path
 
-Missing documentation.
+Trace lines and to draw shapes.
 
 ### Settings
 - `thickness`, default 30
@@ -82,7 +82,7 @@ Missing documentation.
 
 ## magnet
 
-Cursor magnetisation settings.
+Cursor magnetisation settings, changes are reflected on the grid layer.
 
 ### Settings
 - `size`, default 0

TODO.md

@@ -0,0 +1,25 @@
+## TODOs
+
+### Commander
+- Parse multicommand with `;`
+
+### Path
+- Origin marker
+- Export SVG value
+
+### IO
+- Import `.rin` files
+- Export `.rin` file
+
+### Type
+- Implement
+
+### Docs
+- Add shortcuts
+- Write tutorial
+
+### Brush
+- Finish Port draft
+
+### Line
+- Preview support

sources/links/main.css

@@ -5,12 +5,14 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 
 yu { display:block; }
 
-#ronin { background:#eee; height: 100vh; width:100vw; }
+#cursor { z-index:899; position: fixed; }
-#grid { z-index:1;position: fixed; }
+#guide { z-index:810;position: fixed; }
-#guide { z-index:700;position: fixed; }
+#preview { z-index:805; position: fixed; }
 #render { z-index:800; position: fixed; }
-#preview { z-index:800; position: fixed; }
+#grid { z-index:795;position: fixed; }
-#cursor { z-index:890; position: fixed; }
+
+
+#ronin { background:#eee; height: 100vh; width:100vw; }
 #commander { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px;  -webkit-user-select: none;-webkit-app-region: drag; z-index:900;}
 #commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 20px;font-size: 11px;color: black; margin-left:20px; }
 #hint { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px; font-size: 11px;color: #999; margin-left:20px; }

sources/scripts/core/cursor.js

@@ -131,11 +131,10 @@ function Cursor(rune)
     else if(ronin.cursor.mode == "cc_arc_to"){
       str = "@<"+b.x+","+b.y;
     }
-
     // 
     var i = ronin.cursor.query.indexOf("$");
-    var i1 = ronin.cursor.query.substr(i,1);
+    var i1 = ronin.cursor.query.substr(i,2);
-    if(i1 == "$"){
+    if(i1 == "$+"){
       ronin.commander.inject(ronin.cursor.query.replace("$+",str+"&$+"));
     }
     else{

sources/scripts/core/keyboard.js

@@ -17,6 +17,8 @@ function Keyboard()
       ronin.commander.input_el.blur();
       ronin.commander.input_el.value = "";
       ronin.guide.update();
+      ronin.guide.clear();
+      ronin.preview.clear();
     }
 
     if(e.key == "tab" || e.keyCode == 9){

sources/scripts/layers/guide.js

@@ -6,20 +6,24 @@ function Guide()
 
   this.update = function()
   {
+    this.clear();
+
     this.el.width = window.innerWidth * 2;
     this.el.height = window.innerHeight * 2;
     this.el.style.width = (window.innerWidth)+"px";
     this.el.style.height = (window.innerHeight)+"px";
 
-    var u = this.find_unit();
+    var units = this.find_units();
-    if(!u){ return; }
 
-    this.clear();
+    if(units.length == 0){ return; }
-    this.draw(u)
+
+    for(i in units){
+      this.draw(units[i]);
+    }
   }
 
   this.draw = function(u)
-  {    
+  { 
     if(u.x && u.y){
       this.draw_pos(u);
     }
@@ -75,31 +79,38 @@ function Guide()
     ctx.moveTo(pos.x,pos.y-offset);
     ctx.lineTo(pos.x,pos.y-radius);
     ctx.lineCap="round";
-    ctx.lineWidth = 2;
+    ctx.lineWidth = 4;
     ctx.strokeStyle = "#000";
     ctx.stroke();
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "#fff";
+    ctx.stroke();
     ctx.closePath();
   }
 
-  this.find_unit = function(q = ronin.commander.query())
+  this.find_units = function(q = ronin.commander.query())
   {
+    var a = [];
     if(q.settings.anchor){ return q.settings.anchor; }
 
     for(method_id in q.methods){
       var params = q.methods[method_id];
-      if(!params){ return null; }
+      if(params.from && params.to){
-      if(params.from){ return params.from[0]; }
+        a = a.concat(params.from);
-      if(params[0]){ return params[0]; }
+        a = a.concat(params.to);
-      return params;
+      }
+      else{
+        a = a.concat(params);  
+      }
     }
 
-    for(method_id in q.settings){
+    // for(setting in q.settings){
-      var params = q.settings[method_id];
+    //   var params = q.settings[method_id];
-      if(!params){ return null; }
+    //   if(!params){ return null; }
-      if(params[0]){ return params[0]; }
+    //   if(params[0]){ return params[0]; }
-      return params;
+    //   return params;
-    }
+    // }
 
-    return null;
+    return a;
   }
 }

sources/scripts/modules/line.js

@@ -1,19 +1,19 @@
 function Line()
 {
-  Module.call(this,"line");
+  Module.call(this,"line","Drawing lines. Tween expects something in the `$&$>>$&$` format.");
 
   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.ports.thickness = new Port(this,"thickness",true,true,1,100,"The tween line thickness.");
 
   this.methods.tween = function(q) // line tween:$&$>>$&$ step->thickness
   {
     var from = q.from;
     var to = q.to;
 
-    ronin.line.ports.step.value = 0;
+    ronin.line.ports.step.write(0);
     while(ronin.line.ports.step.value < ronin.line.ports.step.max){
       var progress = ronin.line.ports.step.value/parseFloat(ronin.line.ports.step.max);
       var new_positions = tween_positions(from,to,progress);
@@ -27,6 +27,12 @@ function Line()
     ronin.line.stroke_multi(q)
   }
 
+  this.preview = function(q)
+  {
+    // TODO
+    // console.log(q);
+  }
+
   this.stroke_multi = function(coordinates)
   {
     var from = coordinates[0];
@@ -37,10 +43,8 @@ function Line()
     }
   }
 
-  this.stroke = function(from,to)
+  this.stroke = function(from,to,ctx = ronin.render.context())
   {
-    var ctx = ronin.render.context();
-
     ctx.beginPath();
     ctx.globalCompositeOperation="source-over";
     ctx.moveTo((from.x * 2),(from.y * 2));

sources/scripts/modules/magnet.js

@@ -7,6 +7,7 @@ function Magnet()
   this.methods.lock = function(q)
   {
     var size = parseInt(q);
+    ronin.magnet.settings.size = size;
 
     if(size < 5){ this.unlock(); return; }
 

sources/scripts/ronin.js

@@ -77,6 +77,8 @@ function Ronin()
 
     // this.commander.input_el.value = "io import:~/Desktop/test.png anchor=$";
     // this.commander.input_el.value = "path stroke:$+";
+
     // this.commander.input_el.value = "magnet lock:";
+    this.commander.inject("line tween:$&$&$>>$&$&$ step->thickness");
   }
 }