diff --git a/links/main.css b/links/main.css index ca7e0d2..efa1c57 100644 --- a/links/main.css +++ b/links/main.css @@ -20,16 +20,17 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" #terminal #widget { text-align: right; bottom:30px} #terminal #widget .mouse { color:white; } -#terminal #hint .module { display: inline-block; color:#999; } -#terminal #hint .method { display: inline-block; color:#999; } -#terminal #hint .params { display: inline-block; color:#999; font-style: italic } -#terminal #hint .setting { display: inline-block; color:#fff; font-style: italic } +span.module { display: inline-block; color:#999; } +span.method { display: inline-block; color:#999; } +span.method .name { color:#fff; } +span.method .options { color:#555; } +span.params { display: inline-block; color:#999; } +span.setting { display: inline-block; color:#fff; } +span.setting .value { color:#999; } +span.mode { color:#999; } +span.mode .name { text-decoration: underline; color:white; } #modal { position: fixed; bottom:80px; right:20px; height:100px; background:#111; border-radius:3px; overflow:hidden; display: block} #modal.text { display: block;background: #000;width: calc(100vw - 100px);height: calc(100vh - 160px);padding: 30px;font-size: 12px;white-space: pre;column-count: 3;line-height: 20px;color:white} -#modal.text .module { font-family: 'input_mono_regular'; border-bottom:1px solid #333; display: block; line-height: 30px} -/*#modal.text .module:before { content: "-";margin-left:-15px;margin-right:15px;display:inline-block }*/ -#modal.text .setting { font-style: italic; color:#999;} -#modal.text .mode { text-decoration: underline} #modal.image img { display: block; max-height: 100%; width:inherit;} #modal.hidden { display: none } \ No newline at end of file diff --git a/presets/blank.rin b/presets/blank.rin index 23780dc..a5a96eb 100644 --- a/presets/blank.rin +++ b/presets/blank.rin @@ -1,8 +1,7 @@ frame.resize 500x500 layer.fill #eeeeee -brush:color #333333 +brush:color #000000 brush:size 3 frame.select main brush.add 1,1 -brush.add 2,2 -brush.add 3,3 \ No newline at end of file +brush.add -1,-1 \ No newline at end of file diff --git a/presets/default.rin b/presets/default.rin index cec06be..89620a1 100644 --- a/presets/default.rin +++ b/presets/default.rin @@ -11,6 +11,7 @@ path.stroke M120,60 a60,60 0 0,1 60,60 M240,120 a-60,60 0 0,1 -60,60 M180,240 a- path.stroke M120,90 a30,30 0 0,1 30,30 M210,120 a-30,30 0 0,1 -30,30 M180,210 a-30,-30 0 0,1 -30,-30 M90,180 a30,-30 0 0,1 30,-30 magnet.grid 1x1 4,4 type:size 11 +type:color #ffffff type:font "DIN Medium" type.write 45,280 "RONIN" type:font "DIN" diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index 97f92b7..8636733 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -8,7 +8,7 @@ function Brush(rune) this.add_mode(new Mode("erase","shift")); this.add_setting(new Setting("color","#000000")); this.add_setting(new Setting("size","2")); - this.add_method(new Method("add",["Position","Color","Scale","mirror_x","mirror_y"])); + this.add_method(new Method("add",["Position","Color","Scale"],["mirror_x","mirror_y"])); this.add_method(new Method("clear")); this.add = function(cmd, preview = false) @@ -85,7 +85,7 @@ function Brush(rune) this.mouse_pointer = function(position) { if(this.pointers.length < 1){ ronin.cursor.draw_pointer_no_pointer(position); return; } - return keyboard.shift_held == true ? ronin.cursor.draw_pointer_circle_eraser(position,this.settings["size"].to_f() * 3) : ronin.cursor.draw_pointer_circle(position,this.settings["size"].to_f()); + return keyboard.shift_held == true ? ronin.cursor.draw_pointer_circle_eraser(position,this.settings["size"].to_f() * 3) : ronin.cursor.draw_pointer_brush(position,this.settings["size"].to_f()); } this.mouse_mode = function() diff --git a/scripts/modules/cursor.js b/scripts/modules/cursor.js index d651c4e..f97cfa8 100644 --- a/scripts/modules/cursor.js +++ b/scripts/modules/cursor.js @@ -144,13 +144,24 @@ function Cursor(rune) this.layer.context().beginPath(); - this.layer.context().moveTo(position.x + 10,position.y); + // Background + this.layer.context().moveTo(position.x + 5,position.y); this.layer.context().lineTo(position.x,position.y); - this.layer.context().lineTo(position.x,position.y + 10); + this.layer.context().lineTo(position.x,position.y + 5); + + this.layer.context().lineCap="round"; + this.layer.context().lineWidth = 3; + this.layer.context().strokeStyle = "#000000"; + this.layer.context().stroke(); + + // Overlay + this.layer.context().moveTo(position.x + 5,position.y); + this.layer.context().lineTo(position.x,position.y); + this.layer.context().lineTo(position.x,position.y + 5); this.layer.context().lineCap="round"; this.layer.context().lineWidth = 1; - this.layer.context().strokeStyle = this.settings.color; + this.layer.context().strokeStyle = "#ffffff"; this.layer.context().stroke(); this.layer.context().closePath(); @@ -186,31 +197,24 @@ function Cursor(rune) this.pointer_last = position; } - this.draw_pointer_circle = function(position,size = 1) + this.draw_pointer_brush = function(position,size = 1) { if(!this.layer){ this.create_layer(); } this.pointer_last = this.pointer_last ? this.pointer_last : position; this.layer.context().beginPath(); - this.layer.context().arc(position.x, position.y, 0.5, 0, 2 * Math.PI, false); - this.layer.context().lineWidth = 1; - this.layer.context().strokeStyle = this.settings.color; - this.layer.context().stroke(); - this.layer.context().closePath(); - this.layer.context().beginPath(); + this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false); + this.layer.context().lineWidth = 3; + this.layer.context().strokeStyle = "#000000"; + this.layer.context().stroke(); + this.layer.context().arc(position.x, position.y, size/2, 0, 2 * Math.PI, false); this.layer.context().lineWidth = 1; - this.layer.context().strokeStyle = ronin.brush.color; + this.layer.context().strokeStyle = ronin.brush.settings["color"].value != "#000000" ? ronin.brush.settings["color"].value : "#ffffff"; this.layer.context().stroke(); - this.layer.context().closePath(); - this.layer.context().beginPath(); - this.layer.context().arc(position.x, position.y, (size/2)+2, 0, 2 * Math.PI, false); - this.layer.context().lineWidth = 1; - this.layer.context().strokeStyle = this.settings.color; - this.layer.context().stroke(); this.layer.context().closePath(); this.pointer_last = position; diff --git a/scripts/modules/eye.js b/scripts/modules/eye.js index d7dbf1d..93108ac 100644 --- a/scripts/modules/eye.js +++ b/scripts/modules/eye.js @@ -9,7 +9,8 @@ function Eye(rune) { var pixel = ronin.frame.context().getImageData(position.x*2, position.y*2, 1, 1).data; var hex = new Color().rgb_to_hex({r:pixel[0],g:pixel[1],b:pixel[2]}); - ronin.terminal.log(new Log(this,"Color at "+position.toString()+" is "+hex)); + ronin.terminal.log(new Log(this,"Pixel on "+ronin.frame.active_layer.name+" layer at "+position.toString()+" is "+hex)); + ronin.terminal.input.focus(); } // Mouse diff --git a/scripts/modules/frame.js b/scripts/modules/frame.js index 3b9fcfa..6236e87 100644 --- a/scripts/modules/frame.js +++ b/scripts/modules/frame.js @@ -12,7 +12,7 @@ function Frame(rune) this.add_method(new Method("resize",[new Position().name,new Rect().name])); this.add_method(new Method("select",["text"])); - this.add_mode(new Mode("crop")); + this.add_mode(new Mode("resize")); this.install = function() { diff --git a/scripts/modules/layer.js b/scripts/modules/layer.js index df74096..7626e87 100644 --- a/scripts/modules/layer.js +++ b/scripts/modules/layer.js @@ -8,7 +8,7 @@ function Layer(name,manager = null) this.add_method(new Method("clear",[])); this.add_method(new Method("rotate",["position","angle"])); this.add_method(new Method("mirror",["position"])); - this.add_method(new Method("fill",["color","position","rect"],"Add position")); + this.add_method(new Method("fill",["color","position","rect"])); this.add_method(new Method("rename",["text"])); diff --git a/scripts/modules/magnet.js b/scripts/modules/magnet.js index 88439a4..ed1b0bb 100644 --- a/scripts/modules/magnet.js +++ b/scripts/modules/magnet.js @@ -2,8 +2,9 @@ function Magnet(rune) { Module.call(this,rune); - this.add_setting(new Setting("grid","1x1")); - this.add_setting(new Setting("marker","4,4")); + this.size = new Rect("1x1"); + this.rate = null; + this.add_setting(new Setting("color","#000000")); this.add_method(new Method("grid",["rect","position"])); @@ -18,20 +19,20 @@ function Magnet(rune) this.draw_grid(cmd.rect(),cmd.position()); if(preview == false){ - if(cmd.rect()){ this.settings["grid"].update(cmd.rect().toString());} - if(cmd.position()){ this.settings["marker"].update(cmd.position().toString());} + if(cmd.rect()){ this.size = cmd.rect(); } + if(cmd.position()){ this.rate = cmd.rect(); } } return 1, preview ? "preview" : "ok"; } - this.draw_grid = function(rect,grid) + this.draw_grid = function(rect,position) { if(!rect){ rect = new Rect("20x20"); } - if(!grid){ grid = new Position("4,4"); } + if(!position){ position = new Position("4,4"); } - this.settings["grid"].update(rect.toString()); - this.settings["marker"].update(grid.toString()); + this.size = rect; + this.rate = position; if(rect.width < 5 || rect.height < 5){ return; } @@ -42,7 +43,7 @@ function Magnet(rune) for (var y = 1; y < vertical; y++) { var dot_position = new Position(x * rect.width, y * rect.height); var size = 0.5; - if(grid && x % grid.x == 0 && y % grid.y == 0){ size = 1; } + if(position && x % position.x == 0 && y % position.y == 0){ size = 1; } this.draw_marker(dot_position,size); } } @@ -50,7 +51,7 @@ function Magnet(rune) this.draw_helper = function(position) { - if(this.settings["grid"].to_rect().width < 5 || this.settings["grid"].to_rect().height < 5){ return; } + if(this.size.width < 5 || this.size.height < 5){ return; } var magnetized = this.magnetic_position(position); this.context().beginPath(); @@ -71,19 +72,19 @@ function Magnet(rune) this.magnetic_position = function(position) { - var x = parseInt(position.x / this.settings["grid"].to_rect().width) * this.settings["grid"].to_rect().width; - var y = parseInt(position.y / this.settings["grid"].to_rect().width) * this.settings["grid"].to_rect().width; + var x = parseInt(position.x / this.size.width) * this.size.width; + var y = parseInt(position.y / this.size.width) * this.size.width; return new Position(x,y); } this.update_mouse = function(position) { - if(this.settings["grid"].to_rect().width > 4 || this.settings["grid"].to_rect().height > 4){ + if(this.size.width > 4 || this.size.height > 4){ if(!this.layer){ this.create_layer(); } this.layer.clear(); this.draw_helper(position); - this.draw_grid(this.settings["grid"].to_rect(),this.settings["marker"].to_pos()); + this.draw_grid(this.size,this.rate); } return this.magnetic_position(position); @@ -91,8 +92,8 @@ function Magnet(rune) this.widget = function() { - if(this.settings["grid"].to_rect().width < 2 || this.settings["grid"].to_rect().height < 2){ return ""; } - return this.settings["grid"].value; + if(this.size.width < 2 || this.size.height < 2){ return ""; } + return this.size.value; } this.key_escape = function() diff --git a/scripts/modules/module.js b/scripts/modules/module.js index 2419c5e..47df107 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -56,7 +56,7 @@ function Module(rune) var html = ""; if(method){ - html += method.hint(); + html += method; } else{ for(id in this.methods){ @@ -101,6 +101,11 @@ function Module(rune) this.mouse_mode = function() { + for(mode_id in this.modes){ + if(!keyboard.shift_held && !keyboard.alt_held && !this.modes[mode_id].key){ + return this.modes[mode_id].name; + } + } return null; } diff --git a/scripts/modules/path.js b/scripts/modules/path.js index 9003b21..4bc1272 100644 --- a/scripts/modules/path.js +++ b/scripts/modules/path.js @@ -12,8 +12,8 @@ function Path(rune) this.add_setting(new Setting("line_color","#ffffff")); this.add_setting(new Setting("line_cap","square")); - this.add_method(new Method("stroke",["Positions"],"Add point")); - this.add_method(new Method("fill",["Positions"]),"Add point"); + this.add_method(new Method("stroke",["Positions"])); + this.add_method(new Method("fill",["Positions"])); this.coordinates = []; this.last_pos = null; @@ -72,16 +72,10 @@ function Path(rune) this.create_svg = function() { var s = ""; - - s += ""; - for (var i = 0; i < this.paths.length; i++) { s += ""; } - - s += ""; - console.log(s); - return s; + return ""+s+""; } // Mouse diff --git a/scripts/modules/render.js b/scripts/modules/render.js index 37f8321..3dbced4 100644 --- a/scripts/modules/render.js +++ b/scripts/modules/render.js @@ -4,9 +4,9 @@ function Render(rune) this.filters = {}; - this.add_method(new Method("balance",["Position","Color","Scale"])); - this.add_method(new Method("stencil",["Position","Color","Scale"])); - this.add_method(new Method("chromatic",["Position","Color","Scale"])); + this.add_method(new Method("balance",["color"])); + this.add_method(new Method("stencil",["angle","color"])); + this.add_method(new Method("chromatic",["float"])); this.filters["balance"] = new Filter_Balance(); this.filters["grey"] = new Filter_Grey(); diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index e818a69..49c9308 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -47,7 +47,7 @@ function Terminal(rune) this.update(); } - this.update = function(value = null) + this.update = function(value = null, preview = true) { if(value){ this.input.value = value; this.input.focus(); } @@ -55,10 +55,10 @@ function Terminal(rune) var module = command.module(); var method = command.method(); - if(method){ + if(method && preview){ method.preview(command); } - this.hint_element.innerHTML = ""+this.input.value+""+(this.input.value ? " " : "")+(module ? module.hint(method) : ronin.hint(method)); + this.hint_element.innerHTML = ""+this.input.value+""+(this.input.value ? " > " : "")+(module ? module.hint(method) : ronin.hint(method)); ronin.cursor.update(); } diff --git a/scripts/modules/type.js b/scripts/modules/type.js index efb8227..cf3ab13 100644 --- a/scripts/modules/type.js +++ b/scripts/modules/type.js @@ -2,11 +2,11 @@ function Type(rune) { Module.call(this,rune); - this.add_method(new Method("write",["Position","Text"],"Add position")); + this.add_method(new Method("write",["Position","Text"])); this.add_mode(new Mode("write")); - this.add_setting(new Setting("color","#ffffff")); - this.add_setting(new Setting("size","20")); - this.add_setting(new Setting("font","Din")); + this.add_setting(new Setting("color","#000000")); + this.add_setting(new Setting("size","40")); + this.add_setting(new Setting("font","DIN Medium")); this.write = function(cmd,preview = false) { @@ -14,7 +14,7 @@ function Type(rune) this.layer.clear(); - var text = cmd.text() ? cmd.text() : "Placeholder"; + var text = cmd.text() ? cmd.text() : "Text"; var position = cmd.position() ? cmd.position() : new Position(40,80); var color = this.settings["color"].value; var size = parseFloat(this.settings["size"].value); @@ -39,7 +39,7 @@ function Type(rune) this.mouse_down = function(position) { - var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder"; + var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Text"; var line = "type.write "+position.toString()+" \""+str+"\""; ronin.terminal.update(line); } @@ -50,7 +50,7 @@ function Type(rune) this.mouse_up = function(position) { - var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder"; + var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Text"; var line = "type.write "+position.toString()+" \""+str+"\""; ronin.terminal.update(line); } diff --git a/scripts/units/method.js b/scripts/units/method.js index cb958c9..2e6f601 100644 --- a/scripts/units/method.js +++ b/scripts/units/method.js @@ -1,33 +1,28 @@ -function Method(name,params,mouse_event) +function Method(name,params,options = null) { Unit.call(this); this.host = null; this.name = name; this.params = params; - this.mouse_event = mouse_event; + this.options = options; this.example = ""; this.toString = function() { - var s = ""; + var params_str = ""; for(param in this.params){ - s += this.params[param]+"," + params_str += this.params[param]+"," } - s = s.substr(0,s.length-1); + params_str = params_str.substr(0,params_str.length-1); - return "."+this.name+"("+s+")"; - } - - this.hint = function() - { - var s = ""; - for(id in this.params){ - s += ""+this.params[id]+" "; + var options_str = ""; + for(option in this.options){ + options_str += this.options[option]+"," } - s = s.substr(0,s.length-1); + options_str = options_str.substr(0,options_str.length-1); - return s; + return "."+this.name+" "+params_str+(this.options ? ' ['+options_str+']' : '')+""; } this.preview = function(cmd) diff --git a/scripts/units/mode.js b/scripts/units/mode.js index a2821c8..81348c1 100644 --- a/scripts/units/mode.js +++ b/scripts/units/mode.js @@ -1,4 +1,4 @@ -function Mode(name,key = "") +function Mode(name,key = null) { Unit.call(this); @@ -8,6 +8,6 @@ function Mode(name,key = "") this.toString = function() { - return "~"+this.name+(this.key ? '['+this.key+']' : '')+"" + return "~"+this.name+""+(this.key ? ' '+this.key+'' : '')+"" } } \ No newline at end of file diff --git a/scripts/units/setting.js b/scripts/units/setting.js index 891d1d3..8ddd2d7 100644 --- a/scripts/units/setting.js +++ b/scripts/units/setting.js @@ -13,7 +13,7 @@ function Setting(name,value) this.toString = function() { - return ":"+this.name+(this.key ? '['+this.value+']' : '')+"" + return ":"+this.name+(this.value ? ' '+this.value+'' : '')+"" } this.update = function(value)