diff --git a/index.html b/index.html
index f08bc2b..c024e4f 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
+
@@ -38,7 +39,6 @@
-
diff --git a/scripts/core/keyboard.js b/scripts/core/keyboard.js
index c7ff7b9..4a0c40e 100644
--- a/scripts/core/keyboard.js
+++ b/scripts/core/keyboard.js
@@ -89,6 +89,10 @@ function Keyboard()
{
commander.hide();
+ Object.keys(ronin.modules).forEach(function (key){
+ ronin.modules[key].key_escape();
+ });
+
// Clear managed layers
Object.keys(ronin.surface.layers).forEach(function (key) {
if(ronin.surface.layers[key].manager){
diff --git a/scripts/core/cursor.js b/scripts/modules/cursor.js
similarity index 83%
rename from scripts/core/cursor.js
rename to scripts/modules/cursor.js
index af2b2bb..e6727b2 100644
--- a/scripts/core/cursor.js
+++ b/scripts/modules/cursor.js
@@ -12,29 +12,25 @@ function Cursor(rune)
this.element = null;
- this.layer = null;
-
- this.install = function()
- {
- this.layer = new Layer("Cursor.Magnet",this);
- this.layer.element.setAttribute("style","z-index:9000");
- ronin.surface.add_layer(this.layer);
- }
-
this.passive = function(cmd)
{
if(!cmd.rect()){ return; }
+ if(!this.layer){ this.create_layer(); }
+
this.layer.clear();
this.draw(cmd.rect(),cmd.position());
}
this.active = function(cmd)
{
+ if(!this.layer){ this.create_layer(); }
+
this.layer.clear();
if(cmd.bang()){
this.magnetism = null;
+ this.layer.remove(this);
}
if(cmd.position()){
@@ -110,16 +106,9 @@ function Cursor(rune)
{
position = ronin.position_in_window(position);
- this.element.style.left = (position.x + window.innerWidth/2);
- this.element.style.top = (position.y + window.innerHeight/2);
-
var radius = this.mode && this.mode.size ? this.mode.size : 5;
- this.element.style.width = radius;
- this.element.style.height = radius;
- this.element.style.borderRadius = radius;
- this.element.style.marginLeft = -(radius/2)-1;
- this.element.style.marginTop = -(radius/2)-1;
- this.element.style.borderColor = this.mode && this.mode.color ? this.mode.color.hex : "#ff0000";
+
+ this.element.setAttribute("style","left:"+(position.x + window.innerWidth/2)+"px;top:"+(position.y + window.innerHeight/2)+"px;width:"+radius+"px;height:"+radius+"px;margin-left:"+(-(radius/2)-1)+"px;margin-top:"+(-(radius/2)-1)+"px;border:1px solid "+(this.mode && this.mode.color ? this.mode.color.hex : ronin.brush.color.hex));
}
//
diff --git a/scripts/modules/file.save.js b/scripts/modules/file.save.js
index f261995..93f69c0 100644
--- a/scripts/modules/file.save.js
+++ b/scripts/modules/file.save.js
@@ -6,17 +6,11 @@ function FileSave(rune)
this.variables = {"format" : "[png/jpg/svg]"};
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)
{
+ if(!this.layer){ this.create_layer(); }
+
var d = null;
var w = window.open('about:blank','image from canvas');
@@ -31,11 +25,11 @@ function FileSave(rune)
w.document.write("
Untitled
");
}
- this.layer.clear();
+ this.layer.remove(this);
}
this.merge = function()
- {
+ {
var a = [];
Object.keys(ronin.surface.layers).forEach(function (key) {
if(!ronin.surface.layers[key].manager){
diff --git a/scripts/modules/module.js b/scripts/modules/module.js
index 7365ce1..0bec166 100644
--- a/scripts/modules/module.js
+++ b/scripts/modules/module.js
@@ -4,6 +4,7 @@ function Module(rune)
this.element = null;
this.parameters = [];
this.variables = {};
+ this.layer = null;
this.docs = "Missing documentation.";
@@ -12,6 +13,13 @@ function Module(rune)
console.log("Installing "+ronin.modules[this.rune].constructor.name);
}
+ this.create_layer = function()
+ {
+ this.layer = new Layer(this.constructor.name+".Preview",this);
+ this.layer.element.setAttribute("style","z-index:7000");
+ ronin.surface.add_layer(this.layer);
+ }
+
this.active = function(cmd)
{
console.log("Nothing to do.");
@@ -88,4 +96,9 @@ function Module(rune)
this.mouse_up = function(position)
{
}
+
+ this.key_escape = function()
+ {
+
+ }
}
\ No newline at end of file
diff --git a/scripts/modules/overlay.js b/scripts/modules/overlay.js
index 385258b..39d2a20 100644
--- a/scripts/modules/overlay.js
+++ b/scripts/modules/overlay.js
@@ -5,7 +5,6 @@ function Overlay(rune)
this.parameters = [Position,Rect,Color];
this.color = new Color("#ffffff");
- this.layer = null;
this.install = function()
{
diff --git a/scripts/modules/render.js b/scripts/modules/render.js
index 57b26b1..8c1868e 100644
--- a/scripts/modules/render.js
+++ b/scripts/modules/render.js
@@ -11,18 +11,11 @@ function Render(rune)
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)
{
+ if(!this.layer){ this.create_layer(); }
+
var name = cmd.content[0];
if(!this.collection[name]){ return; }
@@ -32,6 +25,8 @@ function Render(rune)
this.passive = function(cmd)
{
+ if(!this.layer){ this.create_layer(); }
+
var name = cmd.content[0];
if(!this.collection[name]){ return; }
diff --git a/scripts/modules/surface.js b/scripts/modules/surface.js
index 88ca969..607ed7c 100644
--- a/scripts/modules/surface.js
+++ b/scripts/modules/surface.js
@@ -57,10 +57,9 @@ function Surface(rune)
{
console.log("Creating layer:"+layer.name+"("+(layer.manager ? layer.manager.constructor.name : "")+")");
+ layer.resize(this.size);
this.layers[layer.name] = layer;
- this.active_layer = layer;
this.element.appendChild(layer.element);
- this.active_layer.resize(this.size);
}
this.passive = function(cmd)
diff --git a/scripts/modules/surface.layer.js b/scripts/modules/surface.layer.js
index f90f1a7..9b8ca1d 100644
--- a/scripts/modules/surface.layer.js
+++ b/scripts/modules/surface.layer.js
@@ -25,6 +25,13 @@ function Layer(name,manager = null)
this.context().clearRect(0, 0, this.element.width, this.element.height);
}
+ this.remove = function(manager)
+ {
+ manager.layer = null;
+ ronin.surface.layers[this.name].element.outerHTML = "";
+ delete ronin.surface.layers[this.name];
+ }
+
this.context = function()
{
return this.element.getContext('2d');
diff --git a/scripts/modules/typographe.js b/scripts/modules/typographe.js
index 01340f7..4a82a8c 100644
--- a/scripts/modules/typographe.js
+++ b/scripts/modules/typographe.js
@@ -5,19 +5,10 @@ function Typographe(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;opacity:0.25");
- ronin.surface.add_layer(this.layer);
- }
-
this.active = function(cmd)
{
- this.layer.clear();
- ronin.overlay.clear();
+ if(this.layer){ this.layer.remove(this); }
+
if(cmd.variable("text")){
this.add_text(ronin.surface.active_layer.context(),cmd);
}
@@ -25,7 +16,8 @@ function Typographe(rune)
this.passive = function(cmd)
{
- this.layer.clear();
+ if(!this.layer){ this.create_layer(); }
+
if(cmd.variable("text")){
this.add_text(this.layer.context(),cmd);
}
diff --git a/scripts/modules/vector.js b/scripts/modules/vector.js
index e550dcb..4fe688f 100644
--- a/scripts/modules/vector.js
+++ b/scripts/modules/vector.js
@@ -5,22 +5,16 @@ function Vector(rune)
this.parameters = [Any];
this.variables = {"fill_color" : "none","stroke_width" : 5,"stroke_color" : "#ffffff", "line_cap" : "square"};
- this.layer = null;
this.coordinates = [];
this.last_pos = null;
this.paths = [];
-
- this.install = function()
- {
- this.layer = new Layer("Vector.Preview",this);
- this.layer.element.setAttribute("style","z-index:8000;opacity:0.75");
- ronin.surface.add_layer(this.layer);
- }
// Module
this.passive = function(cmd)
{
+ if(!this.layer){ this.create_layer(); }
+
this.layer.clear();
this.layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "square";
this.layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : 10;
@@ -32,7 +26,9 @@ function Vector(rune)
{
this.paths.push(this.create_path());
this.coordinates = [];
- this.layer.clear();
+
+ this.layer.remove(this);
+
ronin.surface.active_layer.context().lineCap = cmd.variable("line_cap") ? cmd.variable("line_cap").value : "square";
ronin.surface.active_layer.context().lineWidth = cmd.variable("stroke_width") ? cmd.variable("stroke_width").value : 10;
ronin.surface.active_layer.context().strokeStyle = cmd.variable("stroke_color") ? cmd.variable("stroke_color").value : "#ffffff";