Implemented globals for scale and color

BUILD.md

@@ -32,4 +32,8 @@ rm -r /xxiivv/Nataniev/public/public.projects/builds/Ronin-linux-x64/
 rm -r /xxiivv/Nataniev/public/public.projects/builds/Ronin-win32-x64/
 
 ~/butler status hundredrabbits/ronin
-```
+```
+
+### Etcs.
+
+`var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;`

README.md

@@ -4,9 +4,12 @@ Ronin is a simple open-source graphic design tool.
 <img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/>
 
 ## Cursor
-- `$` replace with **Pos**.
-- `$+shift` replace with **Rect**.
+Include `$` in a query and click on the canvas to inject the cursor position in the query.
+- `$ click` inject a **Pos**.
+- `$+ click` inject a **Pos**, and append `$+` for multiple positions.
+- `$ shift click` inject a **Rect**.
 
+- `#$ click` inject a **Color**.
 ## Modules
 ## brush
 
@@ -62,7 +65,7 @@ Pixel filter
 
 ### Methods
 - `balance:#ff0033` Filter color balance.
-- `saturation:0.5,0.5` Filter color saturation.
+- `saturation:#ff00333` Filter color saturation.
 
 ## type
 

main.js

@@ -56,7 +56,7 @@ app.on('ready', () =>
     is_shown = true;
   })
   // Open the DevTools.
-  win.webContents.openDevTools()
+  // win.webContents.openDevTools()
 })
 
 app.on('window-all-closed', () => 

sources/links/main.css

@@ -1,7 +1,7 @@
 body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium",courier,monospace; background:red;}
 *:focus {outline: none; }
 
-* { cursor: none }
+canvas { cursor: none }
 
 yu { display:block; }
 
@@ -12,7 +12,7 @@ yu { display:block; }
 #grid { z-index:795;position: fixed; }
 
 #ronin { background:#eee; height: 100vh; width:100vw; }
-#commander, #hint { position: fixed;bottom: 0px;left: 0px;width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px;}
+#commander, #hint { position: fixed;bottom: 0px;left: 0px;width: 100vw;line-height: 40px;-webkit-user-select: none;-webkit-app-region: drag;z-index: 900;height: 40px; font-size:11px; cursor: default;}
 #commander { z-index: 9000; background:black; }
 #commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: white; margin-left:20px;    z-index: 9000;position: relative; }
 #hint {  color:#666; padding-left:20px;}
@@ -20,4 +20,5 @@ yu { display:block; }
 #hint i { font-style: italic; }
 #hint .autocomplete { background:white; color:black; }
 
-#cursor_hint { position: absolute;top: 0px;right: 20px;color: white; font-family: courier; padding: 0px 10px; }
+#cursor_hint { position: absolute;top: 0px;right: 20px;color: white; padding: 0px 10px; color:#555; font-size:11px; text-transform: uppercase; }
+#cursor_hint .mode {}

sources/scripts/core/commander.js

@@ -68,14 +68,16 @@ function Commander()
 
   this.autocomplete = function()
   {
+
     var target_module = ronin.commander.query().module;
 
     var ac = ronin.modules[target_module] ? ronin.hint.find_autocomplete(ronin.modules[target_module].methods,":") : ronin.hint.find_autocomplete(ronin.modules," ")
 
+    this.focus();
     if(ac.lenght < 1 || !ac[0]){ return; }
+    if(ronin.commander.query().string.length < 1){ return; }
 
     this.append(ac[0]);
-    this.focus();
   }
 
   this.on_input = function(e)

sources/scripts/core/cursor.js

@@ -8,7 +8,7 @@ function Cursor(rune)
   this.query = null;
   this.mode = "vertex";
 
-  this.color = "#f0f"
+  this.color = "#f00"
   this.size = 4;
 
   this.draw_cursor = function(pos,touch = false)
@@ -35,6 +35,14 @@ function Cursor(rune)
 
     var pos = ronin.magnet.filter({x:e.clientX,y:e.clientY});
 
+    // Color Pick
+    if(ronin.commander.input_el.value == "~"){
+      ronin.brush.methods.pick.run({x:pos.x,y:pos.y})
+      ronin.commander.input_el.value = "";
+      ronin.commander.update();
+      return;
+    }
+
     ronin.cursor.draw_cursor({x:pos.x,y:pos.y},true);
 
     ronin.cursor.line.origin = {x:pos.x,y:pos.y};
@@ -43,6 +51,10 @@ function Cursor(rune)
     // Save original query
     ronin.cursor.query = ronin.commander.input_el.value;
 
+    if(e.altKey && e.shiftKey){
+      ronin.brush.methods.pick.run(pos);
+    }
+
     if(e.shiftKey){ ronin.cursor.mode = "rect"; }
     if(e.altKey){ ronin.cursor.mode = "arc_to"; }
     if(e.ctrlKey){ ronin.cursor.mode = "cc_arc_to"; }
@@ -63,8 +75,8 @@ function Cursor(rune)
     if(ronin.commander.active_module()){
 
     }
-    else if(e.shiftKey && e.altKey){
-      ronin.brush.pick(ronin.cursor.line);
+    else if(e.altKey && e.shiftKey){
+      ronin.brush.methods.pick.run(pos);
     }
     else if(e.altKey){
       ronin.brush.erase(ronin.cursor.line);
@@ -137,16 +149,50 @@ function Cursor(rune)
       str = "@<"+b.x+","+b.y;
     }
     // 
-    var i = ronin.cursor.query.indexOf("$");
-    var i1 = ronin.cursor.query.substr(i,2);
-    if(i1 == "$+"){
+    var i = ronin.cursor.query ? ronin.cursor.query.indexOf("$") : '';
+    var i1 = ronin.cursor.query ? ronin.cursor.query.substr(i,2) : '';
+    var e1 = ronin.cursor.query ? ronin.cursor.query.substr(i-1,2) : '';
+
+    if(e1 == "#$"){
+      var r = parseInt((b.x/ronin.frame.width) * 255);
+      var g = 255 - parseInt((b.x/ronin.frame.width) * 255);
+      var b = parseInt((b.y/ronin.frame.height) * 255);
+      var str = new Color().rgb_to_hex([r,g,b]);
+      ronin.commander.inject(ronin.cursor.query.replace("#$",str+" "));
+    }
+    else if(i1 == "$+"){
       ronin.commander.inject(ronin.cursor.query.replace("$+",str+"&$+"));
     }
-    else{
+    else if(ronin.cursor.query){
       ronin.commander.inject(ronin.cursor.query.replace("$",str));
     }
   }
 
+  this.hint = function()
+  {
+    var html = "";
+
+    var mode = "PAINT";
+
+    if(ronin.commander.input_el.value.indexOf("$+") > -1){
+      mode = "[MULTI]POS/SHIFT-RECT"
+    }
+    else if(ronin.commander.input_el.value.indexOf("$") > -1){
+      mode = "POS/SHIFT-RECT"
+    }
+    else if(ronin.keyboard.is_down["Alt"] && ronin.keyboard.is_down["Shift"]){
+      mode = "PICK";
+    }
+    else if(ronin.keyboard.is_down["Alt"]){
+      mode = "ERASE";
+    }
+    else if(ronin.keyboard.is_down["Shift"]){
+      mode = "DRAG";
+    }
+
+    return "<t class='mode'>"+mode+"</t><t class='size'>"+ronin.cursor.size+"</t> <t class='color' style='color:"+ronin.cursor.color+"'>●</t>";
+  }
+
   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/core/docs.js

@@ -5,9 +5,13 @@ function Docs()
     var html = "";
 
     html += this.print_intro();
+
     html += "## Cursor\n";
-    html += "- `$` replace with **Pos**.\n";
-    html += "- `$+shift` replace with **Rect**.\n\n";
+    html += "Include `$` in a query and click on the canvas to inject the cursor position in the query.\n";
+    html += "- `$ click` inject a **Pos**.\n";
+    html += "- `$+ click` inject a **Pos**, and append `$+` for multiple positions.\n";
+    html += "- `$ shift click` inject a **Rect**.\n\n";
+    html += "- `#$ click` inject a **Color**.\n";
     
     html += "## Modules\n";
     html += this.print_modules(ronin.modules);
@@ -23,7 +27,7 @@ function Docs()
   this.print_intro = function()
   {
     html = "# Ronin\n";
-    html += "Ronin is a simple open-source graphic design tool.\n\n";
+    html += "Ronin is a graphic design tool, to paint, resize and export graphics.\n\n";
     html += "<img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/>\n\n";
     return html;
   }
@@ -55,7 +59,7 @@ function Docs()
   this.print_license = function()
   {
     html = "## License\n";
-    html += "See the [LICENSE](LICENSE.md) file for license rights and limitations (CC).\n";
+    html += "See the [LICENSE](LICENSE.md) file for license rights and limitations.\n";
     return html;
   }
 }

sources/scripts/core/hint.js

@@ -9,9 +9,6 @@ function Hint()
   {
     ronin.commander.el.appendChild(this.el);
     ronin.commander.el.appendChild(this.cursor_hint_el);
-    this.cursor_hint_el.innerHTML = "●";
-    this.cursor_hint_el.title = ronin.cursor.color;
-    this.cursor_hint_el.style.color = ronin.cursor.color;
   }
 
   this.find_autocomplete = function(collection,append = "")
@@ -65,6 +62,7 @@ function Hint()
         this.el.innerHTML = this.pad(ronin.commander.input_el.value)+" > Unknown command."  
       }
     }
+    this.cursor_hint_el.innerHTML = ronin.cursor.hint();
   }
 
   this.pad = function(input)

sources/scripts/core/keyboard.js

@@ -1,12 +1,23 @@
 function Keyboard()
 {
+  this.is_down = {};
+
   this.key_up = function(e)
   {
+    ronin.keyboard.is_down[e.key] = false;
     ronin.hint.update(e);
   }
 
   this.key_down = function(e)
   {
+    ronin.keyboard.is_down[e.key] = true;
+
+    if(e.key == "~"){
+      e.preventDefault();
+      ronin.commander.inject("~")
+      return;
+    }
+
     if(e.key == "Enter"){
       e.preventDefault();
       ronin.commander.validate();

sources/scripts/layers/guide.js

@@ -20,8 +20,9 @@ function Guide()
       this.draw_inspector();
     }
 
-    // Color picker
-    this.toggle_color_picker(ronin.commander.query().last_char == "#")
+    if(ronin.commander.input_el.value == "~"){
+      this.toggle_color_picker(true);
+    }
 
     // Brush mirrors
     for(id in ronin.brush.pointers){
@@ -39,7 +40,20 @@ function Guide()
 
   this.toggle_color_picker = function(show)
   {
-    console.log("Picker",show)
+    if(!show){ return; }
+    var originalData = ronin.render.context().getImageData(0, 0, ronin.frame.width*2, ronin.frame.height*2);
+    var data = originalData.data;
+
+    for(var i = 0; i < data.length; i += 4) {
+      var x = i % (ronin.frame.width*8)
+      var y = i / (ronin.frame.width*32)
+      data[i]     = x/32;
+      data[i + 1] = 255 - (x/32);
+      data[i + 2] = y;
+      data[i + 3] = 255;
+    }
+
+    ronin.layers.guide.context().putImageData(originalData, 0, 0);
   }
 
   this.draw = function(u = null)

sources/scripts/modules/brush.js

@@ -17,10 +17,11 @@ function Brush()
   })
 
   this.methods.pick = new Method("pick","x,y","Set brush color to a position's pixel.",function(q){
-    var pixel = ronin.render.context().getImageData(q.x*2, q.y*2, 1, 1).data;
+    var pixel = (ronin.commander.input_el.value == "~" ? ronin.guide: 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.cursor.color = color.hex;
+    ronin.hint.update();
   })
 
   this.absolute_thickness = 0;

sources/scripts/modules/filter.js

@@ -18,7 +18,7 @@ function Filter()
     ronin.render.context().putImageData(originalData, 0, 0);
   });
 
-  this.methods.saturation = new Method("saturation","0.5,0.5","Filter color saturation.",function(q){
+  this.methods.saturation = new Method("saturation","#ff00333","Filter color saturation.",function(q){
 
     var color = new Color(q).floats();
 

sources/scripts/modules/path.js

@@ -54,7 +54,7 @@ function Path()
 
     var ctx = ronin.preview.context();
     ctx.beginPath();
-    ctx.lineCap = q.settings.cap ? q.settings.cap : ronin.path.settings.cap;
+    ctx.lineCap = ronin.path.settings.cap;
     ctx.lineWidth = ronin.cursor.size;
     ctx.strokeStyle = ronin.cursor.color;
     ctx.stroke(new Path2D(path));

sources/scripts/ronin.js

@@ -67,6 +67,7 @@ function Ronin()
     ronin.cursor.el.addEventListener('mousemove', ronin.cursor.mouse_move);
     ronin.cursor.el.addEventListener('mouseup', ronin.cursor.mouse_up);
     window.addEventListener('keydown', ronin.keyboard.key_down);
+    window.addEventListener('keyup', ronin.keyboard.key_up);
     ronin.commander.input_el.addEventListener('input', ronin.commander.on_input);
 
     console.log("Ronin","Started");