Fix Issue 73: Implement Layers
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@704 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
parent
000bb569c8
commit
4ec6be307a
|
@ -144,9 +144,15 @@ body {
|
|||
background-repeat: no-repeat;
|
||||
background-position: 3px center;
|
||||
width: 22px;
|
||||
cursor:pointer;
|
||||
}
|
||||
#svg_editor #layerlist td.layerinvis {
|
||||
background-image: none;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#svg_editor #layerlist td.layername {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#svg_editor #layerlist tr.layersel td.layername {
|
||||
|
|
|
@ -1175,7 +1175,12 @@ function svg_edit_setup() {
|
|||
while (layer--) {
|
||||
var name = svgCanvas.getLayer(layer);
|
||||
// contenteditable=\"true\"
|
||||
layerlist.append("<tr class=\"layer\"><td class=\"layervis\"/><td class=\"layername\" >" + name + "</td></tr>");
|
||||
if (svgCanvas.getLayerVisibility(name)) {
|
||||
layerlist.append("<tr class=\"layer\"><td class=\"layervis\"/><td class=\"layername\" >" + name + "</td></tr>");
|
||||
}
|
||||
else {
|
||||
layerlist.append("<tr class=\"layer\"><td class=\"layervis layerinvis\"/><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)
|
||||
|
@ -1189,6 +1194,18 @@ function svg_edit_setup() {
|
|||
row.addClass("layersel");
|
||||
svgCanvas.setCurrentLayer(this.textContent);
|
||||
});
|
||||
$('#layerlist td.layervis').click(function(evt){
|
||||
var row = $(this.parentNode).prevAll().length;
|
||||
var name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text();
|
||||
var vis = $(this).hasClass('layerinvis');
|
||||
svgCanvas.setLayerVisibility(name, vis);
|
||||
if (vis) {
|
||||
$(this).removeClass('layerinvis');
|
||||
}
|
||||
else {
|
||||
$(this).addClass('layerinvis');
|
||||
}
|
||||
});
|
||||
|
||||
// if there were too few rows, let's add a few to make it not so lonely
|
||||
var num = 5 - $('#layerlist tr.layer').size();
|
||||
|
|
|
@ -1,17 +1,3 @@
|
|||
/*
|
||||
Issue 73 (Layers) TODO:
|
||||
|
||||
- Fit To Content must look at all layers
|
||||
- convert select/options to tables, handle 'selection' of rows
|
||||
- add visibility icon to table as a column
|
||||
- determine how to toggle visibility of layers (UI-wise)
|
||||
- hide the pointer-events stuff from the serialized SVG source somehow
|
||||
- create a mouseover region on the sidepanels that is resizable and affects all children within
|
||||
- default the side panel to closed
|
||||
- add a button that opens the side panel?
|
||||
|
||||
*/
|
||||
|
||||
if(!window.console) {
|
||||
window.console = {};
|
||||
window.console.log = function(str) {};
|
||||
|
@ -28,7 +14,7 @@ var svgWhiteList = {
|
|||
"circle": ["cx", "cy", "fill", "fill-opacity", "id", "opacity", "r", "stroke", "stroke-dasharray", "stroke-opacity", "stroke-width", "transform"],
|
||||
"defs": [],
|
||||
"ellipse": ["cx", "cy", "fill", "fill-opacity", "id", "opacity", "rx", "ry", "stroke", "stroke-dasharray", "stroke-opacity", "stroke-width", "transform"],
|
||||
"g": ["id", "transform"],
|
||||
"g": ["id", "display", "transform"],
|
||||
"image": ["height", "id", "opacity", "transform", "width", "x", "xlink:href", "xlink:title", "y"],
|
||||
"line": ["fill", "fill-opacity", "id", "opacity", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-opacity", "stroke-width", "transform", "x1", "x2", "y1", "y2"],
|
||||
"linearGradient": ["id", "gradientTransform", "gradientUnits", "spreadMethod", "x1", "x2", "y1", "y2"],
|
||||
|
@ -2787,29 +2773,9 @@ function BatchCommand(text) {
|
|||
if (oldpos == all_layers.length) { return false; }
|
||||
|
||||
if (oldpos != newpos) {
|
||||
// TODO: we could use the following loop to quickly re-establish all_layers
|
||||
// but i think walking the DOM inside identifyLayers() is less bug-prone :)
|
||||
/*
|
||||
var new_layers = new Array(all_layers.length);
|
||||
var trackIndex = 0;
|
||||
for (var j = 0; j < new_layers.length; ++j) {
|
||||
// new position of current_layer
|
||||
if (newpos == j) {
|
||||
new_layers[j] = all_layers[oldpos];
|
||||
}
|
||||
else {
|
||||
// make sure we skip over the old position
|
||||
if (trackIndex == oldpos) trackIndex++;
|
||||
new_layers[j] = all_layers[trackIndex];
|
||||
trackIndex++;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// if our new position is below us, we need to insert before the node after newpos
|
||||
var refLayer = null;
|
||||
var oldNextSibling = current_layer.nextSibling;
|
||||
console.log([oldpos,newpos,all_layers.length]);
|
||||
if (newpos > oldpos ) {
|
||||
if (newpos < all_layers.length-1) {
|
||||
refLayer = all_layers[newpos+1][1];
|
||||
|
@ -2833,6 +2799,43 @@ function BatchCommand(text) {
|
|||
return false;
|
||||
};
|
||||
|
||||
this.getLayerVisibility = function(layername) {
|
||||
// find the layer
|
||||
var layer = null;
|
||||
for (var i = 0; i < all_layers.length; ++i) {
|
||||
if (all_layers[i][0] == layername) {
|
||||
layer = all_layers[i][1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!layer) return false;
|
||||
return (layer.getAttribute("display") != "none");
|
||||
};
|
||||
|
||||
this.setLayerVisibility = function(layername, bVisible) {
|
||||
// find the layer
|
||||
var layer = null;
|
||||
for (var i = 0; i < all_layers.length; ++i) {
|
||||
if (all_layers[i][0] == layername) {
|
||||
layer = all_layers[i][1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!layer) return false;
|
||||
|
||||
var oldDisplay = layer.getAttribute("display");
|
||||
if (!oldDisplay) oldDisplay = "inline";
|
||||
layer.setAttribute("display", bVisible ? "inline" : "none");
|
||||
addCommandToHistory(new ChangeElementCommand(layer, {"display":oldDisplay}, "Layer Visibility"));
|
||||
|
||||
if (layer == current_layer) {
|
||||
canvas.clearSelection();
|
||||
}
|
||||
// call("changed", [selected]);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// used internally
|
||||
var getLayerName = function(g) {
|
||||
var name = "";
|
||||
|
|
Loading…
Reference in New Issue