From 78b2d13de8ca8e4c8e6324116e445e8e8207925f Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Fri, 9 Dec 2016 05:22:55 -0700 Subject: [PATCH] Massive update, incl. dynamic documentation. --- README.md | 38 +++-------- index.html | 6 +- scripts/command.js | 40 ++--------- scripts/commander.js | 82 +++-------------------- scripts/init.js | 18 +++-- scripts/module.js | 5 +- scripts/modules/brush.js | 4 +- scripts/modules/canvas.js | 7 +- scripts/modules/{file.js => file.load.js} | 19 +----- scripts/modules/file.save.js | 19 ++++++ scripts/modules/filter.js | 4 +- scripts/modules/help.js | 47 +++++++++++++ scripts/modules/overlay.js | 32 ++++++++- scripts/modules/stroke.js | 4 +- scripts/modules/vector.js | 4 +- scripts/ronin.js | 39 ++++++----- scripts/unit.js | 2 + scripts/units/angle.js | 4 +- scripts/units/any.js | 1 + scripts/units/bang.js | 2 + scripts/units/color.js | 1 + scripts/units/filepath.js | 1 + scripts/units/position.js | 1 + scripts/units/range.js | 15 +++++ scripts/units/rect.js | 1 + scripts/units/value.js | 1 + scripts/units/variable.js | 13 ++++ 27 files changed, 222 insertions(+), 188 deletions(-) rename scripts/modules/{file.js => file.load.js} (69%) create mode 100644 scripts/modules/file.save.js create mode 100644 scripts/modules/help.js create mode 100644 scripts/units/range.js create mode 100644 scripts/units/variable.js diff --git a/README.md b/README.md index bb641cc..df94bf6 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,13 @@ python -m SimpleHTTPServer 8000 ; Start localhost http://localhost:8000/ ; Enjoy Ronin ``` +#Controls +``` +CTRL+MOUSE1 ; Draw guide +SHIFT+MOUSE1 ; Draw line +MOUSE2 ; Drag canvas +``` + #Modules ##Canvas ``` @@ -27,16 +34,13 @@ http://localhost:8000/ ; Enjoy Ronin ##Save File ``` -$ new_name ; Create a new file with name -$ 3 ; Save to temporary storage, accessible with Load -$ ! ; Clear temporary storage +$ new_name.jpg ; Create a new file with name ``` ##Load File ``` / dir/file_name.jpg 10,10 100x100 ; Load image, at 10,10 with size 100x100 / dir/file_name.jpg 10,10 100x ; Load image, at 10,10 with size 100w and auto height -/ 3 ; Load temporary storage id ``` ##Brush(Pointers) @@ -51,6 +55,7 @@ $ ! ; Clear temporary storage ``` ##Guides +Hold the Control key to draw guides with the mouse. ``` | 10,10 100x100 ; Draw a guide | -100,0 ; Draw a grid at every 100px @@ -66,7 +71,7 @@ $ ! ; Clear temporary storage ##Stroke* ``` -- 0,0 0,10 10,10 10,0 0,0 ; Draw a square +_ 0,0 0,10 10,10 10,0 0,0 ; Draw a square ``` ##Filters* @@ -79,19 +84,6 @@ $ ! ; Clear temporary storage : sharpen 0.5 ; Sharpen image to 50% ``` -##Translate* -``` -^ 0,10 ; Translate 10px vertically -^ 20,20 100x100 40,40 ; Translate a specific portion to a specific location -^ -1280x800 ; Flip image horizontally -``` - -##Zoom* -``` -= 75 ; Zoom factor of 75% -= ! ; Zoom 100% -``` - #Units ``` 5 ; value: 5 @@ -100,15 +92,7 @@ $ ! ; Clear temporary storage #ff0000 ; color: red 0..5 ; random: 0.0-5.0 45' ; degree: 45/365 -rate:10 ; variable: rate = 10 -"foo" ; string: foo -{40w} ; constant: 120px, 40% canvas width -``` - -#Constants -``` -w ; percentage of canvas width -h ; percentage of canvas height +rate=10 ; variable: rate = 10 ``` #Presets diff --git a/index.html b/index.html index f99d969..3ba768e 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,8 @@ + + @@ -17,7 +19,9 @@ - + + + diff --git a/scripts/command.js b/scripts/command.js index c703cdf..27903dc 100644 --- a/scripts/command.js +++ b/scripts/command.js @@ -1,37 +1,6 @@ function Command(content) { - this.content = raster(content); - - // Raster - - function raster(array) // @ {50w}x100 - { - return array; - var str = array.join(" "); - - var m = str.replace(/(\{(.*)\})/g, function(a) { - var parts = a.split(/[{}]/); - for(var e = 0; e < parts.length; e++) { - if(str.indexOf("{"+parts[e]+"}") == -1){ continue; } - str = str.replace("{"+parts[e]+"}",converter(parts[e])); - } - }); - return str.split(" "); - } - - function converter(str) - { - var unit = str.charAt(str.length - 1); - var value = parseFloat(str.replace(unit,'')); - - switch(unit) { - case "w": - return ronin.canvas.element.width * (value/100); - case "h": - return ronin.canvas.element.height * (value/100); - } - return str; - } + this.content = content; // Parser @@ -109,7 +78,12 @@ function Command(content) this.variable = function(name) { for (i = 0; i < this.content.length; i++) { - if(this.content[i].indexOf(name+":") >= 0){ return Variable(this.content[i]); } + if(this.content[i].indexOf("=") >= 0){ + var parts = this.content[i].split("="); + if(parts[0] == name){ + return new Variable(parts[0],parts[1]); + } + } } return null; } diff --git a/scripts/commander.js b/scripts/commander.js index dd09379..1da747c 100644 --- a/scripts/commander.js +++ b/scripts/commander.js @@ -14,13 +14,13 @@ function Commander(element,element_input) } this.always = function() { - this.always_show = !this.always_show; + this.always_show = !this.always_show; } this.hide = function() { if (!this.always_show) { - this.element.setAttribute('class','hidden'); + this.element.setAttribute('class','hidden'); } this.element_input.value = ""; } @@ -51,42 +51,13 @@ function Commander(element,element_input) content[0] = content[0].slice(1); var cmd = new Command(content); + if(ronin.modules[key]){ + ronin.modules[key].active(this.cmd); + } + switch(key) { case "~": - this.always(); - break; - case "@": - ronin.canvas.active(cmd); - break; - case "$": - ronin.file.save(cmd); - break; - case "/": - ronin.file.active(cmd); - break; - case ">": - ronin.brush.active(cmd); - break; - case "|": - ronin.overlay.active(cmd); - break; - case "-": - ronin.stroke.active(cmd); - break; - case "^": // TODO - ronin.translate.active(cmd); - break; - case "=": // TODO - ronin.zoom.active(cmd); - break; - case "#": // TODO - ronin.layers.active(cmd); - break; - case ":": - ronin.filter.active(cmd); - break; - case "+": - ronin.vector.active(cmd); + this.always(); break; } this.hide(); @@ -99,42 +70,9 @@ function Commander(element,element_input) this.cmd = new Command(content); ronin.module = null; - switch(key) { - case "@": - ronin.canvas.passive(this.cmd); - ronin.module = ronin.canvas; - break; - case "/": - ronin.file.passive(this.cmd); - ronin.module = ronin.file; - break; - case ">": - ronin.brush.passive(this.cmd); - ronin.module = ronin.brush; - break; - case "|": - ronin.overlay.passive(this.cmd); - ronin.module = ronin.overlay; - break; - case "^": // TODO - ronin.translate.passive(this.cmd); - ronin.module = ronin.translate; - break; - case "=": // TODO - ronin.zoom.passive(this.cmd); - ronin.module = ronin.zoom; - break; - case "$": - ronin.module = ronin.file; - break; - case ":": - ronin.filter.passive(this.cmd); - ronin.module = ronin.filter; - break; - case "+": - ronin.vector.passive(this.cmd); - ronin.module = ronin.vector; - break; + if(ronin.modules[key]){ + ronin.modules[key].passive(this.cmd); + ronin.module = ronin.modules[key]; } } } diff --git a/scripts/init.js b/scripts/init.js index 07a1172..59a6a29 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -9,17 +9,21 @@ var commander = new Commander(document.getElementById("commander"),document.getE // Interactive -document.addEventListener('mousemove', function(e) { - if(e.which == 1){ ronin.brush.draw(e); } - if(e.which == 2){ ronin.drag(e); } -}, false); document.addEventListener('mousedown', function(e) { - if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); } - if(e.which == 2){ ronin.drag_start(e); ronin.drag(e); } + // Canvas Live Draw + if(e.which == 1 && e.ctrlKey === true){ ronin.overlay.live_draw_start(e); } + else if(e.which == 1){ ronin.brush.draw_start(e); ronin.brush.draw(e); } + else if(e.which == 2){ ronin.drag_start(e); ronin.drag(e); } +}, false); +document.addEventListener('mousemove', function(e) { + // Canvas Live Draw + if(e.which == 1 && e.ctrlKey === true){ ronin.overlay.live_draw(e); } + else if(e.which == 1){ ronin.brush.draw(e); } + else if(e.which == 2){ ronin.drag(e); } }, false); document.addEventListener('mouseup', function(e) { if(e.which == 1){ ronin.brush.draw_stop(e); } - if(e.which == 2){ ronin.drag_stop(e) } + else if(e.which == 2){ ronin.drag_stop(e) } document.getElementById("commander_input").focus(); }, false); diff --git a/scripts/module.js b/scripts/module.js index 2a79282..7952b96 100644 --- a/scripts/module.js +++ b/scripts/module.js @@ -1,6 +1,9 @@ -function Module() +function Module(rune) { + this.rune = rune; + this.element = null; this.parameters = []; + this.variables = []; this.active = function(cmd) { diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index 16cfe75..471bd0f 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -1,6 +1,6 @@ -function Brush() +function Brush(rune) { - Module.call(this); + Module.call(this,rune); this.parameters = [Position,Rect,Angle,Color,Value,Bang]; this.pointers = [new Pointer(new Position())]; diff --git a/scripts/modules/canvas.js b/scripts/modules/canvas.js index 1e8bddd..6105b5a 100644 --- a/scripts/modules/canvas.js +++ b/scripts/modules/canvas.js @@ -1,9 +1,8 @@ -function Canvas(element) +function Canvas(rune) { - Module.call(this); - + Module.call(this,rune); + this.parameters = [Rect,Position,Color,Bang]; - this.element = element; this.active = function(cmd) { diff --git a/scripts/modules/file.js b/scripts/modules/file.load.js similarity index 69% rename from scripts/modules/file.js rename to scripts/modules/file.load.js index 6eea27d..176593d 100644 --- a/scripts/modules/file.js +++ b/scripts/modules/file.load.js @@ -1,9 +1,8 @@ -function File() +function FileLoad(rune) { - Module.call(this); + Module.call(this,rune); this.parameters = [Filepath,Position,Rect,Bang]; - this.storage = []; this.active = function(cmd) { @@ -16,7 +15,7 @@ function File() var position = cmd.position() ? cmd.position() : new Position(); base_image = new Image(); - base_image.src = cmd.value() && this.storage[cmd.value().int] ? this.storage[cmd.value().int] : cmd.filepath().path; + base_image.src = cmd.filepath().path; base_image.src += '?' + new Date().getTime(); base_image.crossOrigin = "Anonymous"; @@ -49,16 +48,4 @@ function File() ronin.overlay.draw(position); } } - - this.save = function(cmd) - { - if(cmd.value() && cmd.value().int > 0){ - this.storage[cmd.value().int] = ronin.canvas.element.toDataURL("image/png"); - } - else{ - var d = ronin.canvas.element.toDataURL("image/png"); - var w = window.open('about:blank','image from canvas'); - w.document.write(""+(cmd.content[0] ? cmd.content[0] : "Untitled")+"from canvas"); - } - } } \ No newline at end of file diff --git a/scripts/modules/file.save.js b/scripts/modules/file.save.js new file mode 100644 index 0000000..2524c17 --- /dev/null +++ b/scripts/modules/file.save.js @@ -0,0 +1,19 @@ +function FileSave(rune) +{ + Module.call(this,rune); + + this.parameters = [Any]; + + this.active = function(cmd) + { + var n = cmd.any().string[1]; + var f = cmd.variable("format"); + var d = ronin.canvas.element.toDataURL("image/png"); + var w = window.open('about:blank','image from canvas'); + w.document.write(""+(n ? n : "Untitled")+""); + } + + this.passive = function(cmd) + { + } +} \ No newline at end of file diff --git a/scripts/modules/filter.js b/scripts/modules/filter.js index a55bfcf..8aedcab 100644 --- a/scripts/modules/filter.js +++ b/scripts/modules/filter.js @@ -1,6 +1,6 @@ -function Filter(element) +function Filter(rune) { - Module.call(this); + Module.call(this,rune); this.parameters = [Any]; diff --git a/scripts/modules/help.js b/scripts/modules/help.js new file mode 100644 index 0000000..de96395 --- /dev/null +++ b/scripts/modules/help.js @@ -0,0 +1,47 @@ +function Help(rune) +{ + Module.call(this,rune); + + this.active = function(cmd) + { + var w = window.open('about:blank','image from canvas'); + var html = this.view_modules(); + w.document.write("Help
"+html+"
"); + } + + // + + this.view_modules = function() + { + html = " Modules\n\n"; + Object.keys(ronin.modules).forEach(function (key) { + html += key+" "+ronin.modules[key].constructor.name+"\n"; + html += "" + for (i = 0; i < ronin.modules[key].parameters.length; i++) { + html += " "+pad(ronin.modules[key].parameters[i].name,14); + html += pad(new ronin.modules[key].parameters[i]().example,14)+" \n"; + } + for (i = 0; i < ronin.modules[key].variables.length; i++) { + html += " "+pad(ronin.modules[key].variables[i].key,14)+"= "; + for (c = 0; c < ronin.modules[key].variables[i].candidates.length; c++) { + html += ronin.modules[key].variables[i].candidates[c]+" "; + } + html += "\n"; + } + html += "\n" + }); + + return html; + } + + function pad(s,length) + { + if(!s){ return s; } + + var new_string = s; + while(new_string.length < length){ + new_string += " "; + } + return new_string; + } +} \ No newline at end of file diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js index 1dd5b87..25e43f9 100644 --- a/scripts/modules/overlay.js +++ b/scripts/modules/overlay.js @@ -1,9 +1,8 @@ -function Overlay(element) +function Overlay(rune) { - Module.call(this); + Module.call(this,rune); this.parameters = [Position,Rect]; - this.element = element; // Module @@ -102,6 +101,33 @@ function Overlay(element) this.context().closePath(); } + // Live Draw(Ctrl) + + this.live_draw_from = null; + + this.live_draw_start = function(e) + { + this.clear(); + + this.draw_pointer(ronin.position_in_canvas(e)); + this.live_draw_from = ronin.position_in_canvas(e); + commander.show(); + commander.element_input.focus(); + commander.element_input.value = "| "+this.live_draw_from.render(); + } + + this.live_draw = function(e) + { + this.clear(); + + var rect = new Rect(); + rect.width = ronin.position_in_canvas(e).x - this.live_draw_from.x; + rect.height = ronin.position_in_canvas(e).y - this.live_draw_from.y; + + this.draw_rect(this.live_draw_from,rect); + commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render(); + } + this.resize = function(rect) { this.element.setAttribute('width',rect.width+"px"); diff --git a/scripts/modules/stroke.js b/scripts/modules/stroke.js index 4a87cf0..10d9cb7 100644 --- a/scripts/modules/stroke.js +++ b/scripts/modules/stroke.js @@ -1,6 +1,6 @@ -function Stroke(element) +function Stroke(rune) { - Module.call(this); + Module.call(this,rune); this.parameters = [Any]; diff --git a/scripts/modules/vector.js b/scripts/modules/vector.js index d1912cd..04f866f 100644 --- a/scripts/modules/vector.js +++ b/scripts/modules/vector.js @@ -1,6 +1,6 @@ -function Vector() +function Vector(rune) { - Module.call(this); + Module.call(this,rune); this.parameters = [Any,Position]; diff --git a/scripts/ronin.js b/scripts/ronin.js index 784185f..bec9c17 100644 --- a/scripts/ronin.js +++ b/scripts/ronin.js @@ -6,21 +6,30 @@ function Ronin() this.widget = new Widget(); this.surface = null; - this.canvas = new Canvas(); - this.overlay = new Overlay(); - this.brush = new Brush(); - this.file = new File(); - this.filter = new Filter(); - this.stroke = new Stroke(); - this.vector = new Vector(); + this.canvas = new Canvas("@"); + this.overlay = new Overlay("|"); + this.brush = new Brush(">"); + this.fileload = new FileLoad("/"); + this.filesave = new FileSave("$"); + this.filter = new Filter("%"); + this.stroke = new Stroke("_"); + this.vector = new Vector("+"); + this.help = new Help("?"); - this.modules["@"] = this.canvas; - this.modules["|"] = this.overlay; - this.modules[">"] = this.brush; - this.modules["/"] = this.file; - this.modules[":"] = this.filter; - this.modules["-"] = this.stroke; - this.modules["+"] = this.vector; + this.modules[this.canvas.rune] = this.canvas; + this.modules[this.overlay.rune] = this.overlay; + this.modules[this.brush.rune] = this.brush; + this.modules[this.fileload.rune] = this.fileload; + this.modules[this.filesave.rune] = this.filesave; + this.modules[this.filter.rune] = this.filter; + this.modules[this.stroke.rune] = this.stroke; + this.modules[this.vector.rune] = this.vector; + this.modules[this.help.rune] = this.help; + + this.position_in_canvas = function(e) + { + return new Position(e.clientX - parseFloat(ronin.surface.style.left) - parseFloat(ronin.canvas.element.style.left),e.clientY- parseFloat(ronin.surface.style.top) - parseFloat(ronin.canvas.element.style.top)); + } // Drag @@ -39,7 +48,7 @@ function Ronin() this.surface.style.left = this.surface.style.left ? parseInt(this.surface.style.left) - offset_x : offset_x; var offset_y = this.drag_from.y - e.clientY; this.surface.style.top = this.surface.style.top ? parseInt(this.surface.style.top) - offset_y : offset_y; - this.drag_from = new Position(e.clientX,e.clientY); + this.drag_from = position_in_canvas(e); } this.drag_stop = function(e) diff --git a/scripts/unit.js b/scripts/unit.js index 6215b5d..58c3d21 100644 --- a/scripts/unit.js +++ b/scripts/unit.js @@ -1,5 +1,7 @@ function Unit() { + this.example = "unknown"; + this.render = function() { return "[MISSING]"; diff --git a/scripts/units/angle.js b/scripts/units/angle.js index d15345a..578e258 100644 --- a/scripts/units/angle.js +++ b/scripts/units/angle.js @@ -1,7 +1,9 @@ -function Angle(angle_str) +function Angle(angle_str = "0'") { Unit.call(this); + this.example = "45'"; + this.degrees = parseFloat(angle_str.replace('\'','')); this.render = function() diff --git a/scripts/units/any.js b/scripts/units/any.js index 0c8725d..3e2428f 100644 --- a/scripts/units/any.js +++ b/scripts/units/any.js @@ -2,6 +2,7 @@ function Any(str) { Unit.call(this); + this.example = ""; this.string = str; this.render = function() diff --git a/scripts/units/bang.js b/scripts/units/bang.js index 6671eae..127a44e 100644 --- a/scripts/units/bang.js +++ b/scripts/units/bang.js @@ -2,6 +2,8 @@ function Bang() { Unit.call(this); + this.example = ""; + this.render = function() { return "BANG"; diff --git a/scripts/units/color.js b/scripts/units/color.js index b2fe1a1..b6014f0 100644 --- a/scripts/units/color.js +++ b/scripts/units/color.js @@ -2,6 +2,7 @@ function Color(hex = '#000000') { Unit.call(this); + this.example = "#ff0000"; this.hex = hex; this.rgb = function() diff --git a/scripts/units/filepath.js b/scripts/units/filepath.js index 3aca1dc..d856346 100644 --- a/scripts/units/filepath.js +++ b/scripts/units/filepath.js @@ -2,6 +2,7 @@ function Filepath(path_str) { Unit.call(this); + this.example = "assets/demo.png"; this.path = path_str; this.render = function() diff --git a/scripts/units/position.js b/scripts/units/position.js index 9cd7606..b8a59a6 100644 --- a/scripts/units/position.js +++ b/scripts/units/position.js @@ -2,6 +2,7 @@ function Position(position_str = "0,0",y = null) { Unit.call(this); + this.example = "100,150"; this.position_str = position_str; this.x = y ? position_str : parseFloat(this.position_str.split(",")[0]); diff --git a/scripts/units/range.js b/scripts/units/range.js new file mode 100644 index 0000000..3dc3d38 --- /dev/null +++ b/scripts/units/range.js @@ -0,0 +1,15 @@ +function Range(range_str) +{ + Unit.call(this); + + this.example = "10..50"; + this.range_str = range_str; + + this.from = parseFloat(this.range_str.split("..")[0]); + this.to = parseFloat(this.range_str.split("..")[1]); + + this.render = function() + { + return this.from+".."+this.to; + } +} \ No newline at end of file diff --git a/scripts/units/rect.js b/scripts/units/rect.js index d3300d3..c0b3c12 100644 --- a/scripts/units/rect.js +++ b/scripts/units/rect.js @@ -2,6 +2,7 @@ function Rect(rect_str) { Unit.call(this); + this.example = "200x300"; this.rect_str = rect_str; this.width = rect_str ? parseFloat(this.rect_str.split("x")[0]) : 0; diff --git a/scripts/units/value.js b/scripts/units/value.js index a6b98e5..3bb7e26 100644 --- a/scripts/units/value.js +++ b/scripts/units/value.js @@ -2,6 +2,7 @@ function Value(value_str) { Unit.call(this); + this.example = "20"; this.value = value_str; this.float = parseFloat(this.value); this.int = parseInt(this.value); diff --git a/scripts/units/variable.js b/scripts/units/variable.js new file mode 100644 index 0000000..6998d73 --- /dev/null +++ b/scripts/units/variable.js @@ -0,0 +1,13 @@ +function Variable(key,value) +{ + Unit.call(this); + + this.candidates = []; + this.key = key; + this.value = value; + + this.render = function() + { + return this.key+"="+this.value; + } +} \ No newline at end of file