diff --git a/README.md b/README.md
index c2e9583..55a15a4 100644
--- a/README.md
+++ b/README.md
@@ -1,84 +1,48 @@
# Ronin
-Ronin is a simple open-source graphic design tool.
+Ronin is a graphic design tool.
## 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**.
-## Modules
-## brush
+## Zoom
-Missing documentation.
+- `1`, zoom **100%**.
+- `2`, zoom **200%**.
+- `3`, zoom **400%**.
-### Methods
-- `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.
+## Commander
-## frame
+- `Tab`, display input.
-Manager for the canvas size
+## Layers
-### Methods
-- `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
+- `z`, toggle between above and below layers.
-## io
+## Brush
-File import/export tools.
+- `x`, toggle between primary and secondary color.
+- `[`, decrease brush size.
+- `]`, increase brush size.
-### Methods
-- `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.
+## Macros
-## path
+- `ctrl f`, inject `frame fill:[#primary]`
-Trace lines and draw shapes.
+## Extras
-### Methods
-- `stroke:x,y&`
-- `fill:x,y&`
-- `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).
+- Download additional [themes](https://github.com/hundredrabbits/Themes).
+- Support this project through [Patreon](https://patreon.com/100).
+- See the [License](LICENSE.md) file for license rights and limitations (MIT).
diff --git a/package.json b/package.json
index 0a0380f..2371d26 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,7 @@
"start": "electron ."
},
"devDependencies": {
- "electron": "^1.7.5",
- "electron-prebuilt": "^1.4.13"
+ "electron": "^1.8.1"
},
"dependencies": {
"electron-packager": "^8.4.0"
diff --git a/sources/links/main.css b/sources/links/main.css
index 0429b2a..eaaeb07 100644
--- a/sources/links/main.css
+++ b/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 { z-index: 9000; }
-#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; }
-#hint { color:#666; padding-left:20px;}
+#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;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: white; margin-left:20px; z-index: 9000;position: relative; }
+
+#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; }
-#cursor_hint .mode {}
+#commander #cursor_hint { position: fixed;top: 0px;right: 10px;color: white; padding: 0px 10px; color:#555; font-size:11px; padding-right: 40px; }
+#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; }
\ No newline at end of file
+.layer { transition: all 150ms; left:0px; top:0px; outline-color: #bbb;outline-width: 1px;outline-style: solid;}
\ No newline at end of file
diff --git a/sources/scripts/core/commander.js b/sources/scripts/core/commander.js
index 43b6fa1..3f24486 100644
--- a/sources/scripts/core/commander.js
+++ b/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()
diff --git a/sources/scripts/core/cursor.js b/sources/scripts/core/cursor.js
index dde15a1..0531d79 100644
--- a/sources/scripts/core/cursor.js
+++ b/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){
- 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";
+ 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 "ZOOM"+ronin.frame.zoom.scale+" "+mode+""+ronin.cursor.size+" "+(ronin.cursor.target.name)+" ●●";
+ return `
+ ${ronin.cursor.size}${ronin.frame.zoom.scale}
+ `;
}
function distance_between(a,b)
diff --git a/sources/scripts/core/keyboard.js b/sources/scripts/core/keyboard.js
index 0143944..8636ec8 100644
--- a/sources/scripts/core/keyboard.js
+++ 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.autocomplete();
- ronin.commander.show();
- return;
+ ronin.commander.inject(`frame fill:${ronin.cursor.color}`)
}
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();
diff --git a/sources/scripts/modules/brush.js b/sources/scripts/modules/brush.js
index 1fb2560..d562fdd 100644
--- a/sources/scripts/modules/brush.js
+++ b/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: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}}),
+ new Pointer({offset:{x:0,y:0}})
];
this.methods.add = new Method("add","x,y&mirror_x,mirror_y","Add a new pointer to the brush",function(q){
diff --git a/sources/scripts/modules/frame.js b/sources/scripts/modules/frame.js
index 9f467ed..9576df7 100644
--- a/sources/scripts/modules/frame.js
+++ b/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);
diff --git a/sources/scripts/ronin.js b/sources/scripts/ronin.js
index ae93f56..4aa777a 100644
--- a/sources/scripts/ronin.js
+++ b/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"
}
}
\ No newline at end of file