method_draw 0.0.1

data/vendor/assets/javascripts/method-draw-js/src/sanitize.js

@@ -0,0 +1,273 @@
+/**
+ * Package: svgedit.sanitize
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ * Copyright(c) 2010 Jeff Schiller
+ */
+
+// Dependencies:
+// 1) browser.js
+// 2) svgutils.js
+
+var svgedit = svgedit || {};
+
+(function() {
+
+if (!svgedit.sanitize) {
+	svgedit.sanitize = {};
+}
+
+// Namespace constants
+var svgns = "http://www.w3.org/2000/svg",
+	xlinkns = "http://www.w3.org/1999/xlink",
+	xmlns = "http://www.w3.org/XML/1998/namespace",
+	xmlnsns = "http://www.w3.org/2000/xmlns/", // see http://www.w3.org/TR/REC-xml-names/#xmlReserved
+	se_ns = "http://svg-edit.googlecode.com",
+	htmlns = "http://www.w3.org/1999/xhtml",
+	mathns = "http://www.w3.org/1998/Math/MathML";
+
+// map namespace URIs to prefixes
+var nsMap_ = {};
+nsMap_[xlinkns] = 'xlink';
+nsMap_[xmlns] = 'xml';
+nsMap_[xmlnsns] = 'xmlns';
+nsMap_[se_ns] = 'se';
+nsMap_[htmlns] = 'xhtml';
+nsMap_[mathns] = 'mathml';
+
+// map prefixes to namespace URIs
+var nsRevMap_ = {};
+$.each(nsMap_, function(key,value){
+	nsRevMap_[value] = key;
+});
+
+// this defines which elements and attributes that we support
+var svgWhiteList_ = {
+	// SVG Elements
+	"a": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "xlink:href", "xlink:title"],
+	"circle": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "r", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
+	"clipPath": ["class", "clipPathUnits", "id"],
+	"defs": [],
+        "style" : ["type"],
+	"desc": [],
+	"ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
+	"feGaussianBlur": ["class", "color-interpolation-filters", "id", "requiredFeatures", "stdDeviation"],
+	"filter": ["class", "color-interpolation-filters", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"],
+	"foreignObject": ["class", "font-size", "height", "id", "opacity", "requiredFeatures", "style", "transform", "width", "x", "y"],
+	"g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "font-family", "font-size", "font-style", "font-weight", "text-anchor", "data-locked"],
+	"image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"],
+	"line": ["shape-rendering", "class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"],
+	"linearGradient": ["class", "id", "gradientTransform", "gradientUnits", "requiredFeatures", "spreadMethod", "systemLanguage", "x1", "x2", "xlink:href", "y1", "y2"],
+	"marker": ["id", "class", "markerHeight", "markerUnits", "markerWidth", "orient", "preserveAspectRatio", "refX", "refY", "systemLanguage", "viewBox"],
+	"mask": ["class", "height", "id", "maskContentUnits", "maskUnits", "width", "x", "y"],
+	"metadata": ["class", "id"],
+	"path": ["class", "clip-path", "clip-rule", "d", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
+	"pattern": ["class", "height", "id", "patternContentUnits", "patternTransform", "patternUnits", "requiredFeatures", "style", "systemLanguage", "viewBox", "width", "x", "xlink:href", "y"],
+	"polygon": ["class", "clip-path", "clip-rule", "id", "fill", "fill-opacity", "fill-rule", "filter", "id", "class", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "points", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
+	"polyline": ["class", "clip-path", "clip-rule", "id", "fill", "fill-opacity", "fill-rule", "filter", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "points", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
+	"radialGradient": ["class", "cx", "cy", "fx", "fy", "gradientTransform", "gradientUnits", "id", "r", "requiredFeatures", "spreadMethod", "systemLanguage", "xlink:href"],
+	"rect": ["shape-rendering", "class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "width", "x", "y"],
+	"stop": ["class", "id", "offset", "requiredFeatures", "stop-color", "stop-opacity", "style", "systemLanguage"],
+	"svg": ["class", "clip-path", "clip-rule", "filter", "id", "height", "mask", "preserveAspectRatio", "requiredFeatures", "style", "systemLanguage", "viewBox", "width", "x", "xmlns", "xmlns:se", "xmlns:xlink", "y"],
+	"switch": ["class", "id", "requiredFeatures", "systemLanguage"],
+	"symbol": ["class", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "opacity", "preserveAspectRatio", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "viewBox"],
+	"text": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "transform", "x", "xml:space", "y"],
+	"textPath": ["class", "id", "method", "requiredFeatures", "spacing", "startOffset", "style", "systemLanguage", "transform", "xlink:href"],
+	"title": [],
+	"tspan": ["class", "clip-path", "clip-rule", "dx", "dy", "fill", "fill-opacity", "fill-rule", "filter", "font-family", "font-size", "font-style", "font-weight", "id", "mask", "opacity", "requiredFeatures", "rotate", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "text-anchor", "textLength", "transform", "x", "xml:space", "y"],
+	"use": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "height", "id", "mask", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "transform", "width", "x", "xlink:href", "y"],
+	
+	// MathML Elements
+	"annotation": ["encoding"],
+	"annotation-xml": ["encoding"],
+	"maction": ["actiontype", "other", "selection"],
+	"math": ["class", "id", "display", "xmlns"],
+	"menclose": ["notation"],
+	"merror": [],
+	"mfrac": ["linethickness"],
+	"mi": ["mathvariant"],
+	"mmultiscripts": [],
+	"mn": [],
+	"mo": ["fence", "lspace", "maxsize", "minsize", "rspace", "stretchy"],
+	"mover": [],
+	"mpadded": ["lspace", "width", "height", "depth", "voffset"],
+	"mphantom": [],
+	"mprescripts": [],
+	"mroot": [],
+	"mrow": ["xlink:href", "xlink:type", "xmlns:xlink"],
+	"mspace": ["depth", "height", "width"],
+	"msqrt": [],
+	"mstyle": ["displaystyle", "mathbackground", "mathcolor", "mathvariant", "scriptlevel"],
+	"msub": [],
+	"msubsup": [],
+	"msup": [],
+	"mtable": ["align", "columnalign", "columnlines", "columnspacing", "displaystyle", "equalcolumns", "equalrows", "frame", "rowalign", "rowlines", "rowspacing", "width"],
+	"mtd": ["columnalign", "columnspan", "rowalign", "rowspan"],
+	"mtext": [],
+	"mtr": ["columnalign", "rowalign"],
+	"munder": [],
+	"munderover": [],
+	"none": [],
+	"semantics": []
+};
+
+// Produce a Namespace-aware version of svgWhitelist
+var svgWhiteListNS_ = {};
+$.each(svgWhiteList_, function(elt,atts){
+	var attNS = {};
+	$.each(atts, function(i, att){
+		if (att.indexOf(':') >= 0) {
+			var v = att.split(':');
+			attNS[v[1]] = nsRevMap_[v[0]];
+		} else {
+			attNS[att] = att == 'xmlns' ? xmlnsns : null;
+		}
+	});
+	svgWhiteListNS_[elt] = attNS;
+});
+
+// temporarily expose these
+svgedit.sanitize.getNSMap = function() { return nsMap_; }
+
+// Function: svgedit.sanitize.sanitizeSvg
+// Sanitizes the input node and its children
+// It only keeps what is allowed from our whitelist defined above
+//
+// Parameters:
+// node - The DOM element to be checked, will also check its children
+svgedit.sanitize.sanitizeSvg = function(node) {
+	// we only care about element nodes
+	// automatically return for all comment, etc nodes
+	// for text, we do a whitespace trim
+	if (node.nodeType == 3) {
+		node.nodeValue = node.nodeValue.replace(/^\s+|\s+$/g, "");
+		// Remove empty text nodes
+		if(!node.nodeValue.length) node.parentNode.removeChild(node);
+	}
+	if (node.nodeType != 1) return;
+	var doc = node.ownerDocument;
+	var parent = node.parentNode;
+	// can parent ever be null here?  I think the root node's parent is the document...
+	if (!doc || !parent) return;
+	
+	var allowedAttrs = svgWhiteList_[node.nodeName];
+	var allowedAttrsNS = svgWhiteListNS_[node.nodeName];
+
+	// if this element is allowed
+	if (allowedAttrs != undefined) {
+
+		var se_attrs = [];
+	
+		var i = node.attributes.length;
+		while (i--) {
+			// if the attribute is not in our whitelist, then remove it
+			// could use jQuery's inArray(), but I don't know if that's any better
+			var attr = node.attributes.item(i);
+			var attrName = attr.nodeName;
+			var attrLocalName = attr.localName;
+			var attrNsURI = attr.namespaceURI;
+			// Check that an attribute with the correct localName in the correct namespace is on 
+			// our whitelist or is a namespace declaration for one of our allowed namespaces
+			if (!(allowedAttrsNS.hasOwnProperty(attrLocalName) && attrNsURI == allowedAttrsNS[attrLocalName] && attrNsURI != xmlnsns) &&
+				!(attrNsURI == xmlnsns && nsMap_[attr.nodeValue]) ) 
+			{
+				// TODO(codedread): Programmatically add the se: attributes to the NS-aware whitelist.
+				// Bypassing the whitelist to allow se: prefixes. Is there
+				// a more appropriate way to do this?
+				if(attrName.indexOf('se:') == 0) {
+					se_attrs.push([attrName, attr.nodeValue]);
+				} 
+				node.removeAttributeNS(attrNsURI, attrLocalName);
+			}
+			
+			// Add spaces before negative signs where necessary
+			if(svgedit.browser.isGecko()) {
+				switch ( attrName ) {
+				case "transform":
+				case "gradientTransform":
+				case "patternTransform":
+					var val = attr.nodeValue.replace(/(\d)-/g, "$1 -");
+					node.setAttribute(attrName, val);
+				}
+			}
+			
+			// for the style attribute, rewrite it in terms of XML presentational attributes
+			if (attrName == "style") {
+				var props = attr.nodeValue.split(";"),
+					p = props.length;
+				while(p--) {
+					var nv = props[p].split(":");
+					// now check that this attribute is supported
+					if (allowedAttrs.indexOf(nv[0]) >= 0) {
+						node.setAttribute(nv[0],nv[1]);
+					}
+				}
+				node.removeAttribute('style');
+			}
+		}
+		
+		$.each(se_attrs, function(i, attr) {
+			node.setAttributeNS(se_ns, attr[0], attr[1]);
+		});
+		
+		// for some elements that have a xlink:href, ensure the URI refers to a local element
+		// (but not for links)
+		var href = svgedit.utilities.getHref(node);
+		if(href && 
+		   ["filter", "linearGradient", "pattern",
+		   "radialGradient", "textPath", "use"].indexOf(node.nodeName) >= 0)
+		{
+			// TODO: we simply check if the first character is a #, is this bullet-proof?
+			if (href[0] != "#") {
+				// remove the attribute (but keep the element)
+				svgedit.utilities.setHref(node, "");
+				node.removeAttributeNS(xlinkns, "href");
+			}
+		}
+		
+		// Safari crashes on a <use> without a xlink:href, so we just remove the node here
+		if (node.nodeName == "use" && !svgedit.utilities.getHref(node)) {
+			parent.removeChild(node);
+			return;
+		}
+		// if the element has attributes pointing to a non-local reference, 
+		// need to remove the attribute
+		$.each(["clip-path", "fill", "filter", "marker-end", "marker-mid", "marker-start", "mask", "stroke"],function(i,attr) {
+			var val = node.getAttribute(attr);
+			if (val) {
+				val = svgedit.utilities.getUrlFromAttr(val);
+				// simply check for first character being a '#'
+				if (val && val[0] !== "#") {
+					node.setAttribute(attr, "");
+					node.removeAttribute(attr);
+				}
+			}
+		});
+		
+		// recurse to children
+		i = node.childNodes.length;
+		while (i--) { svgedit.sanitize.sanitizeSvg(node.childNodes.item(i)); }
+	}
+	// else, remove this element
+	else {
+		// remove all children from this node and insert them before this node
+		// FIXME: in the case of animation elements this will hardly ever be correct
+		var children = [];
+		while (node.hasChildNodes()) {
+			children.push(parent.insertBefore(node.firstChild, node));
+		}
+
+		// remove this node from the document altogether
+		parent.removeChild(node);
+
+		// call sanitizeSvg on each of those children
+		var i = children.length;
+		while (i--) { svgedit.sanitize.sanitizeSvg(children[i]); }
+
+	}
+};
+
+})();
+

data/vendor/assets/javascripts/method-draw-js/src/select.js

@@ -0,0 +1,608 @@
+/**
+ * Package: svedit.select
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ * Copyright(c) 2010 Jeff Schiller
+ */
+
+// Dependencies:
+// 1) jQuery
+// 2) browser.js
+// 3) math.js
+// 4) svgutils.js
+
+var svgedit = svgedit || {};
+
+(function() {
+
+if (!svgedit.select) {
+	svgedit.select = {};
+}
+
+var svgFactory_;
+var config_;
+var selectorManager_; // A Singleton
+
+// Class: svgedit.select.Selector
+// Private class for DOM element selection boxes
+// 
+// Parameters:
+// id - integer to internally indentify the selector
+// elem - DOM element associated with this selector
+svgedit.select.Selector = function(id, elem) {
+	// this is the selector's unique number
+	this.id = id;
+
+	// this holds a reference to the element for which this selector is being used
+	this.selectedElement = elem;
+
+	// this is a flag used internally to track whether the selector is being used or not
+	this.locked = true;
+
+	// this holds a reference to the <g> element that holds all visual elements of the selector
+	this.selectorGroup = svgFactory_.createSVGElement({
+		'element': 'g',
+		'attr': {'id': ('selectorGroup' + this.id)}
+	});
+
+	// this holds a reference to the path rect
+	this.selectorRect = this.selectorGroup.appendChild(
+		svgFactory_.createSVGElement({
+			'element': 'path',
+			'attr': {
+				'id': ('selectedBox' + this.id),
+				'fill': 'none',
+				'stroke': '#4F80FF',
+				'stroke-width': '1',
+				'shape-rendering': 'crispEdges',
+				'style': 'pointer-events:none'
+			}
+		})
+	);
+	
+	if (svgedit.browser.isTouch()) {
+	  this.selectorRect.setAttribute("stroke-opacity", 0.3);
+	}
+
+	// this holds a reference to the grip coordinates for this selector
+	this.gripCoords = {
+		'nw': null,
+		'n' : null,
+		'ne': null,
+		'e' : null,
+		'se': null,
+		's' : null,
+		'sw': null,
+		'w' : null
+	};
+
+	this.reset(this.selectedElement);
+};
+
+
+// Function: svgedit.select.Selector.reset 
+// Used to reset the id and element that the selector is attached to
+//
+// Parameters: 
+// e - DOM element associated with this selector
+svgedit.select.Selector.prototype.reset = function(e) {
+	this.locked = true;
+	this.selectedElement = e;
+	this.resize();
+	this.selectorGroup.setAttribute('display', 'inline');
+};
+
+// Function: svgedit.select.Selector.updateGripCursors
+// Updates cursors for corner grips on rotation so arrows point the right way
+//
+// Parameters:
+// angle - Float indicating current rotation angle in degrees
+svgedit.select.Selector.prototype.updateGripCursors = function(angle) {
+	var dir_arr = [];
+	var steps = Math.round(angle / 45);
+	if(steps < 0) steps += 8;
+	for (var dir in selectorManager_.selectorGrips) {
+		dir_arr.push(dir);
+	}
+	while(steps > 0) {
+		dir_arr.push(dir_arr.shift());
+		steps--;
+	}
+	var i = 0;
+	for (var dir in selectorManager_.selectorGrips) {
+		selectorManager_.selectorGrips[dir].setAttribute('style', ('cursor:' + dir_arr[i] + '-resize'));
+		i++;
+	};
+};
+
+// Function: svgedit.select.Selector.showGrips
+// Show the resize grips of this selector
+//
+// Parameters:
+// show - boolean indicating whether grips should be shown or not
+svgedit.select.Selector.prototype.showGrips = function(show) {
+	// TODO: use suspendRedraw() here
+	var bShow = show ? 'inline' : 'none';
+	selectorManager_.selectorGripsGroup.setAttribute('display', bShow);
+	var elem = this.selectedElement;
+	this.hasGrips = show;
+	if(elem && show) {
+		this.selectorGroup.appendChild(selectorManager_.selectorGripsGroup);
+		this.updateGripCursors(svgedit.utilities.getRotationAngle(elem));
+	}
+};
+
+// Function: svgedit.select.Selector.resize
+// Updates the selector to match the element's size
+svgedit.select.Selector.prototype.resize = function() {
+	var selectedBox = this.selectorRect,
+		mgr = selectorManager_,
+		selectedGrips = mgr.selectorGrips,
+		selected = this.selectedElement,
+		sw = selected.getAttribute('stroke-width'),
+		current_zoom = svgFactory_.currentZoom();
+	var offset = 1/current_zoom;
+	if (selected.getAttribute('stroke') !== 'none' && !isNaN(sw)) {
+		offset += (sw/2);
+	}
+
+	var tagName = selected.tagName;
+	if (tagName === 'text') {
+		offset += 2/current_zoom;
+	}
+
+	// loop and transform our bounding box until we reach our first rotation
+	var tlist = svgedit.transformlist.getTransformList(selected);
+	var m = svgedit.math.transformListToTransform(tlist).matrix;
+
+	// This should probably be handled somewhere else, but for now
+	// it keeps the selection box correctly positioned when zoomed
+	m.e *= current_zoom;
+	m.f *= current_zoom;
+
+	var bbox = svgedit.utilities.getBBox(selected);
+	if(tagName === 'g' && !$.data(selected, 'gsvg')) {
+		// The bbox for a group does not include stroke vals, so we
+		// get the bbox based on its children. 
+		var stroked_bbox = svgFactory_.getStrokedBBox(selected.childNodes);
+		if(stroked_bbox) {
+			bbox = stroked_bbox;
+		}
+	}
+
+	// apply the transforms
+	var l=bbox.x, t=bbox.y, w=bbox.width, h=bbox.height,
+		bbox = {x:l, y:t, width:w, height:h};
+
+	// we need to handle temporary transforms too
+	// if skewed, get its transformed box, then find its axis-aligned bbox
+	
+	//*
+	offset *= current_zoom;
+	
+	var nbox = svgedit.math.transformBox(l*current_zoom, t*current_zoom, w*current_zoom, h*current_zoom, m),
+		aabox = nbox.aabox,
+		nbax = aabox.x - offset,
+		nbay = aabox.y - offset,
+		nbaw = aabox.width + (offset * 2),
+		nbah = aabox.height + (offset * 2);
+		
+	// now if the shape is rotated, un-rotate it
+	var cx = nbax + nbaw/2,
+		cy = nbay + nbah/2;
+
+	var angle = svgedit.utilities.getRotationAngle(selected);
+	if (angle) {
+		var rot = svgFactory_.svgRoot().createSVGTransform();
+		rot.setRotate(-angle,cx,cy);
+		var rotm = rot.matrix;
+		nbox.tl = svgedit.math.transformPoint(nbox.tl.x,nbox.tl.y,rotm);
+		nbox.tr = svgedit.math.transformPoint(nbox.tr.x,nbox.tr.y,rotm);
+		nbox.bl = svgedit.math.transformPoint(nbox.bl.x,nbox.bl.y,rotm);
+		nbox.br = svgedit.math.transformPoint(nbox.br.x,nbox.br.y,rotm);
+
+		// calculate the axis-aligned bbox
+		var tl = nbox.tl;
+		var minx = tl.x,
+			miny = tl.y,
+			maxx = tl.x,
+			maxy = tl.y;
+
+		var Min = Math.min, Max = Math.max;
+
+		minx = Min(minx, Min(nbox.tr.x, Min(nbox.bl.x, nbox.br.x) ) ) - offset;
+		miny = Min(miny, Min(nbox.tr.y, Min(nbox.bl.y, nbox.br.y) ) ) - offset;
+		maxx = Max(maxx, Max(nbox.tr.x, Max(nbox.bl.x, nbox.br.x) ) ) + offset;
+		maxy = Max(maxy, Max(nbox.tr.y, Max(nbox.bl.y, nbox.br.y) ) ) + offset;
+
+		nbax = minx;
+		nbay = miny;
+		nbaw = (maxx-minx);
+		nbah = (maxy-miny);
+	}
+	var sr_handle = svgFactory_.svgRoot().suspendRedraw(100);
+
+	var dstr = 'M' + nbax + ',' + nbay
+				+ ' L' + (nbax+nbaw) + ',' + nbay
+				+ ' ' + (nbax+nbaw) + ',' + (nbay+nbah)
+				+ ' ' + nbax + ',' + (nbay+nbah) + 'z';
+	selectedBox.setAttribute('d', dstr);
+	
+	var xform = angle ? 'rotate(' + [angle,cx,cy].join(',') + ')' : '';
+	this.selectorGroup.setAttribute('transform', xform);
+
+		if(svgedit.browser.isTouch()) {
+		  nbax -= 15.75;
+  		nbay -= 15.75;
+		}
+		else {
+		  nbax -= 4;
+  		nbay -= 4;
+		}
+		this.gripCoords = {
+			'nw': [nbax, nbay].map(Math.round),
+			'ne': [nbax+nbaw, nbay].map(Math.round),
+			'sw': [nbax, nbay+nbah].map(Math.round),
+			'se': [nbax+nbaw, nbay+nbah].map(Math.round),
+			'n':  [nbax + (nbaw)/2, nbay].map(Math.round),
+			'w':	[nbax, nbay + (nbah)/2].map(Math.round),
+			'e':	[nbax + nbaw, nbay + (nbah)/2].map(Math.round),
+			's':	[nbax + (nbaw)/2, nbay + nbah].map(Math.round)
+		};
+
+		for(var dir in this.gripCoords) {
+			var coords = this.gripCoords[dir];
+			selectedGrips[dir].setAttribute('x', coords[0]);
+			selectedGrips[dir].setAttribute('y', coords[1]);
+		};
+		
+		this.rotateCoords = {
+			'nw': [nbax, nbay],
+			'ne': [nbax+nbaw+8, nbay],
+			'sw': [nbax, nbay+nbah+8],
+			'se': [nbax+nbaw+8, nbay+nbah+8]
+		};
+		
+    for(var dir in this.rotateCoords) {
+      var coords = this.rotateCoords[dir];
+		  mgr.rotateGrips[dir].setAttribute('cx', coords[0]); 
+		  mgr.rotateGrips[dir].setAttribute('cy', coords[1]);
+	  }
+
+	svgFactory_.svgRoot().unsuspendRedraw(sr_handle);
+};
+
+
+// Class: svgedit.select.SelectorManager
+svgedit.select.SelectorManager = function() {
+	// this will hold the <g> element that contains all selector rects/grips
+	this.selectorParentGroup = null;
+
+	// this is a special rect that is used for multi-select
+	this.rubberBandBox = null;
+
+	// this will hold objects of type svgedit.select.Selector (see above)
+	this.selectors = [];
+
+	// this holds a map of SVG elements to their Selector object
+	this.selectorMap = {};
+
+	// this holds a reference to the grip elements
+	this.selectorGrips = {
+		'nw': null,
+		'n' :  null,
+		'ne': null,
+		'e' :  null,
+		'se': null,
+		's' :  null,
+		'sw': null,
+		'w' :  null
+	};
+
+	this.selectorGripsGroup = null;
+	//this.rotateGripConnector = null;
+	this.rotateGrips = {
+	  'nw': null,
+		'ne': null,
+		'se': null,
+		'sw': null
+	};
+
+	this.initGroup();
+};
+
+// Function: svgedit.select.SelectorManager.initGroup
+// Resets the parent selector group element
+svgedit.select.SelectorManager.prototype.initGroup = function() {
+	// remove old selector parent group if it existed
+	if (this.selectorParentGroup && this.selectorParentGroup.parentNode) {
+		this.selectorParentGroup.parentNode.removeChild(this.selectorParentGroup);
+	}
+
+	// create parent selector group and add it to svgroot
+	this.selectorParentGroup = svgFactory_.createSVGElement({
+		'element': 'g',
+		'attr': {'id': 'selectorParentGroup'}
+	});
+	this.selectorGripsGroup = svgFactory_.createSVGElement({
+		'element': 'g',
+		'attr': {'display': 'none'}
+	});
+	this.selectorParentGroup.appendChild(this.selectorGripsGroup);
+	svgFactory_.svgRoot().appendChild(this.selectorParentGroup);
+
+	this.selectorMap = {};
+	this.selectors = [];
+	this.rubberBandBox = null;
+
+  for (var dir in this.rotateGrips) {
+	  var grip = svgFactory_.createSVGElement({
+  			'element': 'circle',
+  			'attr': {
+  				'id': 'selectorGrip_rotate_' + dir,
+  				'fill': '#000',
+  				'r': 8,
+  				'stroke': '#000',
+  				"fill-opacity": 0,
+  				"stroke-opacity": 0,
+  				'stroke-width': 0,
+  				'style': 'cursor:url(' + config_.imgPath + 'rotate.png) 12 12, auto;'
+  			}
+  	})
+  $.data(grip, 'dir', dir);
+	$.data(grip, 'type', 'rotate');
+	this.rotateGrips[dir] = this.selectorGripsGroup.appendChild(grip);
+	}
+
+	// add the corner grips
+	for (var dir in this.selectorGrips) {
+		var grip = svgFactory_.createSVGElement({
+			'element': 'rect',
+			'attr': {
+				'id': ('selectorGrip_resize_' + dir),
+				'width': 8,
+  			'height': 8,
+  			'fill': "#4F80FF",
+  			'stroke': "rgba(0,0,0,0)",
+  			'stroke-width': 1,
+				'style': ('cursor:' + dir + '-resize'),
+				'pointer-events': 'all'
+			}
+		});
+		if (svgedit.browser.isTouch()) {
+		  
+		  grip.setAttribute("width", 30.5)
+		  grip.setAttribute("height", 30.5)
+		  grip.setAttribute("fill-opacity", 0.3)
+		}
+		
+		$.data(grip, 'dir', dir);
+		$.data(grip, 'type', 'resize');
+		this.selectorGrips[dir] = this.selectorGripsGroup.appendChild(grip);
+	}
+
+	if($('#canvasBackground').length) return;
+
+	var dims = config_.dimensions;
+	var canvasbg = svgFactory_.createSVGElement({
+		'element': 'svg',
+		'attr': {
+			'id': 'canvasBackground',
+			'width': dims[0],
+			'height': dims[1],
+			'x': 0,
+			'y': 0,
+			'overflow': (svgedit.browser.isWebkit() ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out
+			'style': 'pointer-events:none'
+		}
+	});
+
+  var defs = svgFactory_.createSVGElement({
+    'element': 'defs',
+    'attr': {
+      'id': 'placeholder_defs'
+    }
+  })
+  
+  var pattern = svgFactory_.createSVGElement({
+    'element': 'pattern',
+    'attr': {
+      'id': 'checkerPattern',
+      'patternUnits': 'userSpaceOnUse',
+      'x': 0,
+      'y': 0,
+      'width': 20,
+      'height': 20,
+      'viewBox': '0 0 10 10'
+    }
+  })
+  
+  var pattern_bg = svgFactory_.createSVGElement({
+    'element': 'rect',
+    'attr': {
+      'x': 0,
+      'y': 0,
+      'width': 10,
+      'height': 10,
+      'fill': "#fff"
+    }
+  })
+
+  var pattern_square1 = svgFactory_.createSVGElement({
+    'element': 'rect',
+    'attr': {
+      'x': 0,
+      'y': 0,
+      'width': 5,
+      'height': 5,
+      'fill': "#eee"
+    }
+  })
+  
+  var pattern_square2 = svgFactory_.createSVGElement({
+    'element': 'rect',
+    'attr': {
+      'x': 5,
+      'y': 5,
+      'width': 5,
+      'height': 5,
+      'fill': "#eee"
+    }
+  })
+
+	var rect = svgFactory_.createSVGElement({
+		'element': 'rect',
+		'attr': {
+			'width': '100%',
+			'height': '100%',
+			'x': 0,
+			'y': 0,
+			'stroke-width': 1,
+			'stroke': '#000',
+			'fill': 'url(#checkerPattern)',
+			'style': 'pointer-events:none'
+		}
+	});
+
+	// Both Firefox and WebKit are too slow with this filter region (especially at higher
+	// zoom levels) and Opera has at least one bug
+//	if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
+	canvasbg.appendChild(defs);
+	defs.appendChild(pattern);
+	pattern.appendChild(pattern_bg);
+	pattern.appendChild(pattern_square1);
+	pattern.appendChild(pattern_square2);
+	canvasbg.appendChild(rect);
+
+	svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
+};
+
+// Function: svgedit.select.SelectorManager.requestSelector
+// Returns the selector based on the given element
+//
+// Parameters:
+// elem - DOM element to get the selector for
+svgedit.select.SelectorManager.prototype.requestSelector = function(elem) {
+	if (elem == null) return null;
+	var N = this.selectors.length;
+	// If we've already acquired one for this element, return it.
+	if (typeof(this.selectorMap[elem.id]) == 'object') {
+		this.selectorMap[elem.id].locked = true;
+		return this.selectorMap[elem.id];
+	}
+	for (var i = 0; i < N; ++i) {
+		if (this.selectors[i] && !this.selectors[i].locked) {
+			this.selectors[i].locked = true;
+			this.selectors[i].reset(elem);
+			this.selectorMap[elem.id] = this.selectors[i];
+			return this.selectors[i];
+		}
+	}
+	// if we reached here, no available selectors were found, we create one
+	this.selectors[N] = new svgedit.select.Selector(N, elem);
+	this.selectorParentGroup.appendChild(this.selectors[N].selectorGroup);
+	this.selectorMap[elem.id] = this.selectors[N];
+	return this.selectors[N];
+};
+
+// Function: svgedit.select.SelectorManager.releaseSelector
+// Removes the selector of the given element (hides selection box) 
+//
+// Parameters:
+// elem - DOM element to remove the selector for
+svgedit.select.SelectorManager.prototype.releaseSelector = function(elem) {
+	if (elem == null) return;
+	var N = this.selectors.length,
+		sel = this.selectorMap[elem.id];
+	for (var i = 0; i < N; ++i) {
+		if (this.selectors[i] && this.selectors[i] == sel) {
+			if (sel.locked == false) {
+				// TODO(codedread): Ensure this exists in this module.
+				console.log('WARNING! selector was released but was already unlocked');
+			}
+			delete this.selectorMap[elem.id];
+			sel.locked = false;
+			sel.selectedElement = null;
+			sel.showGrips(false);
+
+			// remove from DOM and store reference in JS but only if it exists in the DOM
+			try {
+				sel.selectorGroup.setAttribute('display', 'none');
+			} catch(e) { }
+
+			break;
+		}
+	}
+};
+
+// Function: svgedit.select.SelectorManager.getRubberBandBox
+// Returns the rubberBandBox DOM element. This is the rectangle drawn by the user for selecting/zooming
+svgedit.select.SelectorManager.prototype.getRubberBandBox = function() {
+	if (!this.rubberBandBox) {
+		this.rubberBandBox = this.selectorParentGroup.appendChild(
+			svgFactory_.createSVGElement({
+				'element': 'rect',
+				'attr': {
+					'id': 'selectorRubberBand',
+					'fill': 'none',
+					'stroke': '#666',
+					'stroke-width': 1,
+					'stroke-dasharray': '3,2', 
+					'display': 'none',
+					'style': 'pointer-events:none'
+				}
+			})
+		);
+	}
+	return this.rubberBandBox;
+};
+
+
+/**
+ * Interface: svgedit.select.SVGFactory
+ * An object that creates SVG elements for the canvas.
+ *
+ * interface svgedit.select.SVGFactory {
+ *   SVGElement createSVGElement(jsonMap);
+ *   SVGSVGElement svgRoot();
+ *   SVGSVGElement svgContent();
+ *
+ *   Number currentZoom();
+ *   Object getStrokedBBox(Element[]); // TODO(codedread): Remove when getStrokedBBox() has been put into svgutils.js
+ * }
+ */
+
+/**
+ * Function: svgedit.select.init()
+ * Initializes this module.
+ *
+ * Parameters:
+ * config - an object containing configurable parameters (imgPath)
+ * svgFactory - an object implementing the SVGFactory interface (see above).
+ */
+svgedit.select.init = function(config, svgFactory) {
+	config_ = config;
+	svgFactory_ = svgFactory;
+	selectorManager_ = new svgedit.select.SelectorManager();
+	//for hovering elements
+	svgFactory_.createSVGElement({
+		'element': 'g',
+		'attr': {
+			'id': 'hover_group'
+		}
+	})
+};
+
+/**
+ * Function: svgedit.select.getSelectorManager
+ *
+ * Returns:
+ * The SelectorManager instance.
+ */
+svgedit.select.getSelectorManager = function() {
+	return selectorManager_;
+};
+
+})();