dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added icons

Browse Source
This commit is contained in:
Devine Lu Linvega
2017-01-12 15:37:22 -07:00
parent 2499f805ba
commit a2fed4c21e
65 changed files with 1 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
scripts/modules/brush.js
View File

@@ -1,126 +0,0 @@
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+"<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");
}
}

123
scripts/modules/brush.pointer.js
View File

@@ -1,123 +0,0 @@
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 />";
}
}

79
scripts/modules/eraser.js
View File

@@ -1,79 +0,0 @@
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");
}
}

45
scripts/modules/eye.js
View File

@@ -1,45 +0,0 @@
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);
}
}

49
scripts/modules/file.load.js
View File

@@ -1,49 +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()){ 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);
}
}
}

22
scripts/modules/file.save.js
View File

@@ -1,22 +0,0 @@
function FileSave(rune)
{
Module.call(this,rune);
this.parameters = [Any];
this.active = function(cmd)
{
var n = "Ronin Export";
var f = cmd.variable("format");
var d = ronin.surface.merge();
d = ronin.surface.active_layer.element.toDataURL('image/png');
// // ronin.surface.layers["render"].clear();
var w = window.open('about:blank','image from canvas');
// w.document.write("hello")
w.document.write("<title>"+(n ? n : "Untitled")+"</title><body><img src='"+d+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
}
this.passive = function(cmd)
{
}
}

80
scripts/modules/help.js
View File

@@ -1,80 +0,0 @@
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_modules();
html += this.view_units();
html += this.view_presets();
w.document.write("<title>Help</title><style>body { font-size:11px;background:#fff; color:#000; padding:10px} pre {}</style><pre>"+html+"</pre>");
}
//
this.view_intro = function()
{
var html = "# Ronin\n## Basics\nRonin is a web based drawing application and visual language. Launch index.html and press **:**(colon) to display the command prompt. Input the commands below to interface with the different tools. \n```\n:\n```\n";
html += "### Loading/Saving\nRequires you to run Ronin through localhost. Navigate to the Ronin folder, and run the simple http server.\n";
html += "```\ncd /path/to/ronin/ ; Navigate to Ronin through the terminal\npython -m SimpleHTTPServer 8000 ; Start localhost\nhttp://localhost:8000/ ; Enjoy Ronin\n```\n";
html += "### Controls\n";
html += "```\nctrl ; Draw Overlays\nalt ; Drag Surface\nshift ; Erase\nshift+ctrl ; Eyedrop\nshift+alt ; Move Layer\n```\n";
return html;
}
this.view_modules = function()
{
html = "## Modules\n";
Object.keys(ronin.modules).forEach(function (key) {
html += "### "+key+" "+ronin.modules[key].constructor.name+"\n";
html += ronin.modules[key].docs+"\n";
html += "- Parameters: ";
for (i = 0; i < ronin.modules[key].parameters.length; i++) {
html += "`"+ronin.modules[key].parameters[i].name+"` ";
}
html += "\n";
html += "- Variables: ";
for(var key in ronin.modules[key].variables){
html += "`"+key+"` ";
}
html += "\n\n";
});
return html;
}
this.view_units = function()
{
html = "## Units\n";
html += "```\n5 ; value: 5\n5,7 ; position: 5x 7y\n7x9 ; rect: 7w 9h\n#ff0000 ; color: red\n0..5 ; random: 0.0-5.0\n45' ; degree: 45/365\nrate=10 ; variable: rate = 10\n```\n";
return html;
}
this.view_presets = function()
{
html = "## Presets\n";
html += "### Radial Brush\n";
html += "```\n# 8 strands\n> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'\n# 6 strands\n> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'\n```\n"
html += "### Symmetry Brush\n";
html += "```\n# XY\n> 400x 3\n# Angular brushes\n> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;\n```\n"
html += "### Angular Brush\n";
html += "```\n# Light\n> 1,1;> 2,2;> 3,3;> 4,4\n# Hard\n> 2,2;> 4,4;> 6,6;> 8,8\n# Symmetric Light\n> 1,1 600x;> 2,2 600x;> 3,3 600x;> 4,4 600x\n```\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;
}
}

30
scripts/modules/history.js
View File

@@ -1,30 +0,0 @@
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+" ";
}
}

86
scripts/modules/module.js
View File

@@ -1,86 +0,0 @@
function Module(rune)
{
this.rune = rune;
this.element = null;
this.parameters = [];
this.variables = {};
this.docs = "Missing documentation.";
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)
{
}
}

163
scripts/modules/overlay.js
View File

@@ -1,163 +0,0 @@
function Overlay(rune)
{
Module.call(this,rune);
this.parameters = [Position,Rect];
// Module
this.passive = function(cmd)
{
this.draw(cmd.position(),cmd.rect());
}
this.active = function(cmd)
{
if(cmd.bang()){ this.guides = []; }
}
// 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 = "#ff0000";
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 = "#ff0000";
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 = "#ff0000";
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 = "#ff0000";
this.context().stroke();
this.context().closePath();
}
this.resize = function(rect)
{
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.context = function()
{
return this.element.getContext('2d');
}
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";
}
}

30
scripts/modules/render.js
View File

@@ -1,30 +0,0 @@
function Render(rune)
{
Module.call(this,rune);
this.parameters = [Any];
this.collection = {};
this.collection["stencil"] = new Filter_Stencil();
this.collection["rotate"] = new Filter_Rotate();
this.collection["invert"] = new Filter_Invert();
this.collection["chromatic"] = new Filter_Chromatic();
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);
}
}

61
scripts/modules/stroke.js
View File

@@ -1,61 +0,0 @@
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)
{
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();
}
}

187
scripts/modules/surface.js
View File

@@ -1,187 +0,0 @@
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 = null;
this.active = function(cmd)
{
if(cmd.rect()){
this.resize(cmd.rect(),cmd.position());
ronin.overlay.resize(cmd.rect());
}
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){
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.size));
}
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);
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();
}
this.merge = function()
{
// this.render_layer = this.layers["render"];
// var a = [];
// Object.keys(ronin.surface.layers).forEach(function (key) {
// if(key != "render"){
// a.push(ronin.surface.layers[key]);
// }
// });
// for (i = a.length; i > 0 ; i--) {
// ronin.surface.render_layer.context().drawImage(a[i-1].context().canvas,0,0,this.size.width,this.size.height);
// }
return this.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;
}
}

82
scripts/modules/surface.layer.js
View File

@@ -1,82 +0,0 @@
function Layer(name,host = "user")
{
this.name = name;
this.host = host;
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()
{
return (ronin.surface.active_layer.name == this.name) ? "<span class='highlight'>- ("+this.name+")</span><br />" : "- "+this.name+"<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");
}
}

39
scripts/modules/typographe.js
View File

@@ -1,39 +0,0 @@
function Typographe(rune)
{
Module.call(this,rune);
this.parameters = [Position,Color,Value];
this.variables = {"text" : null};
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 = ronin.overlay;
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;
ctx.font = size+"px Georgia";
ctx.fillStyle = color.hex;
ctx.fillText(text,position.x,position.y);
}
}

34
scripts/modules/vector.js
View File

@@ -1,34 +0,0 @@
function Vector(rune)
{
Module.call(this,rune);
this.parameters = [Any,Position];
// Module
this.passive = function(cmd)
{
ronin.overlay.clear();
ronin.overlay.context().lineCap="round";
ronin.overlay.context().lineWidth = ronin.brush.size;
ronin.overlay.context().strokeStyle = "red";
ronin.overlay.context().stroke(new Path2D(cmd.content.join(" ")));
}
this.active = function(cmd)
{
ronin.overlay.clear();
ronin.surface.context().lineCap="round";
ronin.surface.context().lineWidth = ronin.brush.size;
ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
ronin.surface.context().stroke(new Path2D(cmd.content.join(" ")));
}
// + M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 ; Draw a circle
// M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z
// Large 128
// @ 128x128;> 2 #ffffff;+ 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;$ logo
// Icon 128
// @ 128x128;> 4 #ffffff;+ 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 -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,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 -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;$ logo
}