Implemented basic brush

sources/index.html

@@ -4,6 +4,9 @@
     <script type="text/javascript" src="scripts/query.js"></script>
     <script type="text/javascript" src="scripts/keyboard.js"></script>
     <script type="text/javascript" src="scripts/cursor.js"></script>
+    <script type="text/javascript" src="scripts/brush.js"></script>
+    <script type="text/javascript" src="scripts/eraser.js"></script>
+    <script type="text/javascript" src="scripts/hint.js"></script>
     <script type="text/javascript" src="scripts/render.js"></script>
     <script type="text/javascript" src="scripts/commander.js"></script>
     <script type="text/javascript" src="scripts/ronin.js"></script>

sources/links/main.css

@@ -4,5 +4,6 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
 yu { display:block; }
 
 #ronin { background:#444; height: 100vh; width:100vw; }
-#commander { position: fixed; bottom:0px; left:0px; width:100vw; height:30px; line-height: 30px;  -webkit-user-select: none;-webkit-app-region: drag; }
+#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);padding: 0px 15px;display: block;line-height: 30px;font-size: 11px;color: white; margin-left:30px; }
+#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 20px;font-size: 11px;color: white; margin-left:20px; }
+#hint { position: fixed; bottom:15px; left:5px; width:100vw; height:20px; line-height: 20px; font-size: 11px;color: white; margin-left:20px; }

sources/scripts/brush.js

@@ -0,0 +1,36 @@
+function Brush()
+{
+  this.settings = {size:10,color:"#f00"};
+
+  this.thickness = function(line)
+  {
+    var ratio = 1 - (distance_between(line.from,line.to)/15.0);
+    return this.settings.size * ratio;
+  }
+
+  this.stroke = function(line)
+  {
+    ronin.commander.blur();
+    var ctx = ronin.render.context();
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="source-over";
+    ctx.moveTo(line.from.x * 2,line.from.y * 2);
+    ctx.lineTo(line.to.x * 2,line.to.y * 2);
+    ctx.lineCap="round";
+    ctx.lineWidth = this.thickness(line);
+    ctx.strokeStyle = this.settings.color;
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  this.mod_size = function(mod)
+  {
+    this.settings.size += mod;
+  }
+
+  function distance_between(a,b)
+  {
+    return Math.sqrt( (a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y) );
+  }
+}

sources/scripts/commander.js

@@ -3,7 +3,7 @@ function Commander()
   this.el = document.createElement('yu');
   this.el.id = "commander";
   this.input_el = document.createElement('input');
-  this.input_el.value = "rescale s:0.5 rect:300x300";
+  this.input_el.value = "";
 
   this.install = function()
   {
@@ -16,8 +16,33 @@ function Commander()
   {
     var q = new Query(query_str);
 
-    if(!ronin.modules[q.module]){ console.log("Unknown module"); return; }
+    if(!ronin.modules[q.module]){ console.log("Unknown module",q); return; }
 
-    ronin.modules[q.module].run(q)
+    // Update settings
+    for(setting_id in q.settings){
+      var setting_value = q.settings[setting_id];
+      if(!ronin.modules[q.module].settings[setting_id]){ console.log("Missing setting",setting_id); return; }
+      ronin.modules[q.module].settings[setting_id] = setting_value;
+    }
+
+    // Run methods
+    for(method_id in q.methods){
+      var method_param = q.methods[method_id];
+      if(!ronin.modules[q.module][method_id]){ console.log("Missing method",method_id); return; }
+      ronin.modules[q.module][method_id].run(method_param);
+    }
+
+    ronin.commander.input_el.value = "";
+    ronin.hint.update();
+  }
+
+  this.on_input = function(e)
+  {
+    ronin.hint.update();
+  }
+
+  this.blur = function()
+  {
+    this.input_el.blur();
   }
 }

sources/scripts/cursor.js

@@ -1,37 +1,38 @@
 function Cursor(rune)
 {
+  this.line = {from:null,to:null};
   this.is_down = false;
 
   this.mouse_down = function(e)
   {
     e.preventDefault();
 
-    ronin.cursor.is_down = true;
+    ronin.cursor.line.from = {x:e.clientX,y:e.clientY};
-
-    var ctx = ronin.render.context();
-    ctx.beginPath();
-    ctx.rect(e.clientX * 2, e.clientY * 2, 5, 5);
-    ctx.fillStyle = "red";
-    ctx.fill();
   }
 
   this.mouse_move = function(e)
   {
     e.preventDefault();
 
-    if(!ronin.cursor.is_down){ return; }
+    if(!ronin.cursor.line.from){ return; }
 
-    var ctx = ronin.render.context();
+    ronin.cursor.line.to = {x:e.clientX,y:e.clientY};
-    ctx.beginPath();
+
-    ctx.rect(e.clientX * 2, e.clientY * 2, 5, 5);
+    if(e.altKey){
-    ctx.fillStyle = "red";
+      ronin.eraser.stroke(ronin.cursor.line);
-    ctx.fill();
+    }
+    else{
+      ronin.brush.stroke(ronin.cursor.line);  
+    }
+    
+    ronin.cursor.line.from = {x:e.clientX,y:e.clientY};
   }
 
   this.mouse_up = function(e)
   {   
     e.preventDefault();
     
-    ronin.cursor.is_down = false; 
+    ronin.cursor.is_down = false;
+    ronin.cursor.line = {};
   }
 }

sources/scripts/eraser.js

@@ -0,0 +1,21 @@
+function Eraser()
+{
+  this.thickness = function(line)
+  {
+    return ronin.brush.thickness(line);
+  }
+
+  this.stroke = function(line)
+  {
+    var ctx = ronin.render.context();
+
+    ctx.beginPath();
+    ctx.globalCompositeOperation="destination-out";
+    ctx.moveTo(line.from.x * 2,line.from.y * 2);
+    ctx.lineTo(line.to.x * 2,line.to.y * 2);
+    ctx.lineCap="round";
+    ctx.lineWidth = this.thickness(line);
+    ctx.stroke();
+    ctx.closePath();
+  }
+}

sources/scripts/hint.js

@@ -0,0 +1,25 @@
+function Hint()
+{
+  this.el = document.createElement('yu');
+  this.el.id = "hint";
+
+  this.install = function()
+  {
+    ronin.el.appendChild(this.el);
+    this.el.innerHTML = "";
+  }
+
+  this.update = function(e = null)
+  {
+    this.el.innerHTML = this.pad(ronin.commander.input_el.value)+"brush:"+ronin.brush.settings.size+"&"+ronin.brush.settings.color+"";
+  }
+
+  this.pad = function(input)
+  {
+    var s = "";
+    for (i = 0; i < input.length+1; i++){
+      s += "_";
+    }
+    return "<span style='color:RGBA(0,0,0,0)'>"+s+"</span>";
+  }
+}

sources/scripts/keyboard.js

@@ -1,8 +1,8 @@
 function Keyboard()
 {
-  this.key_up = function()
+  this.key_up = function(e)
   {
-
+    ronin.hint.update(e);
   }
 
   this.key_down = function(e)
@@ -10,5 +10,18 @@ function Keyboard()
     if(e.key == "Enter"){
       ronin.commander.validate();
     }
+    
+    if(e.key == "Escape"){
+      ronin.commander.input_el.blur();;
+    }
+
+    if(e.key == "]"){
+      ronin.brush.mod_size(1);
+    }
+    if(e.key == "["){
+      ronin.brush.mod_size(-1);
+    }
+
+    ronin.hint.update(e);
   }
 }

sources/scripts/query.js

@@ -2,11 +2,21 @@ function Query(query_str)
 {
   this.module = query_str.split(" ")[0];
   var parts = query_str.split(" ").splice(1);
-  this.parameters = {all:parts.join(" ")};
+  this.raw = parts.join(" ");
+  this.methods = {};
+  this.settings = {};
+
   for(part_id in parts){
     var part = parts[part_id];
-    var key = part.indexOf(":") > -1 ? part.split(":")[0] : "any";
+    if(part.indexOf(":") > -1){
-    var value = part.indexOf(":") > -1 ? part.split(":")[1] : part;
+      var key = part.indexOf(":") > -1 ? part.split(":")[0] : "any";
-    this.parameters[key] = value;
+      var value = part.indexOf(":") > -1 ? part.split(":")[1] : part;
+      this.methods[key] = value;
+    }
+    if(part.indexOf("=") > -1){
+      var key = part.indexOf("=") > -1 ? part.split("=")[0] : "any";
+      var value = part.indexOf("=") > -1 ? part.split("=")[1] : part;
+      this.settings[key] = value;
+    }
   }
 }

sources/scripts/ronin.js

@@ -8,9 +8,13 @@ function Ronin()
   this.commander = new Commander();
   this.cursor = new Cursor();
   this.render = new Render();
+  this.brush = new Brush();
+  this.eraser = new Eraser();
+  this.hint = new Hint();
 
   this.modules = {
-    rescale : new Rescale()
+    rescale : new Rescale(),
+    brush : this.brush,
   };
   
   this.install = function()
@@ -19,6 +23,7 @@ function Ronin()
 
     this.render.install();
     this.commander.install();
+    this.hint.install();
 
     this.start();
   }
@@ -30,8 +35,8 @@ function Ronin()
     ronin.render.el.addEventListener('mousedown', ronin.cursor.mouse_down);
     ronin.render.el.addEventListener('mousemove', ronin.cursor.mouse_move);
     ronin.render.el.addEventListener('mouseup', ronin.cursor.mouse_up);
-    
     window.addEventListener('keydown', ronin.keyboard.key_down);
+    ronin.commander.input_el.addEventListener('input', ronin.commander.on_input);
 
     console.log("Ronin","Started");
     this.render.update();