Fuck folder structure, all sources are open.

scripts/modules/brush.js

@@ -0,0 +1,125 @@
+function Brush(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Position,Rect,Angle,Color,Value,Bang];
+  this.variables  = {"natural" : false,"banking" : false};
+  this.pointers = [];
+  
+  this.size = 1;
+  this.opacity = 1;
+  this.color = new Color();
+  
+  // Module
+  
+  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.update_variables(cmd);
+  }
+  
+  this.passive = function(cmd)
+  {
+    if(cmd.rect()){
+      var x = isNaN(cmd.rect().width) ? 0 : cmd.rect().width;
+      var y = isNaN(cmd.rect().height) ? 0 : cmd.rect().height;
+      var pos = new Position(x+","+y);
+      ronin.overlay.draw(pos);
+    }
+    if(cmd.angle() && cmd.position()){
+      ronin.overlay.draw(cmd.position());
+    }
+  }
+
+  this.size_up = function()
+  {
+    this.size -= this.size > 1 ? 1 : 0;
+    ronin.widget.update();
+  }
+
+  this.size_down = function()
+  {
+     this.size += 1;
+     ronin.widget.update();
+  }
+  
+  this.add_pointer = function(cmd)
+  {
+    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();
+    }
+    
+    this.pointers.push(pointer);
+  }
+  
+  this.widget_cursor = function()
+  {
+    var s = "> "+this.size+" "+this.color.hex+"<br />";
+
+    for (i = 0; i < ronin.brush.pointers.length; i++) {
+      s += ronin.brush.pointers[i].widget();
+    }
+    return s;
+
+    return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers";
+  }
+  
+  // Cursor
+
+  this.is_drawing = false;
+  
+  this.mouse_down = function(position)
+  {
+    this.is_drawing = true;
+    
+    for (i = 0; i < ronin.brush.pointers.length; i++) {
+      ronin.brush.pointers[i].start();
+    }
+    
+    ronin.stroke.new_stroke();
+  }
+  
+  this.mouse_move = function(position)
+  {
+    if(this.is_drawing === false){ return; }
+  
+    for (i = 0; i < ronin.brush.pointers.length; i++) {
+      ronin.brush.pointers[i].draw();
+    }
+    
+    ronin.stroke.append_stroke(position);
+  }
+  
+  this.mouse_up = function(position)
+  {
+    this.is_drawing = false;
+    
+    for (i = 0; i < ronin.brush.pointers.length; i++) {
+      ronin.brush.pointers[i].stop();
+    }
+    
+    ronin.stroke.save_stroke("brush");
+  }
+}

scripts/modules/brush.pointer.js

@@ -0,0 +1,123 @@
+function Pointer(offset = new Position(), color = new Color('000000'))
+{
+  this.offset = offset;
+  this.mirror = null;
+  this.position_prev = null;
+  this.angle = null;
+  this.distance = 0;
+  
+  // Parameters
+
+  this.thickness = function()
+  {
+    var ratio = 10/this.position().distance_to(this.position_prev[0]);
+    ratio = ratio > 1 ? 1 : ratio;
+    return ronin.brush.size * ratio;
+  }
+  
+  //
+
+  this.draw = function()
+  {
+    if(!this.position_prev){this.position_prev = [this.position()]; return; }
+
+    var position = this.position();
+    var position_prev = this.position_prev[0];
+
+    //remove stale previous positions
+    if (this.position_prev.length > 3) this.position_prev.pop();
+
+    this.distance += position.distance_to(position_prev);
+
+    ronin.surface.context().beginPath();
+
+    ronin.surface.context().globalCompositeOperation="source-over";
+    ronin.surface.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){
+
+      var d =
+      position.distance_to(position_prev)/
+      position_prev.distance_to(this.position_prev[1]);
+
+      //caluclate a control point for the quad curve
+      var ppx = position_prev.x - (this.position_prev[1].x - position_prev.x);
+      var ppy = position_prev.y - (this.position_prev[1].y - position_prev.y);
+      var px = (position.x + position_prev.x)/2;
+      var py = (position.y + position_prev.y)/2;
+      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);
+    }
+    else {
+      ronin.surface.context().lineTo(position.x,position.y);
+    }
+
+    ronin.surface.context().lineCap="round";
+    ronin.surface.context().lineWidth = this.thickness();
+    ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
+    ronin.surface.context().stroke();
+    ronin.surface.context().closePath();
+
+    this.position_prev.unshift(position);
+  }
+  
+  this.position = function()
+  {
+    if(this.angle && this.offset){
+      return this.position_rotation();
+    }
+    else if(this.mirror && this.mirror.width > 0){
+      return this.position_mirror_x();
+    }
+    else if(this.mirror && this.mirror.height > 0){
+      return this.position_mirror_y();
+    }
+    return this.position_default();
+  }
+  
+  // Effects
+  
+  this.position_default = function()
+  {
+    return ronin.cursor.position.add(this.offset);
+  }
+  
+  this.position_mirror_x = function()
+  {
+    return new Position((2 * this.mirror.width) - (ronin.cursor.position.x + this.offset.x), 0 + (ronin.cursor.position.y + this.offset.y));
+  }
+  
+  this.position_mirror_y = function()
+  {
+    return new Position((ronin.cursor.position.x + this.offset.x), (2 * this.mirror.height) - (ronin.cursor.position.y + this.offset.y));
+  }
+  
+  this.position_rotation = function()
+  {
+    var angle_radian = this.angle.degrees * Math.PI / 180;
+    var deltaX = ronin.cursor.position.x - this.offset.x;
+    var deltaY = ronin.cursor.position.y - this.offset.y;
+    var t = Math.atan2(deltaY, deltaX) + angle_radian;
+    var radius = ronin.cursor.position.distance_to(this.offset);
+    var x = Math.cos(t) * radius;
+    var y = Math.sin(t) * radius;
+    return new Position(x + this.offset.x,y + this.offset.y);
+  }
+  
+  this.start = function()
+  {
+  }
+  
+  this.stop = function()
+  {
+    this.position_prev = null;
+  }
+
+  this.widget = function()
+  {
+    return this.offset.render()+"<br />";
+  }
+}

scripts/modules/eraser.js

@@ -0,0 +1,79 @@
+function Eraser(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Value];
+  this.size = 5;
+  
+  // Module
+  
+  this.position_prev = null;
+  
+  this.draw = function()
+  {
+    if(!this.position_prev){this.position_prev = ronin.cursor.position; }
+    if(ronin.brush.size < 0){ this.erase(); return; }
+    
+    var position = ronin.cursor.position;
+    
+    this.distance += position.distance_to(this.position_prev);
+    
+    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.size;
+    ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
+    ronin.surface.context().stroke();
+    ronin.surface.context().closePath();
+    
+    this.position_prev = position;
+  }
+  
+  this.active = function(cmd)
+  {
+    if(cmd.value()){
+      this.size = cmd.value().float;
+    }
+  }
+  
+  this.passive = function(cmd)
+  {
+    
+  }
+
+  this.widget_cursor = function()
+  {
+    return ". "+this.size;
+  }
+  
+  // Cursor
+
+  this.is_drawing = false;
+  
+  this.mouse_down = function(position)
+  {
+    this.is_drawing = true;
+    this.position_prev = null;
+    
+    ronin.stroke.new_stroke();
+  }
+  
+  this.mouse_move = function(position)
+  {
+    if(this.is_drawing === false){ return; }
+  
+    this.draw();
+    
+    ronin.stroke.append_stroke(position);
+  }
+  
+  this.mouse_up = function(position)
+  {
+    this.is_drawing = false;
+    this.position_prev = null;
+    
+    ronin.stroke.save_stroke("eraser");
+  }
+}

scripts/modules/eye.js

@@ -0,0 +1,45 @@
+function Eye(rune)
+{
+  Module.call(this,rune);
+  
+  // Module
+  
+  this.active = function(cmd)
+  {
+  }
+  
+  this.passive = function(cmd)
+  {
+  }
+  
+  this.widget_cursor = function()
+  {
+    return "Eye";
+  }
+  
+  this.color_picker = function(position)
+  {
+    var imgData = ronin.surface.context().getImageData(position.x, position.y, 1, 1).data;
+    var c = new Color();
+    commander.show();
+    commander.element_input.focus();
+    commander.element_input.value = "> "+(c.rgb_to_hex(imgData));
+  }
+  
+  // Cursor
+  
+  this.mouse_down = function(position)
+  {
+    this.color_picker(position);
+  }
+  
+  this.mouse_move = function(position)
+  {
+    this.color_picker(position);
+  }
+  
+  this.mouse_up = function(position)
+  {
+    this.color_picker(position);
+  }
+}

scripts/modules/file.load.js

@@ -0,0 +1,49 @@
+function FileLoad(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Filepath,Position,Rect];
+  
+  this.active = function(cmd)
+  {
+    ronin.overlay.clear();
+    
+    if(!cmd.filepath() && !cmd.value()){ 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)
+  {
+    if(!cmd.filepath() && !cmd.value()){ return; }
+    
+    var position = cmd.position() ? cmd.position() : new Position();
+    
+    if(position && cmd.rect()){
+      ronin.overlay.draw(position,cmd.rect());
+    }
+    else if(position){
+      ronin.overlay.draw(position);
+    }
+  }
+}

scripts/modules/file.save.js

@@ -0,0 +1,47 @@
+function FileSave(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [];
+  this.variables  = {"format" : "[png/jpg]"};
+
+  this.docs = "Creates a new window with a image of the resulting canvas in the specified format.";
+  
+  this.layer = null;
+
+  this.install = function()
+  {
+    this.layer = new Layer("Save.Export",this);
+    ronin.surface.add_layer(this.layer);
+  }
+
+  this.active = function(cmd)
+  {
+    var d = null;
+
+    if(cmd.variable("format") && cmd.variable("format").value == "jpg"){
+      var d = this.merge().element.toDataURL('image/jpeg');
+    }
+    else{
+      var d = this.merge().element.toDataURL('image/png');
+    }
+    
+    var w = window.open('about:blank','image from canvas');
+    w.document.write("<title>Untitled</title><body><img src='"+d+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
+    this.layer.clear();
+  }
+
+  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.size.width,ronin.surface.size.height);
+    }
+    return this.layer;
+  }
+}

scripts/modules/help.js

@@ -0,0 +1,125 @@
+function Help(rune)
+{
+  Module.call(this,rune);
+  
+  this.active = function(cmd)
+  {
+    var w = window.open('about:blank','image from canvas');
+    var html = "";
+    html += this.view_intro();
+    html += this.view_controls();
+    html += this.view_modules();
+    html += this.view_filters();
+    html += this.view_units();
+    html += this.view_presets();
+    w.document.write("<title>Help</title><style>body { font-size:11px;background:#111; color:#fff; padding:20px; overflow-x:hidden} pre { font-family:Monaco,Courier} pre div{ border-left:5px solid #222; padding-left:20px;} pre div b { text-decoration:underline; color:#999; font-weight:normal} pre div i { font-style:normal; color:#72dec2}</style><pre>"+html+"</pre>");
+  }
+  
+  //
+
+  this.view_intro = function()
+  {
+    var html = "Ronin\n\n";
+    html += "<div>Ronin is a drawing application and visual language. \nLaunch Ronin and press <b>:</b> to display the command prompt.</div>\n";
+
+    return html;
+  }
+
+  this.view_controls = function()
+  {
+    html = "Controls\n\n";
+    html += "<div>";
+    html += pad("ctrl",20)+"Draw Overlays\n";
+    html += pad("alt",20)+"Drag Surface\n";
+    html += pad("shift",20)+"Erase\n";
+    html += pad("shift+ctrl",20)+"Eyedrop\n";
+    html += pad("shift+alt",20)+"Move Layer\n";
+    html += "</div>";
+    html += "\n";
+    return html;
+  }
+  
+  this.view_modules = function()
+  {
+    html = "Modules\n\n";
+    html += "<div>";
+    Object.keys(ronin.modules).forEach(function (key) {
+      var parameters = "";
+      html += pad("<i>"+key+"</i> "+ronin.modules[key].constructor.name,27);
+      for (i = 0; i < ronin.modules[key].parameters.length; i++) {
+        html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
+      }
+      html += "\n";
+    });
+    html += "</div>";
+    html += "\n";
+    
+    return html;
+  }
+
+  this.view_filters = function()
+  {
+    html = "Filters\n\n";
+    html += "<div>";
+    for(var filter in ronin.modules["%"].collection){
+      html += pad(filter,20);
+      for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
+        html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
+      }
+      html += "\n";
+    }
+    html += "</div>";
+    html += "\n";
+    return html
+  }
+
+  this.view_units = function()
+  {
+    html = "Units\n\n";
+    html += "<div>";
+    html += pad("5",20)+"value: 5\n";
+    html += pad("5,7",20)+"position: 5x 7y\n";
+    html += pad("7x9",20)+"rect: 5w 7h\n";
+    html += pad("#ff0000",20)+"color: red\n";
+    html += pad("45'",20)+"degree: 45/365\n";
+    html += pad("rate=10",20)+"variable: rate=10\n";
+    html += "</div>";
+    html += "\n";
+    return html;
+  }
+
+  this.view_presets = function()
+  {
+    html = "Presets\n\n";
+    html += "<div>";
+    html += "Brushes\n";
+    html += pad("Radial Brush(8)",20)+"> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'\n";
+    html += pad("Radial Brush(6)",20)+"> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'\n";
+    html += pad("Symmetric Brush(XY)",20)+"> 400x 3\n";
+    html += pad("Angular brush",20)+"> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;\n";
+
+    html += "\nGraphics\n";
+    html += pad("Watermark",20)+"# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,640\n";
+    html += pad("Ronin Logo",20)+"+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black\n";
+    html += pad("Circle",20)+"+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\n";
+    html += pad("Multiple Circles",20)+"+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0\n";
+
+    html += "\nFilters\n";
+    html += pad("Darken",20)+"# 640x360 ; / ../assets/photo.jpg 640x 0,0 ; % balance #333333\n";
+    html += pad("Desaturate",20)+"# 640x360 ; / ../assets/photo.jpg 640x 0,0 ; % saturation #333333\n";
+    
+    html += "</div>";
+    return html;
+  }
+  
+  function pad(s,length)
+  {
+    if(!s){ return s; }
+    
+    var new_string = s;
+    while(new_string.length < length){
+      new_string += " ";
+    }
+    return new_string;
+  }
+}

scripts/modules/history.js

@@ -0,0 +1,30 @@
+function History(rune)
+{
+  Module.call(this,rune);
+  
+  this.cmds = [];
+  
+  this.active = function(cmd)
+  {
+    var w = window.open('about:blank','source');
+    var html = "";
+    
+    for (i = 0; i < this.cmds.length; i++) {
+      if(this.cmds[i][0] == this.rune){ continue; }
+      html += this.cmds[i]+";<br />";
+    }
+    w.document.write("<title>Source</title><style>body { font-family:courier}</style>"+html+"");
+  }
+  
+  this.add = function(content)
+  {
+    this.cmds.push(content);
+  }
+  
+  this.widget = function()
+  {
+    if(this.cmds.length === 0){ return "";}
+  
+    return "^ "+this.cmds.length+" ";
+  }
+}

scripts/modules/module.js

@@ -0,0 +1,91 @@
+function Module(rune)
+{
+  this.rune = rune;
+  this.element = null;
+  this.parameters = [];
+  this.variables  = {};
+
+  this.docs = "Missing documentation.";
+  
+  this.install = function()
+  {
+    console.log("Installing "+ronin.modules[this.rune].constructor.name);
+  }
+
+  this.active = function(cmd)
+  {
+    console.log("Nothing to do.");
+  }
+  
+  this.passive = function(cmd)
+  {
+    console.log("Nothing to do.");
+  }
+  
+  this.update_variables = function(cmd)
+  {
+    for (var key in this.variables){
+      if(!cmd.variable(key)){ continue; }
+      this.variables[key] = cmd.variable(key).value;
+    }
+  }
+  
+  this.hint = function(cmd)
+  {
+    var s = this.pad(cmd.content.join(" "));
+
+    s += cmd.content.join(" ").length == 0 ? "<span class='module'>"+this.constructor.name+"</span>" : "";
+
+    // Params
+
+    var e = 0;
+    while(e < 10){
+      if(!this.parameters[e]){ break; }
+      var param_name = this.parameters[e].name;
+      s += cmd[param_name.toLowerCase()]() ? "" : "<span class='param'>"+param_name+"</span>";
+      e += 1;
+    }
+
+    // Variables
+    if(this.variables){
+      for (var key in this.variables){
+        if(cmd.variable(key)){continue;}
+        s += "<span class='variable_key'>"+key+"</span>=<span class='variable_value'>"+this.variables[key]+"</span> ";
+      }
+    }
+    
+    return s;
+  }
+
+  this.pad = function(input)
+  {
+    var s = "";
+    for (i = 0; i < input.length+2; i++){
+      s += "_";
+    }
+
+    return "<span style='color:#000'>"+s+"</span>";
+  }
+  
+  this.widget = function()
+  {
+    return "";
+  }
+  
+  this.widget_cursor = function()
+  {
+    return "Missing";
+  }
+  
+  this.mouse_down = function(position)
+  {
+  }
+  
+  this.mouse_move = function(position)
+  {
+  }
+  
+  this.mouse_up = function(position)
+  {
+  }
+}

scripts/modules/overlay.js

@@ -0,0 +1,163 @@
+function Overlay(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Position,Rect,Color];
+  
+  this.color = new Color("#ffffff");
+  this.layer = null;
+
+  this.install = function()
+  {
+    this.layer = new Layer("Overlay.Guide",this);
+    this.layer.element.setAttribute("style","z-index:9000");
+    ronin.surface.add_layer(this.layer);
+  }
+
+  this.passive = function(cmd)
+  {
+    this.draw(cmd.position(),cmd.rect());
+  }
+  
+  this.active = function(cmd)
+  {
+    if(cmd.bang()){ this.guides = []; }
+    if(cmd.color()){ this.color = cmd.color(); }
+  }
+  
+  // draw
+  
+  this.draw = function(position,rect)
+  {
+    this.clear();
+    
+    if(!position){ position = new Position("0,0"); }
+    
+    if(rect){
+      this.draw_rect(position,rect);
+    }
+    else if(position.x !== 0 && position.y !== 0){
+      this.draw_pointer(position);
+    }
+    else if(position.x !== 0 ){
+      this.draw_vertical_line(position);
+    }
+    else if(position.y !== 0 ){
+      this.draw_horizontal_line(position);
+    }
+  }
+  
+  this.draw_rect = function(position,rect)
+  {
+    this.context().beginPath();
+    
+    position.normalize(rect);
+    
+    this.context().moveTo(position.x,position.y);
+    this.context().lineTo(position.x + rect.width,position.y);
+    this.context().lineTo(position.x + rect.width,position.y + rect.height);
+    this.context().lineTo(position.x,position.y + rect.height);
+    this.context().lineTo(position.x,position.y);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = this.color.hex;
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.draw_pointer = function(position)
+  {
+    this.context().beginPath();
+    
+    this.context().moveTo(position.x,position.y);
+    this.context().lineTo(position.x + 10,position.y);
+    this.context().lineTo(position.x,position.y + 10);
+    this.context().lineTo(position.x,position.y);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = this.color.hex;
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.draw_vertical_line = function(position)
+  {
+    this.context().beginPath();
+    
+    this.context().moveTo(position.x,0);
+    this.context().lineTo(position.x,this.element.height);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = this.color.hex;
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.draw_horizontal_line = function(position)
+  {
+    this.context().beginPath();
+    
+    this.context().moveTo(0,position.y);
+    this.context().lineTo(this.element.width,position.y);
+    
+    this.context().lineCap="round";
+    this.context().lineWidth = 1;
+    this.context().strokeStyle = this.color.hex;
+    this.context().stroke();
+    this.context().closePath();
+  }
+  
+  this.context = function()
+  {
+    return this.layer.context();
+  }
+  
+  this.clear = function()
+  {
+    this.context().clearRect(0, 0, ronin.surface.size.width, ronin.surface.size.height);
+  }
+  
+  // Cursor
+  
+  this.live_draw_from = null;
+
+  this.mouse_down = function(position)
+  {
+    ronin.overlay.clear();
+    ronin.overlay.draw_pointer(position);
+    this.live_draw_from = position;
+    commander.show();
+    commander.element_input.focus();
+    commander.element_input.value = "| "+this.live_draw_from.render();
+  }
+  
+  this.mouse_move = function(position)
+  {
+    if(this.live_draw_from === null){ return; }
+    
+    ronin.overlay.clear();
+    
+    var rect = new Rect();
+    rect.width = position.x - this.live_draw_from.x;
+    rect.height = position.y - this.live_draw_from.y;
+  
+    ronin.overlay.draw_rect(this.live_draw_from,rect);
+    commander.element_input.value = "| "+this.live_draw_from.render()+" "+rect.render();
+  }
+  
+  this.mouse_up = function(position)
+  {
+    this.live_draw_from = null;
+    commander.element_input.focus();
+  }
+  
+  // Widget
+  
+  this.widget_cursor = function()
+  {
+    return "Guide";
+  }
+}

scripts/modules/render.js

@@ -0,0 +1,59 @@
+function Render(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Any];
+  this.collection = {};
+
+  this.collection["rotate"] = new Filter_Rotate();
+  this.collection["balance"] = new Filter_Balance();
+  this.collection["saturation"] = new Filter_Saturation();
+  this.collection["stencil"] = new Filter_Stencil();
+  this.collection["invert"] = new Filter_Invert();
+  this.collection["chromatic"] = new Filter_Chromatic();
+
+  this.layer = null;
+
+  this.install = function()
+  {
+    this.layer = new Layer("Render.Preview",this);
+    this.layer.element.setAttribute("style","z-index:9000");
+    ronin.surface.add_layer(this.layer);
+  }
+  
+  this.active = function(cmd)
+  {
+    var name = cmd.content[0];
+
+    if(!this.collection[name]){ return; }
+    
+    return this.collection[name].render(cmd);
+  }
+  
+  this.passive = function(cmd)
+  {
+    var name = cmd.content[0];
+    if(!this.collection[name]){ return; }
+
+    return this.collection[name].preview(cmd);
+  }
+	
+  this.hint = function(cmd)
+  {
+    var input = cmd.content.join(" ").trim().split(" ")[0];
+    var s = this.pad(cmd.content.join(" "));
+
+    if(this.collection[input]){
+      for (i = 0; i < this.collection[input].parameters.length; i++) {
+        s += this.collection[input].parameters[i].name+" ";
+      }
+    }
+    else{
+      for (var key in this.collection){
+        s += key+" ";
+      }  
+    }   
+
+    return s;
+  }
+}

scripts/modules/stroke.js

@@ -0,0 +1,62 @@
+function Stroke(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Any];
+  
+  // Create a stroke
+  
+  this.positions = null;
+  
+  this.new_stroke = function()
+  {
+    this.positions = [];
+  }
+  
+  this.append_stroke = function(p)
+  {
+    this.positions.push(p);
+  }
+  
+  this.save_stroke = function(mode)
+  {
+    // TODO
+    // s = "_ module="+mode+" ";
+    // for (i = 0; i < this.positions.length; i++) {
+    //   s += this.positions[i].render()+" ";
+    // }
+    // if(this.positions.length > 0){ ronin.history.add(s); }
+    // this.positions = null;
+  }
+  
+  // Module
+  
+  this.passive = function(cmd)
+  {
+  }
+  
+  this.active = function(cmd)
+  {
+    var prev = null
+    for (i = 1; i < cmd.content.length; i++) {
+      var p = new Position(cmd.content[i]);
+      if(prev){
+        this.draw(prev,p);
+      }
+      prev = p;
+    }
+  }
+  
+  this.draw = function(pos1,pos2)
+  {
+    ronin.surface.context().beginPath();
+    ronin.surface.context().moveTo(pos1.x,pos1.y);
+    ronin.surface.context().lineTo(pos2.x,pos2.y);
+    ronin.surface.context().lineCap="round";
+    ronin.surface.context().lineWidth = 10;
+    ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
+    ronin.surface.context().stroke();
+    ronin.surface.context().closePath();
+  }
+  
+}

scripts/modules/surface.js

@@ -0,0 +1,171 @@
+function Surface(rune)
+{
+  Module.call(this,rune);
+  
+  this.element = null;
+  this.parameters = [Rect,Color,Bang];
+  this.variables  = {"layer" : "main"};
+
+  this.layers = {};
+  this.active_layer = null;
+  this.render_layer = null;
+
+  this.size = new Rect("200x200");
+  
+  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();
+    }
+
+    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.widget.update();
+    }
+
+    if(cmd.variable("layer")){
+      var name = cmd.variable("layer").value;
+      if(!this.layers[name]){
+        this.add_layer(new Layer(name));
+      }
+      this.select_layer(this.layers[name]);
+    }
+  }
+
+  this.select_layer = function(layer)
+  {
+    console.log("Selecting layer:"+layer.name);
+    this.active_layer = layer;
+  }
+
+  this.select_any_layer = function()
+  {
+    var layer_name = Object.keys(ronin.surface.layers)[0];
+    this.select_layer(ronin.surface.layers[layer_name]);    
+  }
+
+  this.add_layer = function(layer)
+  {
+    console.log("Creating layer:"+layer.name+"("+(layer.manager ? layer.manager.constructor.name : "")+")"); 
+
+    this.layers[layer.name] = layer;
+    this.active_layer = layer;
+    this.element.appendChild(layer.element);
+    this.active_layer.resize(this.size);
+  }
+  
+  this.passive = function(cmd)
+  {
+    if(cmd.rect()){
+      ronin.overlay.draw(cmd.position(),cmd.rect());
+    }
+  }
+
+  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();
+  }
+
+  this.widget = function()
+  {
+    if(!this.active_layer){ return ""; }
+
+    var s = "";
+
+    Object.keys(ronin.surface.layers).forEach(function (key) {
+      s = ronin.surface.layers[key].widget()+s;
+    });
+    return "# "+this.size.render()+"<br />"+s;
+  }
+  
+  this.widget_cursor = function()
+  {
+    return "Drag";
+  }
+
+  // Commands
+
+  this.layer_up = function()
+  {
+    var keys = Object.keys(ronin.surface.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]]);}
+  }
+
+  this.layer_down = function()
+  {
+    var keys = Object.keys(ronin.surface.layers);
+    var loc = keys.indexOf(this.active_layer.name);
+
+    if(keys[loc-1] != null){this.select_layer(ronin.surface.layers[keys[loc-1]]);}
+  }
+
+  // Layers
+
+  this.context = function()
+  {
+    return this.active_layer.context();
+  }
+  
+  // Cursor
+  
+  this.drag_from = null;
+  this.drag_offset_x = 0;
+  this.drag_offset_y = 0;
+
+  this.mouse_down = function(position)
+  {
+    this.drag_from = ronin.position_in_window(position);
+  }
+  
+  this.mouse_move = function(position)
+  {
+    if(this.drag_from === null){ return; }
+    
+    position = ronin.position_in_window(position);
+    
+    var offset_x = this.drag_from.x - position.x;
+    var offset_y = this.drag_from.y - position.y;
+    this.drag_offset_x -= offset_x;
+    this.drag_offset_y -= offset_y;
+    
+    ronin.surface.element.style.marginLeft = -(this.size.width/2) + this.drag_offset_x;
+    ronin.surface.element.style.marginTop = -(this.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";
+    ronin.widget.element.style.marginLeft = this.drag_offset_x;
+    ronin.widget.element.style.marginTop = this.drag_offset_y;
+
+    this.drag_from = new Position(position.x,position.y);
+  }
+  
+  this.mouse_up = function(event)
+  {
+    this.drag_from = null;
+  }
+}

scripts/modules/surface.layer.js

@@ -0,0 +1,93 @@
+function Layer(name,manager = null)
+{
+  this.name = name;
+  this.manager = manager;
+  this.element = document.createElement("canvas");
+  this.element.setAttribute("id","_"+name);
+  this.element.setAttribute("class","layer");
+
+  this.resize = function(rect)
+  {
+    console.log("Resize "+this.name+" to "+rect.render());
+
+    var pixels_rect   = new Rect(this.element.width+"x"+this.element.height);
+    
+    this.element.width = rect.width * 2;
+    this.element.height = rect.height * 2;
+    this.element.style.width = rect.width+"px";
+    this.element.style.height = rect.height+"px";
+
+    this.context().scale(2,2);
+  }
+
+  this.clear = function()
+  {
+    this.context().clearRect(0, 0, this.element.width, this.element.height);
+  }
+
+  this.context = function()
+  {
+    return this.element.getContext('2d');
+  }
+
+  this.image = function()
+  {
+    return this.element.toDataURL('image/png');
+  }
+
+  //
+
+  this.widget_cursor = function()
+  {
+    return "Move";
+  }
+
+  this.widget = function()
+  {
+    var e_name = "";
+    e_name += this.name;
+
+    var e_class = "";
+    e_class += "layer ";
+    if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; }
+    if(this.manager != null){ e_class += "managed "; }
+
+    var e_icon = this.manager ? "~" : "-";
+
+
+    return "<span class='"+e_class+"'>"+e_icon+" "+e_name+"</span><br />";
+  }
+
+  this.move_from = null;
+
+  this.mouse_down = function(position)
+  {
+    this.move_from = ronin.position_in_window(position);
+    ronin.stroke.new_stroke();
+  }
+  
+  this.mouse_move = function(position)
+  {
+    if(this.move_from === null){ return; }
+    
+    ronin.stroke.append_stroke(position); // Save to stroke
+
+    position = ronin.position_in_window(position);
+    
+    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);
+    this.clear();
+    this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2);
+
+    this.move_from = new Position(position.x,position.y);
+    
+  }
+  
+  this.mouse_up = function(event)
+  {
+    this.move_from = null;
+    ronin.stroke.save_stroke("move");
+  }
+}

scripts/modules/typographe.js

@@ -0,0 +1,49 @@
+function Typographe(rune)
+{
+  Module.call(this,rune);
+
+  this.parameters = [Position,Color,Value];
+  this.variables  = {"text" : null, "font" : "Georgia"};
+
+  this.layer = null;
+
+  this.install = function()
+  {
+    this.layer = new Layer("Typographe.Preview",this);
+    this.layer.element.setAttribute("style","z-index:7000");
+    ronin.surface.add_layer(this.layer);
+  }
+
+  this.active = function(cmd)
+  {
+    var target = ronin.surface.active_layer;
+    target.clear();
+    if(cmd.variable("text")){
+      this.add_text(target.context(),cmd);
+    }
+  }
+
+  this.passive = function(cmd)
+  {
+    var target = this.layer;
+    target.clear();
+    if(cmd.variable("text")){
+      this.add_text(target.context(),cmd);
+    }
+  }
+
+  this.add_text = function(context,cmd)
+  {
+    var ctx = context;
+
+    var text = cmd.variable("text").value;
+    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 : 20;
+    var font = cmd.variable("font") ? cmd.variable("font").value : "Georgia";
+
+    ctx.font = size+"px "+font;
+    ctx.fillStyle = color.hex; 
+    ctx.fillText(text,position.x,position.y);
+  }
+}

scripts/modules/vector.js

@@ -0,0 +1,36 @@
+function Vector(rune)
+{
+  Module.call(this,rune);
+  
+  this.parameters = [Any];
+  this.variables  = {"fill_color" : "none","stroke_width" : 2,"stroke_color" : "#ffffff", "line_cap" : "square"};
+
+  this.layer = null;
+
+  this.install = function()
+  {
+    this.layer = new Layer("Vector.Preview",this);
+    this.layer.element.setAttribute("style","z-index:8000");
+    ronin.surface.add_layer(this.layer);
+  }
+  
+  // Module
+  
+  this.passive = function(cmd)
+  {
+    this.layer.clear();
+    this.layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "round";
+    this.layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : ronin.brush.size;
+    this.layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";
+    this.layer.context().stroke(new Path2D(cmd.content.join(" ")));
+  }
+  
+  this.active = function(cmd)
+  {
+    this.layer.clear();
+    ronin.surface.active_layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "round";
+    ronin.surface.active_layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : ronin.brush.size;
+    ronin.surface.active_layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";
+    ronin.surface.active_layer.context().stroke(new Path2D(cmd.content.join(" ")));
+  }
+}