Improved this and that

README.md

@@ -1,84 +1,48 @@
 # Ronin
-Ronin is a simple open-source graphic design tool.
+Ronin is a graphic design tool.
 
 <img src='https://raw.githubusercontent.com/hundredrabbits/Ronin/master/PREVIEW.jpg' width='600'/>
 
 ## Cursor
+
+- `shift drag`, drag content of layer.
+- `alt drag`, erase.
+- `alt shift click`, color pick.
+
+### Special Input
+
 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**.
+## Zoom
-## Modules
-## brush
 
-Missing documentation.
+- `1`, zoom **100%**.
+- `2`, zoom **200%**.
+- `3`, zoom **400%**.
 
-### Methods
+## Commander
-- `add:x,y&mirror_x,mirror_y` Add a new pointer to the brush
-- `remove:` Remove last pointer
-- `pick:x,y` Set brush color to a position's pixel.
 
-## frame
+- `Tab`, display input.
 
-Manager for the canvas size
+## Layers
 
-### Methods
+- `z`, toggle between above and below layers.
-- `resize:WxH` Resize canvas to size.
-- `rescale:0.5` Rescale canvas to float.
-- `crop:X,Y|WxH` Crop canvas to rect.
-- `clear:` Erase entire canvas
-- `fill:#f00` Fill entire canvas with color
-- `inspect:` View canvas details
 
-## io
+## Brush
 
-File import/export tools.
+- `x`, toggle between primary and secondary color.
+- `[`, decrease brush size.
+- `]`, increase brush size.
 
-### Methods
+## Macros
-- `open:browser` Press enter to open the file browser.
-- `load:browser` Press enter to open the file browser.
-- `draw:X,Y|WxH` Draw the loaded image pixels.
-- `save:jpg/png` Export canvas.
 
-## path
+- `ctrl f`, inject `frame fill:[#primary]`
 
-Trace lines and draw shapes.
+## Extras
 
-### Methods
+- Download additional [themes](https://github.com/hundredrabbits/Themes).
-- `stroke:x,y&` 
+- Support this project through [Patreon](https://patreon.com/100).
-- `fill:x,y&` 
+- See the [License](LICENSE.md) file for license rights and limitations (MIT).
-- `svg:M0,0 L100,100` 
-
-## magnet
-
-Cursor magnetisation settings, changes are reflected on the grid layer.
-
-### Methods
-- `lock:10` Magnetize cursor
-- `unlock:` Release cursor
-
-## filter
-
-Pixel filter
-
-### Methods
-- `balance:#ff0033` Filter color balance.
-- `saturation:#ff00333` Filter color saturation.
-
-## type
-
-Missing documentation.
-
-### Methods
-- `write:text&x,y|WxH` Draw text
-
-## Support
-
-- You can support this project through [Patreon](https://patreon.com/100), or with:
-- **$ETH** `0x7a5f5d9B697F04f5deE82c81859F7cC4FDb6e990`
-- **$BTC** `1NU2Pso6nYbRpCAftX3yqQW9w2NSUxzsNa`. 
-
-## License
-See the [LICENSE](LICENSE.md) file for license rights and limitations (CC).

package.json

@@ -6,8 +6,7 @@
     "start": "electron ."
   },
   "devDependencies": {
-    "electron": "^1.7.5",
+    "electron": "^1.8.1"
-    "electron-prebuilt": "^1.4.13"
   },
   "dependencies": {
     "electron-packager": "^8.4.0"

sources/links/main.css

@@ -13,15 +13,29 @@ yu { display:block; }
 #grid { z-index:795;position: fixed; }
 
 #ronin { background-color:#ccc; height: 100vh; width:100vw; background-image:url(../media/assets/grid.svg);}
-#commander, #hint { position: fixed;bottom: 8px;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, #hint { 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; }
+#commander { z-index: 9000;background: #000;bottom: 0px;position: relative; transition: top 150ms; }
-#commander input { background: transparent;width: calc(100vw - 30px);display: block;line-height: 40px;font-size: 11px;color: black; margin-left:20px; z-index: 9000;position: relative; }
+#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;}
+
+#commander.hidden { top:-40px; }
+#commander.visible { top:0px; }
+
+#hint { color:#666; padding-left:20px; position: absolute;top: 0px;}
 #hint b { font-family: 'input_mono_regular'; color:#999;}
 #hint i { font-style: italic; }
 #hint .autocomplete { background:white; color:black; }
 
-#cursor_hint { position: absolute;top: 0px;right: 10px;color: white; padding: 0px 10px; color:#555; font-size:11px; text-transform: uppercase; }
+#commander #cursor_hint { position: fixed;top: 0px;right: 10px;color: white; padding: 0px 10px; color:#555; font-size:11px; padding-right: 40px; }
-#cursor_hint .mode {}
+#commander #cursor_hint .mode {}
+#commander #cursor_hint .zoom::after  { content:"*"; }
+#commander #cursor_hint .pick::after  { content:"#"; }
+#commander #cursor_hint .paint::after { content:"+"; }
+#commander #cursor_hint .erase::after { content:"-"; }
+#commander #cursor_hint .drag::after  { content:"/"; }
+#commander #cursor_hint .target_above::after  { content:"^"; }
+#commander #cursor_hint .target_below::after  { content:"v"; }
+#commander icon.brush { display: block;width: 40px;height: 40px;position: absolute;top: 0px;right: 0px; }
+#commander icon.brush icon.primary { display: block;width: 6px;height: 20px;border-radius: 20px;border-style: solid;top: 10px;left: 16px;position: absolute;background: pink;transform: rotate(23deg);}
+#commander icon.brush icon.secondary { display: block;width: 6px;height: 20px;border-radius: 20px;border-style: solid;top: 10px;left: 24px;position: absolute;background: pink;transform: rotate(23deg);}
 
-.layer { transition: all 150ms; left:0px; top:0px; }
+.layer { transition: all 150ms; left:0px; top:0px; outline-color: #bbb;outline-width: 1px;outline-style: solid;}

sources/scripts/core/commander.js

@@ -109,6 +109,7 @@ function Commander()
   {
     ronin.commander.input_el.value = str;
     ronin.commander.update();
+    ronin.commander.show();
   }
 
   this.append = function(str)
@@ -119,12 +120,12 @@ function Commander()
 
   this.show = function()
   {
-    this.el.style.display = "block";
+    this.el.className = "visible";
   }
 
   this.hide = function()
   {
-    this.el.style.display = "none";
+    this.el.className = "hidden";
   }
 
   this.query = function()

sources/scripts/core/cursor.js

@@ -8,9 +8,9 @@ function Cursor(rune)
   this.query = null;
   this.mode = "vertex";
 
-  this.color = "#000000"
+  this.color = "#ff0000"
   this.color_alt = "#ffffff"
-  this.size = 4;
+  this.size = 2;
   this.pos = {x:0,y:0};
 
   this.target = null;
@@ -22,7 +22,7 @@ function Cursor(rune)
     if(!pos){ return; }
 
     var ctx = this.context();
-    var radius = ronin.cursor.size;
+    var radius = ronin.cursor.size * ronin.frame.zoom.scale;
 
     ctx.beginPath();
     ctx.arc(pos.x * 2, pos.y * 2, radius, 0, 2 * Math.PI, false);
@@ -220,25 +220,21 @@ function Cursor(rune)
   {
     var html = "";
 
-    var mode = "PAINT";
+    var mode = "paint";
 
-    if(ronin.commander.input_el.value.indexOf("$+") > -1){
+    if(ronin.keyboard.is_down["Alt"] && ronin.keyboard.is_down["Shift"]){
-      mode = "[MULTI]POS/SHIFT-RECT"
+      mode = "pick";
-    }
-    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";
+      mode = "erase";
     }
     else if(ronin.keyboard.is_down["Shift"]){
-      mode = "DRAG";
+      mode = "drag";
     }
 
-    return "<t class='zoom'>ZOOM"+ronin.frame.zoom.scale+"</t> <t class='mode'>"+mode+"</t><t class='size'>"+ronin.cursor.size+"</t> "+(ronin.cursor.target.name)+" <t class='color' style='color:"+ronin.cursor.color+"'>●</t><t class='color' style='color:"+ronin.cursor.color_alt+"'>●</t>";
+    return `
+    <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>`;
   }
 
   function distance_between(a,b)

sources/scripts/core/keyboard.js

@@ -4,6 +4,15 @@ function Keyboard()
 
   this.key_up = function(e)
   {
+    if(e.key == "tab" || e.keyCode == 9){
+      e.preventDefault();
+      ronin.cursor.update();
+      ronin.commander.autocomplete();
+      ronin.commander.show();
+      setTimeout(()=>{ronin.commander.focus},100)
+      return;
+    }
+
     ronin.keyboard.is_down[e.key] = false;
     ronin.hint.update(e);
   }
@@ -12,7 +21,7 @@ function Keyboard()
   {
     ronin.keyboard.is_down[e.key] = true;
 
-    if(e.key == "~"){
+    if(e.key == "/"){
       e.preventDefault();
       ronin.commander.inject("~")
       return;
@@ -36,12 +45,10 @@ function Keyboard()
       }
     }
 
-    if(e.key == "tab" || e.keyCode == 9){
+    // Macros
+    if(e.key == "f" && (e.ctrlKey || e.metaKey)){
       e.preventDefault();
-      ronin.cursor.update();
+      ronin.commander.inject(`frame fill:${ronin.cursor.color}`)
-      ronin.commander.autocomplete();
-      ronin.commander.show();
-      return;
     }
 
     if(ronin.commander.is_focused()){
@@ -65,6 +72,14 @@ function Keyboard()
       ronin.cursor.target.clear();
     }
 
+    if(e.key == "N" && (e.ctrlKey || e.metaKey) && e.shiftKey){
+      e.preventDefault();
+      ronin.guide.inspect = false;
+      ronin.guide.clear();
+      ronin.layers.above.clear()
+      ronin.layers.below.clear()
+    }
+
     // Open
     if(e.key == "o" && (e.ctrlKey || e.metaKey)){
       e.preventDefault();
@@ -77,11 +92,6 @@ function Keyboard()
       ronin.io.methods.save.run();
     }
 
-    if(e.key == "H" && (e.ctrlKey || e.metaKey) && e.shiftKey){
-      e.preventDefault();
-      ronin.docs.export();
-    }
-
     if(e.key == "x"){
       e.preventDefault();
       ronin.cursor.swap_colors();

sources/scripts/modules/brush.js

@@ -5,12 +5,7 @@ function Brush()
   this.speed = 0;
 
   this.pointers = [
-    new Pointer({offset:{x:0,y:0}}),
+    new Pointer({offset:{x:0,y:0}})
-    // new Pointer({offset:{x:2,y:2}}),
-    // new Pointer({offset:{x:-10,y:-10}}),
-    new Pointer({offset:{x:0,y:0},mirror:{x:450,y:0}}),
-    // new Pointer({offset:{x:-10,y:10},mirror:{x:450,y:0}}),
-    // new Pointer({offset:{x:2,y:-2},mirror:{x:450,y:0}}),
   ];
 
   this.methods.add = new Method("add","x,y&mirror_x,mirror_y","Add a new pointer to the brush",function(q){

sources/scripts/modules/frame.js

@@ -46,7 +46,6 @@ function Frame()
     ronin.frame.zoom.offset.x = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.x * ronin.frame.zoom.scale) + (ronin.frame.width/2));
     ronin.frame.zoom.offset.y = ronin.frame.zoom.scale == 1 ? 0 : ((-ronin.cursor.pos.y * ronin.frame.zoom.scale) + (ronin.frame.height/2));
 
-    console.log(ronin.frame.zoom)
     ronin.layers.above.zoom(ronin.frame.zoom);
     ronin.layers.below.zoom(ronin.frame.zoom);
     ronin.layers.guide.zoom(ronin.frame.zoom);

sources/scripts/ronin.js

@@ -84,5 +84,17 @@ function Ronin()
     this.cursor.update();
     this.preview.update();
     this.commander.update();
+
+    this.load();
+  }
+
+  this.load = function(content = this.default())
+  {
+
+  }
+
+  this.default = function()
+  {
+    return "select_layer:below ; fill:#fff ; select_layer:above ; add_cursor:1,1 ; add_cursor:-1,-1"
   }
 }