From 7cc9fde1b35e376437bb87a6f10c4cc80ff51724 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 3 Jan 2018 15:24:26 +1300 Subject: [PATCH] Improved this and that --- README.md | 90 ++++++++++--------------------- package.json | 3 +- sources/links/main.css | 28 +++++++--- sources/scripts/core/commander.js | 5 +- sources/scripts/core/cursor.js | 26 ++++----- sources/scripts/core/keyboard.js | 32 +++++++---- sources/scripts/modules/brush.js | 7 +-- sources/scripts/modules/frame.js | 1 - sources/scripts/ronin.js | 12 +++++ 9 files changed, 97 insertions(+), 107 deletions(-) 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