123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528 |
- /**
- * Package: svgedit.draw
- *
- * Licensed under the Apache License, Version 2
- *
- * Copyright(c) 2011 Jeff Schiller
- */
- // Dependencies:
- // 1) jQuery
- // 2) browser.js
- // 3) svgutils.js
- var svgedit = svgedit || {};
- (function() {
- if (!svgedit.draw) {
- svgedit.draw = {};
- }
- var svg_ns = "http://www.w3.org/2000/svg";
- var se_ns = "http://svg-edit.googlecode.com";
- var xmlns_ns = "http://www.w3.org/2000/xmlns/";
- var visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use';
- var visElems_arr = visElems.split(',');
- var RandomizeModes = {
- LET_DOCUMENT_DECIDE: 0,
- ALWAYS_RANDOMIZE: 1,
- NEVER_RANDOMIZE: 2
- };
- var randomize_ids = RandomizeModes.LET_DOCUMENT_DECIDE;
- /**
- * This class encapsulates the concept of a layer in the drawing
- * @param name {String} Layer name
- * @param child {SVGGElement} Layer SVG group.
- */
- svgedit.draw.Layer = function(name, group) {
- this.name_ = name;
- this.group_ = group;
- };
- svgedit.draw.Layer.prototype.getName = function() {
- return this.name_;
- };
- svgedit.draw.Layer.prototype.getGroup = function() {
- return this.group_;
- };
- // Called to ensure that drawings will or will not have randomized ids.
- // The current_drawing will have its nonce set if it doesn't already.
- //
- // Params:
- // enableRandomization - flag indicating if documents should have randomized ids
- svgedit.draw.randomizeIds = function(enableRandomization, current_drawing) {
- randomize_ids = enableRandomization == false ?
- RandomizeModes.NEVER_RANDOMIZE :
- RandomizeModes.ALWAYS_RANDOMIZE;
- if (randomize_ids == RandomizeModes.ALWAYS_RANDOMIZE && !current_drawing.getNonce()) {
- current_drawing.setNonce(Math.floor(Math.random() * 100001));
- } else if (randomize_ids == RandomizeModes.NEVER_RANDOMIZE && current_drawing.getNonce()) {
- current_drawing.clearNonce();
- }
- };
- /**
- * This class encapsulates the concept of a SVG-edit drawing
- *
- * @param svgElem {SVGSVGElement} The SVG DOM Element that this JS object
- * encapsulates. If the svgElem has a se:nonce attribute on it, then
- * IDs will use the nonce as they are generated.
- * @param opt_idPrefix {String} The ID prefix to use. Defaults to "svg_"
- * if not specified.
- */
- svgedit.draw.Drawing = function(svgElem, opt_idPrefix) {
- if (!svgElem || !svgElem.tagName || !svgElem.namespaceURI ||
- svgElem.tagName != 'svg' || svgElem.namespaceURI != svg_ns) {
- throw "Error: svgedit.draw.Drawing instance initialized without a <svg> element";
- }
- /**
- * The SVG DOM Element that represents this drawing.
- * @type {SVGSVGElement}
- */
- this.svgElem_ = svgElem;
-
- /**
- * The latest object number used in this drawing.
- * @type {number}
- */
- this.obj_num = 0;
-
- /**
- * The prefix to prepend to each element id in the drawing.
- * @type {String}
- */
- this.idPrefix = opt_idPrefix || "svg_";
-
- /**
- * An array of released element ids to immediately reuse.
- * @type {Array.<number>}
- */
- this.releasedNums = [];
- /**
- * The z-ordered array of tuples containing layer names and <g> elements.
- * The first layer is the one at the bottom of the rendering.
- * TODO: Turn this into an Array.<Layer>
- * @type {Array.<Array.<String, SVGGElement>>}
- */
- this.all_layers = [];
- /**
- * The current layer being used.
- * TODO: Make this a {Layer}.
- * @type {SVGGElement}
- */
- this.current_layer = null;
- /**
- * The nonce to use to uniquely identify elements across drawings.
- * @type {!String}
- */
- this.nonce_ = "";
- var n = this.svgElem_.getAttributeNS(se_ns, 'nonce');
- // If already set in the DOM, use the nonce throughout the document
- // else, if randomizeIds(true) has been called, create and set the nonce.
- if (!!n && randomize_ids != RandomizeModes.NEVER_RANDOMIZE) {
- this.nonce_ = n;
- } else if (randomize_ids == RandomizeModes.ALWAYS_RANDOMIZE) {
- this.setNonce(Math.floor(Math.random() * 100001));
- }
- };
- svgedit.draw.Drawing.prototype.getElem_ = function(id) {
- if(this.svgElem_.querySelector) {
- // querySelector lookup
- return this.svgElem_.querySelector('#'+id);
- } else {
- // jQuery lookup: twice as slow as xpath in FF
- return $(this.svgElem_).find('[id=' + id + ']')[0];
- }
- };
- svgedit.draw.Drawing.prototype.getSvgElem = function() {
- return this.svgElem_;
- };
- svgedit.draw.Drawing.prototype.getNonce = function() {
- return this.nonce_;
- };
- svgedit.draw.Drawing.prototype.setNonce = function(n) {
- this.svgElem_.setAttributeNS(xmlns_ns, 'xmlns:se', se_ns);
- this.svgElem_.setAttributeNS(se_ns, 'se:nonce', n);
- this.nonce_ = n;
- };
- svgedit.draw.Drawing.prototype.clearNonce = function() {
- // We deliberately leave any se:nonce attributes alone,
- // we just don't use it to randomize ids.
- this.nonce_ = "";
- };
- /**
- * Returns the latest object id as a string.
- * @return {String} The latest object Id.
- */
- svgedit.draw.Drawing.prototype.getId = function() {
- return this.nonce_ ?
- this.idPrefix + this.nonce_ +'_' + this.obj_num :
- this.idPrefix + this.obj_num;
- };
- /**
- * Returns the next object Id as a string.
- * @return {String} The next object Id to use.
- */
- svgedit.draw.Drawing.prototype.getNextId = function() {
- var oldObjNum = this.obj_num;
- var restoreOldObjNum = false;
- // If there are any released numbers in the release stack,
- // use the last one instead of the next obj_num.
- // We need to temporarily use obj_num as that is what getId() depends on.
- if (this.releasedNums.length > 0) {
- this.obj_num = this.releasedNums.pop();
- restoreOldObjNum = true;
- } else {
- // If we are not using a released id, then increment the obj_num.
- this.obj_num++;
- }
- // Ensure the ID does not exist.
- var id = this.getId();
- while (this.getElem_(id)) {
- if (restoreOldObjNum) {
- this.obj_num = oldObjNum;
- restoreOldObjNum = false;
- }
- this.obj_num++;
- id = this.getId();
- }
- // Restore the old object number if required.
- if (restoreOldObjNum) {
- this.obj_num = oldObjNum;
- }
- return id;
- };
- // Function: svgedit.draw.Drawing.releaseId
- // Releases the object Id, letting it be used as the next id in getNextId().
- // This method DOES NOT remove any elements from the DOM, it is expected
- // that client code will do this.
- //
- // Parameters:
- // id - The id to release.
- //
- // Returns:
- // True if the id was valid to be released, false otherwise.
- svgedit.draw.Drawing.prototype.releaseId = function(id) {
- // confirm if this is a valid id for this Document, else return false
- var front = this.idPrefix + (this.nonce_ ? this.nonce_ +'_' : '');
- if (typeof id != typeof '' || id.indexOf(front) != 0) {
- return false;
- }
- // extract the obj_num of this id
- var num = parseInt(id.substr(front.length));
- // if we didn't get a positive number or we already released this number
- // then return false.
- if (typeof num != typeof 1 || num <= 0 || this.releasedNums.indexOf(num) != -1) {
- return false;
- }
-
- // push the released number into the released queue
- this.releasedNums.push(num);
- return true;
- };
- // Function: svgedit.draw.Drawing.getNumLayers
- // Returns the number of layers in the current drawing.
- //
- // Returns:
- // The number of layers in the current drawing.
- svgedit.draw.Drawing.prototype.getNumLayers = function() {
- return this.all_layers.length;
- };
- // Function: svgedit.draw.Drawing.hasLayer
- // Check if layer with given name already exists
- svgedit.draw.Drawing.prototype.hasLayer = function(name) {
- for(var i = 0; i < this.getNumLayers(); i++) {
- if(this.all_layers[i][0] == name) return true;
- }
- 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.deleteCurrentLayer
- // Deletes the current layer from the drawing and then clears the selection. This function
- // then calls the 'changed' handler. This is an undoable action.
- // Returns:
- // The SVGGElement of the layer removed or null.
- svgedit.draw.Drawing.prototype.deleteCurrentLayer = function() {
- if (this.current_layer && this.getNumLayers() > 1) {
- // actually delete from the DOM and return it
- var parent = this.current_layer.parentNode;
- var nextSibling = this.current_layer.nextSibling;
- var oldLayerGroup = parent.removeChild(this.current_layer);
- this.identifyLayers();
- return oldLayerGroup;
- }
- return null;
- };
- // Function: svgedit.draw.Drawing.identifyLayers
- // Updates layer system and sets the current layer to the
- // top-most layer (last <g> child of this drawing).
- svgedit.draw.Drawing.prototype.identifyLayers = function() {
- this.all_layers = [];
- var numchildren = this.svgElem_.childNodes.length;
- // loop through all children of SVG element
- var orphans = [], layernames = [];
- var a_layer = null;
- var childgroups = false;
- for (var i = 0; i < numchildren; ++i) {
- var child = this.svgElem_.childNodes.item(i);
- // for each g, find its layer name
- if (child && child.nodeType == 1) {
- if (child.tagName == "g") {
- childgroups = true;
- var name = $("title",child).text();
-
- // Hack for Opera 10.60
- if(!name && svgedit.browser.isOpera() && child.querySelectorAll) {
- name = $(child.querySelectorAll('title')).text();
- }
- // store layer and name in global variable
- if (name) {
- layernames.push(name);
- this.all_layers.push( [name,child] );
- a_layer = child;
- svgedit.utilities.walkTree(child, function(e){e.setAttribute("style", "pointer-events:inherit");});
- a_layer.setAttribute("style", "pointer-events:none");
- }
- // if group did not have a name, it is an orphan
- else {
- orphans.push(child);
- }
- }
- // if child has is "visible" (i.e. not a <title> or <defs> element), then it is an orphan
- else if(~visElems_arr.indexOf(child.nodeName)) {
- var bb = svgedit.utilities.getBBox(child);
- orphans.push(child);
- }
- }
- }
-
- // create a new layer and add all the orphans to it
- var svgdoc = this.svgElem_.ownerDocument;
- if (orphans.length > 0 || !childgroups) {
- var i = 1;
- // TODO(codedread): What about internationalization of "Layer"?
- while (layernames.indexOf(("Layer " + i)) >= 0) { i++; }
- var newname = "Layer " + i;
- a_layer = svgdoc.createElementNS(svg_ns, "g");
- var layer_title = svgdoc.createElementNS(svg_ns, "title");
- layer_title.textContent = newname;
- a_layer.appendChild(layer_title);
- for (var j = 0; j < orphans.length; ++j) {
- a_layer.appendChild(orphans[j]);
- }
- this.svgElem_.appendChild(a_layer);
- this.all_layers.push( [newname, a_layer] );
- }
- svgedit.utilities.walkTree(a_layer, function(e){e.setAttribute("style","pointer-events:inherit");});
- this.current_layer = a_layer;
- this.current_layer.setAttribute("style","pointer-events:all");
- };
- // Function: svgedit.draw.Drawing.createLayer
- // Creates a new top-level layer in the drawing with the given name and
- // sets the current layer to it.
- //
- // Parameters:
- // name - The given name
- //
- // Returns:
- // The SVGGElement of the new layer, which is also the current layer
- // of this drawing.
- svgedit.draw.Drawing.prototype.createLayer = function(name) {
- var svgdoc = this.svgElem_.ownerDocument;
- var new_layer = svgdoc.createElementNS(svg_ns, "g");
- var layer_title = svgdoc.createElementNS(svg_ns, "title");
- layer_title.textContent = name;
- new_layer.appendChild(layer_title);
- this.svgElem_.appendChild(new_layer);
- this.identifyLayers();
- return new_layer;
- };
- // Function: svgedit.draw.Drawing.getLayerVisibility
- // Returns whether the layer is visible. If the layer name is not valid, then this function
- // returns false.
- //
- // Parameters:
- // layername - the name of the layer which you want to query.
- //
- // Returns:
- // The visibility state of the layer, or false if the layer name was invalid.
- svgedit.draw.Drawing.prototype.getLayerVisibility = function(layername) {
- // find the layer
- var layer = null;
- for (var i = 0; i < this.getNumLayers(); ++i) {
- if (this.getLayerName(i) == layername) {
- layer = this.all_layers[i][1];
- break;
- }
- }
- if (!layer) return false;
- return (layer.getAttribute('display') != 'none');
- };
- // Function: svgedit.draw.Drawing.setLayerVisibility
- // Sets the visibility of the layer. If the layer name is not valid, this function return
- // false, otherwise it returns true. This is an undo-able action.
- //
- // Parameters:
- // layername - the name of the layer to change the visibility
- // bVisible - true/false, whether the layer should be visible
- //
- // Returns:
- // The SVGGElement representing the layer if the layername was valid, otherwise null.
- svgedit.draw.Drawing.prototype.setLayerVisibility = function(layername, bVisible) {
- if (typeof bVisible != typeof true) {
- return null;
- }
- // find the layer
- var layer = null;
- for (var i = 0; i < this.getNumLayers(); ++i) {
- if (this.getLayerName(i) == layername) {
- layer = this.all_layers[i][1];
- break;
- }
- }
- if (!layer) return null;
-
- var oldDisplay = layer.getAttribute("display");
- if (!oldDisplay) oldDisplay = "inline";
- layer.setAttribute("display", bVisible ? "inline" : "none");
- return layer;
- };
- // Function: svgedit.draw.Drawing.getLayerOpacity
- // Returns the opacity of the given layer. If the input name is not a layer, null is returned.
- //
- // Parameters:
- // layername - name of the layer on which to get the opacity
- //
- // Returns:
- // The opacity value of the given layer. This will be a value between 0.0 and 1.0, or null
- // if layername is not a valid layer
- svgedit.draw.Drawing.prototype.getLayerOpacity = function(layername) {
- for (var i = 0; i < this.getNumLayers(); ++i) {
- if (this.getLayerName(i) == layername) {
- var g = this.all_layers[i][1];
- var opacity = g.getAttribute('opacity');
- if (!opacity) {
- opacity = '1.0';
- }
- return parseFloat(opacity);
- }
- }
- return null;
- };
- // Function: svgedit.draw.Drawing.setLayerOpacity
- // Sets the opacity of the given layer. If the input name is not a layer, nothing happens.
- // If opacity is not a value between 0.0 and 1.0, then nothing happens.
- //
- // Parameters:
- // layername - name of the layer on which to set the opacity
- // opacity - a float value in the range 0.0-1.0
- svgedit.draw.Drawing.prototype.setLayerOpacity = function(layername, opacity) {
- if (typeof opacity != typeof 1.0 || opacity < 0.0 || opacity > 1.0) {
- return;
- }
- for (var i = 0; i < this.getNumLayers(); ++i) {
- if (this.getLayerName(i) == layername) {
- var g = this.all_layers[i][1];
- g.setAttribute("opacity", opacity);
- break;
- }
- }
- };
- })();
|