diff --git a/editor/draw.js b/editor/draw.js index c0708022..e1bc1006 100644 --- a/editor/draw.js +++ b/editor/draw.js @@ -90,6 +90,7 @@ svgedit.draw.Drawing = function(svgElem, opt_idPrefix) { /** * The current layer being used. + * TODO: Make this a {Layer}. * @type {SVGGElement} */ this.current_layer = null; @@ -115,10 +116,6 @@ svgedit.draw.Drawing.prototype.getSvgElem = function() { return this.svgElem_; }; -svgedit.draw.Drawing.prototype.getCurrentLayer = function() { - return this.current_layer; -}; - svgedit.draw.Drawing.prototype.getNonce = function() { return this.nonce_; }; @@ -218,6 +215,67 @@ svgedit.draw.Drawing.prototype.hasLayer = function(name) { return false; }; + +// Function: svgedit.draw.Drawing.getLayerName +// Returns the name of the ith layer. If the index is out of range, an empty string is returned. +// +// Parameters: +// i - the zero-based index of the layer you are querying. +// +// Returns: +// The name of the ith layer +svgedit.draw.Drawing.prototype.getLayerName = function(i) { + if (i >= 0 && i < this.getNumLayers()) { + return this.all_layers[i][0]; + } + return ""; +}; + +// Function: svgedit.draw.Drawing.getCurrentLayer +// Returns: +// The SVGGElement representing the current layer. +svgedit.draw.Drawing.prototype.getCurrentLayer = function() { + return this.current_layer; +}; + +// Function: getCurrentLayerName +// Returns the name of the currently selected layer. If an error occurs, an empty string +// is returned. +// +// Returns: +// The name of the currently active layer. +svgedit.draw.Drawing.prototype.getCurrentLayerName = function() { + for (var i = 0; i < this.getNumLayers(); ++i) { + if (this.all_layers[i][1] == this.current_layer) { + return this.getLayerName(i); + } + } + return ""; +}; + +// Function: setCurrentLayer +// Sets the current layer. If the name is not a valid layer name, then this function returns +// false. Otherwise it returns true. This is not an undo-able action. +// +// Parameters: +// name - the name of the layer you want to switch to. +// +// Returns: +// true if the current layer was switched, otherwise false +svgedit.draw.Drawing.prototype.setCurrentLayer = function(name) { + for (var i = 0; i < this.getNumLayers(); ++i) { + if (name == this.getLayerName(i)) { + if (this.current_layer != this.all_layers[i][1]) { + this.current_layer.setAttribute("style", "pointer-events:none"); + this.current_layer = this.all_layers[i][1]; + this.current_layer.setAttribute("style", "pointer-events:all"); + } + return true; + } + } + return false; +}; + // Function: svgedit.draw.Drawing.identifyLayers // Updates layer system svgedit.draw.Drawing.prototype.identifyLayers = function() { @@ -284,20 +342,4 @@ svgedit.draw.Drawing.prototype.identifyLayers = function() { }; -// Function: svgedit.draw.Drawing.getLayer -// Returns the name of the ith layer. If the index is out of range, an empty string is returned. -// -// Parameters: -// i - the zero-based index of the layer you are querying. -// -// Returns: -// The name of the ith layer -svgedit.draw.Drawing.prototype.getLayer = function(i) { - if (i >= 0 && i < this.getNumLayers()) { - return this.all_layers[i][0]; - } - return ""; -}; - - })(); diff --git a/editor/embedapi.js b/editor/embedapi.js index 24c5873f..fbf26914 100644 --- a/editor/embedapi.js +++ b/editor/embedapi.js @@ -66,13 +66,13 @@ function embedded_svg_edit(frame){ //Run in firebug on http://svg-edit.googlecode.com/svn/trunk/docs/files/svgcanvas-js.html //for(var i=0,q=[],f = document.querySelectorAll("div.CFunction h3.CTitle a");i'; + link_str = '' + svgCanvas.getCurrentLayerName() + ''; $(context).parentsUntil('#svgcontent > g').andSelf().each(function() { if(this.id) { @@ -1448,7 +1448,7 @@ var elem = selectedElement; // If element has just been deleted, consider it null if(elem != null && !elem.parentNode) elem = null; - var currentLayer = svgCanvas.getCurrentLayer(); + var currentLayerName = svgCanvas.getCurrentLayerName(); var currentMode = svgCanvas.getMode(); // No need to update anything else in rotate mode if (currentMode == 'rotate' && elem != null) { @@ -1473,7 +1473,6 @@ // elem = elem.firstChild; // } - var angle = svgCanvas.getRotationAngle(elem); $('#angle').val(angle); @@ -1677,7 +1676,7 @@ if ( (elem && !is_node) || multiselected) { // update the selected elements' layer - $('#selLayerNames').removeAttr('disabled').val(currentLayer); + $('#selLayerNames').removeAttr('disabled').val(currentLayerName); // Enable regular menu options canv_menu.enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back'); @@ -3568,7 +3567,7 @@ } function cloneLayer() { - var name = svgCanvas.getCurrentLayer() + ' copy'; + var name = svgCanvas.getCurrentLayerName() + ' copy'; $.prompt(uiStrings.notification.enterUniqueLayerName, name, function(newName) { if (!newName) return; @@ -3696,7 +3695,7 @@ // if no layer is passed in, this function restores the other layers var toggleHighlightLayer = function(layerNameToHighlight) { var curNames = new Array(svgCanvas.getCurrentDrawing().getNumLayers()); - for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getCurrentDrawing().getLayer(i); } + for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getCurrentDrawing().getLayerName(i); } if (layerNameToHighlight) { for (var i = 0; i < curNames.length; ++i) { @@ -3717,15 +3716,15 @@ var selLayerNames = $('#selLayerNames'); layerlist.empty(); selLayerNames.empty(); - var currentlayer = svgCanvas.getCurrentLayer(); + var currentLayerName = svgCanvas.getCurrentLayerName(); var layer = svgCanvas.getCurrentDrawing().getNumLayers(); var icon = $.getSvgIcon('eye'); // we get the layers in the reverse z-order (the layer rendered on top is listed first) while (layer--) { - var name = svgCanvas.getCurrentDrawing().getLayer(layer); + var name = svgCanvas.getCurrentDrawing().getLayerName(layer); // contenteditable=\"true\" var appendstr = ""; diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index ad148a01..f5f2820a 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -6956,8 +6956,7 @@ this.importSvgString = function(xmlString) { // Updates layer system var identifyLayers = canvas.identifyLayers = function() { leaveContext(); - current_drawing.identifyLayers(); - current_drawing.current_layer = current_drawing.all_layers[current_drawing.getNumLayers() - 1][1]; + getCurrentDrawing().identifyLayers(); }; // Function: createLayer @@ -7026,26 +7025,21 @@ this.deleteCurrentLayer = function() { addCommandToHistory(batchCmd); clearSelection(); identifyLayers(); - canvas.setCurrentLayer(current_drawing.getLayer(current_drawing.getNumLayers())); + canvas.setCurrentLayer(current_drawing.getLayerName(current_drawing.getNumLayers())); call("changed", [svgcontent]); return true; } return false; }; -// Function: getCurrentLayer -// Returns the name of the currently selected layer. If an error occurs, an empty string +// Function: getCurrentLayerName +// Returns the name of the currently selected layer in the current drawing. If an error occurs, an empty string // is returned. // // Returns: -// The name of the currently active layer. -this.getCurrentLayer = function() { - for (var i = 0; i < current_drawing.getNumLayers(); ++i) { - if (current_drawing.all_layers[i][1] == current_drawing.current_layer) { - return current_drawing.getLayer(i); - } - } - return ""; +// The name of the currently active layer in the current drawing. +this.getCurrentLayerName = function() { + return getCurrentDrawing().getCurrentLayerName(); }; // Function: setCurrentLayer @@ -7058,19 +7052,11 @@ this.getCurrentLayer = function() { // Returns: // true if the current layer was switched, otherwise false this.setCurrentLayer = function(name) { - name = svgedit.utilities.toXml(name); - for (var i = 0; i < current_drawing.getNumLayers(); ++i) { - if (name == current_drawing.getLayer(i)) { - if (current_drawing.current_layer != current_drawing.all_layers[i][1]) { - clearSelection(); - current_drawing.current_layer.setAttribute("style", "pointer-events:none"); - current_drawing.current_layer = current_drawing.all_layers[i][1]; - current_drawing.current_layer.setAttribute("style", "pointer-events:all"); - } - return true; - } + var result = getCurrentDrawing().setCurrentLayer(svgedit.utilities.toXml(name)); + if (result) { + clearSelection(); } - return false; + return result; }; // Function: renameCurrentLayer @@ -7094,7 +7080,7 @@ this.renameCurrentLayer = function(newname) { for (var i = 0; i < current_drawing.getNumLayers(); ++i) { if (current_drawing.all_layers[i][1] == oldLayer) break; } - var oldname = current_drawing.getLayer(i); + var oldname = current_drawing.getLayerName(i); current_drawing.all_layers[i][0] = svgedit.utilities.toXml(newname); // now change the underlying title element contents @@ -7155,7 +7141,7 @@ this.setCurrentLayerPosition = function(newpos) { addCommandToHistory(new MoveElementCommand(current_drawing.current_layer, oldNextSibling, svgcontent)); identifyLayers(); - canvas.setCurrentLayer(current_drawing.getLayer(newpos)); + canvas.setCurrentLayer(current_drawing.getLayerName(newpos)); return true; } @@ -7177,7 +7163,7 @@ this.getLayerVisibility = function(layername) { // find the layer var layer = null; for (var i = 0; i < current_drawing.getNumLayers(); ++i) { - if (current_drawing.getLayer(i) == layername) { + if (current_drawing.getLayerName(i) == layername) { layer = current_drawing.all_layers[i][1]; break; } @@ -7200,7 +7186,7 @@ this.setLayerVisibility = function(layername, bVisible) { // find the layer var layer = null; for (var i = 0; i < current_drawing.getNumLayers(); ++i) { - if (current_drawing.getLayer(i) == layername) { + if (current_drawing.getLayerName(i) == layername) { layer = current_drawing.all_layers[i][1]; break; } @@ -7234,7 +7220,7 @@ this.moveSelectedToLayer = function(layername) { // find the layer var layer = null; for (var i = 0; i < current_drawing.getNumLayers(); ++i) { - if (current_drawing.getLayer(i) == layername) { + if (current_drawing.getLayerName(i) == layername) { layer = current_drawing.all_layers[i][1]; break; } @@ -7323,7 +7309,7 @@ this.mergeAllLayers = function() { // if layername is not a valid layer this.getLayerOpacity = function(layername) { for (var i = 0; i < current_drawing.getNumLayers(); ++i) { - if (current_drawing.getLayer(i) == layername) { + if (current_drawing.getLayerName(i) == layername) { var g = current_drawing.all_layers[i][1]; var opacity = g.getAttribute("opacity"); if (!opacity) { @@ -7349,7 +7335,7 @@ this.getLayerOpacity = function(layername) { this.setLayerOpacity = function(layername, opacity) { if (opacity < 0.0 || opacity > 1.0) return; for (var i = 0; i < current_drawing.getNumLayers(); ++i) { - if (current_drawing.getLayer(i) == layername) { + if (current_drawing.getLayerName(i) == layername) { var g = current_drawing.all_layers[i][1]; g.setAttribute("opacity", opacity); break; diff --git a/test/draw_test.html b/test/draw_test.html index 9330d55b..efe7a570 100644 --- a/test/draw_test.html +++ b/test/draw_test.html @@ -20,6 +20,9 @@ var SENS = "http://svg-edit.googlecode.com"; var XMLNSNS = "http://www.w3.org/2000/xmlns/"; var NONCE = 'foo'; + var LAYER1 = 'Layer 1'; + var LAYER2 = 'Layer 2'; + var LAYER3 = 'Layer 3'; var svg = document.createElementNS(SVGNS, 'svg'); @@ -31,19 +34,19 @@ var setupSvgWith3Layers = function(svgElem) { var layer1 = document.createElementNS(SVGNS, 'g'); var layer1_title = document.createElementNS(SVGNS, 'title'); - layer1_title.appendChild(document.createTextNode('Layer 1')); + layer1_title.appendChild(document.createTextNode(LAYER1)); layer1.appendChild(layer1_title); svgElem.appendChild(layer1); var layer2 = document.createElementNS(SVGNS, 'g'); var layer2_title = document.createElementNS(SVGNS, 'title'); - layer2_title.appendChild(document.createTextNode('Layer 2')); + layer2_title.appendChild(document.createTextNode(LAYER2)); layer2.appendChild(layer2_title); svgElem.appendChild(layer2); var layer3 = document.createElementNS(SVGNS, 'g'); var layer3_title = document.createElementNS(SVGNS, 'title'); - layer3_title.appendChild(document.createTextNode('Layer 3')); + layer3_title.appendChild(document.createTextNode(LAYER3)); layer3.appendChild(layer3_title); svgElem.appendChild(layer3); }; @@ -225,9 +228,9 @@ equals(typeof drawing.hasLayer, typeof function() {}); ok(!drawing.hasLayer('invalid-layer')); - ok(drawing.hasLayer("Layer 3")); - ok(drawing.hasLayer("Layer 2")); - ok(drawing.hasLayer("Layer 1")); + ok(drawing.hasLayer(LAYER3)); + ok(drawing.hasLayer(LAYER2)); + ok(drawing.hasLayer(LAYER1)); cleanupSvg(svg); }); @@ -306,7 +309,7 @@ cleanupSvg(svg); }); - test('Test getLayer()', function() { + test('Test getLayerName()', function() { expect(4); var drawing = new svgedit.draw.Drawing(svg); @@ -315,9 +318,9 @@ drawing.identifyLayers(); equals(drawing.getNumLayers(), 3); - equals(drawing.getLayer(0), "Layer 1"); - equals(drawing.getLayer(1), "Layer 2"); - equals(drawing.getLayer(2), "Layer 3"); + equals(drawing.getLayerName(0), LAYER1); + equals(drawing.getLayerName(1), LAYER2); + equals(drawing.getLayerName(2), LAYER3); cleanupSvg(svg); }); @@ -335,6 +338,25 @@ equals(drawing.getCurrentLayer(), drawing.all_layers[2][1]); }); + test('Test setCurrentLayer() and getCurrentLayerName()', function() { + expect(6); + + var drawing = new svgedit.draw.Drawing(svg); + setupSvgWith3Layers(svg); + + drawing.identifyLayers(); + ok(drawing.setCurrentLayer); + equals(typeof drawing.setCurrentLayer, typeof function(){}); + + drawing.setCurrentLayer(LAYER2); + equals(drawing.getCurrentLayerName(LAYER2), LAYER2); + equals(drawing.getCurrentLayer(), drawing.all_layers[1][1]); + + drawing.setCurrentLayer(LAYER3); + equals(drawing.getCurrentLayerName(LAYER3), LAYER3); + equals(drawing.getCurrentLayer(), drawing.all_layers[2][1]); + }); + });