diff --git a/index.html b/index.html index 05fbbea..30ef12d 100644 --- a/index.html +++ b/index.html @@ -22,9 +22,8 @@ - - - + + @@ -51,7 +50,7 @@
-
+
diff --git a/links/main.css b/links/main.css index 46d4f2f..32719d2 100644 --- a/links/main.css +++ b/links/main.css @@ -2,14 +2,14 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium" *:focus {outline: none; } #ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; } -#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;} -#surface > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;} -#surface widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; } -#surface widget span { display:inline-block; padding:2px 10px; } -#surface widget .cursor { position:absolute; bottom:0px; right:0px; } -#surface.bright widget { color:#000; } +#frame { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:5px; border:1px solid #333;} +#frame > .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;} +#frame widget { position: absolute; top:0px; left:0px; line-height: 20px; font-size:10px; z-index:9000; color:white; width:100%; height:100%; } +#frame widget span { display:inline-block; padding:2px 10px; } +#frame widget .cursor { position:absolute; bottom:0px; right:0px; } +#frame.bright widget { color:#000; } #overlay { position:absolute; z-index:1000;} -#surface { cursor:none;} +#frame { cursor:none;} #terminal { position: fixed; bottom:0px; left:0px; background:#000; width:100vw; height: 120px;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;} diff --git a/scripts/core/command.js b/scripts/core/command.js index ac1f25e..62081ef 100644 --- a/scripts/core/command.js +++ b/scripts/core/command.js @@ -94,6 +94,13 @@ function Command(content) return null; } + this.text = function() + { + var content_str = this.content.join(" "); + if(content_str.indexOf("\"") < 0){ return null; } + return content_str.split("\"")[1]; + } + this.methods = function() { var a = []; diff --git a/scripts/core/init.js b/scripts/core/init.js index 5318838..1e0e984 100644 --- a/scripts/core/init.js +++ b/scripts/core/init.js @@ -1,6 +1,6 @@ var ronin = new Ronin(); ronin.element = document.getElementById('ronin'); -ronin.surface.element = document.getElementById('surface'); +ronin.frame.element = document.getElementById('frame'); ronin.cursor.element = document.getElementById('cursor'); ronin.terminal.element = document.getElementById('terminal'); ronin.cursor.mode = ronin.brush; @@ -32,12 +32,12 @@ 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("surface.select main"); -ronin.terminal.query("surface.resize "+starting_canvas.render()); +ronin.terminal.query("frame.select main"); +ronin.terminal.query("frame.resize "+starting_canvas.render()); // ronin.terminal.query("- color=#ff0000"); // ronin.terminal.query("# fill=#ff0000"); // ronin.terminal.query("~ Ready."); ronin.terminal.input_element.focus(); ronin.terminal.update_hint(); -ronin.surface.update_widget(); \ No newline at end of file +ronin.frame.update_widget(); \ No newline at end of file diff --git a/scripts/core/keyboard.js b/scripts/core/keyboard.js index a9fc3e3..76892d6 100644 --- a/scripts/core/keyboard.js +++ b/scripts/core/keyboard.js @@ -12,7 +12,7 @@ function Keyboard() this.alt_held = true; } ronin.cursor.update(event); - ronin.surface.update_widget(); + ronin.frame.update_widget(); ronin.terminal.update_hint(); } @@ -45,7 +45,7 @@ function Keyboard() // Passive ronin.terminal.passive(ronin.terminal.input_element.value); - ronin.surface.update_widget(); + ronin.frame.update_widget(); ronin.terminal.update_hint(); }; diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index 4b18555..75dddbb 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -5,14 +5,12 @@ function Ronin() this.default = new Default("`"); - this.surface = new Surface("@"); + this.frame = new Frame("@"); this.path = new Path("+"); this.type = new Type("&"); this.brush = new Brush("-"); - // this.fileload = new FileLoad("/"); - // this.filesave = new FileSave("$"); - this.source = new Source("$"); + this.source = new Source("$"); this.eye = new Eye("*"); this.render = new Render("%"); @@ -22,14 +20,12 @@ function Ronin() this.terminal = new Terminal(">"); this.cursor = new Cursor("."); - this.modules[this.surface.constructor.name] = this.surface; + this.modules[this.frame.constructor.name] = this.frame; this.modules[this.type.constructor.name] = this.type; this.modules[this.path.constructor.name] = this.path; 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; @@ -52,17 +48,17 @@ function Ronin() this.position_in_canvas = function(e) { var x = e.clientX; - x -= (window.innerWidth - this.surface.settings["size"].width)/2; - x -= parseInt(this.surface.element.style.marginLeft) + (this.surface.settings["size"].width/2); + x -= (window.innerWidth - this.frame.settings["size"].width)/2; + x -= parseInt(this.frame.element.style.marginLeft) + (this.frame.settings["size"].width/2); var y = e.clientY; - y -= (window.innerHeight - this.surface.settings["size"].height)/2; - y -= parseInt(this.surface.element.style.marginTop) + parseInt(this.surface.settings["size"].height/2); + y -= (window.innerHeight - this.frame.settings["size"].height)/2; + y -= parseInt(this.frame.element.style.marginTop) + parseInt(this.frame.settings["size"].height/2); return new Position(x,y); } this.position_in_window = function(p) { - return new Position(p.x + parseInt(this.surface.element.style.marginLeft),p.y + parseInt(this.surface.element.style.marginTop)); + return new Position(p.x + parseInt(this.frame.element.style.marginLeft),p.y + parseInt(this.frame.element.style.marginTop)); } this.timestamp = function() diff --git a/scripts/core/widget.js b/scripts/core/widget.js index 91aa099..776cf0e 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.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.element.style.left = (window.innerWidth/2)-(ronin.frame.settings["size"].width/2); + this.element.style.top = (window.innerHeight/2)+(ronin.frame.settings["size"].height/2)+20; + this.element.style.width = ronin.frame.settings["size"].width+"px"; this.update(); } diff --git a/scripts/filters/balance.js b/scripts/filters/balance.js index 0d05e40..371e521 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.surface.active_layer.context(),cmd.color().rgb()); + this.draw(ronin.frame.active_layer.context(),cmd.color().rgb()); } this.preview = function(cmd) @@ -23,12 +23,12 @@ function Filter_Balance() this.draw = function(context = this.context(), color_rgb) { var imageObj = new Image(); - imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png'); + imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png'); - var w = ronin.surface.settings["size"].width; - var h = ronin.surface.settings["size"].height; + var w = ronin.frame.settings["size"].width; + var h = ronin.frame.settings["size"].height; - var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2); + var originalData = ronin.frame.active_layer.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 8873d53..8e882a6 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.settings["size"].width,ronin.surface.settings["size"].height); + var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width,ronin.frame.settings["size"].height); var value = cmd.value() ? cmd.value().float : 5; ronin.overlay.clear(); @@ -26,13 +26,13 @@ function Filter_Chromatic() this.draw = function(context = this.context(), value, position) { - var w = ronin.surface.settings["size"].width; - var h = ronin.surface.settings["size"].height; + var w = ronin.frame.settings["size"].width; + var h = ronin.frame.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}; - var context = ronin.surface.active_layer.context(); + var context = ronin.frame.active_layer.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); @@ -61,7 +61,7 @@ function Filter_Chromatic() this.set_color(imageData, c, i,j); } } - ronin.surface.active_layer.clear(); + ronin.frame.active_layer.clear(); context.putImageData(imageData, 0, 0); } } diff --git a/scripts/filters/filter.js b/scripts/filters/filter.js index d46daa7..ad0b2e8 100644 --- a/scripts/filters/filter.js +++ b/scripts/filters/filter.js @@ -73,11 +73,11 @@ function Filter() this.context = function() { - return ronin.surface.active_layer.context(); + return ronin.frame.active_layer.context(); } this.pixels = function() { - return ronin.surface.active_layer.context().getImageData(0,0,ronin.surface.settings["size"].width * 2,ronin.surface.settings["size"].height * 2); + return ronin.frame.active_layer.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 bfca394..2e4fe10 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.surface.active_layer.context(),cmd.color().rgb()); + this.draw(ronin.frame.active_layer.context(),cmd.color().rgb()); } else{ - this.draw(ronin.surface.active_layer.context()); + this.draw(ronin.frame.active_layer.context()); } } @@ -27,12 +27,12 @@ function Filter_Grey() this.draw = function(context = this.context(), color_rgb = new Color("#36ba0e").rgb()) { var imageObj = new Image(); - imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png'); + imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png'); - var w = ronin.surface.settings["size"].width; - var h = ronin.surface.settings["size"].height; + var w = ronin.frame.settings["size"].width; + var h = ronin.frame.settings["size"].height; - var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2); + var originalData = ronin.frame.active_layer.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 b10824f..2f4769e 100644 --- a/scripts/filters/invert.js +++ b/scripts/filters/invert.js @@ -6,11 +6,11 @@ function Filter_Invert() this.render = function(cmd) { var imageObj = new Image(); - imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png'); + imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png'); - var w = ronin.surface.settings["size"].width; - var h = ronin.surface.settings["size"].height; - var context = ronin.surface.active_layer.context(); + var w = ronin.frame.settings["size"].width; + var h = ronin.frame.settings["size"].height; + var context = ronin.frame.active_layer.context(); var originalData = context.getImageData(0, 0, w*2, h*2); var data = originalData.data; @@ -21,7 +21,7 @@ function Filter_Invert() data[i + 2] = 255 - data[i + 2]; } - ronin.surface.active_layer.clear(); + ronin.frame.active_layer.clear(); context.putImageData(originalData, 0, 0); } } \ No newline at end of file diff --git a/scripts/filters/rotate.js b/scripts/filters/rotate.js index 7ccf86e..084cb55 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.settings["size"].width/2,ronin.surface.settings["size"].height/2); + var position = cmd.position() ? cmd.position() : new Position(ronin.frame.settings["size"].width/2,ronin.frame.settings["size"].height/2); var angle = cmd.angle() ? cmd.angle().degrees : 90; ronin.overlay.clear(); @@ -23,12 +23,12 @@ function Filter_Rotate() this.draw = function(context = this.context(), angle, position) { - var w = ronin.surface.settings["size"].width; - var h = ronin.surface.settings["size"].height; + var w = ronin.frame.settings["size"].width; + var h = ronin.frame.settings["size"].height; ronin.overlay.context().drawImage(context.canvas,0,0,w,h); - ronin.surface.active_layer.clear(); + ronin.frame.active_layer.clear(); context.save(); context.translate(position.x,position.y); diff --git a/scripts/filters/sharpen.js b/scripts/filters/sharpen.js index 5d103dd..7c83656 100644 --- a/scripts/filters/sharpen.js +++ b/scripts/filters/sharpen.js @@ -7,11 +7,11 @@ function Filter_Sharpen() this.render = function(cmd) { var imageObj = new Image(); - imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png'); + imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png'); - var w = ronin.surface.settings["size"].width; - var h = ronin.surface.settings["size"].height; - var context = ronin.surface.active_layer.context(); + var w = ronin.frame.settings["size"].width; + var h = ronin.frame.settings["size"].height; + var context = ronin.frame.active_layer.context(); var originalData = context.getImageData(0, 0, w*2, h*2); var data = originalData.data; @@ -36,7 +36,7 @@ function Filter_Sharpen() newImage.data[i+2] = parseInt(average.b); } - ronin.surface.active_layer.clear(); + ronin.frame.active_layer.clear(); context.putImageData(newImage, 0, 0); } diff --git a/scripts/filters/stencil.js b/scripts/filters/stencil.js index 49914a3..8356d19 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.surface.active_layer.context(),angle,color); + this.draw(ronin.frame.active_layer.context(),angle,color); } this.preview = function(cmd) @@ -23,8 +23,8 @@ function Filter_Stencil() this.draw = function(context = this.context(), angle, color) { - var w = ronin.surface.settings["size"].width; - var h = ronin.surface.settings["size"].height; + var w = ronin.frame.settings["size"].width; + var h = ronin.frame.settings["size"].height; context.translate(w/2,h/2); diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index a63731d..47a5860 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -35,14 +35,14 @@ function Brush(rune) this.size_up = function() { this.settings["size"].float -= this.settings["size"].float > 1 ? 1 : 0; - ronin.surface.update_widget(); + ronin.frame.update_widget(); ronin.terminal.log(new Log(this,"Increased pointer size to: "+this.size)); } this.size_down = function() { this.settings["size"].float += 1; - ronin.surface.update_widget(); + ronin.frame.update_widget(); ronin.terminal.log(new Log(this,"Decreased pointer size to: "+this.size)); } @@ -62,15 +62,15 @@ function Brush(rune) var position = ronin.cursor.position; - ronin.surface.context().beginPath(); - ronin.surface.context().globalCompositeOperation="destination-out"; - 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.settings["size"].float * 5; - ronin.surface.context().strokeStyle = new Color("#ff0000").rgba(); - ronin.surface.context().stroke(); - ronin.surface.context().closePath(); + ronin.frame.context().beginPath(); + ronin.frame.context().globalCompositeOperation="destination-out"; + ronin.frame.context().moveTo(this.position_prev.x,this.position_prev.y); + ronin.frame.context().lineTo(position.x,position.y); + ronin.frame.context().lineCap="round"; + ronin.frame.context().lineWidth = this.settings["size"].float * 5; + ronin.frame.context().strokeStyle = new Color("#ff0000").rgba(); + ronin.frame.context().stroke(); + ronin.frame.context().closePath(); this.position_prev = position; } diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js index c83b380..6bb0d5a 100644 --- a/scripts/modules/brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -29,10 +29,10 @@ function Pointer(offset = new Position(), color = new Color('000000')) this.distance += position.distance_to(position_prev); - ronin.surface.context().beginPath(); + ronin.frame.context().beginPath(); - ronin.surface.context().globalCompositeOperation="source-over"; - ronin.surface.context().moveTo(position_prev.x,position_prev.y); + ronin.frame.context().globalCompositeOperation="source-over"; + ronin.frame.context().moveTo(position_prev.x,position_prev.y); //Choose direct line or curve line based on how many samples available if(this.position_prev.length > 1 && position.distance_to(position_prev) > 13){ @@ -49,17 +49,17 @@ function Pointer(offset = new Position(), color = new Color('000000')) var tx = px + (ppx - px) * 0.2 * d; var ty = py + (ppy - py) * 0.2 * d; - ronin.surface.context().quadraticCurveTo(tx,ty,position.x,position.y); + ronin.frame.context().quadraticCurveTo(tx,ty,position.x,position.y); } else { - ronin.surface.context().lineTo(position.x,position.y); + ronin.frame.context().lineTo(position.x,position.y); } - ronin.surface.context().lineCap="round"; - ronin.surface.context().lineWidth = this.thickness(); - ronin.surface.context().strokeStyle = ronin.brush.settings["color"].rgba(); - ronin.surface.context().stroke(); - ronin.surface.context().closePath(); + ronin.frame.context().lineCap="round"; + ronin.frame.context().lineWidth = this.thickness(); + ronin.frame.context().strokeStyle = ronin.brush.settings["color"].rgba(); + ronin.frame.context().stroke(); + ronin.frame.context().closePath(); this.position_prev.unshift(position); } diff --git a/scripts/modules/cursor.js b/scripts/modules/cursor.js index 911b12b..dfce4df 100644 --- a/scripts/modules/cursor.js +++ b/scripts/modules/cursor.js @@ -134,7 +134,7 @@ function Cursor(rune) // this.set_mode(ronin.module); // } // else if(event.altKey == true && event.shiftKey == true){ - // this.set_mode(ronin.surface.active_layer); + // this.set_mode(ronin.frame.active_layer); // } // else if(event.altKey == true){ // this.set_mode(ronin.default); diff --git a/scripts/modules/default.js b/scripts/modules/default.js index 89f964e..f454b2c 100644 --- a/scripts/modules/default.js +++ b/scripts/modules/default.js @@ -65,8 +65,8 @@ function Default(rune) this.drag_offset_x -= offset_x; this.drag_offset_y -= 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.frame.element.style.marginLeft = -(ronin.frame.settings["size"].width/2) + this.drag_offset_x; + ronin.frame.element.style.marginTop = -(ronin.frame.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/eye.js b/scripts/modules/eye.js index 52a917b..edf2106 100644 --- a/scripts/modules/eye.js +++ b/scripts/modules/eye.js @@ -15,7 +15,7 @@ function Eye(rune) // TODO: If a rect is given, return the average color this.color_picker = function(position,rect = null) { - var imgData = ronin.surface.context().getImageData(position.x*2, position.y*2, 1, 1).data; + var imgData = ronin.frame.context().getImageData(position.x*2, position.y*2, 1, 1).data; var c = new Color(); ronin.terminal.input_element.value = "* "+(c.rgb_to_hex(imgData)); ronin.terminal.update_hint(); diff --git a/scripts/modules/surface.js b/scripts/modules/frame.js similarity index 69% rename from scripts/modules/surface.js rename to scripts/modules/frame.js index 5b521bd..cca7675 100644 --- a/scripts/modules/surface.js +++ b/scripts/modules/frame.js @@ -1,4 +1,4 @@ -function Surface(rune) +function Frame(rune) { Module.call(this,rune); @@ -28,16 +28,16 @@ function Surface(rune) this.settings["size"] = params.rect(); - for(layer_name in ronin.surface.layers){ - ronin.surface.layers[layer_name].resize(this.settings["size"]); + for(layer_name in ronin.frame.layers){ + ronin.frame.layers[layer_name].resize(this.settings["size"]); } - ronin.surface.element.width = this.settings["size"].width * 2; - ronin.surface.element.height = this.settings["size"].height * 2; - ronin.surface.element.style.width = this.settings["size"].width+"px"; - ronin.surface.element.style.height = this.settings["size"].height+"px"; - ronin.surface.element.style.marginLeft = -(this.settings["size"].width/2); - ronin.surface.element.style.marginTop = -(this.settings["size"].height/2); + ronin.frame.element.width = this.settings["size"].width * 2; + ronin.frame.element.height = this.settings["size"].height * 2; + ronin.frame.element.style.width = this.settings["size"].width+"px"; + ronin.frame.element.style.height = this.settings["size"].height+"px"; + ronin.frame.element.style.marginLeft = -(this.settings["size"].width/2); + ronin.frame.element.style.marginTop = -(this.settings["size"].height/2); ronin.on_resize(); ronin.terminal.log(new Log(this,"Resized Surface to "+this.settings["size"].render())); @@ -56,7 +56,7 @@ function Surface(rune) this.select = function(params) { var layer_name = params.content; - if(!ronin.surface.layers[layer_name]){ + if(!ronin.frame.layers[layer_name]){ this.add_layer(new Layer(layer_name)); } this.select_layer(this.layers[layer_name]); @@ -68,10 +68,10 @@ function Surface(rune) this.blink = function() { - Object.keys(ronin.surface.layers).forEach(function (key) { - ronin.surface.layers[key].blink(); + Object.keys(ronin.frame.layers).forEach(function (key) { + ronin.frame.layers[key].blink(); }); - setTimeout(function(){ ronin.surface.blink(); }, 30); + setTimeout(function(){ ronin.frame.blink(); }, 30); } this.select_layer = function(layer) @@ -81,8 +81,8 @@ function Surface(rune) this.select_any_layer = function() { - var layer_name = Object.keys(ronin.surface.layers)[0]; - this.select_layer(ronin.surface.layers[layer_name]); + var layer_name = Object.keys(ronin.frame.layers)[0]; + this.select_layer(ronin.frame.layers[layer_name]); } this.add_layer = function(layer) @@ -117,14 +117,14 @@ function Surface(rune) s += ""+ronin.cursor.mode.mouse_mode()+""; - var keys = Object.keys(ronin.surface.layers); + var keys = Object.keys(ronin.frame.layers); var loc = keys.indexOf(this.active_layer.name); if(keys.length > 1){ - s += ""+ronin.surface.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")"; + s += ""+ronin.frame.active_layer.widget()+"("+(loc+1)+"/"+keys.length+")"; } else{ - s += ""+ronin.surface.active_layer.widget()+""; + s += ""+ronin.frame.active_layer.widget()+""; } this.widget_element.innerHTML = s; @@ -134,20 +134,20 @@ function Surface(rune) this.layer_up = function() { - var keys = Object.keys(ronin.surface.layers); + var keys = Object.keys(ronin.frame.layers); var loc = keys.indexOf(this.active_layer.name); if(loc >= keys.length-1){ console.log("Reached end"); return false; } - if(keys[loc+1] != null){this.select_layer(ronin.surface.layers[keys[loc+1]]);} + if(keys[loc+1] != null){this.select_layer(ronin.frame.layers[keys[loc+1]]);} } this.layer_down = function() { - var keys = Object.keys(ronin.surface.layers); + var keys = Object.keys(ronin.frame.layers); var loc = keys.indexOf(this.active_layer.name); - if(keys[loc-1] != null){this.select_layer(ronin.surface.layers[keys[loc-1]]);} + if(keys[loc-1] != null){this.select_layer(ronin.frame.layers[keys[loc-1]]);} } // this.passive = function(cmd) @@ -180,7 +180,7 @@ function Surface(rune) this.mouse_move = function(position,rect) { - ronin.terminal.input_element.value = "surface."+ronin.terminal.method_name+" "+this.mouse_from.render()+" "+rect.render()+" "; + ronin.terminal.input_element.value = "frame."+ronin.terminal.method_name+" "+this.mouse_from.render()+" "+rect.render()+" "; ronin.terminal.passive(); } diff --git a/scripts/modules/surface.layer.js b/scripts/modules/layer.js similarity index 72% rename from scripts/modules/surface.layer.js rename to scripts/modules/layer.js index 22a6b5b..198e623 100644 --- a/scripts/modules/surface.layer.js +++ b/scripts/modules/layer.js @@ -3,6 +3,7 @@ function Layer(name,manager = null) Module.call(this,"#"); this.add_method(new Method("fill",["color","position","rect"],"Add position")); + this.add_method(new Method("rename",["text"])); this.name = name; this.rune = "#"; @@ -16,14 +17,24 @@ function Layer(name,manager = null) if(preview){ return; } if(!params.color()){ return; } + var rect = params.rect() ? params.rect() : new Rect(this.element.width+"x"+this.element.height); + var position = params.position() ? params.position() : new Position("0,0"); + this.context().beginPath(); - this.context().rect(0, 0, this.element.width, this.element.height); + this.context().rect(position.x, position.y, rect.width, rect.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()); + ronin.terminal.log(new Log(this,"Filled layer "+this.name+": "+params.color().hex)); + } + this.rename = function(params, preview = false) + { + if(preview){ return; } + + // TODO + // ronin.frame.layers[params.text()] = this; + // ronin.frame.layers[this.name] = null; + ronin.terminal.log(new Log(this,"Renamed layer "+this.name+" to "+params.text())); } this.resize = function(rect) @@ -49,8 +60,8 @@ function Layer(name,manager = null) { ronin.terminal.log(new Log(this,"Removing layer "+this.name)); manager.layer = null; - ronin.surface.layers[this.name].element.outerHTML = ""; - delete ronin.surface.layers[this.name]; + ronin.frame.layers[this.name].element.outerHTML = ""; + delete ronin.frame.layers[this.name]; } this.context = function() @@ -70,7 +81,7 @@ function Layer(name,manager = null) var e_name = this.name; var e_class = ""; - if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; } + if(ronin.frame.active_layer.name == this.name){ e_class += "highlight "; } if(this.manager != null){ e_class += "managed "; } return ""+e_name+""; @@ -102,7 +113,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.settings["size"].width * 2, ronin.surface.settings["size"].height * 2); + 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); diff --git a/scripts/modules/magnet.js b/scripts/modules/magnet.js index 9a4eda4..50feb5c 100644 --- a/scripts/modules/magnet.js +++ b/scripts/modules/magnet.js @@ -39,8 +39,8 @@ function Magnet(rune) if(rect.width < 5 || rect.height < 5){ return; } - var horizontal = ronin.surface.settings["size"].width/rect.width; - var vertical = ronin.surface.settings["size"].height/rect.height; + var horizontal = ronin.frame.settings["size"].width/rect.width; + var vertical = ronin.frame.settings["size"].height/rect.height; for (var x = 1; x < horizontal; x++) { for (var y = 1; y < vertical; y++) { diff --git a/scripts/modules/module.js b/scripts/modules/module.js index a5327f5..0c9d83d 100644 --- a/scripts/modules/module.js +++ b/scripts/modules/module.js @@ -22,7 +22,7 @@ function Module(rune) { this.layer = new Layer(this.constructor.name+".Preview",this); this.layer.element.setAttribute("style","z-index:7000"); - ronin.surface.add_layer(this.layer); + ronin.frame.add_layer(this.layer); } this.get_layer = function(is_blinking = false) @@ -150,12 +150,12 @@ function Module(rune) this.key_arrow_up = function() { - ronin.surface.layer_up(); + ronin.frame.layer_up(); } this.key_arrow_down = function() { - ronin.surface.layer_down(); + ronin.frame.layer_down(); } this.key_arrow_left = function() diff --git a/scripts/modules/path.js b/scripts/modules/path.js index cf2310b..1fff675 100644 --- a/scripts/modules/path.js +++ b/scripts/modules/path.js @@ -49,7 +49,7 @@ function Path(rune) { var s = ""; - s += ""; + s += ""; for (var i = 0; i < this.paths.length; i++) { s += ""; diff --git a/scripts/modules/source.js b/scripts/modules/source.js index 2f376a8..9030da8 100644 --- a/scripts/modules/source.js +++ b/scripts/modules/source.js @@ -35,7 +35,7 @@ function Source(rune) 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); + ronin.frame.context().drawImage(base_image, position.x, position.y, width, height); } } @@ -52,7 +52,7 @@ function Source(rune) w.document.write("Untitled"+ronin.path.create_svg()+""); } else if(params.setting("format") && params.setting("format").value == "jpg"){ - w.document.write("Untitled"); + w.document.write("Untitled"); } else if(params.setting("format") && params.setting("format").value == "rin"){ var w = window.open('about:blank','source'); @@ -62,7 +62,7 @@ function Source(rune) } else{ console.log("!!") - w.document.write("Untitled"); + w.document.write("Untitled"); } this.layer.remove(this); @@ -71,12 +71,12 @@ function Source(rune) 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(layer_name in ronin.frame.layers){ + if(ronin.frame.layers[layer_name].manager){ continue; } + a.push(ronin.frame.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); + this.layer.context().drawImage(a[i].context().canvas,0,0,ronin.frame.settings["size"].width,ronin.frame.settings["size"].height); } return this.layer; } diff --git a/scripts/modules/type.js b/scripts/modules/type.js index 08b1b08..36fb6e4 100644 --- a/scripts/modules/type.js +++ b/scripts/modules/type.js @@ -12,15 +12,16 @@ function Type(rune) this.layer.clear(); - var text = "Hello.".replace("_"," "); + 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"; - this.layer.context().font = size+"px "+font; - this.layer.context().fillStyle = color.hex; - this.layer.context().fillText(text,position.x,position.y); + 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); } // Mouse