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("
"+html+""); } else{ - w.document.write("