diff --git a/links/main.css b/links/main.css index ed02908..3dbf5c8 100644 --- a/links/main.css +++ b/links/main.css @@ -26,5 +26,5 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" #terminal #hint .setting { display: inline-block; color:#fff; font-style: italic } #modal { position: fixed; bottom:80px; right:20px; width:100px; height:100px; background:#111; border-radius:3px; overflow:hidden; display: block} -#modal.image img { display: block; max-width: 100%} +#modal.image img { display: block; max-height: 100%} #modal.hidden { display: none } \ No newline at end of file diff --git a/presets/default.rin b/presets/default.rin index 1bfb10b..06db691 100644 --- a/presets/default.rin +++ b/presets/default.rin @@ -1,6 +1,7 @@ frame.resize 300x300 frame.select main layer.fill #ff0000 +render.stencil 45' #000000 path:line_width 43 path:line_color #EEEEEE path:line_cap square @@ -10,6 +11,7 @@ type:color white type.write 38,262 "RONIN" type.write 38,252 "B08" brush:color #000000 -brush:size 4 +brush:size 2 path:line_width 20 -path:line_color #999999 \ No newline at end of file +path:line_color #999999 +brush.add_pointer 0,0 #000000 2 \ No newline at end of file diff --git a/presets/template.rabbits.rin b/presets/template.rabbits.rin deleted file mode 100644 index 613d0aa..0000000 --- a/presets/template.rabbits.rin +++ /dev/null @@ -1,5 +0,0 @@ -~ Rabbits - -frame.resize 640x400 -source.load /08.jpg x400 -source.load /hundred.rabbits.logo.white.svg 70x70 0,530 \ No newline at end of file diff --git a/presets/template_rabbits.rin b/presets/template_rabbits.rin new file mode 100644 index 0000000..9272d67 --- /dev/null +++ b/presets/template_rabbits.rin @@ -0,0 +1,8 @@ +~ Rabbits + +frame.resize 795x450 +source.load /01.jpg x450 +source.load /hundred.rabbits.logo.white.svg 70x70 0,380 +source:format jpg +source:quality 0.9 +source.save \ No newline at end of file diff --git a/scripts/core/command.js b/scripts/core/command.js index 087b2ab..23d2b9b 100644 --- a/scripts/core/command.js +++ b/scripts/core/command.js @@ -13,14 +13,14 @@ function Command(content) { var module_name = null; - if(content.indexOf(".") > -1){ - module_name = content.split(" ")[0].split(".")[0] + if(this.parts[0].indexOf(".") > -1){ + module_name = this.parts[0].split(" ")[0].split(".")[0] } - else if(content.indexOf(":") > -1){ - module_name = content.split(" ")[0].split(":")[0] + else if(this.parts[0].indexOf(":") > -1){ + module_name = this.parts[0].split(" ")[0].split(":")[0] } else{ - module_name = content.split(" ")[0]; + module_name = this.parts[0].split(" ")[0]; } return ronin.modules[module_name] ? ronin.modules[module_name] : null; } @@ -36,8 +36,11 @@ function Command(content) this.setting = function() { + var content = this.content; var module = this.module(); - if(!module || content.indexOf(":") < 0){ return null; } + + if(!module){ return null; } + if(content.indexOf(":") < 0){ return null; } var setting_name = this.parts[0].split(":")[1]; return module.settings[setting_name] ? setting_name : null; diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index 2110ff5..cb2b7d8 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -29,7 +29,7 @@ function Ronin() this.modules[this.source.name] = this.source; this.modules[this.render.name] = this.render; - // this.modules[this.eye.constructor.name] = this.eye; + this.modules[this.eye.name] = this.eye; this.modules[this.magnet.name] = this.magnet; this.modules[this.cursor.name] = this.cursor; diff --git a/scripts/filters/chromatic.js b/scripts/filters/chromatic.js index 6421487..a57a766 100644 --- a/scripts/filters/chromatic.js +++ b/scripts/filters/chromatic.js @@ -10,10 +10,7 @@ function Filter_Chromatic() { var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width,ronin.frame.settings["size"].height); var value = cmd.value() ? cmd.value().float : 5; - - ronin.overlay.clear(); this.draw(this.context(),value,position); - ronin.overlay.clear(); } this.preview = function(cmd) diff --git a/scripts/filters/filter.js b/scripts/filters/filter.js index e2d6a66..1267997 100644 --- a/scripts/filters/filter.js +++ b/scripts/filters/filter.js @@ -80,4 +80,14 @@ function Filter() { return ronin.frame.context().getImageData(0,0,ronin.frame.settings["size"].width * 2,ronin.frame.settings["size"].height * 2); } + + this.hint = function() + { + var html = ""; + + for(id in this.parameters){ + html += this.parameters[id]+" "; + } + return html; + } } \ No newline at end of file diff --git a/scripts/filters/stencil.js b/scripts/filters/stencil.js index e92a5e3..6e7a605 100644 --- a/scripts/filters/stencil.js +++ b/scripts/filters/stencil.js @@ -6,10 +6,10 @@ function Filter_Stencil() this.render = function(cmd) { var angle = cmd.angle() ? cmd.angle().degrees : 20; - var color = cmd.color() ? cmd.color().hex : "#ffffff"; + var color = cmd.color() ? cmd.color().hex : "#000000"; - ronin.frame.active_layer.clear(); this.draw(ronin.frame.context(),angle,color); + if(ronin.render.layer){ ronin.render.layer.remove(this); } return 1, "ok"; } @@ -17,9 +17,9 @@ function Filter_Stencil() this.preview = function(cmd) { var angle = cmd.angle() ? cmd.angle().degrees : 20; - var color = cmd.color() ? cmd.color().hex : "#ffffff"; + var color = cmd.color() ? cmd.color().hex : "#000000"; - ronin.render.layer.clear(); + ronin.render.get_layer().clear(); this.draw(ronin.render.layer.context(),angle,color); } diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index a78d166..5670b0c 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -3,17 +3,19 @@ function Brush(rune) Module.call(this,rune); this.parameters = []; - this.settings = {color:"#000","size":2}; + this.settings = {color:"#000000","size":2}; this.pointers = [new Pointer(new Position("0,0"))]; - this.add_method(new Method("add_pointer",["Position"])); + this.add_method(new Method("add_pointer",["Position","Color","Scale"])); - this.add_pointer = function(params, preview = false) + this.add_pointer = function(cmd, preview = false) { if(preview){ return; } var pointer = new Pointer(); - pointer.offset = params.position() ? params.position() : new Position("0,0"); + pointer.offset = cmd.position() ? cmd.position() : new Position("0,0"); + pointer.color = cmd.color().hex ? cmd.color().hex : this.settings.color; + pointer.scale = cmd.value().float ? cmd.value().float : 1; this.pointers.push(pointer); ronin.terminal.log(new Log(this,"Added pointer at: "+pointer.offset.render())); @@ -23,12 +25,12 @@ function Brush(rune) this.size_up = function() { - this.settings["size"] += 1; + this.settings["size"] = parseInt(this.settings["size"]) + 1; } this.size_down = function() { - this.settings["size"] -= this.settings["size"] > 1 ? 1 : 0; + this.settings["size"] -= parseInt(this.settings["size"]) > 1 ? 1 : 0; } // Eraser diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index d7529a4..b657da1 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -1,6 +1,9 @@ -function Pointer(offset = new Position()) +function Pointer(offset = new Position(), color = new Color().hex, scale = 1) { this.offset = offset; + this.color = color; + this.scale = scale; + this.mirror = null; this.position_prev = null; this.angle = null; @@ -16,6 +19,8 @@ function Pointer(offset = new Position()) ratio = ratio > 1 ? 1 : ratio; var target = parseFloat(ronin.brush.settings["size"]) * ratio; + target = target * this.scale; + if(this.actual_thickness < target){ this.actual_thickness += 0.4; } if(this.actual_thickness > target){ this.actual_thickness -= 0.4; } @@ -42,11 +47,9 @@ function Pointer(offset = new Position()) ronin.frame.context().moveTo(position_prev.x,position_prev.y); //Choose direct line or curve line based on how many samples available - if(this.position_prev.length > 1 && position.distance_to(position_prev) > 13){ + if(this.position_prev.length > 1 && position.distance_to(position_prev) > 5){ - var d = - position.distance_to(position_prev)/ - position_prev.distance_to(this.position_prev[1]); + var d = position.distance_to(position_prev)/position_prev.distance_to(this.position_prev[1]); //caluclate a control point for the quad curve var ppx = position_prev.x - (this.position_prev[1].x - position_prev.x); @@ -64,7 +67,7 @@ function Pointer(offset = new Position()) ronin.frame.context().lineCap="round"; ronin.frame.context().lineWidth = this.thickness(); - ronin.frame.context().strokeStyle = ronin.brush.settings.color; + ronin.frame.context().strokeStyle = this.color; ronin.frame.context().stroke(); ronin.frame.context().closePath(); diff --git a/scripts/modules/cursor.js b/scripts/modules/cursor.js index 050eb89..f904ff4 100644 --- a/scripts/modules/cursor.js +++ b/scripts/modules/cursor.js @@ -2,7 +2,7 @@ function Cursor(rune) { Module.call(this,rune); - this.settings = {color: "#999999"}; + this.settings = {color: "#000000",color_alt: "#fffffff"}; this.mode = null; this.position = new Position(); @@ -98,7 +98,6 @@ function Cursor(rune) this.mode.mouse_from = null; } - this.draw_pointer_arrow = function(position,size = 1) { if(!this.layer){ this.create_layer(); } @@ -107,10 +106,9 @@ function Cursor(rune) this.layer.context().beginPath(); - this.layer.context().moveTo(position.x,position.y); - this.layer.context().lineTo(position.x + 5,position.y); - this.layer.context().moveTo(position.x,position.y); - this.layer.context().lineTo(position.x,position.y + 5); + this.layer.context().moveTo(position.x + 10,position.y); + this.layer.context().lineTo(position.x,position.y); + this.layer.context().lineTo(position.x,position.y + 10); this.layer.context().lineCap="round"; this.layer.context().lineWidth = 1; @@ -128,9 +126,7 @@ function Cursor(rune) this.pointer_last = this.pointer_last ? this.pointer_last : position; this.layer.context().beginPath(); - this.layer.context().moveTo(this.pointer_last.x,this.pointer_last.y); - this.layer.context().lineTo(position.x,position.y); - this.layer.context().lineCap="round"; + 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(); @@ -144,7 +140,7 @@ function Cursor(rune) this.layer.context().closePath(); this.layer.context().beginPath(); - this.layer.context().arc(position.x, position.y, (size/2)+1, 0, 2 * Math.PI, false); + 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(); @@ -160,13 +156,19 @@ function Cursor(rune) this.pointer_last = this.pointer_last ? this.pointer_last : position; this.layer.context().beginPath(); + + var radius = 5; - this.layer.context().moveTo(position.x,position.y - 3); - this.layer.context().lineTo(position.x,position.y + 3); - this.layer.context().moveTo(position.x - 2,position.y - 3); - this.layer.context().lineTo(position.x - 2,position.y + 3); - this.layer.context().moveTo(position.x + 2,position.y - 3); - this.layer.context().lineTo(position.x + 2,position.y + 3); + this.layer.context().moveTo(position.x,position.y - radius); + this.layer.context().lineTo(position.x,position.y + radius); + this.layer.context().moveTo(position.x - radius/2,position.y - radius); + this.layer.context().lineTo(position.x - radius/2,position.y + radius); + this.layer.context().moveTo(position.x + radius/2,position.y - radius); + this.layer.context().lineTo(position.x + radius/2,position.y + radius); + this.layer.context().moveTo(position.x + radius,position.y - radius); + this.layer.context().lineTo(position.x + radius,position.y + radius); + this.layer.context().moveTo(position.x - radius,position.y - radius); + this.layer.context().lineTo(position.x - radius,position.y + radius); this.layer.context().lineCap="round"; this.layer.context().lineWidth = 1; diff --git a/scripts/modules/frame.js b/scripts/modules/frame.js index 6b50ef3..1b8af65 100644 --- a/scripts/modules/frame.js +++ b/scripts/modules/frame.js @@ -136,12 +136,19 @@ function Frame(rune) this.mouse_down = function(position) { - ronin.overlay.get_layer(true).clear(); - ronin.overlay.draw_pointer(position); + ronin.overlay.draw(position); + } + this.mouse_move = function(position,rect) + { + ronin.overlay.draw(this.mouse_from,rect); } this.mouse_up = function(position,rect) { + ronin.overlay.draw(this.mouse_from,rect)+" "+rect.render(); + + var line = "frame.resize "+this.mouse_from.render()+" "+rect.render(); + ronin.terminal.update(line); } this.widget = function() diff --git a/scripts/modules/module.js b/scripts/modules/module.js index 7e46ef5..965f8b1 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -6,6 +6,7 @@ function Module(rune) this.settings = {}; this.methods = {}; this.layer = null; + this.is_locked = false; this.docs = "Missing documentation."; @@ -76,6 +77,16 @@ function Module(rune) return ""; } + this.lock = function() + { + ronin.terminal.is_locked = true; + } + + this.unlock = function() + { + ronin.terminal.is_locked = false; + } + // Mouse this.mouse_mode = function() diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js index ba9710d..8b22f2c 100644 --- a/scripts/modules/overlay.js +++ b/scripts/modules/overlay.js @@ -13,6 +13,8 @@ function Overlay(rune) if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; } if(!position){ position = new Position("0,0"); } + + this.layer.clear(); if(rect){ this.draw_rect(position,rect); @@ -65,7 +67,7 @@ function Overlay(rune) this.context().lineCap="round"; this.context().lineWidth = 1; - this.context().strokeStyle = this.color.hex; + this.context().strokeStyle = ronin.cursor.color; this.context().stroke(); this.context().closePath(); } @@ -85,7 +87,7 @@ function Overlay(rune) this.context().lineCap="round"; this.context().lineWidth = 1; - this.context().strokeStyle = this.color.hex; + this.context().strokeStyle = ronin.cursor.color; this.context().stroke(); this.context().closePath(); } @@ -99,7 +101,7 @@ function Overlay(rune) this.context().lineCap="round"; this.context().lineWidth = 1; - this.context().strokeStyle = this.color.hex; + this.context().strokeStyle = ronin.cursor.color; this.context().stroke(); this.context().closePath(); } @@ -129,7 +131,7 @@ function Overlay(rune) this.context().lineCap="round"; this.context().lineWidth = 1; - this.context().strokeStyle = this.color.hex; + this.context().strokeStyle = ronin.cursor.color; this.context().stroke(); this.context().closePath(); } @@ -143,7 +145,7 @@ function Overlay(rune) this.context().lineCap="round"; this.context().lineWidth = 1; - this.context().strokeStyle = this.color.hex; + this.context().strokeStyle = ronin.cursor.color; this.context().stroke(); this.context().closePath(); } @@ -157,7 +159,7 @@ function Overlay(rune) this.context().lineCap="round"; this.context().lineWidth = 1; - this.context().strokeStyle = this.color.hex; + this.context().strokeStyle = ronin.cursor.color; this.context().stroke(); this.context().closePath(); } diff --git a/scripts/modules/render.js b/scripts/modules/render.js index 3e32a66..83627a6 100644 --- a/scripts/modules/render.js +++ b/scripts/modules/render.js @@ -2,39 +2,52 @@ function Render(rune) { Module.call(this,rune); - this.collection = {}; + this.filters = {}; - this.collection["balance"] = new Filter_Balance(); - this.collection["grey"] = new Filter_Grey(); - this.collection["stencil"] = new Filter_Stencil(); - this.collection["invert"] = new Filter_Invert(); - this.collection["chromatic"] = new Filter_Chromatic(); - this.collection["sharpen"] = new Filter_Sharpen(); - this.collection["saturate"] = new Filter_Saturate(); - this.collection["contrast"] = new Filter_Contrast(); - - this.hint = function(content) + 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.filters["balance"] = new Filter_Balance(); + this.filters["grey"] = new Filter_Grey(); + this.filters["stencil"] = new Filter_Stencil(); + this.filters["invert"] = new Filter_Invert(); + this.filters["chromatic"] = new Filter_Chromatic(); + this.filters["sharpen"] = new Filter_Sharpen(); + this.filters["saturate"] = new Filter_Saturate(); + this.filters["contrast"] = new Filter_Contrast(); + + this.stencil = function(cmd,preview = false) { - var name = content.trim().replace(this.rune,"").trim().split(" ")[0]; + var f = new Filter_Stencil(); - var h = ""; - if(this.collection[name]){ - for (i = 0; i < this.collection[name].parameters.length; i++) { - h += this.collection[name].parameters[i].name+" "; - } - } - else if(name){ - for (var key in this.collection){ - if(name != key.substr(0,name.length)){ continue; } - h += key.substr(name.length)+" "; - } + if(preview){ f.preview(cmd); } + else{ f.render(cmd); } + } + + this.chromatic = function(cmd,preview = false) + { + var f = new Filter_Chromatic(); + + if(preview){ f.preview(cmd); } + else{ f.render(cmd); } + } + + this.hint = function(method) + { + var html = ""; + var filter_name = ronin.terminal.input.value.split(" ")[0].split(".")[1]; + + if(this.filters[filter_name]){ + return this.filters[filter_name].hint(); } else{ - for (var key in this.collection){ - h += key+" "; + for (var key in this.filters){ + html += key+" "; } } - return this.pad(content)+h; + + return html; } } diff --git a/scripts/modules/source.js b/scripts/modules/source.js index 6f0e1a3..244a0cc 100644 --- a/scripts/modules/source.js +++ b/scripts/modules/source.js @@ -4,7 +4,7 @@ function Source(rune) this.modal_element = null; - this.settings = {"format":"png","quality":"1"}; + this.settings = {format:"png",quality:"1"}; this.add_method(new Method("save",["name","rect","format"])); this.add_method(new Method("load",["path","position","rect"]),"Add point"); @@ -22,11 +22,15 @@ function Source(rune) if(!params.filepath()){ return 0, "Path?"; } if(!params.rect()){ return 0,"Rect?"; } - ronin.overlay.draw_rect(position,params.rect()); + var position = params.position() ? params.position() : new Position("0,0"); + var rect = params.rect() ? params.rect() : new Rect("50,50"); + + ronin.overlay.draw(position,rect); if(preview){ return; } + if(this.is_locked){ console.log("Locked!"); return 0,"The source module is locked."; } - var position = params.position() ? params.position() : new Position("0,0"); + this.lock(); base_image = new Image(); base_image.src = "../assets/"+params.filepath().path; @@ -46,10 +50,10 @@ function Source(rune) height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height; ronin.frame.active_layer.context().drawImage(base_image, position.x, position.y, width, height); + ronin.overlay.clear(); + ronin.source.unlock(); } - ronin.overlay.clear(); - return 1,"Loaded "+params.filepath().path+" at "+position.render(); } @@ -62,11 +66,11 @@ function Source(rune) this.modal(); - if(this.settings["format"] == "jpg"){ - this.modal("image",""); + if(this.settings.format == "jpg"){ + this.modal("image",""); } else{ - this.modal("image",""); + this.modal("image",""); } /* if(params.setting("format") && params.setting("format").value == "svg"){ @@ -82,6 +86,8 @@ function Source(rune) */ this.layer.remove(this); + + return 1,"Rendered the "+this.settings.format+" image, quality "+this.settings.quality+"." } this.modal = function(type,content) diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index a9b4e19..fe10784 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -34,7 +34,7 @@ function Terminal(rune) var method = command.method(); var setting = command.setting(); - console.info(command.content); + console.info(command.content); // Don't remove if(method){ method.run(command); @@ -64,11 +64,13 @@ function Terminal(rune) this.run_multi = function(lines) { - lines = lines.split(";") - for(id in lines){ - var cmd = new Command(lines[id]); - this.run(cmd); + if(!ronin.terminal.is_locked){ + lines = lines.split(";"); + target_line = lines.shift(); + this.run(new Command(target_line)); } + + if(lines.length > 0){ setTimeout(function(){ ronin.terminal.run_multi(lines.join(";")) }, 250); } } this.hint = function(method) diff --git a/scripts/modules/type.js b/scripts/modules/type.js index 8e89e1b..c826257 100644 --- a/scripts/modules/type.js +++ b/scripts/modules/type.js @@ -44,9 +44,6 @@ function Type(rune) this.mouse_move = function(position,rect) { - var str = ronin.terminal.cmd().text() ? ronin.terminal.cmd().text() : "Placeholder"; - var line = "type.write "+position.render()+" \""+str+"\""; - ronin.terminal.update(line); } this.mouse_up = function(position) diff --git a/scripts/units/method.js b/scripts/units/method.js index ab6f236..f268183 100644 --- a/scripts/units/method.js +++ b/scripts/units/method.js @@ -32,11 +32,11 @@ function Method(name,params,mouse_event) this.preview = function(cmd) { - return this.host[this.name](cmd,true); + return this.host[this.name] ? this.host[this.name](cmd,true) : ""; } this.run = function(cmd) { - return ronin.terminal.log(new Log(this.host,this.host[this.name](cmd,false))); + return this.host[this.name] ? ronin.terminal.log(new Log(this.host,this.host[this.name](cmd,false))) : null; } } \ No newline at end of file