From 15e019d455a5cdc08a3c171bc80b6bfa192f1428 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 18 Mar 2017 14:41:16 -0700 Subject: [PATCH] Merging params with variables --- index.html | 2 +- scripts/core/command.js | 8 +-- scripts/core/init.js | 15 ++-- scripts/core/ronin.js | 8 +-- scripts/core/widget.js | 6 +- scripts/filters/balance.js | 4 +- scripts/filters/chromatic.js | 6 +- scripts/filters/filter.js | 2 +- scripts/filters/grey.js | 4 +- scripts/filters/invert.js | 4 +- scripts/filters/rotate.js | 6 +- scripts/filters/sharpen.js | 4 +- scripts/filters/stencil.js | 4 +- scripts/modules/brush.js | 57 ++++++--------- scripts/modules/brush.pointer.js | 4 +- scripts/modules/cursor.js | 50 ++++++++++++-- scripts/modules/default.js | 4 +- scripts/modules/file.save.js | 12 ++-- scripts/modules/module.js | 32 +++++---- scripts/modules/overlay.js | 2 +- scripts/modules/surface.js | 84 +++++++++-------------- scripts/modules/surface.layer.js | 13 +++- scripts/modules/terminal.js | 2 +- scripts/modules/typographe.js | 8 +-- scripts/modules/vector.js | 22 +++--- scripts/units/{variable.js => setting.js} | 2 +- 26 files changed, 192 insertions(+), 173 deletions(-) rename scripts/units/{variable.js => setting.js} (90%) diff --git a/index.html b/index.html index 2f9ed7a..459cf47 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + diff --git a/scripts/core/command.js b/scripts/core/command.js index 2373574..e50c81f 100644 --- a/scripts/core/command.js +++ b/scripts/core/command.js @@ -81,13 +81,13 @@ function Command(content) return null; } - this.variable = function(name) + this.setting = function(name) { for (i = 0; i < this.content.length; i++) { - if(this.content[i].indexOf("=") >= 0){ - var parts = this.content[i].split("="); + if(this.content[i].indexOf(":") >= 0){ + var parts = this.content[i].split(":"); if(parts[0] == name){ - return new Variable(parts[0],parts[1]); + return new Setting(parts[0],parts[1]); } } } diff --git a/scripts/core/init.js b/scripts/core/init.js index e6f9cbc..0412eb8 100644 --- a/scripts/core/init.js +++ b/scripts/core/init.js @@ -32,13 +32,14 @@ starting_canvas.width = parseInt(starting_canvas.width/40) * 40; starting_canvas.height = parseInt(starting_canvas.height/40) * 40; ronin.terminal.query("~ "+ronin.timestamp()); -ronin.terminal.query("@ "+starting_canvas.render()); -ronin.terminal.query("@ layer=Main"); -ronin.terminal.query("@ #ff0000"); -ronin.terminal.query("- 0,0"); -ronin.terminal.query("- 1,1"); -ronin.terminal.query("- 2,2"); -ronin.terminal.query("- #000000"); +ronin.terminal.query("@ size:"+starting_canvas.render()); +ronin.terminal.query("@ layer:Main"); +ronin.terminal.query("- color:#ff0000"); +// ronin.terminal.query("# fill=#ff0000"); +// ronin.terminal.query("- 0,0"); +// ronin.terminal.query("- 1,1"); +// ronin.terminal.query("- 2,2"); + ronin.terminal.query("~ Ready."); ronin.terminal.input_element.focus(); diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index 99dfa5b..0895fa8 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -43,11 +43,11 @@ function Ronin() this.position_in_canvas = function(e) { var x = e.clientX; - x -= (window.innerWidth - this.surface.size.width)/2; - x -= parseInt(this.surface.element.style.marginLeft) + (this.surface.size.width/2); + x -= (window.innerWidth - this.surface.settings["size"].width)/2; + x -= parseInt(this.surface.element.style.marginLeft) + (this.surface.settings["size"].width/2); var y = e.clientY; - y -= (window.innerHeight - this.surface.size.height)/2; - y -= parseInt(this.surface.element.style.marginTop) + parseInt(this.surface.size.height/2); + y -= (window.innerHeight - this.surface.settings["size"].height)/2; + y -= parseInt(this.surface.element.style.marginTop) + parseInt(this.surface.settings["size"].height/2); return new Position(x,y); } diff --git a/scripts/core/widget.js b/scripts/core/widget.js index 0010b3b..91aa099 100644 --- a/scripts/core/widget.js +++ b/scripts/core/widget.js @@ -19,9 +19,9 @@ function Widget() this.on_resize = function() { - this.element.style.left = (window.innerWidth/2)-(ronin.surface.size.width/2); - this.element.style.top = (window.innerHeight/2)+(ronin.surface.size.height/2)+20; - this.element.style.width = ronin.surface.size.width+"px"; + this.element.style.left = (window.innerWidth/2)-(ronin.surface.settings["size"].width/2); + this.element.style.top = (window.innerHeight/2)+(ronin.surface.settings["size"].height/2)+20; + this.element.style.width = ronin.surface.settings["size"].width+"px"; this.update(); } diff --git a/scripts/filters/balance.js b/scripts/filters/balance.js index f59f687..0d05e40 100644 --- a/scripts/filters/balance.js +++ b/scripts/filters/balance.js @@ -25,8 +25,8 @@ function Filter_Balance() var imageObj = new Image(); imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png'); - var w = ronin.surface.size.width; - var h = ronin.surface.size.height; + var w = ronin.surface.settings["size"].width; + var h = ronin.surface.settings["size"].height; var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2); var data = originalData.data; diff --git a/scripts/filters/chromatic.js b/scripts/filters/chromatic.js index 8009c46..8873d53 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.surface.size.width,ronin.surface.size.height); + var position = cmd.position() ? cmd.position() : new Position(ronin.surface.settings["size"].width,ronin.surface.settings["size"].height); var value = cmd.value() ? cmd.value().float : 5; ronin.overlay.clear(); @@ -26,8 +26,8 @@ function Filter_Chromatic() this.draw = function(context = this.context(), value, position) { - var w = ronin.surface.size.width; - var h = ronin.surface.size.height; + var w = ronin.surface.settings["size"].width; + var h = ronin.surface.settings["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/filter.js b/scripts/filters/filter.js index 327a868..d46daa7 100644 --- a/scripts/filters/filter.js +++ b/scripts/filters/filter.js @@ -78,6 +78,6 @@ function Filter() this.pixels = function() { - return ronin.surface.active_layer.context().getImageData(0,0,ronin.surface.size.width * 2,ronin.surface.size.height * 2); + return ronin.surface.active_layer.context().getImageData(0,0,ronin.surface.settings["size"].width * 2,ronin.surface.settings["size"].height * 2); } } \ No newline at end of file diff --git a/scripts/filters/grey.js b/scripts/filters/grey.js index 7e975bb..bfca394 100644 --- a/scripts/filters/grey.js +++ b/scripts/filters/grey.js @@ -29,8 +29,8 @@ function Filter_Grey() var imageObj = new Image(); imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png'); - var w = ronin.surface.size.width; - var h = ronin.surface.size.height; + var w = ronin.surface.settings["size"].width; + var h = ronin.surface.settings["size"].height; var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2); var data = originalData.data; diff --git a/scripts/filters/invert.js b/scripts/filters/invert.js index 5468576..b10824f 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.surface.active_layer.element.toDataURL('image/png'); - var w = ronin.surface.size.width; - var h = ronin.surface.size.height; + var w = ronin.surface.settings["size"].width; + var h = ronin.surface.settings["size"].height; var context = ronin.surface.active_layer.context(); var originalData = context.getImageData(0, 0, w*2, h*2); diff --git a/scripts/filters/rotate.js b/scripts/filters/rotate.js index 0565e10..7ccf86e 100644 --- a/scripts/filters/rotate.js +++ b/scripts/filters/rotate.js @@ -5,7 +5,7 @@ function Filter_Rotate() this.render = function(cmd) { - var position = cmd.position() ? cmd.position() : new Position(ronin.surface.size.width/2,ronin.surface.size.height/2); + var position = cmd.position() ? cmd.position() : new Position(ronin.surface.settings["size"].width/2,ronin.surface.settings["size"].height/2); var angle = cmd.angle() ? cmd.angle().degrees : 90; ronin.overlay.clear(); @@ -23,8 +23,8 @@ function Filter_Rotate() this.draw = function(context = this.context(), angle, position) { - var w = ronin.surface.size.width; - var h = ronin.surface.size.height; + var w = ronin.surface.settings["size"].width; + var h = ronin.surface.settings["size"].height; ronin.overlay.context().drawImage(context.canvas,0,0,w,h); diff --git a/scripts/filters/sharpen.js b/scripts/filters/sharpen.js index b1be218..5d103dd 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.surface.active_layer.element.toDataURL('image/png'); - var w = ronin.surface.size.width; - var h = ronin.surface.size.height; + var w = ronin.surface.settings["size"].width; + var h = ronin.surface.settings["size"].height; var context = ronin.surface.active_layer.context(); var originalData = context.getImageData(0, 0, w*2, h*2); diff --git a/scripts/filters/stencil.js b/scripts/filters/stencil.js index 27412b5..49914a3 100644 --- a/scripts/filters/stencil.js +++ b/scripts/filters/stencil.js @@ -23,8 +23,8 @@ function Filter_Stencil() this.draw = function(context = this.context(), angle, color) { - var w = ronin.surface.size.width; - var h = ronin.surface.size.height; + var w = ronin.surface.settings["size"].width; + var h = ronin.surface.settings["size"].height; context.translate(w/2,h/2); diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index 4621a0e..a0225b0 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -2,32 +2,21 @@ function Brush(rune) { Module.call(this,rune); - this.parameters = [Position,Rect,Angle,Color,Value,Bang]; - this.variables = {"natural" : false,"banking" : false}; + // this.parameters = {"offset":Position,"mirror":Rect,"angle":Angle,"reset":Bang}; + this.parameters = []; + this.settings = {"color":new Color("#ff0000"),"size":new Value(1)}; this.pointers = []; - this.size = 1; - this.opacity = 1; - this.color = new Color(); - // Module + + this.install = function() + { + this.add_pointer(new Position("0,0")); + } this.active = function(cmd) { if(cmd.bang()){ this.pointers = []; } - - // Pointer - if(cmd.rect() || cmd.position() || cmd.angle()){ - this.add_pointer(cmd); - } - - // Global - if(cmd.color()){ - this.color = cmd.color(); - } - if(cmd.value()){ - this.size = cmd.value().float; - } } this.passive = function(cmd) @@ -45,32 +34,23 @@ function Brush(rune) this.size_up = function() { - this.size -= this.size > 1 ? 1 : 0; + this.settings["size"].float -= this.settings["size"].float > 1 ? 1 : 0; ronin.surface.update_widget(); ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.size)); } this.size_down = function() { - this.size += 1; + this.settings["size"].float += 1; ronin.surface.update_widget(); ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.size)); } - this.add_pointer = function(cmd) + this.add_pointer = function(position) { + ronin.terminal.log(new Log(this,"Added pointer at: "+position.render())); var pointer = new Pointer(); - - if(cmd.position()){ - pointer.offset = cmd.position(); - } - if(cmd.rect()){ - pointer.mirror = cmd.rect(); - } - if(cmd.angle()){ - pointer.angle = cmd.angle(); - } - + pointer.offset = position; this.pointers.push(pointer); } @@ -87,7 +67,7 @@ function Brush(rune) ronin.surface.context().moveTo(this.position_prev.x,this.position_prev.y); ronin.surface.context().lineTo(position.x,position.y); ronin.surface.context().lineCap="round"; - ronin.surface.context().lineWidth = this.size * 5; + ronin.surface.context().lineWidth = this.settings["size"].float * 5; ronin.surface.context().strokeStyle = new Color("#ff0000").rgba(); ronin.surface.context().stroke(); ronin.surface.context().closePath(); @@ -96,14 +76,19 @@ function Brush(rune) } // Mouse + + this.mouse_pointer = function(position) + { + return ronin.cursor.draw_pointer_circle(position,this.settings["size"]); + } this.mouse_mode = function() { if(keyboard.shift_held == true){ - return "Eraser "+this.size; + return "Eraser "+this.settings["size"].float; } else{ - return "● Brush "+ronin.brush.pointers.length+"x "+this.size; + return "● Brush "+ronin.brush.pointers.length+"x "+this.settings["size"].render(); } } diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index 1e8c990..c83b380 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -12,7 +12,7 @@ function Pointer(offset = new Position(), color = new Color('000000')) { var ratio = 10/this.position().distance_to(this.position_prev[0]); ratio = ratio > 1 ? 1 : ratio; - return ronin.brush.size * ratio; + return ronin.brush.settings["size"].float * ratio; } // @@ -57,7 +57,7 @@ function Pointer(offset = new Position(), color = new Color('000000')) ronin.surface.context().lineCap="round"; ronin.surface.context().lineWidth = this.thickness(); - ronin.surface.context().strokeStyle = ronin.brush.color.rgba(); + ronin.surface.context().strokeStyle = ronin.brush.settings["color"].rgba(); ronin.surface.context().stroke(); ronin.surface.context().closePath(); diff --git a/scripts/modules/cursor.js b/scripts/modules/cursor.js index ddc5970..9486f7d 100644 --- a/scripts/modules/cursor.js +++ b/scripts/modules/cursor.js @@ -2,8 +2,7 @@ function Cursor(rune) { Module.call(this,rune); - this.parameters = [Rect,Position,Bang]; - this.variables = {}; + this.settings = {"grid" : new Rect("10x10"), "markers": new Position("4,4"), "reset" : new Bang()}; this.mode = null; this.position = new Position(); @@ -46,8 +45,8 @@ function Cursor(rune) { if(rect.width < 5 || rect.height < 5){ return; } - var horizontal = ronin.surface.size.width/rect.width; - var vertical = ronin.surface.size.height/rect.height; + var horizontal = ronin.surface.settings["size"].width/rect.width; + var vertical = ronin.surface.settings["size"].height/rect.height; for (var x = 1; x < horizontal; x++) { for (var y = 1; y < vertical; y++) { @@ -68,6 +67,44 @@ function Cursor(rune) context.fill(); } + this.draw_pointer_arrow = 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().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().lineCap="round"; + this.layer.context().lineWidth = 1; + this.layer.context().strokeStyle = "white"; + this.layer.context().stroke(); + this.layer.context().closePath(); + + this.pointer_last = position; + } + + this.draw_pointer_circle = 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, 3.5, 0, 2 * Math.PI, false); + this.layer.context().lineWidth = 1; + this.layer.context().strokeStyle = "white"; + this.layer.context().stroke(); + this.layer.context().closePath(); + + this.pointer_last = position; + } + this.draw_pointer = function(position,size = 1) { if(!this.layer){ this.create_layer(); } @@ -166,7 +203,10 @@ function Cursor(rune) if(!this.layer){ this.create_layer(); } this.layer.clear(); - this.draw_pointer(position); + + if(this.mode){this.mode.mouse_pointer(position);} + else{ this.mouse_pointer(position);} + if(this.magnetism){ this.draw(this.magnetism,this.grid); } if(this.mode.mouse_from == null){ return; } diff --git a/scripts/modules/default.js b/scripts/modules/default.js index 9cdfb88..326bfbe 100644 --- a/scripts/modules/default.js +++ b/scripts/modules/default.js @@ -29,8 +29,8 @@ function Default(rune) this.drag_offset_x -= offset_x; this.drag_offset_y -= offset_y; - ronin.surface.element.style.marginLeft = -(ronin.surface.size.width/2) + this.drag_offset_x; - ronin.surface.element.style.marginTop = -(ronin.surface.size.height/2) + this.drag_offset_y; + ronin.surface.element.style.marginLeft = -(ronin.surface.settings["size"].width/2) + this.drag_offset_x; + ronin.surface.element.style.marginTop = -(ronin.surface.settings["size"].height/2) + this.drag_offset_y; ronin.element.style.backgroundPosition = ((this.drag_offset_x/8))-(window.innerWidth % 20)+"px "+((this.drag_offset_y/8)-(window.innerWidth % 20))+"px"; diff --git a/scripts/modules/file.save.js b/scripts/modules/file.save.js index 3f8248d..dc4cb5f 100644 --- a/scripts/modules/file.save.js +++ b/scripts/modules/file.save.js @@ -15,20 +15,20 @@ function FileSave(rune) var w = window.open('about:blank','image from canvas'); - if(cmd.variable("format") && cmd.variable("format").value == "svg"){ + if(cmd.setting("format") && cmd.setting("format").value == "svg"){ w.document.write("Untitled"+ronin.vector.create_svg()+""); } - else if(cmd.variable("format") && cmd.variable("format").value == "jpg"){ - w.document.write("Untitled"); + else if(cmd.setting("format") && cmd.setting("format").value == "jpg"){ + w.document.write("Untitled"); } - else if(cmd.variable("format") && cmd.variable("format").value == "rin"){ + else if(cmd.setting("format") && cmd.setting("format").value == "rin"){ var w = window.open('about:blank','source'); var html = ""; for (i = 0; i < ronin.terminal.history.length; i++) { html += ronin.terminal.history[i]+";
"; } w.document.write("Source
"+html+"
"); } else{ - w.document.write("Untitled"); + w.document.write("Untitled"); } this.layer.remove(this); @@ -43,7 +43,7 @@ function FileSave(rune) } }); for (i = 0; i < a.length; i++) { - this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.surface.size.width,ronin.surface.size.height); + this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.surface.settings["size"].width,ronin.surface.settings["size"].height); } return this.layer; } diff --git a/scripts/modules/module.js b/scripts/modules/module.js index 301b4fa..710f6a2 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -2,8 +2,7 @@ function Module(rune) { this.rune = rune; this.element = null; - this.parameters = []; - this.variables = {}; + this.settings = {}; this.layer = null; this.docs = "Missing documentation."; @@ -34,24 +33,24 @@ function Module(rune) { } - this.set_variables = function(cmd) + this.update_settings = function(cmd) { - for (var key in this.variables){ - if(!cmd.variable(key)){ continue; } - this.variables[key] = cmd.variable(key).value; - ronin.terminal.log(new Log(this,"Updated "+key+" with "+cmd.variable(key).value)); + for (var key in this.settings){ + if(!cmd.setting(key)){ continue; } + var value = new this.settings[key].constructor(cmd.setting(key).value); + this.settings[key] = value; + ronin.terminal.log(new Log(this,"Updated "+key+" with "+cmd.setting(key).value)); + return; } + ronin.terminal.log(new Log(this,"Unknown setting: "+key)); } this.hint = function(content) { - var h = ""+ronin.module.constructor.name+" "; - for(param in ronin.module.parameters){ - var name = new ronin.module.parameters[param]().constructor.name; - h += name+" "; - } - for(variable in ronin.module.variables){ - h += variable+"="+ronin.module.variables[variable]+" "; + var h = ""+ronin.module.constructor.name+" "; + + for(setting in ronin.module.settings){ + h += setting+":"+ronin.module.settings[setting].render()+" "; } h += ronin.module.mouse_mode() ? ""+ronin.module.mouse_mode()+"" : ""; @@ -80,6 +79,11 @@ function Module(rune) return null; } + this.mouse_pointer = function(position) + { + return ronin.cursor.draw_pointer_arrow(position); + } + this.mouse_from = null; this.mouse_held = null; this.mouse_prev = null; diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js index 8187fcc..f1f6cab 100644 --- a/scripts/modules/overlay.js +++ b/scripts/modules/overlay.js @@ -135,7 +135,7 @@ function Overlay(rune) this.clear = function() { - this.context().clearRect(0, 0, ronin.surface.size.width, ronin.surface.size.height); + this.context().clearRect(0, 0, ronin.surface.settings["size"].width, ronin.surface.settings["size"].height); } // Cursor diff --git a/scripts/modules/surface.js b/scripts/modules/surface.js index ba7a886..8e2683d 100644 --- a/scripts/modules/surface.js +++ b/scripts/modules/surface.js @@ -3,15 +3,12 @@ function Surface(rune) Module.call(this,rune); this.element = null; - this.parameters = [Rect,Color,Bang]; - this.variables = {"layer" : "main"}; + this.settings = {"size":new Rect("200x200")}; this.layers = {}; this.active_layer = null; this.render_layer = null; - this.size = new Rect("200x200"); - this.widget_element = document.createElement("widget"); this.install = function() @@ -30,29 +27,12 @@ function Surface(rune) this.active = function(cmd) { - if(cmd.rect()){ - this.resize(cmd.rect(),cmd.position()); - } - - if(cmd.color()){ - this.context().beginPath(); - this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height); - this.context().fillStyle = cmd.color().hex; - this.context().fill(); - ronin.terminal.log(new Log(this,"Filled layer: "+cmd.color().hex)); - this.element.style.border = "1px solid "+cmd.color().hex; - this.element.setAttribute("class",cmd.color().style()); + if(cmd.setting("size")){ + this.resize(this.settings["size"],cmd.position()); } - if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){ - this.layers[this.active_layer.name].element.outerHTML = ""; - delete this.layers[this.active_layer.name]; - this.select_any_layer(); - ronin.surface.update_widget(); - } - - if(cmd.variable("layer")){ - var name = cmd.variable("layer").value; + if(cmd.setting("layer")){ + var name = cmd.setting("layer").value; if(!this.layers[name]){ this.add_layer(new Layer(name)); } @@ -60,6 +40,23 @@ function Surface(rune) } } + this.resize = function(rect, position = null) + { + Object.keys(ronin.surface.layers).forEach(function (key) { + ronin.surface.layers[key].resize(rect); + }); + + ronin.surface.element.width = rect.width * 2; + ronin.surface.element.height = rect.height * 2; + ronin.surface.element.style.width = rect.width+"px"; + ronin.surface.element.style.height = rect.height+"px"; + ronin.surface.element.style.marginLeft = -(rect.width/2); + ronin.surface.element.style.marginTop = -(rect.height/2); + + ronin.on_resize(); + ronin.terminal.log(new Log(this,"Resized Surface to "+this.settings["size"].render())); + } + this.select_layer = function(layer) { console.log("Selecting layer:"+layer.name); @@ -76,7 +73,7 @@ function Surface(rune) { ronin.terminal.log(new Log(this,"Creating layer:"+layer.name+(layer.manager ? "["+layer.manager.constructor.name+"]" : ""))); - layer.resize(this.size); + layer.resize(this.settings["size"]); this.layers[layer.name] = layer; this.element.appendChild(layer.element); } @@ -88,30 +85,11 @@ function Surface(rune) } } - this.resize = function(rect, position = null) - { - this.size = rect; - - Object.keys(ronin.surface.layers).forEach(function (key) { - ronin.surface.layers[key].resize(rect); - }); - - ronin.surface.element.width = rect.width * 2; - ronin.surface.element.height = rect.height * 2; - ronin.surface.element.style.width = rect.width+"px"; - ronin.surface.element.style.height = rect.height+"px"; - ronin.surface.element.style.marginLeft = -(rect.width/2); - ronin.surface.element.style.marginTop = -(rect.height/2); - - ronin.on_resize(); - ronin.terminal.log(new Log(this,"Resized Surface to "+this.size.render())); - } - this.widget = function() { if(!this.active_layer){ return ""; } - return this.rune+" "+this.size.render(); + return this.rune+" "+this.settings["size"].render(); } // Widget @@ -129,14 +107,14 @@ function Surface(rune) s += ""+ronin.cursor.mode.mouse_mode()+""; var keys = Object.keys(ronin.surface.layers); - var loc = keys.indexOf(this.active_layer.name); + // var loc = keys.indexOf(this.active_layer.name); - if(keys.length > 1){ - s += ""+ronin.surface.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")"; - } - else{ - s += ""+ronin.surface.active_layer.widget()+""; - } + // if(keys.length > 1){ + // s += ""+ronin.surface.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")"; + // } + // else{ + // s += ""+ronin.surface.active_layer.widget()+""; + // } this.widget_element.innerHTML = s; } diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js index a8f0476..d7a473f 100644 --- a/scripts/modules/surface.layer.js +++ b/scripts/modules/surface.layer.js @@ -21,6 +21,17 @@ function Layer(name,manager = null) this.context().scale(2,2); } + this.fill = function(color) + { + this.context().beginPath(); + this.context().rect(0, 0, this.active_layer.element.width, this.active_layer.element.height); + this.context().fillStyle = cmd.color().hex; + this.context().fill(); + ronin.terminal.log(new Log(this,"Filled layer: "+cmd.color().hex)); + this.element.style.border = "1px solid "+cmd.color().hex; + this.element.setAttribute("class",cmd.color().style()); + } + this.clear = function() { this.context().clearRect(0, 0, this.element.width, this.element.height); @@ -78,7 +89,7 @@ function Layer(name,manager = null) 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.surface.size.width * 2, ronin.surface.size.height * 2); + var imageData = this.context().getImageData(0, 0, ronin.surface.settings["size"].width * 2, ronin.surface.settings["size"].height * 2); this.clear(); this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2); diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index d07d4a0..38446a7 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -88,7 +88,7 @@ function Terminal(rune) var cmd = new Command(content.substring(1).trim().split(" ")); if(ronin.modules[key]){ - ronin.modules[key].set_variables(cmd); + ronin.modules[key].update_settings(cmd); ronin.modules[key].active(cmd); ronin.terminal.history.push(content); ronin.terminal.history_index = ronin.terminal.history.length-1; diff --git a/scripts/modules/typographe.js b/scripts/modules/typographe.js index 008cfcf..e7aa8f1 100644 --- a/scripts/modules/typographe.js +++ b/scripts/modules/typographe.js @@ -9,7 +9,7 @@ function Typographe(rune) { if(this.layer){ this.layer.remove(this); } - if(cmd.variable("text")){ + if(cmd.setting("text")){ this.add_text(ronin.surface.active_layer.context(),cmd); } } @@ -18,7 +18,7 @@ function Typographe(rune) { if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; } - if(cmd.variable("text")){ + if(cmd.setting("text")){ this.layer.clear(); this.add_text(this.layer.context(),cmd); } @@ -28,11 +28,11 @@ function Typographe(rune) { var ctx = context; - var text = cmd.variable("text").value.replace("_"," "); + var text = cmd.setting("text").value.replace("_"," "); var position = cmd.position() ? cmd.position() : new Position(20,40); var color = cmd.color() ? cmd.color() : new Color("#000000"); var size = cmd.value() ? cmd.value().int : 40; - var font = cmd.variable("font") ? cmd.variable("font").value : "Georgia"; + var font = cmd.setting("font") ? cmd.setting("font").value : "Georgia"; ctx.font = size+"px "+font; ctx.fillStyle = color.hex; diff --git a/scripts/modules/vector.js b/scripts/modules/vector.js index 0c14aa9..e416cd6 100644 --- a/scripts/modules/vector.js +++ b/scripts/modules/vector.js @@ -16,12 +16,12 @@ function Vector(rune) if(!ronin.vector.layer){ ronin.vector.create_layer(); } this.layer.clear(); - this.layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "square"; - this.layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : 10; - this.layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff"; - this.layer.context().fillStyle = cmd.variable("fill_color") ? cmd.variable("fill_color").value : "#ffffff"; + this.layer.context().lineCap = cmd.setting("line_cap") ? cmd.setting("line_cap").value : "square"; + this.layer.context().lineWidth = cmd.setting("stroke_width") ? cmd.setting("stroke_width").value : 10; + this.layer.context().strokeStyle = cmd.setting("stroke_color") ? cmd.setting("stroke_color").value : "#ffffff"; + this.layer.context().fillStyle = cmd.setting("fill_color") ? cmd.setting("fill_color").value : "#ffffff"; - if(cmd.variable("fill_color")){ronin.vector.layer.context().fill(new Path2D(cmd.content.join(" ")));} + if(cmd.setting("fill_color")){ronin.vector.layer.context().fill(new Path2D(cmd.content.join(" ")));} ronin.vector.layer.context().stroke(new Path2D(cmd.content.join(" "))); } @@ -32,12 +32,12 @@ function Vector(rune) if(this.layer){ this.layer.remove(this); } - ronin.surface.active_layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "square"; - ronin.surface.active_layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : 10; - ronin.surface.active_layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff"; - ronin.surface.active_layer.context().fillStyle = cmd.variable("fill_color") ? cmd.variable("fill_color").value : "#ffffff"; + ronin.surface.active_layer.context().lineCap = cmd.setting("line_cap") ? cmd.setting("line_cap").value : "square"; + ronin.surface.active_layer.context().lineWidth = cmd.setting("stroke_width") ? cmd.setting("stroke_width").value : 10; + ronin.surface.active_layer.context().strokeStyle = cmd.setting("stroke_color") ? cmd.setting("stroke_color").value : "#ffffff"; + ronin.surface.active_layer.context().fillStyle = cmd.setting("fill_color") ? cmd.setting("fill_color").value : "#ffffff"; - if(cmd.variable("fill_color")){ronin.surface.active_layer.context().fill(new Path2D(cmd.content.join(" ")));} + if(cmd.setting("fill_color")){ronin.surface.active_layer.context().fill(new Path2D(cmd.content.join(" ")));} ronin.surface.active_layer.context().stroke(new Path2D(cmd.content.join(" "))); } @@ -57,7 +57,7 @@ function Vector(rune) { var s = ""; - s += ""; + s += ""; for (var i = 0; i < this.paths.length; i++) { s += ""; diff --git a/scripts/units/variable.js b/scripts/units/setting.js similarity index 90% rename from scripts/units/variable.js rename to scripts/units/setting.js index 2d59f7f..ae7fbe9 100644 --- a/scripts/units/variable.js +++ b/scripts/units/setting.js @@ -1,4 +1,4 @@ -function Variable(key,value) +function Setting(key,value) { Unit.call(this);