Improved layer display

This commit is contained in:
Devine Lu Linvega 2017-01-17 09:22:35 -07:00
parent 348943c505
commit 35edb43503
5 changed files with 25 additions and 6 deletions

View File

@ -10,7 +10,9 @@ canvas:hover { cursor: crosshair;}
#widget { color:#fff; position:absolute; font-size:10px; padding-top:10px; border-top:1px solid #333; background-image:url(../media/graphics/logo.svg); background-repeat:no-repeat; background-size:80px 80px; height:100px; background-position: -10px 10px; line-height:20px;} #widget { color:#fff; position:absolute; font-size:10px; padding-top:10px; border-top:1px solid #333; background-image:url(../media/graphics/logo.svg); background-repeat:no-repeat; background-size:80px 80px; height:100px; background-position: -10px 10px; line-height:20px;}
#widget .module:first-child { margin-left:80px; } #widget .module:first-child { margin-left:80px; }
#widget .module { float:left; margin-right:10px; margin-top:5px; width: 20% } #widget .module { float:left; margin-right:10px; margin-top:5px; width: 20% }
#widget .module .highlight:after { content:"_"; color:red;} #widget .module .layer { color:#999; padding:2px 5px;}
#widget .module .highlight { background:#fff; color:black;}
#widget .module .highlight.managed { background:red; color:black; }
#widget .cursor { float:right; text-align: right; margin-top:5px} #widget .cursor { float:right; text-align: right; margin-top:5px}
#widget .layer:hover { cursor:pointer;} #widget .layer:hover { cursor:pointer;}

View File

@ -36,7 +36,6 @@ starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
commander.query("~ "+ronin.timestamp()); commander.query("~ "+ronin.timestamp());
commander.query("# "+starting_canvas.render()); commander.query("# "+starting_canvas.render());
commander.query("# layer=background"); commander.query("# layer=background");
// commander.query("# #efefef"); commander.query("# #ff0000");
commander.query("# layer=main"); commander.query("# layer=main");
commander.query("> 1 0,0 #ff0000"); commander.query("> 1 ; > 0,0 ; > 1,1 ; > #ffffff");
commander.query("> 1 1,1 #ff0000");

View File

@ -7,6 +7,14 @@ function FileSave(rune)
this.docs = "Creates a new window with a image of the resulting canvas in the specified format."; 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("Export",this);
ronin.surface.add_layer(this.layer);
}
this.active = function(cmd) this.active = function(cmd)
{ {
var d = null; var d = null;

View File

@ -9,7 +9,8 @@ function Overlay(rune)
this.install = function() this.install = function()
{ {
this.layer = new Layer("Test",this); this.layer = new Layer("Guide",this);
this.layer.element.setAttribute("style","z-index:9000");
ronin.surface.add_layer(this.layer); ronin.surface.add_layer(this.layer);
} }

View File

@ -44,7 +44,16 @@ function Layer(name,manager = null)
this.widget = function() this.widget = function()
{ {
return (ronin.surface.active_layer.name == this.name) ? "<span class='highlight'>- "+(this.manager != null ? this.manager.constructor.name+"." : '')+this.name+"</span><br />" : "- "+(this.manager != null ? this.manager.constructor.name+"." : '')+this.name+"<br />"; var e_name = "";
if(this.manager != null){ e_name += this.manager.constructor.name+"."; }
e_name += this.name;
var e_class = "";
e_class += "layer ";
if(ronin.surface.active_layer.name == this.name){ e_class += "highlight "; }
if(this.manager != null){ e_class += "managed "; }
return "<span class='"+e_class+"'>- "+e_name+"</span><br />";
} }
this.move_from = null; this.move_from = null;