diff --git a/index.html b/index.html index d5a9ea7..05fbbea 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ - + diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index 35bf471..4b18555 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -4,32 +4,39 @@ function Ronin() this.element = null; this.default = new Default("`"); + this.surface = new Surface("@"); - this.fileload = new FileLoad("/"); - this.filesave = new FileSave("$"); - this.overlay = new Overlay("|"); - this.brush = new Brush("-"); - this.eye = new Eye("*"); - this.render = new Render("%"); this.path = new Path("+"); this.type = new Type("&"); - this.cursor = new Cursor("."); - this.terminal = new Terminal(">"); + this.brush = new Brush("-"); + + // this.fileload = new FileLoad("/"); + // this.filesave = new FileSave("$"); + this.source = new Source("$"); + + this.eye = new Eye("*"); + this.render = new Render("%"); this.magnet = new Magnet("^"); + + this.overlay = new Overlay("|"); + this.terminal = new Terminal(">"); + this.cursor = new Cursor("."); this.modules[this.surface.constructor.name] = this.surface; - this.modules[this.fileload.constructor.name] = this.fileload; - this.modules[this.filesave.constructor.name] = this.filesave; - this.modules[this.render.constructor.name] = this.render; - this.modules[this.brush.constructor.name] = this.brush; - this.modules[this.eye.constructor.name] = this.eye; this.modules[this.type.constructor.name] = this.type; this.modules[this.path.constructor.name] = this.path; - this.modules[this.terminal.constructor.name] = this.terminal; - this.modules[this.overlay.constructor.name] = this.overlay; - this.modules[this.magnet.constructor.name] = this.magnet; + + this.modules[this.brush.constructor.name] = this.brush; + + // this.modules[this.fileload.constructor.name] = this.fileload; + // this.modules[this.filesave.constructor.name] = this.filesave; + 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; // diff --git a/scripts/modules/file.load.js b/scripts/modules/file.load.js deleted file mode 100644 index e9ea970..0000000 --- a/scripts/modules/file.load.js +++ /dev/null @@ -1,66 +0,0 @@ -function FileLoad(rune) -{ - Module.call(this,rune); - - this.parameters = [Filepath,Position,Rect]; - - this.active = function(cmd) - { - ronin.overlay.clear(); - - if(!cmd.filepath() && !cmd.value()){ ronin.terminal.log(new Log(this,"Missing image path.","error")); return; } - - var position = cmd.position() ? cmd.position() : new Position(); - - base_image = new Image(); - base_image.src = cmd.filepath().path; - base_image.src += '?'+new Date().getTime(); - base_image.crossOrigin = "Anonymous"; - - base_image.onload = function(){ - var width = base_image.naturalWidth; - var height = base_image.naturalHeight; - if(cmd.rect()){ - width = cmd.rect().width; - height = cmd.rect().height; - position.normalize(cmd.rect()); - } - // Scale with only 1 unit - width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width; - height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height; - - ronin.surface.context().drawImage(base_image, position.x, position.y, width, height); - } - } - - this.passive = function(cmd) - { - ronin.overlay.draw(cmd.position(),cmd.rect()); - } - - this.mouse_mode = function() - { - return "Place"; - } - - this.mouse_down = function(position) - { - ronin.overlay.draw(position); - ronin.terminal.input_element.value = "/ "+position.render(); - ronin.terminal.update_hint(); - } - - this.mouse_move = function(position,rect) - { - ronin.overlay.draw(this.mouse_from,rect); - ronin.terminal.input_element.value = "/ "+this.mouse_from.render()+" "+rect.render(); - ronin.terminal.update_hint(); - } - - this.mouse_up = function(position,rect) - { - ronin.overlay.draw(this.mouse_from,rect); - ronin.terminal.input_element.value = "/ "+this.mouse_from.render()+" "+rect.render(); - ronin.terminal.update_hint(); - } -} \ No newline at end of file diff --git a/scripts/modules/file.save.js b/scripts/modules/file.save.js deleted file mode 100644 index aa62b45..0000000 --- a/scripts/modules/file.save.js +++ /dev/null @@ -1,50 +0,0 @@ -function FileSave(rune) -{ - Module.call(this,rune); - - this.parameters = []; - this.variables = {"format" : "[png/jpg/svg/rin]"}; - - this.docs = "Creates a new window with a image of the resulting canvas in the specified format."; - - this.active = function(cmd) - { - if(!this.layer){ this.create_layer(); } - - var d = null; - - var w = window.open('about:blank','image from canvas'); - - if(cmd.setting("format") && cmd.setting("format").value == "svg"){ - w.document.write("Untitled"+ronin.path.create_svg()+""); - } - else if(cmd.setting("format") && cmd.setting("format").value == "jpg"){ - w.document.write("Untitled"); - } - 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"); - } - - this.layer.remove(this); - } - - this.merge = function() - { - var a = []; - Object.keys(ronin.surface.layers).forEach(function (key) { - if(!ronin.surface.layers[key].manager){ - a.push(ronin.surface.layers[key]); - } - }); - for (i = 0; i < a.length; i++) { - this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.surface.settings["size"].width,ronin.surface.settings["size"].height); - } - return this.layer; - } -} \ No newline at end of file diff --git a/scripts/modules/source.js b/scripts/modules/source.js new file mode 100644 index 0000000..2f376a8 --- /dev/null +++ b/scripts/modules/source.js @@ -0,0 +1,83 @@ +function Source(rune) +{ + Module.call(this,rune); + + this.parameters = [Filepath,Position,Rect]; + + this.add_method(new Method("save",["name"],"Add point")); + this.add_method(new Method("load",["path","position","rect"]),"Add point"); + + this.load = function(params,preview = false) // source.load ../assets/todo.jpg 200x200 40,40 + { + if(!params.filepath() || !params.rect() || !params.position()){ ronin.terminal.log(new Log(this,"Missing image path.","error")); return; } + + console.log("OK"); + + ronin.overlay.get_layer(true).clear(); + ronin.overlay.draw_rect(params.position(),params.rect()); + + var position = params.position() ? params.position() : new Position(); + + base_image = new Image(); + base_image.src = params.filepath().path; + base_image.src += '?'+new Date().getTime(); + base_image.crossOrigin = "Anonymous"; + + base_image.onload = function(){ + var width = base_image.naturalWidth; + var height = base_image.naturalHeight; + if(params.rect()){ + width = params.rect().width; + height = params.rect().height; + position.normalize(params.rect()); + } + // Scale with only 1 unit + width = isNaN(width) && height > 0 ? (height*base_image.naturalWidth)/base_image.naturalHeight : width; + height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height; + + ronin.surface.context().drawImage(base_image, position.x, position.y, width, height); + } + } + + this.save = function(params,preview = false) + { + if(preview){ return; } + if(!this.layer){ this.create_layer(); } + + var d = null; + + var w = window.open('about:blank','image from canvas'); + + if(params.setting("format") && params.setting("format").value == "svg"){ + w.document.write("Untitled"+ronin.path.create_svg()+""); + } + else if(params.setting("format") && params.setting("format").value == "jpg"){ + w.document.write("Untitled"); + } + else if(params.setting("format") && params.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{ + console.log("!!") + w.document.write("Untitled"); + } + + this.layer.remove(this); + } + + this.merge = function() + { + var a = []; + for(layer_name in ronin.surface.layers){ + if(ronin.surface.layers[layer_name].manager){ continue; } + a.push(ronin.surface.layers[layer_name]); + } + for (i = 0; i < a.length; i++) { + this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.surface.settings["size"].width,ronin.surface.settings["size"].height); + } + return this.layer; + } +} \ No newline at end of file diff --git a/scripts/modules/surface.js b/scripts/modules/surface.js index 496560c..5b521bd 100644 --- a/scripts/modules/surface.js +++ b/scripts/modules/surface.js @@ -60,6 +60,8 @@ function Surface(rune) this.add_layer(new Layer(layer_name)); } this.select_layer(this.layers[layer_name]); + ronin.modules["layer"] = this.layers[layer_name]; + ronin.layer = this.layers[layer_name]; } // Misc diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js index 2278b23..22a6b5b 100644 --- a/scripts/modules/surface.layer.js +++ b/scripts/modules/surface.layer.js @@ -2,6 +2,8 @@ function Layer(name,manager = null) { Module.call(this,"#"); + this.add_method(new Method("fill",["color","position","rect"],"Add position")); + this.name = name; this.rune = "#"; this.manager = manager; @@ -9,6 +11,21 @@ function Layer(name,manager = null) this.element.setAttribute("id","_"+name); this.element.setAttribute("class","layer"); + this.fill = function(params,preview = false) + { + if(preview){ return; } + if(!params.color()){ return; } + + this.context().beginPath(); + this.context().rect(0, 0, this.element.width, this.element.height); + this.context().fillStyle = params.color().hex; + this.context().fill(); + ronin.terminal.log(new Log(this,"Filled layer: "+params.color().hex)); + this.element.style.border = "1px solid "+params.color().hex; + this.element.setAttribute("class",params.color().style()); + + } + this.resize = function(rect) { ronin.terminal.log(new Log(this,"Resize "+this.name+" to "+rect.render())); @@ -23,17 +40,6 @@ 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); diff --git a/scripts/modules/type.js b/scripts/modules/type.js index 8f6f829..08b1b08 100644 --- a/scripts/modules/type.js +++ b/scripts/modules/type.js @@ -10,13 +10,11 @@ function Type(rune) { if(!this.layer){ this.create_layer(); this.layer.is_blinking = true; } - var command = new Command(params); - this.layer.clear(); - var text = "Hello there.".replace("_"," "); - var position = command.position() ? command.position() : new Position(40,80); - var color = new Color("#ffffff"); + var text = "Hello.".replace("_"," "); + 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";