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";