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

Optimized managed layers

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-01-26 09:35:08 -07:00
parent 761f04d72f
commit 041d7ecfdf
11 changed files with 50 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -12,6 +12,7 @@
<script type="text/javascript" src="scripts/units/variable.js"></script>
<script type="text/javascript" src="scripts/units/range.js"></script>
<script type="text/javascript" src="scripts/modules/cursor.js"></script>
<script type="text/javascript" src="scripts/modules/module.js"></script>
<script type="text/javascript" src="scripts/modules/stroke.js"></script>
<script type="text/javascript" src="scripts/modules/vector.js"></script>
@ -38,7 +39,6 @@
<script type="text/javascript" src="scripts/filters/saturation.js"></script>
<script type="text/javascript" src="scripts/core/keyboard.js"></script>
<script type="text/javascript" src="scripts/core/cursor.js"></script>
<script type="text/javascript" src="scripts/core/command.js"></script>
<script type="text/javascript" src="scripts/core/commander.js"></script>
<script type="text/javascript" src="scripts/core/commander.hint.js"></script>

4
scripts/core/keyboard.js
View File

@ -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){

25
scripts/core/cursor.js → scripts/modules/cursor.js
View File

@ -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));
}
//

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

@ -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("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
}
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){

13
scripts/modules/module.js
View File

@ -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()
{
}
}

1
scripts/modules/overlay.js
View File

@ -5,7 +5,6 @@ function Overlay(rune)
this.parameters = [Position,Rect,Color];
this.color = new Color("#ffffff");
this.layer = null;
this.install = function()
{

13
scripts/modules/render.js
View File

@ -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; }

3
scripts/modules/surface.js
View File

@ -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)

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

@ -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');

16
scripts/modules/typographe.js
View File

@ -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);
}

14
scripts/modules/vector.js
View File

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