From 4ec6be307a6228667e57cb78a5420e9d3daf8e3a Mon Sep 17 00:00:00 2001 From: Jeff Schiller Date: Thu, 24 Sep 2009 04:48:40 +0000 Subject: [PATCH] Fix Issue 73: Implement Layers git-svn-id: http://svg-edit.googlecode.com/svn/trunk@704 eee81c28-f429-11dd-99c0-75d572ba1ddd --- editor/svg-editor.css | 6 ++++ editor/svg-editor.js | 19 ++++++++++- editor/svgcanvas.js | 73 ++++++++++++++++++++++--------------------- 3 files changed, 62 insertions(+), 36 deletions(-) diff --git a/editor/svg-editor.css b/editor/svg-editor.css index fa31ac29..38bef779 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -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 { diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 0d64db8c..a1d415f9 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -1175,7 +1175,12 @@ function svg_edit_setup() { while (layer--) { var name = svgCanvas.getLayer(layer); // contenteditable=\"true\" - layerlist.append("" + name + ""); + if (svgCanvas.getLayerVisibility(name)) { + layerlist.append("" + name + ""); + } + else { + layerlist.append("" + name + ""); + } } // 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(); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 3b2d777e..4a0851a8 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -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 = "";