Implemented themes

sources/scripts/core/commander.js

@@ -120,7 +120,6 @@ function Commander()
 
   this.activate = function()
   {
-    ronin.cursor.update();
     ronin.commander.autocomplete();
     ronin.commander.show();
     setTimeout(()=>{ronin.commander.focus},100)

sources/scripts/core/cursor.js

@@ -5,13 +5,11 @@ function Cursor(rune)
   this.query = null;
   this.mode = "vertex";
 
-  this.color = "#000000"
-  this.color_alt = "#ffffff"
   this.size = 2;
   this.pos = {x:0,y:0};
 
   this.target = null;
-
+  
   this.mouse_pos = function(e)
   {
     var pos = {x:e.clientX,y:e.clientY};
@@ -30,25 +28,17 @@ function Cursor(rune)
     e.preventDefault();
 
     var pos = ronin.cursor.mouse_pos(e);
-    ronin.cursor.pos = pos;
 
     ronin.commander.blur();
 
-    // 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.line.origin = {x:pos.x,y:pos.y};
     ronin.cursor.line.from = {x:pos.x,y:pos.y};
 
     // Save original query
     ronin.cursor.query = ronin.commander.input_el.value;
 
-    if(ronin.commander.active_module()){ }
+    if(ronin.commander.active_module()){ /* DO NOTHING */ }
+    else if(e.shiftKey){ /* DO NOTHING */ }
     else if(e.altKey && e.shiftKey){ ronin.brush.methods.pick.run(pos); }
     else if(e.altKey){ ronin.brush.erase(ronin.cursor.line); }
     else{ ronin.brush.stroke(ronin.cursor.line);   }
@@ -69,13 +59,12 @@ function Cursor(rune)
 
     ronin.cursor.line.to = {x:pos.x,y:pos.y};
 
-    if(e.altKey && e.shiftKey){ ronin.brush.methods.pick.run(pos); }
+    if(ronin.commander.active_module()){ ronin.cursor.inject_query(); }
+    else if(e.altKey && e.shiftKey){ ronin.brush.methods.pick.run(pos); }
     else if(e.shiftKey){ ronin.cursor.drag(ronin.cursor.line); }
     else if(e.altKey){ ronin.brush.erase(ronin.cursor.line); }
     else{ ronin.brush.stroke(ronin.cursor.line); }
 
-    ronin.cursor.inject_query();
-    
     ronin.cursor.line.from = {x:pos.x,y:pos.y};
   }
 
@@ -84,7 +73,6 @@ function Cursor(rune)
     e.preventDefault();
 
     var pos = ronin.cursor.mouse_pos(e);
-    ronin.cursor.pos = pos;
     
     ronin.cursor.line.destination = {x:pos.x,y:pos.y};
 
@@ -110,14 +98,6 @@ function Cursor(rune)
     ronin.cursor.target.context().putImageData(data, offset.x * -2, offset.y * -2);
   }
 
-  this.swap_colors = function()
-  {
-    var c = this.color_alt
-    this.color_alt = this.color;
-    this.color = c;
-    ronin.commander.update();
-  }
-
   this.swap_layer = function()
   {
     this.target = this.target.name == "above" ? ronin.layers.below : ronin.layers.above;
@@ -195,9 +175,9 @@ function Cursor(rune)
     }
 
     return `
-    <t class='frame'>${ronin.frame.width}x${ronin.frame.height}</t>
+    <t class='frame'>${ronin.frame.width}X${ronin.frame.height} ${(ronin.frame.width/ronin.frame.height).toFixed(2)}:1</t>
     <t class='target_${ronin.cursor.target.name}'></t><t class='size ${mode}'>${ronin.cursor.size}</t><t class='zoom'>${ronin.frame.zoom.scale}</t>
-    <icon class='brush'><icon class='primary' style='background:${ronin.cursor.color}'></icon><icon class='secondary' style='background:${ronin.cursor.color_alt}'></icon></icon>`;
+    ${ronin.brush.swatch.hint()}`;
   }
 
   function distance_between(a,b)

sources/scripts/core/keyboard.js

@@ -11,7 +11,7 @@ function Keyboard()
   {
     ronin.keyboard.is_down[e.key] = true;
 
-    if(e.key == "Enter"){
+    if(ronin.commander.is_focused() && e.key == "Enter"){
       e.preventDefault();
       ronin.commander.validate();
     }

sources/scripts/core/swatch.js

@@ -0,0 +1,31 @@
+function Swatch()
+{
+  this.index = 0;
+  this.colors = [];
+  
+  this.start = function()
+  {
+    this.update();
+  }
+  
+  this.update = function()
+  {
+    this.colors = [ronin.theme.active.f_high,ronin.theme.active.f_med,ronin.theme.active.f_low];
+  }
+
+  this.swap = function()
+  {
+    this.index += 1;
+  }
+
+  this.color = function(offset = 0)
+  {
+    return this.colors[(this.index + offset) % this.colors.length];
+  }
+
+  this.hint = function()
+  {
+    this.update();
+    return `<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" id='swatch' style='background-color:${this.color(1)}'><circle cx='10' cy='10' r='${ronin.cursor.size * 0.75}' fill='${this.color()}'/></svg>`;
+  }
+}