dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved this and that

Browse Source
This commit is contained in:
Devine Lu Linvega
2018-01-03 15:24:26 +13:00
parent 4deed6fef6
commit 7cc9fde1b3
9 changed files with 97 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
sources/links/main.css
View File

@@ -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; }
.layer { transition: all 150ms; left:0px; top:0px; outline-color: #bbb;outline-width: 1px;outline-style: solid;}

5
sources/scripts/core/commander.js
View File

@@ -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()

26
sources/scripts/core/cursor.js
View File

@@ -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 "<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)

32
sources/scripts/core/keyboard.js
View File

@@ -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();

7
sources/scripts/modules/brush.js
View File

@@ -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){

1
sources/scripts/modules/frame.js
View File

@@ -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);

12
sources/scripts/ronin.js
View File

@@ -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"
}
}