Loading..
diff --git a/links/main.css b/links/main.css
index bdc41d6..183d003 100644
--- a/links/main.css
+++ b/links/main.css
@@ -4,9 +4,9 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
canvas:hover { cursor: crosshair;}
#ronin { width:100vw; height:100vh; overflow:hidden; background:#000; background-image:url(../media/grid_20.png);}
-#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px;}
+#surface { width:100vw; height:100vh; overflow:hidden; position:fixed; left:0px; top:0px; background:#efefef; border-radius:3px;}
+#surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#overlay { position:absolute; z-index:1000;}
-#workspace { position:absolute; background:#efefef; border-radius:3px;}
#widget { color:#efefef; position:absolute; font-size:10px; line-height:30px;}
#widget .cursor { float:right;}
@@ -16,7 +16,7 @@ canvas:hover { cursor: crosshair;}
#commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:12px; left:0; border:0; width:calc(100vw); cursor:pointer; display:block;}
#commander input:before { content:"input"; color:red;}
-#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-size: 12px;width: 100vw;color: #999;}
+#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-size: 10px;width: 100vw;color: #999;}
#commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;}
#commander_hint .param { font-style: italic;}
#commander_hint .param:after { content:", "; }
diff --git a/scripts/core/init.js b/scripts/core/init.js
index c5228a7..65e8418 100644
--- a/scripts/core/init.js
+++ b/scripts/core/init.js
@@ -12,7 +12,7 @@ commander.hint.element = document.getElementById('commander_hint');
document.addEventListener('mousedown', function(e){ ronin.cursor.mouse_down(ronin.position_in_canvas(e));}, false);
document.addEventListener('mousemove', function(e){ ronin.cursor.mouse_move(ronin.position_in_canvas(e));}, false);
document.addEventListener('mouseup', function(e){ ronin.cursor.mouse_up(ronin.position_in_canvas(e));}, false);
-document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
+// document.addEventListener('contextmenu', function(ev){ ev.preventDefault(); return false;}, false);
// Keyboard
var keyboard = new Keyboard();
@@ -25,8 +25,6 @@ starting_canvas.width = window.innerWidth - 200;
starting_canvas.height = window.innerHeight - 200;
commander.query("~ "+ronin.timestamp());
-commander.query("@ "+starting_canvas.render());
-commander.query("> 1 0,0 #000000");
-commander.query("> banking=true");
-commander.query("> natural=true");
-commander.query("> -5,0");
\ No newline at end of file
+commander.query("# "+starting_canvas.render());
+commander.query("# layer=main");
+commander.query("> 1 0,0 #000000");
\ No newline at end of file
diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js
index ea4c785..b697d64 100644
--- a/scripts/core/ronin.js
+++ b/scripts/core/ronin.js
@@ -38,8 +38,8 @@ function Ronin()
this.position_in_canvas = function(e)
{
- var x = e.clientX - parseFloat(ronin.surface.element.style.left) - parseFloat(ronin.canvas.element.style.left);
- var y = e.clientY- parseFloat(ronin.surface.element.style.top) - parseFloat(ronin.canvas.element.style.top);
+ var x = e.clientX - parseFloat(ronin.surface.element.style.left);
+ var y = e.clientY- parseFloat(ronin.surface.element.style.top);
return new Position(x+","+y);
}
diff --git a/scripts/modules/Find Results b/scripts/modules/Find Results
new file mode 100644
index 0000000..3290219
--- /dev/null
+++ b/scripts/modules/Find Results
@@ -0,0 +1,120 @@
+Searching 62 files for "canvas.con"
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/brush.pointer.js:
+ 26 this.distance += position.distance_to(this.position_prev);
+ 27
+ 28: ronin.canvas.context().beginPath();
+ 29
+ 30: ronin.canvas.context().globalCompositeOperation="source-over";
+ 31: ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
+ 32: ronin.canvas.context().lineTo(position.x,position.y);
+ 33: ronin.canvas.context().lineCap="round";
+ 34: ronin.canvas.context().lineWidth = this.thickness();
+ 35: ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
+ 36: ronin.canvas.context().stroke();
+ 37: ronin.canvas.context().closePath();
+ 38
+ 39 this.position_prev = position;
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/eraser.js:
+ 19 this.distance += position.distance_to(this.position_prev);
+ 20
+ 21: ronin.canvas.context().beginPath();
+ 22: ronin.canvas.context().globalCompositeOperation="destination-out";
+ 23: ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
+ 24: ronin.canvas.context().lineTo(position.x,position.y);
+ 25: ronin.canvas.context().lineCap="round";
+ 26: ronin.canvas.context().lineWidth = 10;
+ 27: ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
+ 28: ronin.canvas.context().stroke();
+ 29: ronin.canvas.context().closePath();
+ 30
+ 31 this.position_prev = position;
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/eye.js:
+ 20 this.color_picker = function(position)
+ 21 {
+ 22: var imgData = ronin.canvas.context().getImageData(position.x, position.y, 1, 1).data;
+ 23 var c = new Color();
+ 24 commander.show();
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/file.load.js:
+ 30 height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
+ 31
+ 32: ronin.canvas.context().drawImage(base_image, position.x, position.y, width, height);
+ 33 }
+ 34 }
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.balance.js:
+ 43
+ 44 ronin.canvas.clear();
+ 45: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+ 46 }
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.chromatic.js:
+ 35 }
+ 36 ronin.canvas.clear();
+ 37: ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
+ 38 }
+ 39
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.eval.js:
+ 23
+ 24 ronin.canvas.clear();
+ 25: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+ 26 console.log("done.");
+ 27 }
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.js:
+ 69 this.pixels = function()
+ 70 {
+ 71: return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
+ 72 }
+ 73 }
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.offset.js:
+ 16 }
+ 17 ronin.canvas.clear();
+ 18: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+ 19 }
+ 20
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.saturation.js:
+ 12 }
+ 13 ronin.canvas.clear();
+ 14: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+ 15 }
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/stroke.js:
+ 49 this.draw = function(pos1,pos2)
+ 50 {
+ 51: ronin.canvas.context().beginPath();
+ 52: ronin.canvas.context().moveTo(pos1.x,pos1.y);
+ 53: ronin.canvas.context().lineTo(pos2.x,pos2.y);
+ 54: ronin.canvas.context().lineCap="round";
+ 55: ronin.canvas.context().lineWidth = 1;
+ 56: ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
+ 57: ronin.canvas.context().stroke();
+ 58: ronin.canvas.context().closePath();
+ 59 }
+ 60
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/surface.layer.js:
+ 23
+ 24 if(!position){ position = new Position("0,0");}
+ 25: ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
+ 26: ronin.canvas.context().scale(2,2);
+ 27 }
+ 28 }
+
+/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/vector.js:
+ 19 {
+ 20 ronin.overlay.clear();
+ 21: ronin.canvas.context().lineCap="round";
+ 22: ronin.canvas.context().lineWidth = ronin.brush.size;
+ 23: ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
+ 24: ronin.canvas.context().stroke(new Path2D(cmd.content.join(" ")));
+ 25 }
+ 26
+
+40 matches across 13 files
diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js
index e4a06ce..9d83514 100644
--- a/scripts/modules/brush.js
+++ b/scripts/modules/brush.js
@@ -64,7 +64,7 @@ function Brush(rune)
this.widget_cursor = function()
{
- return "Brush "+this.size+", "+this.pointers.length+" pointers";
+ return this.pointers.length > 0 ? "Brush "+this.size+", "+this.pointers.length+" pointers" : "No Pointers";
}
// Cursor
diff --git a/scripts/modules/brush.pointer.js b/scripts/modules/brush.pointer.js
index a45a932..9f030a4 100644
--- a/scripts/modules/brush.pointer.js
+++ b/scripts/modules/brush.pointer.js
@@ -25,16 +25,16 @@ function Pointer(offset = new Position(), color = new Color('000000'))
this.distance += position.distance_to(this.position_prev);
- ronin.canvas.context().beginPath();
+ ronin.surface.context().beginPath();
- ronin.canvas.context().globalCompositeOperation="source-over";
- ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
- ronin.canvas.context().lineTo(position.x,position.y);
- ronin.canvas.context().lineCap="round";
- ronin.canvas.context().lineWidth = this.thickness();
- ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
- ronin.canvas.context().stroke();
- ronin.canvas.context().closePath();
+ ronin.surface.context().globalCompositeOperation="source-over";
+ 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.thickness();
+ ronin.surface.context().strokeStyle = ronin.brush.color.rgba();
+ ronin.surface.context().stroke();
+ ronin.surface.context().closePath();
this.position_prev = position;
}
diff --git a/scripts/modules/canvas.js b/scripts/modules/canvas.js
index ecafa2e..4f59b55 100644
--- a/scripts/modules/canvas.js
+++ b/scripts/modules/canvas.js
@@ -4,78 +4,6 @@ function Canvas(rune)
this.parameters = [Rect,Position,Color,Bang];
- this.active = function(cmd)
- {
- if(cmd.bang()){ this.clear(); }
-
- 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.element.width, this.element.height);
- this.context().fillStyle = cmd.color().hex;
- this.context().fill();
- }
- }
-
- this.passive = function(cmd)
- {
- if(cmd.rect()){
- ronin.overlay.draw(cmd.position(),cmd.rect());
- }
- }
-
- //
-
- this.resize = function(rect, position = null)
- {
- var canvas_pixels = ronin.canvas.element.toDataURL("image/png");
- 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.left = (window.innerWidth/2)-(rect.width/2);
- this.element.style.top = (window.innerHeight/2)-(rect.height/2);
- this.element.style.width = rect.width+"px";
- this.element.style.height = rect.height+"px";
-
- ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
- ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
- ronin.widget.element.style.width = rect.width+"px";
-
- ronin.widget.update();
-
- base_image = new Image();
- base_image.src = canvas_pixels;
-
- if(!position){ position = new Position("0,0");}
- ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
- ronin.canvas.context().scale(2,2);
- }
-
- this.context = function()
- {
- return this.element.getContext('2d');
- }
-
- this.clear = function()
- {
- this.context().clearRect(0, 0, this.element.width, this.element.height);
- }
-
- this.widget = function()
- {
- return "@ "+this.element.width+"x"+this.element.height+" ";
- }
-
- this.widget_cursor = function()
- {
- return "Move";
- }
-
// Cursor
this.move_from = null;
diff --git a/scripts/modules/eraser.js b/scripts/modules/eraser.js
index a884120..647aa20 100644
--- a/scripts/modules/eraser.js
+++ b/scripts/modules/eraser.js
@@ -18,15 +18,15 @@ function Eraser(rune)
this.distance += position.distance_to(this.position_prev);
- ronin.canvas.context().beginPath();
- ronin.canvas.context().globalCompositeOperation="destination-out";
- ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
- ronin.canvas.context().lineTo(position.x,position.y);
- ronin.canvas.context().lineCap="round";
- ronin.canvas.context().lineWidth = 10;
- ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
- ronin.canvas.context().stroke();
- ronin.canvas.context().closePath();
+ 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 = 10;
+ ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
+ ronin.surface.context().stroke();
+ ronin.surface.context().closePath();
this.position_prev = position;
}
diff --git a/scripts/modules/eye.js b/scripts/modules/eye.js
index 443945e..61c3045 100644
--- a/scripts/modules/eye.js
+++ b/scripts/modules/eye.js
@@ -19,7 +19,7 @@ function Eye(rune)
this.color_picker = function(position)
{
- var imgData = ronin.canvas.context().getImageData(position.x, position.y, 1, 1).data;
+ var imgData = ronin.surface.context().getImageData(position.x, position.y, 1, 1).data;
var c = new Color();
commander.show();
commander.element_input.focus();
diff --git a/scripts/modules/file.load.js b/scripts/modules/file.load.js
index 6b5e1bc..089dcd8 100644
--- a/scripts/modules/file.load.js
+++ b/scripts/modules/file.load.js
@@ -29,7 +29,7 @@ function FileLoad(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.canvas.context().drawImage(base_image, position.x, position.y, width, height);
+ ronin.surface.context().drawImage(base_image, position.x, position.y, width, height);
}
}
diff --git a/scripts/modules/filter.balance.js b/scripts/modules/filter.balance.js
index fd6e5e2..6bfc559 100644
--- a/scripts/modules/filter.balance.js
+++ b/scripts/modules/filter.balance.js
@@ -42,5 +42,5 @@ Filter.prototype.filter_balance = function(pixels = this.pixels(),p = null)
}
ronin.canvas.clear();
- ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+ ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}
\ No newline at end of file
diff --git a/scripts/modules/filter.chromatic.js b/scripts/modules/filter.chromatic.js
index e162c3e..5da1cd6 100644
--- a/scripts/modules/filter.chromatic.js
+++ b/scripts/modules/filter.chromatic.js
@@ -34,5 +34,5 @@ Filter.prototype.filter_chromatic = function(pixels = this.pixels(),p = null)
}
}
ronin.canvas.clear();
- ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
+ ronin.surface.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
}
diff --git a/scripts/modules/filter.eval.js b/scripts/modules/filter.eval.js
index bbff93c..3a9a412 100644
--- a/scripts/modules/filter.eval.js
+++ b/scripts/modules/filter.eval.js
@@ -22,6 +22,6 @@ Filter.prototype.filter_eval = function(pixels = this.pixels(),p = null)
}
ronin.canvas.clear();
- ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+ ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
console.log("done.");
}
\ No newline at end of file
diff --git a/scripts/modules/filter.js b/scripts/modules/filter.js
index 8aedcab..3a9c563 100644
--- a/scripts/modules/filter.js
+++ b/scripts/modules/filter.js
@@ -68,6 +68,6 @@ function Filter(rune)
this.pixels = function()
{
- return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
+ return ronin.surface.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
}
}
diff --git a/scripts/modules/filter.offset.js b/scripts/modules/filter.offset.js
index 73f21a5..72b0d07 100644
--- a/scripts/modules/filter.offset.js
+++ b/scripts/modules/filter.offset.js
@@ -15,5 +15,5 @@ Filter.prototype.filter_offset = function(pixels = this.pixels(),p = null)
}
}
ronin.canvas.clear();
- ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+ ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}
diff --git a/scripts/modules/filter.saturation.js b/scripts/modules/filter.saturation.js
index cda01bf..63bcf11 100644
--- a/scripts/modules/filter.saturation.js
+++ b/scripts/modules/filter.saturation.js
@@ -11,5 +11,5 @@ Filter.prototype.filter_saturation = function(pixels = this.pixels(),p = null)
d[i] = d[i+1] = d[i+2] = v
}
ronin.canvas.clear();
- ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+ ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}
\ No newline at end of file
diff --git a/scripts/modules/history.js b/scripts/modules/history.js
index 719692f..7962bf7 100644
--- a/scripts/modules/history.js
+++ b/scripts/modules/history.js
@@ -11,7 +11,7 @@ function History(rune)
for (i = 0; i < this.cmds.length; i++) {
if(this.cmds[i][0] == this.rune){ continue; }
- html += this.cmds[i]+"
";
+ html += this.cmds[i]+";
";
}
w.document.write("
Source"+html+"");
}
diff --git a/scripts/modules/stroke.js b/scripts/modules/stroke.js
index b8f2bf7..edf95ae 100644
--- a/scripts/modules/stroke.js
+++ b/scripts/modules/stroke.js
@@ -20,7 +20,7 @@ function Stroke(rune)
this.save_stroke = function(mode)
{
- s = "_ mode:"+mode+" ";
+ s = "_ module="+mode+" ";
for (i = 0; i < this.positions.length; i++) {
s += this.positions[i].render()+" ";
}
@@ -48,14 +48,14 @@ function Stroke(rune)
this.draw = function(pos1,pos2)
{
- ronin.canvas.context().beginPath();
- ronin.canvas.context().moveTo(pos1.x,pos1.y);
- ronin.canvas.context().lineTo(pos2.x,pos2.y);
- ronin.canvas.context().lineCap="round";
- ronin.canvas.context().lineWidth = 1;
- ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
- ronin.canvas.context().stroke();
- ronin.canvas.context().closePath();
+ 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 = 1;
+ ronin.surface.context().strokeStyle = new Color("#ff0000").rgba();
+ ronin.surface.context().stroke();
+ ronin.surface.context().closePath();
}
}
\ No newline at end of file
diff --git a/scripts/modules/surface.js b/scripts/modules/surface.js
index d01bb23..7b28a29 100644
--- a/scripts/modules/surface.js
+++ b/scripts/modules/surface.js
@@ -3,19 +3,90 @@ function Surface(rune)
Module.call(this,rune);
this.element = null;
- this.parameters = [Any];
+ this.parameters = [Rect,Color,Any];
+
+ this.layers = {};
+ this.active_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.variable("layer")){
+ var layer_name = cmd.variable("layer").value;
+ if(this.layers[layer_name]){
+ console.log("Selecting layer:"+layer_name);
+ this.active_layer = this.layers[layer_name];
+ }
+ else{
+ console.log("Creating layer:"+layer_name);
+ this.layers[layer_name] = new Layer(layer_name,this.size);
+ this.active_layer = this.layers[layer_name];
+ this.element.appendChild(this.active_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.left = (window.innerWidth/2)-(rect.width/2);
+ ronin.surface.element.style.top = (window.innerHeight/2)-(rect.height/2);
+ ronin.surface.element.style.width = rect.width+"px";
+ ronin.surface.element.style.height = rect.height+"px";
+ ronin.widget.element.style.left = (window.innerWidth/2)-(rect.width/2);
+ ronin.widget.element.style.top = (window.innerHeight/2)+(rect.height/2);
+ ronin.widget.element.style.width = rect.width+"px";
+
+ ronin.widget.update();
+ }
+
+ this.widget = function()
+ {
+ if(!this.active_layer){ return ""; }
+ return "# "+this.active_layer.name;
}
this.widget_cursor = function()
{
- return "Drag";
+ return "Move";
+ }
+
+ // Layers
+
+ this.context = function()
+ {
+ return this.active_layer.context();
}
// Cursor
diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js
new file mode 100644
index 0000000..63661f3
--- /dev/null
+++ b/scripts/modules/surface.layer.js
@@ -0,0 +1,38 @@
+function Layer(name)
+{
+ this.name = name;
+ 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 canvas_pixels = this.element.toDataURL("image/png");
+ 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);
+
+ // base_image = new Image();
+ // base_image.src = canvas_pixels;
+
+ // ronin.surface.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
+ // ronin.surface.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');
+ }
+}
\ No newline at end of file
diff --git a/scripts/modules/vector.js b/scripts/modules/vector.js
index 04f866f..3fa5cba 100644
--- a/scripts/modules/vector.js
+++ b/scripts/modules/vector.js
@@ -18,10 +18,10 @@ function Vector(rune)
this.active = function(cmd)
{
ronin.overlay.clear();
- ronin.canvas.context().lineCap="round";
- ronin.canvas.context().lineWidth = ronin.brush.size;
- ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
- ronin.canvas.context().stroke(new Path2D(cmd.content.join(" ")));
+ 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