Completely rework layer list into a table
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@703 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Jeff Schiller
parent
10cd262372
commit
000bb569c8
|
|
@ -121,16 +121,36 @@ body {
|
|||
}
|
||||
|
||||
#svg_editor #layerlist {
|
||||
margin: 0px;
|
||||
margin: 1px;
|
||||
padding: 0px;
|
||||
width: 110px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #808080;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* TODO: Make this work in more than just Firefox */
|
||||
#svg_editor #layerlist option {
|
||||
/* background-image: url('images/eye.png');*/
|
||||
#svg_editor #layerlist tr.layer {
|
||||
background-color: #FFFFFF;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
#svg_editor #layerlist tr.layersel {
|
||||
border: 1px solid #808080;
|
||||
background-color: #CCCCCC;
|
||||
}
|
||||
|
||||
#svg_editor #layerlist td.layervis {
|
||||
background-image: url('images/eye.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 4px center;
|
||||
padding-left: 25px;
|
||||
background-position: 3px center;
|
||||
width: 22px;
|
||||
}
|
||||
#svg_editor #layerlist td.layerinvis {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#svg_editor #layerlist tr.layersel td.layername {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#svg_editor div.palette_item {
|
||||
|
|
|
|||
|
|
@ -50,11 +50,12 @@
|
|||
<img id="layer_down" class="layer_button" src="images/go-down.png" alt="Move Layer Down" title="Move Layer Down"/>
|
||||
</fieldset>
|
||||
|
||||
<select id="layerlist" size="20" multiple="multiple">
|
||||
<option value="Layer 1" selected="selected">Layer 1</option>
|
||||
<option value="Layer 2">Layer 2</option>
|
||||
<option value="Layer 3">Layer 3</option>
|
||||
</select>
|
||||
<table id="layerlist">
|
||||
<tr class="layer">
|
||||
<td class="layervis"></td>
|
||||
<td class="layername">Layer 1</td>
|
||||
</td>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1102,8 +1102,8 @@ function svg_edit_setup() {
|
|||
svgCanvas.createLayer(newName);
|
||||
updateContextPanel();
|
||||
populateLayers();
|
||||
$('#layerlist option').removeAttr("selected");
|
||||
$('#layerlist option:first').attr("selected", "selected");
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:first').addClass("layersel");
|
||||
});
|
||||
|
||||
$('#layer_delete').click(function() {
|
||||
|
|
@ -1113,39 +1113,40 @@ function svg_edit_setup() {
|
|||
// This matches what SvgCanvas does
|
||||
// TODO: make this behavior less brittle (svg-editor should get which
|
||||
// layer is selected from the canvas and then select that one in the UI)
|
||||
$('#layerlist option:first').attr("selected", "selected");
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:first').addClass("layersel");
|
||||
}
|
||||
});
|
||||
|
||||
$('#layer_up').click(function() {
|
||||
// find index position of selected option
|
||||
var curIndex = $('#layerlist option:selected').prevAll().length;
|
||||
var curIndex = $('#layerlist tr.layersel').prevAll().length;
|
||||
if (curIndex > 0) {
|
||||
var total = $('#layerlist option').length;
|
||||
var total = $('#layerlist tr.layer').length;
|
||||
curIndex--;
|
||||
svgCanvas.setCurrentLayerPosition(total-curIndex-1);
|
||||
populateLayers();
|
||||
$('#layerlist option').removeAttr("selected");
|
||||
$('#layerlist option:eq('+curIndex+')').attr("selected", "selected");
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
|
||||
}
|
||||
});
|
||||
|
||||
$('#layer_down').click(function() {
|
||||
// find index position of selected option
|
||||
var curIndex = $('#layerlist option:selected').prevAll().length;
|
||||
var total = $('#layerlist option').length;
|
||||
var curIndex = $('#layerlist tr.layersel').prevAll().length;
|
||||
var total = $('#layerlist tr.layer').length;
|
||||
if (curIndex < total-1) {
|
||||
curIndex++;
|
||||
svgCanvas.setCurrentLayerPosition(total-curIndex-1);
|
||||
populateLayers();
|
||||
$('#layerlist option').removeAttr("selected");
|
||||
$('#layerlist option:eq('+curIndex+')').attr("selected", "selected");
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
|
||||
}
|
||||
});
|
||||
|
||||
$('#layer_rename').click(function() {
|
||||
var curIndex = $('#layerlist option:selected').prevAll().length;
|
||||
var oldName = $('#layerlist option:selected').attr("value");
|
||||
var curIndex = $('#layerlist tr.layersel').prevAll().length;
|
||||
var oldName = $('#layerlist tr.layersel td.layername').text();
|
||||
var newName = prompt("Please enter the new layer name","");
|
||||
if (!newName) return;
|
||||
if (oldName == newName) {
|
||||
|
|
@ -1162,34 +1163,39 @@ function svg_edit_setup() {
|
|||
|
||||
svgCanvas.renameCurrentLayer(newName);
|
||||
populateLayers();
|
||||
$('#layerlist option').removeAttr("selected");
|
||||
$('#layerlist option:eq('+curIndex+')').attr("selected", "selected");
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
$('#layerlist tr.layer:eq('+curIndex+')').addClass("layersel");
|
||||
});
|
||||
|
||||
var populateLayers = function(){
|
||||
$('#layerlist').empty();
|
||||
var layerlist = $('#layerlist tbody');
|
||||
layerlist.empty();
|
||||
var layer = svgCanvas.getNumLayers();
|
||||
// we get the layers in the reverse z-order (the layer rendered on top is listed first)
|
||||
while (layer--) {
|
||||
var name = svgCanvas.getLayer(layer);
|
||||
$('#layerlist').append("<option value=\"" + name + "\">" + name + "</option>");
|
||||
// contenteditable=\"true\"
|
||||
layerlist.append("<tr class=\"layer\"><td class=\"layervis\"/><td class=\"layername\" >" + name + "</td></tr>");
|
||||
}
|
||||
// if we only have one layer, then always make sure that layer is selected
|
||||
// (This is really only required upon first initialization)
|
||||
if ($('#layerlist').size() == 1) {
|
||||
$('#layerlist option:first').attr("selected", "selected");
|
||||
if (layerlist.size() == 1) {
|
||||
$('#layerlist tr:first').addClass("layersel");
|
||||
}
|
||||
$('#layerlist option').mouseup(function(evt){
|
||||
$('#layerlist option').removeAttr("selected");
|
||||
var option = $(this);
|
||||
option.attr("selected", "selected");
|
||||
svgCanvas.setCurrentLayer(option.attr("value"));
|
||||
}).click(function(evt) {
|
||||
var container = document.getElementById("layerlist");
|
||||
// var mouse_x = evt.pageX - container.boxObject.x;
|
||||
// var mouse_y = evt.pageY - container.boxObject.y;
|
||||
// mouse_x, mouse_y contain the relative x,y position of the click
|
||||
// handle selection of layer
|
||||
$('#layerlist td.layername').click(function(evt){
|
||||
$('#layerlist tr.layer').removeClass("layersel");
|
||||
var row = $(this.parentNode);
|
||||
row.addClass("layersel");
|
||||
svgCanvas.setCurrentLayer(this.textContent);
|
||||
});
|
||||
|
||||
// if there were too few rows, let's add a few to make it not so lonely
|
||||
var num = 5 - $('#layerlist tr.layer').size();
|
||||
while (num-- > 0) {
|
||||
// FIXME: there must a better way to do this
|
||||
layerlist.append("<tr><td style=\"color:white\">_</td><td/></tr>");
|
||||
}
|
||||
};
|
||||
populateLayers();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue