diff --git a/README.md b/README.md index 4b3b507..dfc1f36 100644 --- a/README.md +++ b/README.md @@ -28,8 +28,6 @@ Where `http://localhost:8022` will load the /presets/default.rin file, `http://l balance 0.8 ~ equal RGB balance Brush Texture paint - Natural brush(Expand stroke size from stroke lenght) - Color per pointer Save source.save 1280x800 ~ Export with size > Terminal diff --git a/index.html b/index.html index 64e20e8..9abb9db 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,10 @@ + + + diff --git a/links/main.css b/links/main.css index 1dfe734..c1105eb 100644 --- a/links/main.css +++ b/links/main.css @@ -11,13 +11,13 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" #terminal #hint, #terminal #widget, #terminal input, #terminal #logs { display: block;position: fixed;bottom: 0px;line-height: 20px; width:calc(100vw - 40px); background:none; color:#777; font-size:11px; padding:5px 20px; white-space: pre; } -#terminal input { z-index: 9000; color:red; font-family: 'input_mono_regular'} +#terminal input { z-index: 9000; color:#999; font-family: 'input_mono_regular'} #terminal input:focus { color:#fff; } #terminal #logs { position:fixed; bottom:30px; border-bottom:1px solid #222; } #terminal #logs .module { font-family: 'input_mono_regular'; color:#ccc; } -#terminal #widget { text-align: right} +#terminal #widget { text-align: right; bottom:30px} #terminal #widget .mouse { color:white; } #terminal #hint .module { display: inline-block; color:#999; } @@ -26,5 +26,9 @@ 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.text { display: block;background: white;width:calc(60vw - 60px);height:calc(100vh - 160px);padding:30px;font-size:12px; white-space:pre; column-count: 2; line-height: 16px} +#modal.text .module { font-family: 'input_mono_regular';} +#modal.text .setting { font-style: italic; color:#999;} +#modal.text .mode { text-decoration: underline} #modal.image img { display: block; max-height: 100%} #modal.hidden { display: none } \ No newline at end of file diff --git a/media/graphics/void.svg b/media/graphics/void.svg index 2b3d851..c07e17f 100644 --- a/media/graphics/void.svg +++ b/media/graphics/void.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/presets/blank.rin b/presets/blank.rin index 871f4b6..8511aed 100644 --- a/presets/blank.rin +++ b/presets/blank.rin @@ -1,4 +1,5 @@ frame.resize 400x400 layer.fill #A1A1A1 brush:color #333333 -brush:size 3 \ No newline at end of file +brush:size 3 +source.help \ No newline at end of file diff --git a/presets/default.rin b/presets/default.rin index 0217d8e..7d9bd02 100644 --- a/presets/default.rin +++ b/presets/default.rin @@ -1,7 +1,7 @@ frame.resize 300x300 frame.select main -layer.fill #ffffff -render.stencil 45' #dddddd +layer.fill #eeeeee +render.stencil 45' #cccccc path:line_width 43 path:line_color #000000 path:line_cap square diff --git a/scripts/filters/balance.js b/scripts/filters/balance.js index c991f6c..b12bbd5 100644 --- a/scripts/filters/balance.js +++ b/scripts/filters/balance.js @@ -7,7 +7,7 @@ function Filter_Balance() this.render = function(params) { var color = params.color() ? params.color().floats() : new Color("#999999").floats(); - var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.settings["size"].width*2, ronin.frame.settings["size"].height*2); + var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2); var data = originalData.data; for(var i = 0; i < data.length; i += 4) { diff --git a/scripts/filters/chromatic.js b/scripts/filters/chromatic.js index a57a766..d901f87 100644 --- a/scripts/filters/chromatic.js +++ b/scripts/filters/chromatic.js @@ -8,7 +8,7 @@ function Filter_Chromatic() this.render = function(cmd) { - var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width,ronin.frame.settings["size"].height); + var position = cmd.position() ? cmd.position() : new Position(ronin.frame.size.width,ronin.frame.size.height); var value = cmd.value() ? cmd.value().float : 5; this.draw(this.context(),value,position); } @@ -23,8 +23,8 @@ function Filter_Chromatic() this.draw = function(context = this.context(), value, position) { - var w = ronin.frame.settings["size"].width; - var h = ronin.frame.settings["size"].height; + var w = ronin.frame.size.width; + var h = ronin.frame.size.height; //no longer letting you set how far each chanel is shifted, not sure how to receive extra data any more var s = {r:value,g:value*.5,b:0}; diff --git a/scripts/filters/contrast.js b/scripts/filters/contrast.js index 2bfe91c..d576d9d 100644 --- a/scripts/filters/contrast.js +++ b/scripts/filters/contrast.js @@ -7,7 +7,7 @@ function Filter_Contrast() this.render = function(params) { var color = params.color() ? params.color().floats() : new Color("#999999").floats(); - var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.settings["size"].width*2, ronin.frame.settings["size"].height*2); + var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2); var data = originalData.data; for(var i = 0; i < data.length; i += 4) { diff --git a/scripts/filters/filter.js b/scripts/filters/filter.js index 1267997..ffca060 100644 --- a/scripts/filters/filter.js +++ b/scripts/filters/filter.js @@ -78,7 +78,7 @@ function Filter() this.pixels = function() { - return ronin.frame.context().getImageData(0,0,ronin.frame.settings["size"].width * 2,ronin.frame.settings["size"].height * 2); + return ronin.frame.context().getImageData(0,0,ronin.frame.size.width * 2,ronin.frame.size.height * 2); } this.hint = function() diff --git a/scripts/filters/grey.js b/scripts/filters/grey.js index e3d04c4..2ea76fb 100644 --- a/scripts/filters/grey.js +++ b/scripts/filters/grey.js @@ -7,7 +7,7 @@ function Filter_Grey() this.render = function(params) { var color = params.color() ? params.color().floats() : new Color("#36ba0e").floats(); - var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.settings["size"].width*2, ronin.frame.settings["size"].height*2); + var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2); var data = originalData.data; for(var i = 0; i < data.length; i += 4) { diff --git a/scripts/filters/invert.js b/scripts/filters/invert.js index 4010997..9a3054a 100644 --- a/scripts/filters/invert.js +++ b/scripts/filters/invert.js @@ -8,8 +8,8 @@ function Filter_Invert() var imageObj = new Image(); imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png'); - var w = ronin.frame.settings["size"].width; - var h = ronin.frame.settings["size"].height; + var w = ronin.frame.size.width; + var h = ronin.frame.size.height; var context = ronin.frame.context(); var originalData = context.getImageData(0, 0, w*2, h*2); diff --git a/scripts/filters/saturate.js b/scripts/filters/saturate.js index c8f4ae4..7c9196f 100644 --- a/scripts/filters/saturate.js +++ b/scripts/filters/saturate.js @@ -7,7 +7,7 @@ function Filter_Saturate() this.render = function(params) { var color = params.color() ? params.color().floats() : new Color("#999999").floats(); - var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.settings["size"].width*2, ronin.frame.settings["size"].height*2); + var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2); var data = originalData.data; for(var i = 0; i < data.length; i += 4) { diff --git a/scripts/filters/sharpen.js b/scripts/filters/sharpen.js index 37e1bc0..ded2129 100644 --- a/scripts/filters/sharpen.js +++ b/scripts/filters/sharpen.js @@ -9,8 +9,8 @@ function Filter_Sharpen() var imageObj = new Image(); imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png'); - var w = ronin.frame.settings["size"].width; - var h = ronin.frame.settings["size"].height; + var w = ronin.frame.size.width; + var h = ronin.frame.size.height; var context = ronin.frame.context(); var originalData = context.getImageData(0, 0, w*2, h*2); diff --git a/scripts/filters/stencil.js b/scripts/filters/stencil.js index 6e7a605..cd0943c 100644 --- a/scripts/filters/stencil.js +++ b/scripts/filters/stencil.js @@ -25,8 +25,8 @@ function Filter_Stencil() this.draw = function(context = this.context(), angle, color) { - var w = ronin.frame.settings["size"].width; - var h = ronin.frame.settings["size"].height; + var w = ronin.frame.size.width; + var h = ronin.frame.size.height; context.translate(w/2,h/2); diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index 4c82c1a..40a0a17 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -2,10 +2,12 @@ function Brush(rune) { Module.call(this,rune); - this.parameters = []; - this.settings = {color:"#000000",size:2}; this.pointers = [new Pointer(new Position("0,0"))]; + this.add_mode(new Mode("paint")); + this.add_mode(new Mode("erase","alt")); + this.add_setting(new Setting("color","#00ff00")); + this.add_setting(new Setting("size","2")); this.add_method(new Method("add_pointer",["Position","Color","Scale"])); this.add_pointer = function(cmd, preview = false) @@ -14,7 +16,7 @@ function Brush(rune) var pointer = new Pointer(); pointer.offset = cmd.position() ? cmd.position() : new Position("0,0"); - pointer.color = cmd.color().hex ? cmd.color().hex : this.settings.color; + pointer.color = cmd.color().hex ? cmd.color().hex : this.settings["color"].value; pointer.scale = cmd.value().float ? cmd.value().float : 1; this.pointers.push(pointer); @@ -25,12 +27,14 @@ function Brush(rune) this.size_up = function() { - this.settings.size = parseInt(this.settings.size) + 1; + var new_size = this.settings["size"].to_f() + 1; + this.settings["size"].update(new_size); } this.size_down = function() { - this.settings.size -= parseInt(this.settings.size) > 1 ? 1 : 0; + var new_size = this.settings["size"].to_f() - 1; + this.settings["size"].update(new_size < 1 ? 1 : new_size); } // Eraser @@ -46,7 +50,7 @@ function Brush(rune) ronin.frame.context().moveTo(this.position_prev.x,this.position_prev.y); ronin.frame.context().lineTo(position.x,position.y); ronin.frame.context().lineCap="round"; - ronin.frame.context().lineWidth = this.settings.size * 3; + ronin.frame.context().lineWidth = this.settings.size.to_f() * 3; ronin.frame.context().strokeStyle = new Color("#ff0000").rgba(); ronin.frame.context().stroke(); ronin.frame.context().closePath(); @@ -58,16 +62,16 @@ function Brush(rune) this.mouse_pointer = function(position) { - return keyboard.shift_held == true ? ronin.cursor.draw_pointer_circle_eraser(position,this.settings.size * 3) : ronin.cursor.draw_pointer_circle(position,this.settings.size); + 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()); } this.mouse_mode = function() { if(keyboard.shift_held == true){ - return "Erase "+this.settings.size; + return "Erase "+this.settings["size"].to_f(); } else{ - return "Paint ● "+this.settings.size; + return "Paint ● "+this.settings["size"].to_f(); } } diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index 30a9cf1..6690017 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -15,13 +15,15 @@ function Pointer(offset = new Position(), color = null, scale = 1) this.thickness = function() { - var radius = parseFloat(ronin.brush.settings["size"]) * this.scale; + var radius = ronin.brush.settings["size"].to_f() * this.scale; - var ratio = 10/this.position().distance_to(this.position_prev[0]); - ratio = ratio > 1 ? 1 : ratio; + var ratio = this.position().distance_to(this.position_prev[0]); + // ratio = ratio > 1 ? 1 : ratio; var target = radius * ratio; + // return target; + if(this.actual_thickness < target){ this.actual_thickness += 0.25; } if(this.actual_thickness > target){ this.actual_thickness -= 0.25; } @@ -68,7 +70,7 @@ function Pointer(offset = new Position(), color = null, scale = 1) ronin.frame.context().lineCap="round"; ronin.frame.context().lineWidth = this.thickness(); - ronin.frame.context().strokeStyle = this.color ? this.color : ronin.brush.color; + ronin.frame.context().strokeStyle = this.color ? this.color : ronin.brush.settings["color"].value; ronin.frame.context().stroke(); ronin.frame.context().closePath(); @@ -120,12 +122,12 @@ function Pointer(offset = new Position(), color = null, scale = 1) this.start = function() { - var radius = parseFloat(ronin.brush.settings["size"]) * this.scale; + var radius = ronin.brush.settings["size"].to_f() * this.scale; this.actual_thickness = radius/2; ronin.frame.context().beginPath(); ronin.frame.context().arc(this.position().x, this.position().y, radius/2, 0, 2 * Math.PI, false); ronin.frame.context().lineWidth = 0; - ronin.frame.context().fillStyle = this.color ? this.color : ronin.brush.color; + ronin.frame.context().fillStyle = this.color ? this.color : ronin.brush.settings["color"].to_f(); ronin.frame.context().fill(); ronin.frame.context().closePath(); } diff --git a/scripts/modules/cursor.js b/scripts/modules/cursor.js index 6ea5680..86558df 100644 --- a/scripts/modules/cursor.js +++ b/scripts/modules/cursor.js @@ -1,8 +1,9 @@ function Cursor(rune) { Module.call(this,rune); - - this.settings = {color: "#000000",color_alt: "#fffffff"}; + + this.add_setting(new Setting("color","#000000")); + this.add_setting(new Setting("color_alt","#fffffff")); this.mode = null; this.position = new Position(); @@ -17,12 +18,12 @@ function Cursor(rune) if(this.is_inside){ this.set_mode(ronin.default) } + else if(keyboard.shift_held,keyboard.alt_held){ + this.set_mode(ronin.frame.active_layer); + } else if(ronin.terminal.cmd().module()){ this.set_mode(ronin.terminal.cmd().module()); } - else if(event && event.altKey == true && event.shiftKey == true){ - this.set_mode(ronin.frame.active_layer); - } else if(event && event.altKey == true){ this.set_mode(ronin.default); } @@ -43,6 +44,9 @@ function Cursor(rune) this.mouse_down = function(position,e) { + var true_pos = e.clientX; + var better_pos = (e.clientX/parseFloat(window.innerWidth)) * window.innerWidth; + if(this.layer){ this.layer.clear(); } this.position = ronin.magnet.update_mouse(position); @@ -95,9 +99,11 @@ function Cursor(rune) this.position = ronin.magnet.update_mouse(position); this.position_in_window = new Position(e.clientX,e.clientY); - var rect = new Rect(); - rect.width = this.position.x - this.mode.mouse_from.x; - rect.height = this.position.y - this.mode.mouse_from.y; + if(this.mode.mouse_from){ + var rect = new Rect(); + rect.width = this.position.x - this.mode.mouse_from.x; + rect.height = this.position.y - this.mode.mouse_from.y; + } if(!this.mode){ return; } @@ -120,8 +126,6 @@ function Cursor(rune) this.is_inside = true; this.update(); - - console.log("over") } this.mouse_inside = function() @@ -130,7 +134,6 @@ function Cursor(rune) this.is_inside = false; this.update(); - console.log("off") } this.draw_pointer_arrow = function(position,size = 1) diff --git a/scripts/modules/default.js b/scripts/modules/default.js index 984f6fc..8190214 100644 --- a/scripts/modules/default.js +++ b/scripts/modules/default.js @@ -18,13 +18,11 @@ function Default(rune) this.mouse_down = function(position) { - console.log("down") this.drag_from = ronin.cursor.position_in_window; } this.mouse_move = function(position) { - console.log("move") if(this.drag_from === null){ return; } var offset = ronin.cursor.position_in_window.offset(this.drag_from); @@ -39,7 +37,6 @@ function Default(rune) this.mouse_up = function(event) { - console.log("up") this.drag_from = null; } } \ No newline at end of file diff --git a/scripts/modules/eye.js b/scripts/modules/eye.js index a85802d..36f8594 100644 --- a/scripts/modules/eye.js +++ b/scripts/modules/eye.js @@ -1,37 +1,31 @@ function Eye(rune) { Module.call(this,rune); + + this.add_mode(new Mode("picker")); // TODO: If a rect is given, return the average color this.color_picker = function(position,rect = null) { - var imgData = ronin.frame.context().getImageData(position.x*2, position.y*2, 1, 1).data; - var c = new Color(); - // ronin.terminal.input_element.value = "* "+(c.rgb_to_hex(imgData)); - ronin.terminal.update_hint(); + 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.render()+" is "+hex)); } // Mouse - this.mouse_mode = function() - { - return "Eye"; - } - this.mouse_down = function(position) { - // ronin.overlay.draw(position); this.color_picker(position); } this.mouse_move = function(position,rect) { - ronin.overlay.draw(this.mouse_from,rect); - this.color_picker(position,rect); + this.color_picker(position); } this.mouse_up = function(position,rect) { - this.color_picker(position,rect); + this.color_picker(position); } } \ No newline at end of file diff --git a/scripts/modules/frame.js b/scripts/modules/frame.js index 0a8abac..c066e05 100644 --- a/scripts/modules/frame.js +++ b/scripts/modules/frame.js @@ -3,7 +3,8 @@ function Frame(rune) Module.call(this,rune); this.element = null; - this.settings = {size:new Rect("200x200")}; + + this.size = new Rect("200x200"); this.layers = {}; this.active_layer = null; @@ -11,6 +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.install = function() { @@ -53,9 +55,9 @@ function Frame(rune) ronin.on_resize(); - this.settings.size = rect; + this.size = rect; - return 1, "Resized to "+this.settings.size.render(); + return 1, "Resized to "+this.size.render(); } this.select = function(params, preview = false) @@ -108,7 +110,7 @@ function Frame(rune) this.add_layer = function(layer) { if(this.active_layer){layer.set_depth(this.active_layer.depth+1);} - layer.resize(this.settings["size"]); + layer.resize(this.size); this.layers[layer.name] = layer; this.element.appendChild(layer.element); } @@ -161,7 +163,7 @@ function Frame(rune) { var html = "" - html += this.settings.size.render()+" "; + html += this.size.render()+" "; html += this.active_layer.name+" "; var user_layers = 0; diff --git a/scripts/modules/layer.js b/scripts/modules/layer.js index 435da7b..ecd519f 100644 --- a/scripts/modules/layer.js +++ b/scripts/modules/layer.js @@ -35,8 +35,8 @@ function Layer(name,manager = null) var position = params.position(); var angle = params.angle().degrees; - var w = ronin.frame.settings["size"].width; - var h = ronin.frame.settings["size"].height; + var w = ronin.frame.size.width; + var h = ronin.frame.size.height; ronin.render.get_layer().clear(); ronin.render.context().drawImage(ronin.frame.context().canvas,0,0,w,h); @@ -138,7 +138,7 @@ function Layer(name,manager = null) this.data = function() { - return this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2); + return this.context().getImageData(0, 0, ronin.frame.size.width * 2, ronin.frame.size.height * 2); } // diff --git a/scripts/modules/magnet.js b/scripts/modules/magnet.js index 47c0ff7..76c22a0 100644 --- a/scripts/modules/magnet.js +++ b/scripts/modules/magnet.js @@ -1,23 +1,24 @@ function Magnet(rune) { Module.call(this,rune); - - this.settings = {"grid" : new Rect("1x1"), "marker": new Position("4,4")}; + + this.add_setting(new Setting("grid","1x1")); + this.add_setting(new Setting("marker","4,4")); this.add_method(new Method("grid",["rect","position"])); - this.grid = function(params,preview = false) + this.grid = function(cmd,preview = false) { - if(!params.rect()){ return 0, "Rect?"; } + if(!cmd.rect()){ return 0, "Rect?"; } if(!this.layer){ this.create_layer(); } this.layer.clear(); - this.draw_grid(params.rect(),params.position()); + this.draw_grid(cmd.rect(),cmd.position()); if(preview == false){ - this.settings["grid"] = params.rect(); - this.settings["market"] = params.position(); + this.settings["grid"].update(cmd.rect().render()); + this.settings["marker"].update(cmd.position().render()); } return 1, preview ? "preview" : "ok"; @@ -28,13 +29,13 @@ function Magnet(rune) if(!rect){ rect = new Rect("20x20"); } if(!grid){ grid = new Position("4,4"); } - this.settings["grid"] = rect; - this.settings["marker"] = grid; + this.settings["grid"].update(rect.render()); + this.settings["marker"].update(grid.render()); if(rect.width < 5 || rect.height < 5){ return; } - var horizontal = ronin.frame.settings["size"].width/rect.width; - var vertical = ronin.frame.settings["size"].height/rect.height; + var horizontal = ronin.frame.size.width/rect.width; + var vertical = ronin.frame.size.height/rect.height; for (var x = 1; x < horizontal; x++) { for (var y = 1; y < vertical; y++) { @@ -48,7 +49,7 @@ function Magnet(rune) this.draw_helper = function(position) { - if(this.settings["grid"].width < 5 || this.settings["grid"].height < 5){ return; } + if(this.settings["grid"].to_rect().width < 5 || this.settings["grid"].to_rect().height < 5){ return; } var magnetized = this.magnetic_position(position); this.context().beginPath(); @@ -69,19 +70,19 @@ function Magnet(rune) this.magnetic_position = function(position) { - var x = parseInt(position.x / this.settings["grid"].width) * this.settings["grid"].width; - var y = parseInt(position.y / this.settings["grid"].width) * this.settings["grid"].width; + 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; return new Position(x,y); } this.update_mouse = function(position) { - if(this.settings["grid"].width > 4 || this.settings["grid"].height > 4){ + if(this.settings["grid"].to_rect().width > 4 || this.settings["grid"].to_rect().height > 4){ if(!this.layer){ this.create_layer(); } this.layer.clear(); this.draw_helper(position); - this.draw_grid(this.settings["grid"],this.settings["marker"]); + this.draw_grid(this.settings["grid"].to_rect(),this.settings["marker"].to_pos()); } return this.magnetic_position(position); diff --git a/scripts/modules/module.js b/scripts/modules/module.js index 965f8b1..71884c8 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -5,11 +5,30 @@ function Module(rune) this.element = null; this.settings = {}; this.methods = {}; + this.modes = {}; this.layer = null; this.is_locked = false; this.docs = "Missing documentation."; + this.add_method = function(method) + { + method.host = this; + this.methods[method.name] = method; + } + + this.add_setting = function(setting) + { + setting.host = this; + this.settings[setting.name] = setting; + } + + this.add_mode = function(mode) + { + mode.host = this; + this.modes[mode.name] = mode; + } + this.install = function() { } @@ -31,18 +50,6 @@ function Module(rune) if(!this.layer){ this.create_layer(); this.layer.is_blinking = is_blinking } return this.layer; } - - this.update_setting = function(name,value) - { - this.settings[name] = value.content.join(" "); - return 1, "ok"; - } - - this.add_method = function(method) - { - method.host = this; - this.methods[method.name] = method; - } this.hint = function(method) { diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js index 8b22f2c..2a09134 100644 --- a/scripts/modules/overlay.js +++ b/scripts/modules/overlay.js @@ -2,8 +2,6 @@ function Overlay(rune) { Module.call(this,rune); - this.parameters = [Position,Rect,Color]; - this.color = new Color("#ffffff"); // draw diff --git a/scripts/modules/path.js b/scripts/modules/path.js index 5a9b4f7..525ede7 100644 --- a/scripts/modules/path.js +++ b/scripts/modules/path.js @@ -1,9 +1,11 @@ function Path(rune) { Module.call(this,rune); - - this.parameters = [Any]; - this.settings = {"fill_color" : "#ff0000","line_width" : 3,"line_color" : "#999", "line_cap" : "square"}; + + this.add_setting(new Setting("fill_color","#ff0000")); + this.add_setting(new Setting("line_width","3")); + this.add_setting(new Setting("line_color","#999")); + 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"); @@ -21,9 +23,9 @@ function Path(rune) var context = preview ? this.context() : ronin.frame.context(); context.beginPath(); - context.lineCap = this.settings["line_cap"]; - context.lineWidth = this.settings["line_width"]; - context.strokeStyle = this.settings["line_color"]; + context.lineCap = this.settings["line_cap"].value; + context.lineWidth = this.settings["line_width"].value; + context.strokeStyle = this.settings["line_color"].value; context.stroke(new Path2D(cmd.values())); context.closePath(); @@ -41,7 +43,7 @@ function Path(rune) var context = preview ? this.context() : ronin.frame.context(); context.beginPath(); - context.fillStyle = this.settings["fill_color"]; + context.fillStyle = this.settings["fill_color"].value; context.fill(new Path2D(cmd.values())); context.closePath(); @@ -66,7 +68,7 @@ function Path(rune) { var s = ""; - s += ""; + s += ""; for (var i = 0; i < this.paths.length; i++) { s += ""; diff --git a/scripts/modules/render.js b/scripts/modules/render.js index 83627a6..37f8321 100644 --- a/scripts/modules/render.js +++ b/scripts/modules/render.js @@ -32,22 +32,4 @@ function Render(rune) 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.filters){ - html += key+" "; - } - } - - return html; - } - } diff --git a/scripts/modules/source.js b/scripts/modules/source.js index 244a0cc..1c39215 100644 --- a/scripts/modules/source.js +++ b/scripts/modules/source.js @@ -4,10 +4,12 @@ function Source(rune) this.modal_element = null; - this.settings = {format:"png",quality:"1"}; + this.add_setting(new Setting("format","png")); + this.add_setting(new Setting("quality","1")); this.add_method(new Method("save",["name","rect","format"])); - this.add_method(new Method("load",["path","position","rect"]),"Add point"); + this.add_method(new Method("load",["path","position","rect"])); + this.add_method(new Method("help")); this.install = function() { @@ -66,8 +68,8 @@ function Source(rune) this.modal(); - if(this.settings.format == "jpg"){ - this.modal("image",""); + if(this.settings["format"].value == "jpg"){ + this.modal("image",""); } else{ this.modal("image",""); @@ -87,7 +89,30 @@ function Source(rune) this.layer.remove(this); - return 1,"Rendered the "+this.settings.format+" image, quality "+this.settings.quality+"." + return 1,"Rendered the "+this.settings.format+" image, quality "+this.settings["quality"].to_f()+"." + } + + this.help = function(params,preview = false) + { + if(preview){ return; } + + html = ""; + + for(module_id in ronin.modules){ + html += ""+ronin.modules[module_id].name+"
"; + + for(mode_id in ronin.modules[module_id].modes){ + html += " ~"+(ronin.modules[module_id].modes[mode_id].key ? '['+ronin.modules[module_id].modes[mode_id].key+']' : "")+""+ronin.modules[module_id].modes[mode_id].name+"
" + } + for(setting_id in ronin.modules[module_id].settings){ + html += " :"+ronin.modules[module_id].settings[setting_id].name+"
" + } + for(method_id in ronin.modules[module_id].methods){ + html += " ."+ronin.modules[module_id].methods[method_id].name+"
" + } + } + + this.modal("text",html); } this.modal = function(type,content) @@ -104,7 +129,7 @@ function Source(rune) a.push(ronin.frame.layers[layer_name]); } for (i = 0; i < a.length; i++) { - this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.frame.settings["size"].width,ronin.frame.settings["size"].height); + this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.frame.size.width,ronin.frame.size.height); } return this.layer; } diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index f79fc60..2a860ba 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -40,7 +40,7 @@ function Terminal(rune) method.run(command); } if(setting){ - module.settings[setting] = command.values(); + module.settings[setting].update(command.values()); this.log(new Log(module,setting+" = "+command.values())); } this.hint_element.innerHTML = ""; @@ -60,7 +60,7 @@ function Terminal(rune) method.preview(command); } this.hint_element.innerHTML = ""+this.input.value+""+(this.input.value ? " " : "")+(module ? module.hint(method) : this.hint(method)); - ronin.cursor.set_mode(module); + ronin.cursor.update(); } this.run_multi = function(lines) diff --git a/scripts/modules/type.js b/scripts/modules/type.js index c826257..b4098da 100644 --- a/scripts/modules/type.js +++ b/scripts/modules/type.js @@ -3,20 +3,22 @@ function Type(rune) Module.call(this,rune); this.add_method(new Method("write",["Position","Text"],"Add position")); + 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.settings = {"color":"#ffffff","size":"20","font":"Din"}; - - this.write = function(params,preview = false) + this.write = function(cmd,preview = false) { if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; } - + this.layer.clear(); - var text = params.text() ? params.text() : "Placeholder"; - var position = params.position() ? params.position() : new Position(40,80); - var color = this.settings["color"]; - var size = this.settings["size"]; - var font = this.settings["font"]; + var text = cmd.text() ? cmd.text() : "Placeholder"; + var position = cmd.position() ? cmd.position() : new Position(40,80); + var color = this.settings["color"].value; + var size = parseFloat(this.settings["size"].value); + var font = this.settings["font"].value; var target_layer = preview ? this.layer : ronin.frame.active_layer; target_layer.context().font = size+"px "+font; diff --git a/scripts/units/color.js b/scripts/units/color.js index d2bef06..042b351 100644 --- a/scripts/units/color.js +++ b/scripts/units/color.js @@ -33,7 +33,7 @@ function Color(hex = '#000000') this.rgb_to_hex = function(rgb) { - return "#"+("0" + parseInt(rgb[0],10).toString(16)).slice(-2)+("0" + parseInt(rgb[1],10).toString(16)).slice(-2)+("0" + parseInt(rgb[2],10).toString(16)).slice(-2); + return "#"+parseInt(rgb.r,10).toString(16)+parseInt(rgb.g,10).toString(16)+parseInt(rgb.b,10).toString(16); } this.brightness = function() diff --git a/scripts/units/mode.js b/scripts/units/mode.js new file mode 100644 index 0000000..10deec9 --- /dev/null +++ b/scripts/units/mode.js @@ -0,0 +1,13 @@ +function Mode(name,key = "") +{ + Unit.call(this); + + this.host = null; + this.name = name; + this.key = key; + + this.render = function() + { + return "?"; + } +} \ No newline at end of file diff --git a/scripts/units/setting.js b/scripts/units/setting.js index ae7fbe9..58d233d 100644 --- a/scripts/units/setting.js +++ b/scripts/units/setting.js @@ -1,16 +1,33 @@ -function Setting(key,value) +function Setting(name,value) { Unit.call(this); - this.candidates = []; - this.key = key; - - if(value == "true"){ this.value = true; } - else if(value == "false"){ this.value = false; } - else{ this.value = value; } + this.host = null; + this.name = name; + this.value = value; this.render = function() { - return this.key+"="+this.value; + return "?"; + } + + this.update = function(value) + { + this.value = value; + } + + this.to_f = function() + { + return parseFloat(this.value); + } + + this.to_rect = function() + { + return new Rect(this.value); + } + + this.to_pos = function() + { + return new Position(this.value); } } \ No newline at end of file