From 46275d1c7003b81fef350d0b7dea6fb7f46b8b33 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Mon, 3 Apr 2017 17:20:41 -1000 Subject: [PATCH] Various updates --- links/main.css | 7 +- presets/template.cover.rin | 17 +++++ scripts/core/ronin.js | 4 +- scripts/filters/balance.js | 4 +- scripts/filters/chromatic.js | 2 +- scripts/filters/filter.js | 4 +- scripts/filters/grey.js | 6 +- scripts/filters/invert.js | 2 +- scripts/filters/sharpen.js | 2 +- scripts/filters/stencil.js | 2 +- scripts/modules/frame.js | 10 ++- scripts/modules/layer.js | 124 ++++++++++++++++++++++++++++------- scripts/modules/module.js | 2 +- scripts/modules/overlay.js | 44 +++++++++++++ scripts/modules/path.js | 15 +++-- scripts/modules/terminal.js | 16 ++++- scripts/modules/type.js | 6 +- 17 files changed, 217 insertions(+), 50 deletions(-) create mode 100644 presets/template.cover.rin diff --git a/links/main.css b/links/main.css index fcee8a9..152db3d 100644 --- a/links/main.css +++ b/links/main.css @@ -11,7 +11,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" #overlay { position:absolute; z-index:1000;} #frame { cursor:none;} -#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;overflow: hidden;} +#terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 125px;overflow: hidden;} #terminal input { display: block; position:absolute; bottom:0px; width:100vw; padding:0px 5px; font-size:10px; line-height: 20px; background:none; z-index:900; color:white;} #terminal hint { background:#000; position:absolute; bottom:0px; line-height: 20px; padding:0px 5px; width:100vw; color:#777; font-size:10px; white-space: pre;} #terminal hint b { font-family: "input_mono_regular"; color:#999; } @@ -21,4 +21,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" #terminal logs log .rune { color:white; } #terminal logs log.error .rune { color:red; } #terminal logs log.input { color:white; } -#terminal menu { display: inline-block;position: absolute;bottom: 0px;right: 0px;padding: 0px 5px;font-size: 10px;line-height: 20px;color:white } \ No newline at end of file +#terminal menu { display: inline-block;position: absolute;bottom: 0px;right: 0px;padding: 0px 5px;font-size: 10px;line-height: 20px;color:white } + +#terminal.hide { height:25px; } +#terminal.mini { height:120px; } \ No newline at end of file diff --git a/presets/template.cover.rin b/presets/template.cover.rin new file mode 100644 index 0000000..417e19e --- /dev/null +++ b/presets/template.cover.rin @@ -0,0 +1,17 @@ +terminal.display hide ; +frame.resize 700x700 ; +layer.fill #ffcc00 ; +brush:color #000000 ; magnet.grid 10x10 4,4 ; +frame.select main ; +path:line_color black ; +path:line_width 20 ; +path:line_cap butt ; +path.stroke M200,400 a40,40 0 0,1 40,40 a-40,40 0 0,1 -40,40 l-40,0 a-40,-40 0 0,1 -40,-40 a40,-40 0 0,1 40,-40 l40,0 M280,490 l0,-90 l60,0 a20,20 0 0,1 20,20 a-20,20 0 0,1 -20,20 l-60,0 M390,400 l70,0 a20,20 0 0,1 20,20 a-20,20 0 0,1 -20,20 l-40,0 a-20,20 0 0,0 -20,20 l0,20 l90,0 M520,390 l0,30 a20,20 0 0,0 20,20 l60,0 M600,390 l0,100 ; +path:line_color #ffcc00 ; +path:line_cap round ; +path:line_width 1 ; +path.stroke M200,400 a40,40 0 0,1 40,40 a-40,40 0 0,1 -40,40 l-40,0 a-40,-40 0 0,1 -40,-40 a40,-40 0 0,1 40,-40 l40,0 M280,490 l0,-90 l60,0 a20,20 0 0,1 20,20 a-20,20 0 0,1 -20,20 l-60,0 M390,400 l70,0 a20,20 0 0,1 20,20 a-20,20 0 0,1 -20,20 l-40,0 a-20,20 0 0,0 -20,20 l0,20 l90,0 M520,390 l0,30 a20,20 0 0,0 20,20 l60,0 M600,390 l0,100 ; +type.write:size 20 ; +type.write 110,540 "SUPERWORKER" ; +type.write:size 20 ; +type.write 110,560 "オフィス" ; \ No newline at end of file diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index 0fc357d..b150348 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -26,13 +26,13 @@ function Ronin() this.modules[this.brush.constructor.name] = this.brush; - this.modules[this.source.constructor.name] = this.source; + this.modules[this.source.constructor.name] = this.source; // this.modules[this.render.constructor.name] = this.render; // this.modules[this.eye.constructor.name] = this.eye; // this.modules[this.magnet.constructor.name] = this.magnet; this.modules[this.cursor.constructor.name] = this.cursor; - // this.modules[this.terminal.constructor.name] = this.terminal; + this.modules[this.terminal.constructor.name] = this.terminal; // diff --git a/scripts/filters/balance.js b/scripts/filters/balance.js index 371e521..2724a1b 100644 --- a/scripts/filters/balance.js +++ b/scripts/filters/balance.js @@ -9,7 +9,7 @@ function Filter_Balance() if(!cmd.color()){ return; } if(!cmd.color().rgb()){ return; } - this.draw(ronin.frame.active_layer.context(),cmd.color().rgb()); + this.draw(ronin.frame.context(),cmd.color().rgb()); } this.preview = function(cmd) @@ -28,7 +28,7 @@ function Filter_Balance() var w = ronin.frame.settings["size"].width; var h = ronin.frame.settings["size"].height; - var originalData = ronin.frame.active_layer.context().getImageData(0, 0, w*2, h*2); + var originalData = ronin.frame.context().getImageData(0, 0, w*2, h*2); var data = originalData.data; var r = (color_rgb.r / 255) + 0.5; diff --git a/scripts/filters/chromatic.js b/scripts/filters/chromatic.js index 8e882a6..6421487 100644 --- a/scripts/filters/chromatic.js +++ b/scripts/filters/chromatic.js @@ -32,7 +32,7 @@ function Filter_Chromatic() //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}; - var context = ronin.frame.active_layer.context(); + var context = ronin.frame.context(); //now need two imagedatas to sample off of, for some reason I cant just dump the new pixels into an empty array :/ var originalData = context.getImageData(0, 0, w*2, h*2); diff --git a/scripts/filters/filter.js b/scripts/filters/filter.js index ad0b2e8..e2d6a66 100644 --- a/scripts/filters/filter.js +++ b/scripts/filters/filter.js @@ -73,11 +73,11 @@ function Filter() this.context = function() { - return ronin.frame.active_layer.context(); + return ronin.frame.context(); } this.pixels = function() { - return ronin.frame.active_layer.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.settings["size"].width * 2,ronin.frame.settings["size"].height * 2); } } \ No newline at end of file diff --git a/scripts/filters/grey.js b/scripts/filters/grey.js index 2e4fe10..2bdaf0f 100644 --- a/scripts/filters/grey.js +++ b/scripts/filters/grey.js @@ -7,10 +7,10 @@ function Filter_Grey() this.render = function(cmd) { if(cmd.color() && cmd.color().rgb()){ - this.draw(ronin.frame.active_layer.context(),cmd.color().rgb()); + this.draw(ronin.frame.context(),cmd.color().rgb()); } else{ - this.draw(ronin.frame.active_layer.context()); + this.draw(ronin.frame.context()); } } @@ -32,7 +32,7 @@ function Filter_Grey() var w = ronin.frame.settings["size"].width; var h = ronin.frame.settings["size"].height; - var originalData = ronin.frame.active_layer.context().getImageData(0, 0, w*2, h*2); + var originalData = ronin.frame.context().getImageData(0, 0, w*2, h*2); var data = originalData.data; var _r = (color_rgb.r / 255); diff --git a/scripts/filters/invert.js b/scripts/filters/invert.js index 2f4769e..4010997 100644 --- a/scripts/filters/invert.js +++ b/scripts/filters/invert.js @@ -10,7 +10,7 @@ function Filter_Invert() var w = ronin.frame.settings["size"].width; var h = ronin.frame.settings["size"].height; - var context = ronin.frame.active_layer.context(); + var context = ronin.frame.context(); var originalData = context.getImageData(0, 0, w*2, h*2); var data = originalData.data; diff --git a/scripts/filters/sharpen.js b/scripts/filters/sharpen.js index 7c83656..76de2d9 100644 --- a/scripts/filters/sharpen.js +++ b/scripts/filters/sharpen.js @@ -11,7 +11,7 @@ function Filter_Sharpen() var w = ronin.frame.settings["size"].width; var h = ronin.frame.settings["size"].height; - var context = ronin.frame.active_layer.context(); + var context = ronin.frame.context(); var originalData = context.getImageData(0, 0, w*2, h*2); var data = originalData.data; diff --git a/scripts/filters/stencil.js b/scripts/filters/stencil.js index 8356d19..a222510 100644 --- a/scripts/filters/stencil.js +++ b/scripts/filters/stencil.js @@ -9,7 +9,7 @@ function Filter_Stencil() var color = cmd.color() ? cmd.color().hex : "#ffffff"; ronin.render.layer.clear(); - this.draw(ronin.frame.active_layer.context(),angle,color); + this.draw(ronin.frame.context(),angle,color); } this.preview = function(cmd) diff --git a/scripts/modules/frame.js b/scripts/modules/frame.js index e49ef89..c48d34a 100644 --- a/scripts/modules/frame.js +++ b/scripts/modules/frame.js @@ -11,6 +11,7 @@ function Frame(rune) this.add_method(new Method("resize",[new Rect().name])); this.add_method(new Method("crop",[new Position().name,new Rect().name])); + this.add_method(new Method("select",["text"])); this.widget_element = document.createElement("widget"); @@ -53,8 +54,10 @@ function Frame(rune) if(preview){ronin.overlay.draw_rect(params.position(),params.rect());} } - this.select = function(params) + this.select = function(params, preview = false) { + if(preview){ return; } + var layer_name = params.content; if(!ronin.frame.layers[layer_name]){ this.add_layer(new Layer(layer_name)); @@ -64,6 +67,11 @@ function Frame(rune) ronin.layer = this.layers[layer_name]; } + this.context = function() + { + return this.active_layer.context(); + } + // Misc this.blink = function() diff --git a/scripts/modules/layer.js b/scripts/modules/layer.js index fae0550..0f1ec3f 100644 --- a/scripts/modules/layer.js +++ b/scripts/modules/layer.js @@ -2,10 +2,12 @@ function Layer(name,manager = null) { Module.call(this,"#"); - this.add_method(new Method("fill",["color","position","rect"],"Add position")); + this.add_method(new Method("translate",["position"])); + this.add_method(new Method("clear",[])); this.add_method(new Method("rotate",["position","angle"])); - this.add_method(new Method("resize",["position","rect"])); this.add_method(new Method("mirror",["position"])); + this.add_method(new Method("fill",["color","position","rect"],"Add position")); + this.add_method(new Method("rename",["text"])); this.name = name; @@ -15,6 +17,17 @@ function Layer(name,manager = null) this.element.setAttribute("id","_"+name); this.element.setAttribute("class","layer"); + this.translate = function(params,preview = false) + { + if(!params.position()){ return; } + if(preview){ return; } + + var data = this.data(); + this.clear(); + this.context().putImageData(data, params.position().x * 2, params.position().y * 2); + ronin.overlay.get_layer(true).clear(); + } + this.fill = function(params,preview = false) { if(preview){ return; } @@ -40,6 +53,13 @@ function Layer(name,manager = null) ronin.terminal.log(new Log(this,"Renamed layer "+this.name+" to "+params.text())); } + this.clear = function(params, preview = false) + { + if(preview){ return; } + + this.context().clearRect(0, 0, this.element.width, this.element.height); + } + this.resize = function(rect) { ronin.terminal.log(new Log(this,"Resize "+this.name+" to "+rect.render())); @@ -54,11 +74,6 @@ function Layer(name,manager = null) this.context().scale(2,2); } - this.clear = function() - { - this.context().clearRect(0, 0, this.element.width, this.element.height); - } - this.remove = function(manager) { ronin.terminal.log(new Log(this,"Removing layer "+this.name)); @@ -77,6 +92,11 @@ function Layer(name,manager = null) return this.element.toDataURL('image/png'); } + this.data = function() + { + return this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2); + } + // this.widget = function() @@ -92,42 +112,98 @@ function Layer(name,manager = null) this.mouse_pointer = function(position) { - return ronin.cursor.draw_pointer_drag(position); + return ronin.cursor.draw_pointer_arrow(position); } this.mouse_mode = function() { return "Move"; } - - this.move_from = null; this.mouse_down = function(position) { - this.move_from = ronin.position_in_window(position); + ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" 0,0"; + ronin.terminal.passive(); } this.mouse_move = function(position) { - if(this.move_from === null){ return; } + var offset = new Position((-this.mouse_from.x + position.x)+","+(-this.mouse_from.y + position.y)); - position = ronin.position_in_window(position); - - var offset_x = this.move_from.x - position.x; - var offset_y = this.move_from.y - position.y; + ronin.overlay.get_layer(true).clear(); + ronin.overlay.draw_cross(this.mouse_from); + ronin.overlay.draw_cross(position); + ronin.overlay.draw_line(this.mouse_from,position); - var imageData = this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2); - this.clear(); - this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2); - - this.move_from = new Position(position.x,position.y); - + ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" "+offset.render(); + ronin.terminal.passive(); } - this.mouse_up = function(event) + this.mouse_up = function(position) { - this.move_from = null; + var offset = new Position((-this.mouse_from.x + position.x)+","+(-this.mouse_from.y + position.y)); + + ronin.overlay.get_layer(true).clear(); + ronin.overlay.draw_circle(position); + ronin.overlay.draw_circle(this.mouse_from); + ronin.overlay.draw_line(this.mouse_from,position); + + ronin.terminal.input_element.value = "layer."+ronin.terminal.method_name+" "+offset.render(); + ronin.terminal.passive(); + + // if(this.coordinates.length == 0){ + // this.coordinates.push("M"+position.render()); + // } + // else{ + // var offset = this.last_pos ? position.offset(this.last_pos) : position; + + // if(keyboard.shift_held == true && keyboard.alt_held == true){ + // this.coordinates.push("M"+position.render()); + // } + // else if(keyboard.shift_held == true){ + // this.coordinates.push("a"+offset.render()+" 0 0,1 "+offset.render()); + // } + // else if(keyboard.alt_held == true){ + // this.coordinates.push("a"+offset.render()+" 0 0,0 "+offset.render()); + // } + // else{ + // this.coordinates.push("l"+offset.render()); + // } + // } + + // ronin.terminal.input_element.value = "path."+ronin.terminal.method_name+" "+this.create_path(); + // this.last_pos = position; + // ronin.terminal.passive(); } + + // this.move_from = null; + + // this.mouse_down = function(position) + // { + // this.move_from = ronin.position_in_window(position); + // } + + // this.mouse_move = function(position) + // { + // if(this.move_from === null){ return; } + + // position = ronin.position_in_window(position); + + // var offset_x = this.move_from.x - position.x; + // var offset_y = this.move_from.y - position.y; + + // var imageData = this.context().getImageData(0, 0, ronin.frame.settings["size"].width * 2, ronin.frame.settings["size"].height * 2); + // this.clear(); + // this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2); + + // this.move_from = new Position(position.x,position.y); + + // } + + // this.mouse_up = function(event) + // { + // this.move_from = null; + // } // Blink diff --git a/scripts/modules/module.js b/scripts/modules/module.js index a5e2e12..fdfdf00 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -42,7 +42,7 @@ function Module(rune) this.update_setting = function(name,value) { this.settings[name] = value.content.join(" "); - ronin.terminal.log(new Log(this,"Updated setting: "+name)); + ronin.terminal.log(new Log(this,"Updated setting: "+name+", to "+this.settings[name])); } this.add_method = function(method) diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js index cd1d1cf..fc2aa62 100644 --- a/scripts/modules/overlay.js +++ b/scripts/modules/overlay.js @@ -99,6 +99,50 @@ function Overlay(rune) this.context().closePath(); } + this.draw_line = function(position,to) + { + this.context().beginPath(); + + this.context().moveTo(position.x,position.y); + this.context().lineTo(to.x,to.y); + + this.context().lineCap="round"; + this.context().lineWidth = 1; + this.context().strokeStyle = this.color.hex; + this.context().stroke(); + this.context().closePath(); + } + + this.draw_circle = function(position,radius = 5) + { + this.context().beginPath(); + this.context().arc(position.x, position.y, radius, 0, 2 * Math.PI, false); + this.context().lineWidth = 1; + this.context().strokeStyle = "white"; + this.context().stroke(); + this.context().closePath(); + } + + this.draw_cross = function(position,radius = 5) + { + this.context().beginPath(); + + this.context().moveTo(position.x+(radius-2),position.y); + this.context().lineTo(position.x+radius,position.y); + this.context().moveTo(position.x-(radius-2),position.y); + this.context().lineTo(position.x-radius,position.y); + this.context().moveTo(position.x,position.y+(radius-2)); + this.context().lineTo(position.x,position.y+radius); + this.context().moveTo(position.x,position.y-(radius-2)); + this.context().lineTo(position.x,position.y-radius); + + this.context().lineCap="round"; + this.context().lineWidth = 1; + this.context().strokeStyle = this.color.hex; + this.context().stroke(); + this.context().closePath(); + } + this.draw_vertical_line = function(position) { this.context().beginPath(); diff --git a/scripts/modules/path.js b/scripts/modules/path.js index cd4402f..139f96b 100644 --- a/scripts/modules/path.js +++ b/scripts/modules/path.js @@ -16,14 +16,19 @@ function Path(rune) { if(!ronin.path.layer){ ronin.path.create_layer(); ronin.path.layer.is_blinking = true; } + ronin.terminal.log(new Log(this,"Stroke path!("+preview+")")); + this.layer.clear(); - var target_layer = preview ? this.layer : ronin.frame.active_layer; + var context = preview ? this.context() : ronin.frame.context(); - target_layer.context().lineCap = this.settings["line_cap"]; - target_layer.context().lineWidth = this.settings["line_width"]; - target_layer.context().strokeStyle = this.settings["line_color"]; - target_layer.context().stroke(new Path2D(params.content)); + console.log(this.settings["line_width"]); + context.beginPath(); + context.lineCap = this.settings["line_cap"]; + context.lineWidth = this.settings["line_width"]; + context.strokeStyle = this.settings["line_color"]; + context.stroke(new Path2D(params.content)); + context.closePath(); } this.fill = function(params,preview = false) diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index 680cfc9..12e3b90 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -10,6 +10,15 @@ function Terminal(rune) this.history = []; + this.add_method(new Method("save",["text"])); + this.add_method(new Method("display",["mini/hide/full"])); + + this.display = function(params,preview = false) + { + if(preview){ return; } + this.element.setAttribute("class",params.content); + } + // Module this.install = function(cmd) { @@ -66,7 +75,7 @@ function Terminal(rune) function active(content) { - ronin.terminal.log(new Log(this,content,"input")); + ronin.terminal.log(new Log(ronin.terminal,content,"input")); if(content.indexOf(".") > -1){ var module_name = content.split(" ")[0].split(".")[0] @@ -90,8 +99,11 @@ function Terminal(rune) else if(ronin[module_name] && ronin[module_name].settings[setting_name]){ ronin[module_name].update_setting(setting_name,parameters); } + else if(ronin[module_name]){ + ronin.terminal.log(new Log(ronin.terminal,"Unknown method: "+method_name)); + } else{ - ronin.terminal.log(new Log(ronin.terminal,"Unknown module")); + ronin.terminal.log(new Log(ronin.terminal,"Unknown module: "+module_name)); } // var key = content[0]; diff --git a/scripts/modules/type.js b/scripts/modules/type.js index 36fb6e4..b1ecd41 100644 --- a/scripts/modules/type.js +++ b/scripts/modules/type.js @@ -15,13 +15,15 @@ function Type(rune) var text = params.text() ? params.text() : "Placeholder"; var position = params.position() ? params.position() : new Position(40,80); var color = params.color() ? params.color() :new Color("#ffffff"); - var size = 40; - var font = "Georgia"; + var size = this.settings["size"]; + var font = this.settings["font"]; var target_layer = preview ? this.layer : ronin.frame.active_layer; target_layer.context().font = size+"px "+font; target_layer.context().fillStyle = color.hex; target_layer.context().fillText(text,position.x,position.y); + + console.log(target_layer.context()); } // Mouse