text: /*! JointJS v0.9.0 - JavaScript diagramming library  2014-05-13 
  
  
  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
   */
  //      JointJS library.
  //      (c) 2011-2013 client IO
  
  if (typeof exports === 'object') {
  
      var _ = require('lodash');
  }
  
  
  // Global namespace.
  
  var joint = {
  
      // `joint.dia` namespace.
      dia: {},
  
      // `joint.ui` namespace.
      ui: {},
  
      // `joint.layout` namespace.
      layout: {},
  
      // `joint.shapes` namespace.
      shapes: {},
  
      // `joint.format` namespace.
      format: {},
  
      // `joint.connectors` namespace.
      connectors: {},
  
      // `joint.routers` namespace.
      routers: {},
  
      util: {
  
          // Return a simple hash code from a string. See http://werxltd.com/wp/2010/05/13/javascript-implementation-of-javas-string-hashcode-method/.
          hashCode: function(str) {
  
              var hash = 0;
              if (str.length == 0) return hash;
              for (var i = 0; i < str.length; i++) {
                  var c = str.charCodeAt(i);
                  hash = ((hash << 5) - hash) + c;
                  hash = hash & hash; // Convert to 32bit integer
              }
              return hash;
          },
  
          getByPath: function(obj, path, delim) {
              
              delim = delim || '.';
              var keys = path.split(delim);
              var key;
              
              while (keys.length) {
                  key = keys.shift();
                  if (key in obj) {
                      obj = obj[key];
                  } else {
                      return undefined;
                  }
              }
              return obj;
          },
  
          setByPath: function(obj, path, value, delim) {
  
              delim = delim || '.';
  
              var keys = path.split(delim);
              var diver = obj;
              var i = 0;
  
              if (path.indexOf(delim) > -1) {
  
                  for (var len = keys.length; i < len - 1; i++) {
                      // diver creates an empty object if there is no nested object under such a key.
                      // This means that one can populate an empty nested object with setByPath().
                      diver = diver[keys[i]] || (diver[keys[i]] = {});
                  }
                  diver[keys[len - 1]] = value;
              } else {
                  obj[path] = value;
              }
              return obj;
          },
  
          unsetByPath: function(obj, path, delim) {
  
              delim = delim || '.';
  
              // index of the last delimiter
              var i = path.lastIndexOf(delim);
  
              if (i > -1) {
  
                  // unsetting a nested attribute
                  var parent = joint.util.getByPath(obj, path.substr(0, i), delim);
  
                  if (parent) {
  
                      delete parent[path.slice(i + 1)];
                  }
  
              } else {
  
                  // unsetting a primitive attribute
                  delete obj[path];
              }
  
              return obj;
          },
  
          flattenObject: function(obj, delim, stop) {
              
              delim = delim || '.';
              var ret = {};
  	    
  	    for (var key in obj) {
  		if (!obj.hasOwnProperty(key)) continue;
  
                  var shouldGoDeeper = typeof obj[key] === 'object';
                  if (shouldGoDeeper && stop && stop(obj[key])) {
                      shouldGoDeeper = false;
                  }
                  
  		if (shouldGoDeeper) {
  		    var flatObject = this.flattenObject(obj[key], delim, stop);
  		    for (var flatKey in flatObject) {
  			if (!flatObject.hasOwnProperty(flatKey)) continue;
  			
  			ret[key + delim + flatKey] = flatObject[flatKey];
  		    }
  		} else {
  		    ret[key] = obj[key];
  		}
  	    }
  	    return ret;
          },
  
          uuid: function() {
  
              // credit: http://stackoverflow.com/posts/2117523/revisions
              
              return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                  var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                  return v.toString(16);
              });
          },
  
          // Generate global unique id for obj and store it as a property of the object.
          guid: function(obj) {
              
              this.guid.id = this.guid.id || 1;
              obj.id = (obj.id === undefined ? 'j_' + this.guid.id++ : obj.id);
              return obj.id;
          },
  
          // Copy all the properties to the first argument from the following arguments.
          // All the properties will be overwritten by the properties from the following
          // arguments. Inherited properties are ignored.
          mixin: function() {
              
              var target = arguments[0];
              
              for (var i = 1, l = arguments.length; i < l; i++) {
                  
                  var extension = arguments[i];
                  
                  // Only functions and objects can be mixined.
  
                  if ((Object(extension) !== extension) &&
                      !_.isFunction(extension) &&
                      (extension === null || extension === undefined)) {
  
                      continue;
                  }
  
                  _.each(extension, function(copy, key) {
                      
                      if (this.mixin.deep && (Object(copy) === copy)) {
  
                          if (!target[key]) {
  
                              target[key] = _.isArray(copy) ? [] : {};
                          }
                          
                          this.mixin(target[key], copy);
                          return;
                      }
                      
                      if (target[key] !== copy) {
                          
                          if (!this.mixin.supplement || !target.hasOwnProperty(key)) {
                              
  	                    target[key] = copy;
                          }
  
                      }
                      
                  }, this);
              }
              
              return target;
          },
  
          // Copy all properties to the first argument from the following
          // arguments only in case if they don't exists in the first argument.
          // All the function propererties in the first argument will get
          // additional property base pointing to the extenders same named
          // property function's call method.
          supplement: function() {
  
              this.mixin.supplement = true;
              var ret = this.mixin.apply(this, arguments);
              this.mixin.supplement = false;
              return ret;
          },
  
          // Same as `mixin()` but deep version.
          deepMixin: function() {
              
              this.mixin.deep = true;
              var ret = this.mixin.apply(this, arguments);
              this.mixin.deep = false;
              return ret;
          },
  
          // Same as `supplement()` but deep version.
          deepSupplement: function() {
              
              this.mixin.deep = this.mixin.supplement = true;
              var ret = this.mixin.apply(this, arguments);
              this.mixin.deep = this.mixin.supplement = false;
              return ret;
          },
  
          normalizeEvent: function(evt) {
  
              return (evt.originalEvent && evt.originalEvent.changedTouches && evt.originalEvent.changedTouches.length) ? evt.originalEvent.changedTouches[0] : evt;
          },
  
  	nextFrame:(function() {
  
  	    var raf;
  	    var client = typeof window != 'undefined';
  
  	    if (client) {
  
  		raf = window.requestAnimationFrame       ||
  		      window.webkitRequestAnimationFrame ||
  	              window.mozRequestAnimationFrame    ||
  		      window.oRequestAnimationFrame      ||
  		      window.msRequestAnimationFrame;
  
  	    }
  
  	    if (!raf) {
  
  		var lastTime = 0;
  
  		raf = function(callback) {
  
  		    var currTime = new Date().getTime();
  		    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  		    var id = setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
  		    lastTime = currTime + timeToCall;
  		    return id;
  
  		};
  	    }
  
  	    return client ? _.bind(raf, window) : raf;
  	})(),
  
  	cancelFrame: (function() {
  
  	    var caf;
  	    var client = typeof window != 'undefined';
  
  	    if (client) {
  
  		caf = window.cancelAnimationFrame              ||
  		      window.webkitCancelAnimationFrame        ||
  	              window.webkitCancelRequestAnimationFrame ||
  		      window.msCancelAnimationFrame            ||
  	              window.msCancelRequestAnimationFrame     ||
  		      window.oCancelAnimationFrame             ||
  	              window.oCancelRequestAnimationFrame      ||
  	              window.mozCancelAnimationFrame           ||
  		      window.mozCancelRequestAnimationFrame;
  
  	    }
  
  	    caf = caf || clearTimeout;
  
  	    return client ? _.bind(caf, window) : caf;
  	})(),
  
          breakText: function(text, size, styles, opt) {
  
              opt = opt || {};
  
              var width = size.width;
              var height = size.height;
  
              var svgDocument = opt.svgDocument || V('svg').node;
              var textElement = V('<text><tspan></tspan></text>').attr(styles || {}).node;
              var textSpan = textElement.firstChild;
              var textNode = document.createTextNode('');
  
              textSpan.appendChild(textNode);
  
              svgDocument.appendChild(textElement);
  
              if (!opt.svgDocument) {
  
                  document.body.appendChild(svgDocument);
              }
  
              var words = text.split(' ');
              var full = [];
              var lines = [];
              var p;
  
              for (var i = 0, l = 0, len = words.length; i < len; i++) {
  
                  var word = words[i];
  
                  textNode.data = lines[l] ? lines[l] + ' ' + word : word;
  
                  if (textSpan.getComputedTextLength() <= width) {
  
                      // the current line fits
                      lines[l] = textNode.data;
  
                      if (p) {
                          // We were partitioning. Put rest of the word onto next line
                          full[l++] = true;
  
                          // cancel partitioning
                          p = 0;
                      }
  
                  } else {
  
                      if (!lines[l] || p) {
  
                          var partition = !!p;
  
                          p = word.length - 1;
  
                          if (partition || !p) {
  
                              // word has only one character.
                              if (!p) {
  
                                  if (!lines[l]) {
  
                                      // we won't fit this text within our rect
                                      lines = [];
  
                                      break;
                                  }
  
                                  // partitioning didn't help on the non-empty line
                                  // try again, but this time start with a new line
  
                                  // cancel partitions created
                                  words.splice(i,2, word + words[i+1]);
  
                                  // adjust word length
                                  len--;
  
                                  full[l++] = true;
                                  i--;
  
                                  continue;
                              }
  
                              // move last letter to the beginning of the next word
                              words[i] = word.substring(0,p);
                              words[i+1] = word.substring(p) + words[i+1];
  
                          } else {
  
                              // We initiate partitioning
                              // split the long word into two words
                              words.splice(i, 1, word.substring(0,p), word.substring(p));
  
                              // adjust words length
                              len++;
  
                              if (l && !full[l-1]) {
                                  // if the previous line is not full, try to fit max part of
                                  // the current word there
                                  l--;
                              }
                          }
  
                          i--;
  
                          continue;
                      }
  
                      l++;
                      i--;
                  }
  
                  // if size.height is defined we have to check whether the height of the entire
                  // text exceeds the rect height
                  if (typeof height !== 'undefined') {
  
                      // get line height as text height / 0.8 (as text height is approx. 0.8em
                      // and line height is 1em. See vectorizer.text())
                      var lh = lh || textElement.getBBox().height * 1.25;
  
                      if (lh * lines.length > height) {
  
                          // remove overflowing lines
                          lines.splice(Math.floor(height / lh));
  
                          break;
                      }
                  }
              }
  
              if (opt.svgDocument) {
  
                  // svg document was provided, remove the text element only
                  svgDocument.removeChild(textElement);
  
              } else {
  
                  // clean svg document
                  document.body.removeChild(svgDocument);
              }
  
              return lines.join('\n');
          },
  
  	timing: {
  
  	    linear: function(t) {
  		return t;
  	    },
  
  	    quad: function(t) {
  		return t * t;
  	    },
  
  	    cubic: function(t) {
  		return t * t * t;
  	    },
  
  	    inout: function(t) {
  		if (t <= 0) return 0;
  		if (t >= 1) return 1;
  		var t2 = t * t, t3 = t2 * t;
  		return 4 * (t < .5 ? t3 : 3 * (t - t2) + t3 - .75);
  	    },
  
  	    exponential: function(t) {
  		return Math.pow(2, 10 * (t - 1));
  	    },
  
  	    bounce: function(t) {
  		for(var a = 0, b = 1; 1; a += b, b /= 2) {
  		    if (t >= (7 - 4 * a) / 11) {
  			var q = (11 - 6 * a - 11 * t) / 4;
  			return -q * q + b * b;
  		    }
  		}
  	    },
  
  	    reverse: function(f) {
  		return function(t) {
  		    return 1 - f(1 - t)
  		}
  	    },
  
  	    reflect: function(f) {
  		return function(t) {
  		    return .5 * (t < .5 ? f(2 * t) : (2 - f(2 - 2 * t)));
  		};
  	    },
  
  	    clamp: function(f,n,x) {
  		n = n || 0;
  		x = x || 1;
  		return function(t) {
  		    var r = f(t);
  		    return r < n ? n : r > x ? x : r;
  		}
  	    },
  
  	    back: function(s) {
  		if (!s) s = 1.70158;
  		return function(t) {
  		    return t * t * ((s + 1) * t - s);
  		};
  	    },
  
  	    elastic: function(x) {
  		if (!x) x = 1.5;
  		return function(t) {
  		    return Math.pow(2, 10 * (t - 1)) * Math.cos(20*Math.PI*x/3*t);
  		}
  	    }
  
  	},
  
  	interpolate: {
  
  	    number: function(a, b) {
  		var d = b - a;
  		return function(t) { return a + d * t; };
  	    },
  
  	    object: function(a, b) {
  		var s = _.keys(a);
  		return function(t) {
  		    var i, p, r = {};
  		    for (i = s.length - 1; i != -1; i--) {
  			p = s[i];
  			r[p] = a[p] + (b[p] - a[p]) * t;
  		    }
  		    return  r;
  		}
  	    },
  
  	    hexColor: function(a, b) {
  
  		var ca = parseInt(a.slice(1), 16), cb = parseInt(b.slice(1), 16);
  
  		var ra = ca & 0x0000ff, rd = (cb & 0x0000ff) - ra;
  		var ga = ca & 0x00ff00, gd = (cb & 0x00ff00) - ga;
  		var ba = ca & 0xff0000, bd = (cb & 0xff0000) - ba;
  
  		return function(t) {
                      var r = (ra + rd * t) & 0x000000ff;
                      var g = (ga + gd * t) & 0x0000ff00;
                      var b = (ba + bd * t) & 0x00ff0000;
  		    return '#' + (1 << 24 | r | g | b ).toString(16).slice(1);
  		};
  	    },
  
  	    unit: function(a, b) {
  
  		var r = /(-?[0-9]*.[0-9]*)(px|em|cm|mm|in|pt|pc|%)/;
  
  		var ma = r.exec(a), mb = r.exec(b);
  		var p = mb[1].indexOf('.'), f = p > 0 ? mb[1].length - p - 1 : 0;
  		var a = +ma[1], d = +mb[1] - a, u = ma[2];
  
  		return function(t) {
  		    return (a + d * t).toFixed(f) + u;
  		}
  	    }
  	},
  
          // SVG filters.
          filter: {
  
              // `x` ... horizontal blur
              // `y` ... vertical blur (optional)
              blur: function(args) {
                  
                  var x = _.isFinite(args.x) ? args.x : 2;
  
                  return _.template('<filter><feGaussianBlur stdDeviation="${stdDeviation}"/></filter>', {
                      stdDeviation: _.isFinite(args.y) ? [x, args.y] : x
                  });
              },
  
              // `dx` ... horizontal shift
              // `dy` ... vertical shift
              // `blur` ... blur
              // `color` ... color
              // `opacity` ... opacity
              dropShadow: function(args) {
  
                  var tpl = 'SVGFEDropShadowElement' in window
                      ? '<filter><feDropShadow stdDeviation="${blur}" dx="${dx}" dy="${dy}" flood-color="${color}" flood-opacity="${opacity}"/></filter>'
                      : '<filter><feGaussianBlur in="SourceAlpha" stdDeviation="${blur}"/><feOffset dx="${dx}" dy="${dy}" result="offsetblur"/><feFlood flood-color="${color}"/><feComposite in2="offsetblur" operator="in"/><feComponentTransfer><feFuncA type="linear" slope="${opacity}"/></feComponentTransfer><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
  
                  return _.template(tpl, {
                      dx: args.dx || 0,
                      dy: args.dy || 0,
                      opacity: _.isFinite(args.opacity) ? args.opacity : 1,
                      color: args.color || 'black',
                      blur: _.isFinite(args.blur) ? args.blur : 4
                  });
              },
  
              // `amount` ... the proportion of the conversion. A value of 1 is completely grayscale. A value of 0 leaves the input unchanged.
              grayscale: function(args) {
  
                  var amount = _.isFinite(args.amount) ? args.amount : 1;
                  
                  return _.template('<filter><feColorMatrix type="matrix" values="${a} ${b} ${c} 0 0 ${d} ${e} ${f} 0 0 ${g} ${b} ${h} 0 0 0 0 0 1 0"/></filter>', {
                      a: 0.2126 + 0.7874 * (1 - amount),
                      b: 0.7152 - 0.7152 * (1 - amount),
                      c: 0.0722 - 0.0722 * (1 - amount),
                      d: 0.2126 - 0.2126 * (1 - amount),
                      e: 0.7152 + 0.2848 * (1 - amount),
                      f: 0.0722 - 0.0722 * (1 - amount),
                      g: 0.2126 - 0.2126 * (1 - amount),
                      h: 0.0722 + 0.9278 * (1 - amount)
                  });
              },
  
              // `amount` ... the proportion of the conversion. A value of 1 is completely sepia. A value of 0 leaves the input unchanged.
              sepia: function(args) {
  
                  var amount = _.isFinite(args.amount) ? args.amount : 1;
  
                  return _.template('<filter><feColorMatrix type="matrix" values="${a} ${b} ${c} 0 0 ${d} ${e} ${f} 0 0 ${g} ${h} ${i} 0 0 0 0 0 1 0"/></filter>', {
                      a: 0.393 + 0.607 * (1 - amount),
                      b: 0.769 - 0.769 * (1 - amount),
                      c: 0.189 - 0.189 * (1 - amount),
                      d: 0.349 - 0.349 * (1 - amount),
                      e: 0.686 + 0.314 * (1 - amount),
                      f: 0.168 - 0.168 * (1 - amount),
                      g: 0.272 - 0.272 * (1 - amount),
                      h: 0.534 - 0.534 * (1 - amount),
                      i: 0.131 + 0.869 * (1 - amount)
                  });
              },
  
              // `amount` ... the proportion of the conversion. A value of 0 is completely un-saturated. A value of 1 leaves the input unchanged.
              saturate: function(args) {
  
                  var amount = _.isFinite(args.amount) ? args.amount : 1;
  
                  return _.template('<filter><feColorMatrix type="saturate" values="${amount}"/></filter>', {
                      amount: 1 - amount
                  });
              },
  
              // `angle` ...  the number of degrees around the color circle the input samples will be adjusted.
              hueRotate: function(args) {
  
                  return _.template('<filter><feColorMatrix type="hueRotate" values="${angle}"/></filter>', {
                      angle: args.angle || 0
                  });
              },
  
              // `amount` ... the proportion of the conversion. A value of 1 is completely inverted. A value of 0 leaves the input unchanged.
              invert: function(args) {
  
                  var amount = _.isFinite(args.amount) ? args.amount : 1;
                  
                  return _.template('<filter><feComponentTransfer><feFuncR type="table" tableValues="${amount} ${amount2}"/><feFuncG type="table" tableValues="${amount} ${amount2}"/><feFuncB type="table" tableValues="${amount} ${amount2}"/></feComponentTransfer></filter>', {
                      amount: amount,
                      amount2: 1 - amount
                  });
              },
  
              // `amount` ... proportion of the conversion. A value of 0 will create an image that is completely black. A value of 1 leaves the input unchanged.
              brightness: function(args) {
  
                  return _.template('<filter><feComponentTransfer><feFuncR type="linear" slope="${amount}"/><feFuncG type="linear" slope="${amount}"/><feFuncB type="linear" slope="${amount}"/></feComponentTransfer></filter>', {
                      amount: _.isFinite(args.amount) ? args.amount : 1
                  });
              },
  
              // `amount` ... proportion of the conversion. A value of 0 will create an image that is completely black. A value of 1 leaves the input unchanged.
              contrast: function(args) {
  
                  var amount = _.isFinite(args.amount) ? args.amount : 1;
                  
                  return _.template('<filter><feComponentTransfer><feFuncR type="linear" slope="${amount}" intercept="${amount2}"/><feFuncG type="linear" slope="${amount}" intercept="${amount2}"/><feFuncB type="linear" slope="${amount}" intercept="${amount2}"/></feComponentTransfer></filter>', {
                      amount: amount,
                      amount2: .5 - amount / 2
                  });
              }
          },
  
          format: {
  
              // Formatting numbers via the Python Format Specification Mini-language.
              // See http://docs.python.org/release/3.1.3/library/string.html#format-specification-mini-language.
              // Heavilly inspired by the D3.js library implementation.
              number: function(specifier, value, locale) {
  
                  locale = locale || {
  
                      currency: ['$', ''],
                      decimal: '.',
                      thousands: ',',
                      grouping: [3]
                  };
                  
                  // See Python format specification mini-language: http://docs.python.org/release/3.1.3/library/string.html#format-specification-mini-language.
                  // [[fill]align][sign][symbol][0][width][,][.precision][type]
                  var re = /(?:([^{])?([<>=^]))?([+\- ])?([$#])?(0)?(\d+)?(,)?(\.-?\d+)?([a-z%])?/i;
  
                  var match = re.exec(specifier);
                  var fill = match[1] || ' ';
                  var align = match[2] || '>';
                  var sign = match[3] || '';
                  var symbol = match[4] || '';
                  var zfill = match[5];
                  var width = +match[6];
                  var comma = match[7];
                  var precision = match[8];
                  var type = match[9];
                  var scale = 1;
                  var prefix = '';
                  var suffix = '';
                  var integer = false;
  
                  if (precision) precision = +precision.substring(1);
                  
                  if (zfill || fill === '0' && align === '=') {
                      zfill = fill = '0';
                      align = '=';
                      if (comma) width -= Math.floor((width - 1) / 4);
                  }
  
                  switch (type) {
                    case 'n': comma = true; type = 'g'; break;
                    case '%': scale = 100; suffix = '%'; type = 'f'; break;
                    case 'p': scale = 100; suffix = '%'; type = 'r'; break;
                    case 'b':
                    case 'o':
                    case 'x':
                    case 'X': if (symbol === '#') prefix = '0' + type.toLowerCase();
                    case 'c':
                    case 'd': integer = true; precision = 0; break;
                    case 's': scale = -1; type = 'r'; break;
                  }
  
                  if (symbol === '$') {
                      prefix = locale.currency[0];
                      suffix = locale.currency[1];
                  }
  
                  // If no precision is specified for `'r'`, fallback to general notation.
                  if (type == 'r' && !precision) type = 'g';
  
                  // Ensure that the requested precision is in the supported range.
                  if (precision != null) {
                      if (type == 'g') precision = Math.max(1, Math.min(21, precision));
                      else if (type == 'e' || type == 'f') precision = Math.max(0, Math.min(20, precision));
                  }
  
                  var zcomma = zfill && comma;
  
                  // Return the empty string for floats formatted as ints.
                  if (integer && (value % 1)) return '';
  
                  // Convert negative to positive, and record the sign prefix.
                  var negative = value < 0 || value === 0 && 1 / value < 0 ? (value = -value, '-') : sign;
  
                  var fullSuffix = suffix;
                  
                  // Apply the scale, computing it from the value's exponent for si format.
                  // Preserve the existing suffix, if any, such as the currency symbol.
                  if (scale < 0) {
                      var unit = this.prefix(value, precision);
                      value = unit.scale(value);
                      fullSuffix = unit.symbol + suffix;
                  } else {
                      value *= scale;
                  }
  
                  // Convert to the desired precision.
                  value = this.convert(type, value, precision);
  
                  // Break the value into the integer part (before) and decimal part (after).
                  var i = value.lastIndexOf('.');
                  var before = i < 0 ? value : value.substring(0, i);
                  var after = i < 0 ? '' : locale.decimal + value.substring(i + 1);
  
                  function formatGroup(value) {
                      
                      var i = value.length;
                      var t = [];
                      var j = 0;
                      var g = locale.grouping[0];
                      while (i > 0 && g > 0) {
                          t.push(value.substring(i -= g, i + g));
                          g = locale.grouping[j = (j + 1) % locale.grouping.length];
                      }
                      return t.reverse().join(locale.thousands);
                  }
                  
                  // If the fill character is not `'0'`, grouping is applied before padding.
                  if (!zfill && comma && locale.grouping) {
  
                      before = formatGroup(before);
                  }
  
                  var length = prefix.length + before.length + after.length + (zcomma ? 0 : negative.length);
                  var padding = length < width ? new Array(length = width - length + 1).join(fill) : '';
  
                  // If the fill character is `'0'`, grouping is applied after padding.
                  if (zcomma) before = formatGroup(padding + before);
  
                  // Apply prefix.
                  negative += prefix;
  
                  // Rejoin integer and decimal parts.
                  value = before + after;
  
                  return (align === '<' ? negative + value + padding
                          : align === '>' ? padding + negative + value
                          : align === '^' ? padding.substring(0, length >>= 1) + negative + value + padding.substring(length)
                          : negative + (zcomma ? value : padding + value)) + fullSuffix;
              },
  
              convert: function(type, value, precision) {
  
                  switch (type) {
                    case 'b': return value.toString(2);
                    case 'c': return String.fromCharCode(value);
                    case 'o': return value.toString(8);
                    case 'x': return value.toString(16);
                    case 'X': return value.toString(16).toUpperCase();
                    case 'g': return value.toPrecision(precision);
                    case 'e': return value.toExponential(precision);
                    case 'f': return value.toFixed(precision);
                    case 'r': return (value = this.round(value, this.precision(value, precision))).toFixed(Math.max(0, Math.min(20, this.precision(value * (1 + 1e-15), precision))));
                  default: return value + '';
                  }
              },
  
              round: function(value, precision) {
  
                  return precision
                      ? Math.round(value * (precision = Math.pow(10, precision))) / precision
                      : Math.round(value);
              },
  
              precision: function(value, precision) {
                  
                  return precision - (value ? Math.ceil(Math.log(value) / Math.LN10) : 1);
              },
  
              prefix: function(value, precision) {
  
                  var prefixes = _.map(['y','z','a','f','p','n','Âµ','m','','k','M','G','T','P','E','Z','Y'], function(d, i) {
                      var k = Math.pow(10, abs(8 - i) * 3);
                      return {
                          scale: i > 8 ? function(d) { return d / k; } : function(d) { return d * k; },
                          symbol: d
                      };
                  });
                  
                  var i = 0;
                  if (value) {
                      if (value < 0) value *= -1;
                      if (precision) value = d3.round(value, this.precision(value, precision));
                      i = 1 + Math.floor(1e-12 + Math.log(value) / Math.LN10);
                      i = Math.max(-24, Math.min(24, Math.floor((i <= 0 ? i + 1 : i - 1) / 3) * 3));
                  }
                  return prefixes[8 + i / 3];
              }
          }
      }
  };
  
  if (typeof exports === 'object') {
  
      module.exports = joint;
  }
  
  //      JointJS, the JavaScript diagramming library.
  //      (c) 2011-2013 client IO
  
  
  if (typeof exports === 'object') {
  
      var joint = {
          dia: {
              Link: require('./joint.dia.link').Link,
              Element: require('./joint.dia.element').Element
          },
          shapes: require('../plugins/shapes')
      };
      var Backbone = require('backbone');
      var _ = require('lodash');
      var g = require('./geometry');
  }
  
  
  
  joint.dia.GraphCells = Backbone.Collection.extend({
  
      initialize: function() {
          
          // Backbone automatically doesn't trigger re-sort if models attributes are changed later when
          // they're already in the collection. Therefore, we're triggering sort manually here.
          this.on('change:z', this.sort, this);
      },
  
      model: function(attrs, options) {
  
          if (attrs.type === 'link') {
  
              return new joint.dia.Link(attrs, options);
          }
  
          var module = attrs.type.split('.')[0];
          var entity = attrs.type.split('.')[1];
  
          if (joint.shapes[module] && joint.shapes[module][entity]) {
  
              return new joint.shapes[module][entity](attrs, options);
          }
          
          return new joint.dia.Element(attrs, options);
      },
  
      // `comparator` makes it easy to sort cells based on their `z` index.
      comparator: function(model) {
  
          return model.get('z') || 0;
      },
  
      // Get all inbound and outbound links connected to the cell `model`.
      getConnectedLinks: function(model, opt) {
  
          opt = opt || {};
  
          if (_.isUndefined(opt.inbound) && _.isUndefined(opt.outbound)) {
              opt.inbound = opt.outbound = true;
          }
  
          var links = [];
          
          this.each(function(cell) {
  
              var source = cell.get('source');
              var target = cell.get('target');
  
              if (source && source.id === model.id && opt.outbound) {
                  
                  links.push(cell);
              }
  
              if (target && target.id === model.id && opt.inbound) {
  
                  links.push(cell);
              }
          });
  
          return links;
      }
  });
  
  
  joint.dia.Graph = Backbone.Model.extend({
  
      initialize: function() {
  
          this.set('cells', new joint.dia.GraphCells);
  
          // Make all the events fired in the `cells` collection available.
          // to the outside world.
          this.get('cells').on('all', this.trigger, this);
          
          this.get('cells').on('remove', this.removeCell, this);
      },
  
      toJSON: function() {
  
          // Backbone does not recursively call `toJSON()` on attributes that are themselves models/collections.
          // It just clones the attributes. Therefore, we must call `toJSON()` on the cells collection explicitely.
          var json = Backbone.Model.prototype.toJSON.apply(this, arguments);
          json.cells = this.get('cells').toJSON();
          return json;
      },
  
      fromJSON: function(json) {
  
          if (!json.cells) {
  
              throw new Error('Graph JSON must contain cells array.');
          }
  
          var attrs = json;
  
          // Cells are the only attribute that is being set differently, using `cells.add()`.
          var cells = json.cells;
          delete attrs.cells;
          
          this.set(attrs);
          
          this.resetCells(cells);
      },
  
      clear: function() {
  
          this.trigger('batch:start');
          this.get('cells').remove(this.get('cells').models);
          this.trigger('batch:stop');
      },
  
      _prepareCell: function(cell) {
  
          if (cell instanceof Backbone.Model && _.isUndefined(cell.get('z'))) {
  
              cell.set('z', this.maxZIndex() + 1, { silent: true });
              
          } else if (_.isUndefined(cell.z)) {
  
              cell.z = this.maxZIndex() + 1;
          }
  
          return cell;
      },
  
      maxZIndex: function() {
  
          var lastCell = this.get('cells').last();
          return lastCell ? (lastCell.get('z') || 0) : 0;
      },
  
      addCell: function(cell, options) {
  
          if (_.isArray(cell)) {
  
              return this.addCells(cell, options);
          }
  
          this.get('cells').add(this._prepareCell(cell), options || {});
  
          return this;
      },
  
      addCells: function(cells, options) {
  
          _.each(cells, function(cell) { this.addCell(cell, options); }, this);
  
          return this;
      },
  
      // When adding a lot of cells, it is much more efficient to
      // reset the entire cells collection in one go.
      // Useful for bulk operations and optimizations.
      resetCells: function(cells) {
          
          this.get('cells').reset(_.map(cells, this._prepareCell, this));
  
          return this;
      },
  
      removeCell: function(cell, collection, options) {
  
          // Applications might provide a `disconnectLinks` option set to `true` in order to
          // disconnect links when a cell is removed rather then removing them. The default
          // is to remove all the associated links.
          if (options && options.disconnectLinks) {
              
              this.disconnectLinks(cell);
  
          } else {
  
              this.removeLinks(cell);
          }
  
          // Silently remove the cell from the cells collection. Silently, because
          // `joint.dia.Cell.prototype.remove` already triggers the `remove` event which is
          // then propagated to the graph model. If we didn't remove the cell silently, two `remove` events
          // would be triggered on the graph model.
          this.get('cells').remove(cell, { silent: true });
      },
  
      // Get a cell by `id`.
      getCell: function(id) {
  
          return this.get('cells').get(id);
      },
  
      getElements: function() {
  
          return this.get('cells').filter(function(cell) {
  
              return cell instanceof joint.dia.Element;
          });
      },
      
      getLinks: function() {
  
          return this.get('cells').filter(function(cell) {
  
              return cell instanceof joint.dia.Link;
          });
      },
  
      // Get all inbound and outbound links connected to the cell `model`.
      getConnectedLinks: function(model, opt) {
  
          return this.get('cells').getConnectedLinks(model, opt);
      },
  
      getNeighbors: function(el) {
  
          var links = this.getConnectedLinks(el);
          var neighbors = [];
          var cells = this.get('cells');
          
          _.each(links, function(link) {
  
              var source = link.get('source');
              var target = link.get('target');
  
              // Discard if it is a point.
              if (!source.x) {
                  var sourceElement = cells.get(source.id);
                  if (sourceElement !== el) {
  
                      neighbors.push(sourceElement);
                  }
              }
              if (!target.x) {
                  var targetElement = cells.get(target.id);
                  if (targetElement !== el) {
  
                      neighbors.push(targetElement);
                  }
              }
          });
  
          return neighbors;
      },
      
      // Disconnect links connected to the cell `model`.
      disconnectLinks: function(model) {
  
          _.each(this.getConnectedLinks(model), function(link) {
  
              link.set(link.get('source').id === model.id ? 'source' : 'target', g.point(0, 0));
          });
      },
  
      // Remove links connected to the cell `model` completely.
      removeLinks: function(model) {
  
          _.invoke(this.getConnectedLinks(model), 'remove');
      },
  
      // Find all views at given point
      findModelsFromPoint: function(p) {
  
  	return _.filter(this.getElements(), function(el) {
  	    return el.getBBox().containsPoint(p);
  	});
      },
  
  
      // Find all views in given area
      findModelsInArea: function(r) {
  
  	return _.filter(this.getElements(), function(el) {
  	    return el.getBBox().intersect(r);
  	});
      }
  
  });
  
  
  if (typeof exports === 'object') {
  
      module.exports.Graph = joint.dia.Graph;
  }
  //      JointJS.
  //      (c) 2011-2013 client IO
  
  
  if (typeof exports === 'object') {
  
      var joint = {
          util: require('./core').util,
          dia: {
              Link: require('./joint.dia.link').Link
          }
      };
      var Backbone = require('backbone');
      var _ = require('lodash');
  }
  
  
  // joint.dia.Cell base model.
  // --------------------------
  
  joint.dia.Cell = Backbone.Model.extend({
  
      // This is the same as Backbone.Model with the only difference that is uses _.merge
      // instead of just _.extend. The reason is that we want to mixin attributes set in upper classes.
      constructor: function(attributes, options) {
  
          var defaults;
          var attrs = attributes || {};
          this.cid = _.uniqueId('c');
          this.attributes = {};
          if (options && options.collection) this.collection = options.collection;
          if (options && options.parse) attrs = this.parse(attrs, options) || {};
          if (defaults = _.result(this, 'defaults')) {
              //<custom code>
              // Replaced the call to _.defaults with _.merge.
              attrs = _.merge({}, defaults, attrs);
              //</custom code>
          }
          this.set(attrs, options);
          this.changed = {};
          this.initialize.apply(this, arguments);
      },
  
      toJSON: function() {
  
          var defaultAttrs = this.constructor.prototype.defaults.attrs || {};
          var attrs = this.attributes.attrs;
          var finalAttrs = {};
  
          // Loop through all the attributes and
          // omit the default attributes as they are implicitly reconstructable by the cell 'type'.
          _.each(attrs, function(attr, selector) {
  
              var defaultAttr = defaultAttrs[selector];
  
              _.each(attr, function(value, name) {
                  
                  // attr is mainly flat though it might have one more level (consider the `style` attribute).
                  // Check if the `value` is object and if yes, go one level deep.
                  if (_.isObject(value) && !_.isArray(value)) {
                      
                      _.each(value, function(value2, name2) {
  
                          if (!defaultAttr || !defaultAttr[name] || !_.isEqual(defaultAttr[name][name2], value2)) {
  
                              finalAttrs[selector] = finalAttrs[selector] || {};
                              (finalAttrs[selector][name] || (finalAttrs[selector][name] = {}))[name2] = value2;
                          }
                      });
  
                  } else if (!defaultAttr || !_.isEqual(defaultAttr[name], value)) {
                      // `value` is not an object, default attribute for such a selector does not exist
                      // or it is different than the attribute value set on the model.
  
                      finalAttrs[selector] = finalAttrs[selector] || {};
                      finalAttrs[selector][name] = value;
                  }
              });
          });
  
          var attributes = _.cloneDeep(_.omit(this.attributes, 'attrs'));
          //var attributes = JSON.parse(JSON.stringify(_.omit(this.attributes, 'attrs')));
          attributes.attrs = finalAttrs;
  
          return attributes;
      },
  
      initialize: function(options) {
  
          if (!options || !options.id) {
  
              this.set('id', joint.util.uuid(), { silent: true });
          }
  
  	this._transitionIds = {};
  
          // Collect ports defined in `attrs` and keep collecting whenever `attrs` object changes.
          this.processPorts();
          this.on('change:attrs', this.processPorts, this);
      },
  
      processPorts: function() {
  
          // Whenever `attrs` changes, we extract ports from the `attrs` object and store it
          // in a more accessible way. Also, if any port got removed and there were links that had `target`/`source`
          // set to that port, we remove those links as well (to follow the same behaviour as
          // with a removed element).
  
          var previousPorts = this.ports;
  
          // Collect ports from the `attrs` object.
          var ports = {};
          _.each(this.get('attrs'), function(attrs, selector) {
  
              if (attrs && attrs.port) {
  
                  // `port` can either be directly an `id` or an object containing an `id` (and potentially other data).
                  if (!_.isUndefined(attrs.port.id)) {
                      ports[attrs.port.id] = attrs.port;
                  } else {
                      ports[attrs.port] = { id: attrs.port };
                  }
              }
          });
  
          // Collect ports that have been removed (compared to the previous ports) - if any.
          // Use hash table for quick lookup.
          var removedPorts = {};
          _.each(previousPorts, function(port, id) {
  
              if (!ports[id]) removedPorts[id] = true;
          });
  
          // Remove all the incoming/outgoing links that have source/target port set to any of the removed ports.
          if (this.collection && !_.isEmpty(removedPorts)) {
              
              var inboundLinks = this.collection.getConnectedLinks(this, { inbound: true });
              _.each(inboundLinks, function(link) {
  
                  if (removedPorts[link.get('target').port]) link.remove();
              });
  
              var outboundLinks = this.collection.getConnectedLinks(this, { outbound: true });
              _.each(outboundLinks, function(link) {
  
                  if (removedPorts[link.get('source').port]) link.remove();
              });
          }
  
          // Update the `ports` object.
          this.ports = ports;
      },
  
      remove: function(options) {
  
  	var collection = this.collection;
  
  	if (collection) {
  	    collection.trigger('batch:start');
  	}
  
          // First, unembed this cell from its parent cell if there is one.
          var parentCellId = this.get('parent');
          if (parentCellId) {
              
              var parentCell = this.collection && this.collection.get(parentCellId);
              parentCell.unembed(this);
          }
          
          _.invoke(this.getEmbeddedCells(), 'remove', options);
          
          this.trigger('remove', this, this.collection, options);
  
  	if (collection) {
  	    collection.trigger('batch:stop');
  	}
      },
  
      toFront: function() {
  
          if (this.collection) {
  
              this.set('z', (this.collection.last().get('z') || 0) + 1);
          }
      },
      
      toBack: function() {
  
          if (this.collection) {
              
              this.set('z', (this.collection.first().get('z') || 0) - 1);
          }
      },
  
      embed: function(cell) {
  
  	if (this.get('parent') == cell.id) {
  
  	    throw new Error('Recursive embedding not allowed.');
  
  	} else {
  
  	    this.trigger('batch:start');
  
  	    cell.set('parent', this.id);
  	    this.set('embeds', _.uniq((this.get('embeds') || []).concat([cell.id])));
  
  	    this.trigger('batch:stop');
  	}
      },
  
      unembed: function(cell) {
  
  	this.trigger('batch:start');
  
          var cellId = cell.id;
          cell.unset('parent');
  
          this.set('embeds', _.without(this.get('embeds'), cellId));
  
  	this.trigger('batch:stop');
      },
  
      getEmbeddedCells: function() {
  
          // Cell models can only be retrieved when this element is part of a collection.
          // There is no way this element knows about other cells otherwise.
          // This also means that calling e.g. `translate()` on an element with embeds before
          // adding it to a graph does not translate its embeds.
          if (this.collection) {
  
              return _.map(this.get('embeds') || [], function(cellId) {
  
                  return this.collection.get(cellId);
                  
              }, this);
          }
          return [];
      },
  
      clone: function(opt) {
  
          opt = opt || {};
  
          var clone = Backbone.Model.prototype.clone.apply(this, arguments);
          
          // We don't want the clone to have the same ID as the original.
          clone.set('id', joint.util.uuid(), { silent: true });
          clone.set('embeds', '');
  
          if (!opt.deep) return clone;
  
          // The rest of the `clone()` method deals with embeds. If `deep` option is set to `true`,
          // the return value is an array of all the embedded clones created.
  
          var embeds = this.getEmbeddedCells();
  
          var clones = [clone];
  
          // This mapping stores cloned links under the `id`s of they originals.
          // This prevents cloning a link more then once. Consider a link 'self loop' for example.
          var linkCloneMapping = {};
          
          _.each(embeds, function(embed) {
  
              var embedClones = embed.clone({ deep: true });
  
              // Embed the first clone returned from `clone({ deep: true })` above. The first
              // cell is always the clone of the cell that called the `clone()` method, i.e. clone of `embed` in this case.
              clone.embed(embedClones[0]);
  
              _.each(embedClones, function(embedClone) {
  
                  clones.push(embedClone);
  
                  // Skip links. Inbound/outbound links are not relevant for them.
                  if (embedClone instanceof joint.dia.Link) {
  
                      return;
                  }
  
                  // Collect all inbound links, clone them (if not done already) and set their target to the `embedClone.id`.
                  var inboundLinks = this.collection.getConnectedLinks(embed, { inbound: true });
  
                  _.each(inboundLinks, function(link) {
  
                      var linkClone = linkCloneMapping[link.id] || link.clone();
  
                      // Make sure we don't clone a link more then once.
                      linkCloneMapping[link.id] = linkClone;
  
                      var target = _.clone(linkClone.get('target'));
                      target.id = embedClone.id;
                      linkClone.set('target', target);
                  });
  
                  // Collect all inbound links, clone them (if not done already) and set their source to the `embedClone.id`.
                  var outboundLinks = this.collection.getConnectedLinks(embed, { outbound: true });
  
                  _.each(outboundLinks, function(link) {
  
                      var linkClone = linkCloneMapping[link.id] || link.clone();
  
                      // Make sure we don't clone a link more then once.
                      linkCloneMapping[link.id] = linkClone;
  
                      var source = _.clone(linkClone.get('source'));
                      source.id = embedClone.id;
                      linkClone.set('source', source);
                  });
  
              }, this);
              
          }, this);
  
          // Add link clones to the array of all the new clones.
          clones = clones.concat(_.values(linkCloneMapping));
  
          return clones;
      },
  
      // A convenient way to set nested attributes.
      attr: function(attrs, value, opt) {
  
          var currentAttrs = this.get('attrs');
          var delim = '/';
          
          if (_.isString(attrs)) {
              // Get/set an attribute by a special path syntax that delimits
              // nested objects by the colon character.
  
              if (typeof value != 'undefined') {
  
                  var attr = {};
                  joint.util.setByPath(attr, attrs, value, delim);
                  return this.set('attrs', _.merge({}, currentAttrs, attr), opt);
                  
              } else {
                  
                  return joint.util.getByPath(currentAttrs, attrs, delim);
              }
          }
          
          return this.set('attrs', _.merge({}, currentAttrs, attrs), value, opt);
      },
  
      // A convenient way to unset nested attributes
      removeAttr: function(path, opt) {
  
          if (_.isArray(path)) {
              _.each(path, function(p) { this.removeAttr(p, opt); }, this);
              return this;
          }
          
          var attrs = joint.util.unsetByPath(_.merge({}, this.get('attrs')), path, '/');
  
          return this.set('attrs', attrs, _.extend({ dirty: true }, opt));
      },
  
      transition: function(path, value, opt, delim) {
  
  	delim = delim || '/';
  
  	var defaults = {
  	    duration: 100,
  	    delay: 10,
  	    timingFunction: joint.util.timing.linear,
  	    valueFunction: joint.util.interpolate.number
  	};
  
  	opt = _.extend(defaults, opt);
  
  	var pathArray = path.split(delim);
          var property = pathArray[0];
  	var isPropertyNested = pathArray.length > 1;
  	var firstFrameTime = 0;
  	var interpolatingFunction;
  
  	var setter = _.bind(function(runtime) {
  
  	    var id, progress, propertyValue, status;
  
  	    firstFrameTime = firstFrameTime || runtime;
  	    runtime -= firstFrameTime;
  	    progress = runtime / opt.duration;
  
  	    if (progress < 1) {
  		this._transitionIds[path] = id = joint.util.nextFrame(setter);
  	    } else {
  		progress = 1;
  		delete this._transitionIds[path];
  	    }
  
  	    propertyValue = interpolatingFunction(opt.timingFunction(progress));
  
  	    if (isPropertyNested) {
  		var nestedPropertyValue = joint.util.setByPath({}, path, propertyValue, delim)[property];
  		propertyValue = _.merge({}, this.get(property), nestedPropertyValue);
  	    }
  
  	    opt.transitionId = id;
  
  	    this.set(property, propertyValue, opt);
  
  	    if (!id) this.trigger('transition:end', this, path);
  
  	}, this);
  
  	var initiator =_.bind(function(callback) {
  
  	    this.stopTransitions(path);
  
  	    interpolatingFunction = opt.valueFunction(joint.util.getByPath(this.attributes, path, delim), value);
  
  	    this._transitionIds[path] = joint.util.nextFrame(callback);
  
  	    this.trigger('transition:start', this, path);
  
  	}, this);
  
  	return _.delay(initiator, opt.delay, setter);
      },
  
      getTransitions: function() {
  	return _.keys(this._transitionIds);
      },
  
      stopTransitions: function(path, delim) {
  
  	delim = delim || '/';
  
  	var pathArray = path && path.split(delim);
  
  	_(this._transitionIds).keys().filter(pathArray && function(key) {
  
  	    return _.isEqual(pathArray, key.split(delim).slice(0, pathArray.length));
  
  	}).each(function(key) {
  
  	    joint.util.cancelFrame(this._transitionIds[key]);
  
  	    delete this._transitionIds[key];
  
  	    this.trigger('transition:end', this, key);
  
  	}, this);
      }
  });
  
  // joint.dia.CellView base view and controller.
  // --------------------------------------------
  
  // This is the base view and controller for `joint.dia.ElementView` and `joint.dia.LinkView`.
  
  joint.dia.CellView = Backbone.View.extend({
  
      tagName: 'g',
  
      attributes: function() {
  
          return { 'model-id': this.model.id }
      },
  
      initialize: function() {
  
          _.bindAll(this, 'remove', 'update');
  
          // Store reference to this to the <g> DOM element so that the view is accessible through the DOM tree.
          this.$el.data('view', this);
  
  	this.listenTo(this.model, 'remove', this.remove);
  	this.listenTo(this.model, 'change:attrs', this.onChangeAttrs);
      },
  
      onChangeAttrs: function(cell, attrs, opt) {
  
          if (opt.dirty) {
  
              // dirty flag could be set when a model attribute was removed and it needs to be cleared
              // also from the DOM element. See cell.removeAttr().
              return this.render();
          }
  
          return this.update();
      },
  
      _configure: function(options) {
  
          // Make sure a global unique id is assigned to this view. Store this id also to the properties object.
          // The global unique id makes sure that the same view can be rendered on e.g. different machines and
          // still be associated to the same object among all those clients. This is necessary for real-time
          // collaboration mechanism.
          options.id = options.id || joint.util.guid(this);
          
          Backbone.View.prototype._configure.apply(this, arguments);
      },
  
      // Override the Backbone `_ensureElement()` method in order to create a `<g>` node that wraps
      // all the nodes of the Cell view.
      _ensureElement: function() {
  
          var el;
  
          if (!this.el) {
  
              var attrs = _.extend({ id: this.id }, _.result(this, 'attributes'));
              if (this.className) attrs['class'] = _.result(this, 'className');
              el = V(_.result(this, 'tagName'), attrs).node;
  
          } else {
  
              el = _.result(this, 'el')
          }
  
          this.setElement(el, false);
      },
      
      findBySelector: function(selector) {
  
          // These are either descendants of `this.$el` of `this.$el` itself. 
         // `.` is a special selector used to select the wrapping `<g>` element.
          var $selected = selector === '.' ? this.$el : this.$el.find(selector);
          return $selected;
      },
  
      notify: function(evt) {
  
          if (this.paper) {
  
              var args = Array.prototype.slice.call(arguments, 1);
  
              // Trigger the event on both the element itself and also on the paper.
              this.trigger.apply(this, [evt].concat(args));
              
              // Paper event handlers receive the view object as the first argument.
              this.paper.trigger.apply(this.paper, [evt, this].concat(args));
          }
      },
  
      getStrokeBBox: function(el) {
          // Return a bounding box rectangle that takes into account stroke.
          // Note that this is a naive and ad-hoc implementation that does not
          // works only in certain cases and should be replaced as soon as browsers will
          // start supporting the getStrokeBBox() SVG method.
          // @TODO any better solution is very welcome!
  
          var isMagnet = !!el;
          
          el = el || this.el;
          var bbox = V(el).bbox(false, this.paper.viewport);
  
          var strokeWidth;
          if (isMagnet) {
  
              strokeWidth = V(el).attr('stroke-width');
              
          } else {
  
              strokeWidth = this.model.attr('rect/stroke-width') || this.model.attr('circle/stroke-width') || this.model.attr('ellipse/stroke-width') || this.model.attr('path/stroke-width');
          }
  
          strokeWidth = parseFloat(strokeWidth) || 0;
  
          return g.rect(bbox).moveAndExpand({ x: -strokeWidth/2, y: -strokeWidth/2, width: strokeWidth, height: strokeWidth });
      },
      
      getBBox: function() {
  
          return V(this.el).bbox();
      },
  
      highlight: function(el) {
  
          el = !el ? this.el : this.$(el)[0] || this.el;
  
          V(el).addClass('highlighted');
      },
  
      unhighlight: function(el) {
  
          el = !el ? this.el : this.$(el)[0] || this.el;
  
          V(el).removeClass('highlighted');
      },
  
      // Find the closest element that has the `magnet` attribute set to `true`. If there was not such
      // an element found, return the root element of the cell view.
      findMagnet: function(el) {
  
          var $el = this.$(el);
  
          if ($el.length === 0 || $el[0] === this.el) {
  
              // If the overall cell has set `magnet === false`, then return `undefined` to
              // announce there is no magnet found for this cell.
              // This is especially useful to set on cells that have 'ports'. In this case,
              // only the ports have set `magnet === true` and the overall element has `magnet === false`.
              var attrs = this.model.get('attrs') || {};
              if (attrs['.'] && attrs['.']['magnet'] === false) {
                  return undefined;
              }
  
              return this.el;
          }
  
          if ($el.attr('magnet')) {
  
              return $el[0];
          }
  
          return this.findMagnet($el.parent());
      },
  
      // `selector` is a CSS selector or `'.'`. `filter` must be in the special JointJS filter format:
      // `{ name: <name of the filter>, args: { <arguments>, ... }`.
      // An example is: `{ filter: { name: 'blur', args: { radius: 5 } } }`.
      applyFilter: function(selector, filter) {
  
          var $selected = this.findBySelector(selector);
  
          // Generate a hash code from the stringified filter definition. This gives us
          // a unique filter ID for different definitions.
          var filterId = filter.name + this.paper.svg.id + joint.util.hashCode(JSON.stringify(filter));
  
          // If the filter already exists in the document,
          // we're done and we can just use it (reference it using `url()`).
          // If not, create one.
          if (!this.paper.svg.getElementById(filterId)) {
  
              var filterSVGString = joint.util.filter[filter.name] && joint.util.filter[filter.name](filter.args || {});
              if (!filterSVGString) {
                  throw new Error('Non-existing filter ' + filter.name);
              }
              var filterElement = V(filterSVGString);
              filterElement.attr('filterUnits', 'userSpaceOnUse');
              if (filter.attrs) filterElement.attr(filter.attrs);
              filterElement.node.id = filterId;
              V(this.paper.svg).defs().append(filterElement);
          }
  
          $selected.each(function() {
              
              V(this).attr('filter', 'url(#' + filterId + ')');
          });
      },
  
      // `selector` is a CSS selector or `'.'`. `attr` is either a `'fill'` or `'stroke'`.
      // `gradient` must be in the special JointJS gradient format:
      // `{ type: <linearGradient|radialGradient>, stops: [ { offset: <offset>, color: <color> }, ... ]`.
      // An example is: `{ fill: { type: 'linearGradient', stops: [ { offset: '10%', color: 'green' }, { offset: '50%', color: 'blue' } ] } }`.
      applyGradient: function(selector, attr, gradient) {
  
          var $selected = this.findBySelector(selector);
  
          // Generate a hash code from the stringified filter definition. This gives us
          // a unique filter ID for different definitions.
          var gradientId = gradient.type + this.paper.svg.id + joint.util.hashCode(JSON.stringify(gradient));
  
          // If the gradient already exists in the document,
          // we're done and we can just use it (reference it using `url()`).
          // If not, create one.
          if (!this.paper.svg.getElementById(gradientId)) {
  
              var gradientSVGString = [
                  '<' + gradient.type + '>',
                  _.map(gradient.stops, function(stop) {
                      return '<stop offset="' + stop.offset + '" stop-color="' + stop.color + '" stop-opacity="' + (_.isFinite(stop.opacity) ? stop.opacity : 1) + '" />'
                  }).join(''),
                  '</' + gradient.type + '>'
              ].join('');
              
              var gradientElement = V(gradientSVGString);
              if (gradient.attrs) { gradientElement.attr(gradient.attrs); }
              gradientElement.node.id = gradientId;
              V(this.paper.svg).defs().append(gradientElement);
          }
  
          $selected.each(function() {
              
              V(this).attr(attr, 'url(#' + gradientId + ')');
          });
      },
  
      // Construct a unique selector for the `el` element within this view.
      // `selector` is being collected through the recursive call. No value for `selector` is expected when using this method.
      getSelector: function(el, selector) {
  
          if (el === this.el) {
  
              return selector;
          }
  
          var index = $(el).index();
  
          selector = el.tagName + ':nth-child(' + (index + 1) + ')' + ' ' + (selector || '');
  
          return this.getSelector($(el).parent()[0], selector + ' ');
      },
  
      // Interaction. The controller part.
      // ---------------------------------
  
      // Interaction is handled by the paper and delegated to the view in interest.
      // `x` & `y` parameters passed to these functions represent the coordinates already snapped to the paper grid.
      // If necessary, real coordinates can be obtained from the `evt` event object.
  
      // These functions are supposed to be overriden by the views that inherit from `joint.dia.Cell`,
      // i.e. `joint.dia.Element` and `joint.dia.Link`.
  
      pointerdblclick: function(evt, x, y) {
  
          this.notify('cell:pointerdblclick', evt, x, y);
      },
  
      pointerclick: function(evt, x, y) {
  
          this.notify('cell:pointerclick', evt, x, y);
      },
      
      pointerdown: function(evt, x, y) {
  
  	if (this.model.collection) {
  	    this.model.trigger('batch:start');
  	    this._collection = this.model.collection;
  	}
  
          this.notify('cell:pointerdown', evt, x, y);
      },
      
      pointermove: function(evt, x, y) {
  
          this.notify('cell:pointermove', evt, x, y);
      },
      
      pointerup: function(evt, x, y) {
  
          this.notify('cell:pointerup', evt, x, y);
  
  	if (this._collection) {
  	    // we don't want to trigger event on model as model doesn't
  	    // need to be member of collection anymore (remove)
  	    this._collection.trigger('batch:stop');
  	    delete this._collection;
  	}
  
      }
  });
  
  
  if (typeof exports === 'object') {
  
      module.exports.Cell = joint.dia.Cell;
      module.exports.CellView = joint.dia.CellView;
  }
  
  //      JointJS library.
  //      (c) 2011-2013 client IO
  
  
  if (typeof exports === 'object') {
  
      var joint = {
          util: require('./core').util,
          dia: {
              Cell: require('./joint.dia.cell').Cell,
              CellView: require('./joint.dia.cell').CellView
          }
      };
      var Backbone = require('backbone');
      var _ = require('lodash');
  }
  
  
  // joint.dia.Element base model.
  // -----------------------------
  
  joint.dia.Element = joint.dia.Cell.extend({
  
      defaults: {
          position: { x: 0, y: 0 },
  	size: { width: 1, height: 1 },
          angle: 0
      },
  
      position: function(x, y) {
  
          this.set('position', { x: x, y: y });
      },
      
      translate: function(tx, ty, opt) {
  
          ty = ty || 0;
  
          if (tx === 0 && ty === 0) {
              // Like nothing has happened.
              return this;
          }
  
          var position = this.get('position') || { x: 0, y: 0 };
  	var translatedPosition = { x: position.x + tx || 0, y: position.y + ty || 0 };
  
  	if (opt && opt.transition) {
  
  	    if (!_.isObject(opt.transition)) opt.transition = {};
  
  	    this.transition('position', translatedPosition, _.extend({}, opt.transition, {
  		valueFunction: joint.util.interpolate.object
  	    }));
  
  	} else {
  
              this.set('position', translatedPosition, opt);
  
              // Recursively call `translate()` on all the embeds cells.
              _.invoke(this.getEmbeddedCells(), 'translate', tx, ty, opt);
  	}
  
          return this;
      },
  
      resize: function(width, height) {
  
  	this.trigger('batch:start');
          this.set('size', { width: width, height: height });
  	this.trigger('batch:stop');
  
  	return this;
      },
  
      rotate: function(angle, absolute) {
  
          return this.set('angle', absolute ? angle : ((this.get('angle') || 0) + angle) % 360);
      },
  
      getBBox: function() {
  
  	var position = this.get('position');
  	var size = this.get('size');
  
  	return g.rect(position.x, position.y, size.width, size.height);
      }
  });
  
  // joint.dia.Element base view and controller.
  // -------------------------------------------
  
  joint.dia.ElementView = joint.dia.CellView.extend({
  
      className: function() {
          return 'element ' + this.model.get('type').split('.').join(' ');
      },
  
      initialize: function() {
  
          _.bindAll(this, 'translate', 'resize', 'rotate');
  
          joint.dia.CellView.prototype.initialize.apply(this, arguments);
          
  	this.listenTo(this.model, 'change:position', this.translate);
  	this.listenTo(this.model, 'change:size', this.resize);
  	this.listenTo(this.model, 'change:angle', this.rotate);
      },
  
      // Default is to process the `attrs` object and set attributes on subelements based on the selectors.
      update: function(cell, renderingOnlyAttrs) {
  
          var allAttrs = this.model.get('attrs');
  
          var rotatable = V(this.$('.rotatable')[0]);
          if (rotatable) {
  
              var rotation = rotatable.attr('transform');
              rotatable.attr('transform', '');
          }
          
          var relativelyPositioned = [];
  
          _.each(renderingOnlyAttrs || allAttrs, function(attrs, selector) {
  
              // Elements that should be updated.
              var $selected = this.findBySelector(selector);
  
              // No element matched by the `selector` was found. We're done then.
              if ($selected.length === 0) return;
  
              // Special attributes are treated by JointJS, not by SVG.
              var specialAttributes = ['style', 'text', 'html', 'ref-x', 'ref-y', 'ref-dx', 'ref-dy', 'ref-width', 'ref-height', 'ref', 'x-alignment', 'y-alignment', 'port'];
  
              // If the `filter` attribute is an object, it is in the special JointJS filter format and so
              // it becomes a special attribute and is treated separately.
              if (_.isObject(attrs.filter)) {
  
                  specialAttributes.push('filter');
                  this.applyFilter(selector, attrs.filter);
              }
  
              // If the `fill` or `stroke` attribute is an object, it is in the special JointJS gradient format and so
              // it becomes a special attribute and is treated separately.
              if (_.isObject(attrs.fill)) {
  
                  specialAttributes.push('fill');
                  this.applyGradient(selector, 'fill', attrs.fill);
              }
              if (_.isObject(attrs.stroke)) {
  
                  specialAttributes.push('stroke');
                  this.applyGradient(selector, 'stroke', attrs.stroke);
              }
  
              // Make special case for `text` attribute. So that we can set text content of the `<text>` element
              // via the `attrs` object as well.
              // Note that it's important to set text before applying the rest of the final attributes.
              // Vectorizer `text()` method sets on the element its own attributes and it has to be possible
              // to rewrite them, if needed. (i.e display: 'none')
              if (!_.isUndefined(attrs.text)) {
  
                  $selected.each(function() {
  
                      V(this).text(attrs.text + '');
                  });
              }
  
              // Set regular attributes on the `$selected` subelement. Note that we cannot use the jQuery attr()
              // method as some of the attributes might be namespaced (e.g. xlink:href) which fails with jQuery attr().
              var finalAttributes = _.omit(attrs, specialAttributes);
              
              $selected.each(function() {
                  
                  V(this).attr(finalAttributes);
              });
  
              // `port` attribute contains the `id` of the port that the underlying magnet represents.
              if (attrs.port) {
  
                  $selected.attr('port', _.isUndefined(attrs.port.id) ? attrs.port : attrs.port.id);
              }
  
              // `style` attribute is special in the sense that it sets the CSS style of the subelement.
              if (attrs.style) {
  
                  $selected.css(attrs.style);
              }
              
              if (!_.isUndefined(attrs.html)) {
  
                  $selected.each(function() {
  
                      $(this).html(attrs.html + '');
                  });
              }
              
              // Special `ref-x` and `ref-y` attributes make it possible to set both absolute or
              // relative positioning of subelements.
              if (!_.isUndefined(attrs['ref-x']) ||
                  !_.isUndefined(attrs['ref-y']) ||
                  !_.isUndefined(attrs['ref-dx']) ||
                  !_.isUndefined(attrs['ref-dy']) ||
  		!_.isUndefined(attrs['x-alignment']) ||
  		!_.isUndefined(attrs['y-alignment']) ||
                  !_.isUndefined(attrs['ref-width']) ||
                  !_.isUndefined(attrs['ref-height'])
                 ) {
  
                     _.each($selected, function(el, index, list) {
                         var $el = $(el);
                         // copy original list selector to the element
                         $el.selector = list.selector;
                         relativelyPositioned.push($el);
                     });
              }
              
          }, this);
  
          // We don't want the sub elements to affect the bounding box of the root element when
          // positioning the sub elements relatively to the bounding box.
          //_.invoke(relativelyPositioned, 'hide');
          //_.invoke(relativelyPositioned, 'show');
  
          // Note that we're using the bounding box without transformation because we are already inside
          // a transformed coordinate system.
          var bbox = this.el.getBBox();        
  
          renderingOnlyAttrs = renderingOnlyAttrs || {};
  
          _.each(relativelyPositioned, function($el) {
  
              // if there was a special attribute affecting the position amongst renderingOnlyAttributes
              // we have to merge it with rest of the element's attributes as they are necessary
              // to update the position relatively (i.e `ref`)
              var renderingOnlyElAttrs = renderingOnlyAttrs[$el.selector];
              var elAttrs = renderingOnlyElAttrs
                  ? _.merge({}, allAttrs[$el.selector], renderingOnlyElAttrs)
                  : allAttrs[$el.selector];
  
              this.positionRelative($el, bbox, elAttrs);
              
          }, this);
  
          if (rotatable) {
  
              rotatable.attr('transform', rotation || '');
          }
      },
  
      positionRelative: function($el, bbox, elAttrs) {
  
          var ref = elAttrs['ref'];
          var refX = parseFloat(elAttrs['ref-x']);
          var refY = parseFloat(elAttrs['ref-y']);
          var refDx = parseFloat(elAttrs['ref-dx']);
          var refDy = parseFloat(elAttrs['ref-dy']);
          var yAlignment = elAttrs['y-alignment'];
          var xAlignment = elAttrs['x-alignment'];
          var refWidth = parseFloat(elAttrs['ref-width']);
          var refHeight = parseFloat(elAttrs['ref-height']);
  
          // `ref` is the selector of the reference element. If no `ref` is passed, reference
          // element is the root element.
  
          var isScalable = _.contains(_.pluck(_.pluck($el.parents('g'), 'className'), 'baseVal'), 'scalable');
  
          if (ref) {
  
              // Get the bounding box of the reference element relative to the root `<g>` element.
              bbox = V(this.findBySelector(ref)[0]).bbox(false, this.el);
          }
  
          var vel = V($el[0]);
  
          // Remove the previous translate() from the transform attribute and translate the element
          // relative to the root bounding box following the `ref-x` and `ref-y` attributes.
          if (vel.attr('transform')) {
  
              vel.attr('transform', vel.attr('transform').replace(/translate\([^)]*\)/g, '') || '');
          }
  
          function isDefined(x) {
              return _.isNumber(x) && !_.isNaN(x);
          }
  
          // The final translation of the subelement.
          var tx = 0;
          var ty = 0;
  
          // 'ref-width'/'ref-height' defines the width/height of the subelement relatively to
          // the reference element size
          // val in 0..1         ref-width = 0.75 sets the width to 75% of the ref. el. width
          // val < 0 || val > 1  ref-height = -20 sets the height to the the ref. el. height shorter by 20
  
          if (isDefined(refWidth)) {
  
              if (refWidth >= 0 && refWidth <= 1) {
  
                  vel.attr('width', refWidth * bbox.width);
  
              } else {
  
                  vel.attr('width', Math.max(refWidth + bbox.width, 0));
              }
          }
  
          if (isDefined(refHeight)) {
  
              if (refHeight >= 0 && refHeight <= 1) {
  
                  vel.attr('height', refHeight * bbox.height);
  
              } else {
  
                  vel.attr('height', Math.max(refHeight + bbox.height, 0));
              }
          }
  
          // `ref-dx` and `ref-dy` define the offset of the subelement relative to the right and/or bottom
          // coordinate of the reference element.
          if (isDefined(refDx)) {
  
              if (isScalable) {
  
                  // Compensate for the scale grid in case the elemnt is in the scalable group.
                  var scale = V(this.$('.scalable')[0]).scale();
                  tx = bbox.x + bbox.width + refDx / scale.sx;
                  
              } else {
                  
                  tx = bbox.x + bbox.width + refDx;
              }
          }
          if (isDefined(refDy)) {
  
              if (isScalable) {
                  
                  // Compensate for the scale grid in case the elemnt is in the scalable group.
                  var scale = V(this.$('.scalable')[0]).scale();
                  ty = bbox.y + bbox.height + refDy / scale.sy;
              } else {
                  
                  ty = bbox.y + bbox.height + refDy;
              }
          }
  
          // if `refX` is in [0, 1] then `refX` is a fraction of bounding box width
          // if `refX` is < 0 then `refX`'s absolute values is the right coordinate of the bounding box
          // otherwise, `refX` is the left coordinate of the bounding box
          // Analogical rules apply for `refY`.
          if (isDefined(refX)) {
  
              if (refX > 0 && refX < 1) {
  
                  tx = bbox.x + bbox.width * refX;
  
              } else if (isScalable) {
  
                  // Compensate for the scale grid in case the elemnt is in the scalable group.
                  var scale = V(this.$('.scalable')[0]).scale();
                  tx = bbox.x + refX / scale.sx;
                  
              } else {
  
                  tx = bbox.x + refX;
              }
          }
          if (isDefined(refY)) {
  
              if (refY > 0 && refY < 1) {
                  
                  ty = bbox.y + bbox.height * refY;
                  
              } else if (isScalable) {
  
                  // Compensate for the scale grid in case the elemnt is in the scalable group.
                  var scale = V(this.$('.scalable')[0]).scale();
                  ty = bbox.y + refY / scale.sy;
                  
              } else {
  
                  ty = bbox.y + refY;
              }
          }
  
  	var velbbox = vel.bbox(false, this.paper.viewport);
          // `y-alignment` when set to `middle` causes centering of the subelement around its new y coordinate.
          if (yAlignment === 'middle') {
  
              ty -= velbbox.height/2;
              
          } else if (isDefined(yAlignment)) {
  
              ty += (yAlignment > -1 && yAlignment < 1) ?  velbbox.height * yAlignment : yAlignment;
          }
  
          // `x-alignment` when set to `middle` causes centering of the subelement around its new x coordinate.
          if (xAlignment === 'middle') {
              
              tx -= velbbox.width/2;
              
          } else if (isDefined(xAlignment)) {
  
              tx += (xAlignment > -1 && xAlignment < 1) ?  velbbox.width * xAlignment : xAlignment;
          }
  
          vel.translate(tx, ty);
      },
  
      // `prototype.markup` is rendered by default. Set the `markup` attribute on the model if the
      // default markup is not desirable.
      renderMarkup: function() {
          
          var markup = this.model.markup || this.model.get('markup');
          
          if (markup) {
  
              var nodes = V(markup);
              V(this.el).append(nodes);
              
          } else {
  
              throw new Error('properties.markup is missing while the default render() implementation is used.');
          }
      },
  
      render: function() {
  
          this.$el.empty();
  
          this.renderMarkup();
  
          this.update();
  
          this.resize();
          this.rotate();
          this.translate();        
  
          return this;
      },
  
      // Scale the whole `<g>` group. Note the difference between `scale()` and `resize()` here.
      // `resize()` doesn't scale the whole `<g>` group but rather adjusts the `box.sx`/`box.sy` only.
      // `update()` is then responsible for scaling only those elements that have the `follow-scale`
      // attribute set to `true`. This is desirable in elements that have e.g. a `<text>` subelement
      // that is not supposed to be scaled together with a surrounding `<rect>` element that IS supposed
      // be be scaled.
      scale: function(sx, sy) {
  
          // TODO: take into account the origin coordinates `ox` and `oy`.
          V(this.el).scale(sx, sy);
      },
  
      resize: function() {
  
          var size = this.model.get('size') || { width: 1, height: 1 };
          var angle = this.model.get('angle') || 0;
          
          var scalable = V(this.$('.scalable')[0]);
          if (!scalable) {
              // If there is no scalable elements, than there is nothing to resize.
              return;
          }
          var scalableBbox = scalable.bbox(true);
          
          scalable.attr('transform', 'scale(' + (size.width / scalableBbox.width) + ',' + (size.height / scalableBbox.height) + ')');
  
          // Now the interesting part. The goal is to be able to store the object geometry via just `x`, `y`, `angle`, `width` and `height`
          // Order of transformations is significant but we want to reconstruct the object always in the order:
          // resize(), rotate(), translate() no matter of how the object was transformed. For that to work,
          // we must adjust the `x` and `y` coordinates of the object whenever we resize it (because the origin of the
          // rotation changes). The new `x` and `y` coordinates are computed by canceling the previous rotation
          // around the center of the resized object (which is a different origin then the origin of the previous rotation)
          // and getting the top-left corner of the resulting object. Then we clean up the rotation back to what it originally was.
          
          // Cancel the rotation but now around a different origin, which is the center of the scaled object.
          var rotatable = V(this.$('.rotatable')[0]);
          var rotation = rotatable && rotatable.attr('transform');
          if (rotation && rotation !== 'null') {
  
              rotatable.attr('transform', rotation + ' rotate(' + (-angle) + ',' + (size.width/2) + ',' + (size.height/2) + ')');
              var rotatableBbox = scalable.bbox(false, this.paper.viewport);
              
              // Store new x, y and perform rotate() again against the new rotation origin.
              this.model.set('position', { x: rotatableBbox.x, y: rotatableBbox.y });
              this.rotate();
          }
  
          // Update must always be called on non-rotated element. Otherwise, relative positioning
          // would work with wrong (rotated) bounding boxes.
          this.update();
      },
  
      translate: function(model, changes, opt) {
  
          var position = this.model.get('position') || { x: 0, y: 0 };
  
          V(this.el).attr('transform', 'translate(' + position.x + ',' + position.y + ')');
      },
  
      rotate: function() {
  
          var rotatable = V(this.$('.rotatable')[0]);
          if (!rotatable) {
              // If there is no rotatable elements, then there is nothing to rotate.
              return;
          }
          
          var angle = this.model.get('angle') || 0;
          var size = this.model.get('size') || { width: 1, height: 1 };
  
          var ox = size.width/2;
          var oy = size.height/2;
          
  
          rotatable.attr('transform', 'rotate(' + angle + ',' + ox + ',' + oy + ')');
      },
  
      // Interaction. The controller part.
      // ---------------------------------
  
      
      pointerdown: function(evt, x, y) {
  
          if ( // target is a valid magnet start linking
              evt.target.getAttribute('magnet') &&
              this.paper.options.validateMagnet.call(this.paper, this, evt.target)
          ) {
                  this.model.trigger('batch:start');
  
                  var link = this.paper.getDefaultLink(this, evt.target);
                  link.set({
                      source: {
                          id: this.model.id,
                          selector: this.getSelector(evt.target),
                          port: $(evt.target).attr('port')
                      },
                      target: { x: x, y: y }
                  });
  
                  this.paper.model.addCell(link);
  
  	        this._linkView = this.paper.findViewByModel(link);
                  this._linkView.startArrowheadMove('target');
  
          } else {
  
              this._dx = x;
              this._dy = y;
  
              joint.dia.CellView.prototype.pointerdown.apply(this, arguments);
          }
      },
  
      pointermove: function(evt, x, y) {
  
          if (this._linkView) {
  
              // let the linkview deal with this event
              this._linkView.pointermove(evt, x, y);
  
          } else {
  
  	    var grid = this.paper.options.gridSize;
  
              if (this.options.interactive !== false) {
  
  	        var position = this.model.get('position');
  
  	        // Make sure the new element's position always snaps to the current grid after
  	        // translate as the previous one could be calculated with a different grid size.
  	        this.model.translate(
  		    g.snapToGrid(position.x, grid) - position.x + g.snapToGrid(x - this._dx, grid),
  		    g.snapToGrid(position.y, grid) - position.y + g.snapToGrid(y - this._dy, grid)
  	        );
              }
  
              this._dx = g.snapToGrid(x, grid);
              this._dy = g.snapToGrid(y, grid);
  
              joint.dia.CellView.prototype.pointermove.apply(this, arguments);
          }
      },
  
      pointerup: function(evt, x, y) {
  
          if (this._linkView) {
  
              // let the linkview deal with this event
              this._linkView.pointerup(evt, x, y);
  
              delete this._linkView;
  
              this.model.trigger('batch:stop');
  
          } else {
  
              joint.dia.CellView.prototype.pointerup.apply(this, arguments);
          }
      }
  
  });
  
  if (typeof exports === 'object') {
  
      module.exports.Element = joint.dia.Element;
      module.exports.ElementView = joint.dia.ElementView;
  }
  
  //      JointJS diagramming library.
  //      (c) 2011-2013 client IO
  
  
  if (typeof exports === 'object') {
  
      var joint = {
          dia: {
              Cell: require('./joint.dia.cell').Cell,
              CellView: require('./joint.dia.cell').CellView
          }
      };
      var Backbone = require('backbone');
      var _ = require('lodash');
      var g = require('./geometry');
  }
  
  
  
  // joint.dia.Link base model.
  // --------------------------
  joint.dia.Link = joint.dia.Cell.extend({
  
      // The default markup for links.
      markup: [
          '<path class="connection" stroke="black"/>',
          '<path class="marker-source" fill="black" stroke="black" />',
          '<path class="marker-target" fill="black" stroke="black" />',
          '<path class="connection-wrap"/>',
          '<g class="labels"/>',
          '<g class="marker-vertices"/>',
          '<g class="marker-arrowheads"/>',
          '<g class="link-tools"/>'
      ].join(''),
  
      labelMarkup: [
          '<g class="label">',
          '<rect />',
          '<text />',
          '</g>'
      ].join(''),
  
      toolMarkup: [
          '<g class="link-tool">',
          '<g class="tool-remove" event="remove">',
          '<circle r="11" />',
          '<path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/>',
          '<title>Remove link.</title>',
          '</g>',
          '<g class="tool-options" event="link:options">',
          '<circle r="11" transform="translate(25)"/>',
          '<path fill="white" transform="scale(.55) translate(29, -16)" d="M31.229,17.736c0.064-0.571,0.104-1.148,0.104-1.736s-0.04-1.166-0.104-1.737l-4.377-1.557c-0.218-0.716-0.504-1.401-0.851-2.05l1.993-4.192c-0.725-0.91-1.549-1.734-2.458-2.459l-4.193,1.994c-0.647-0.347-1.334-0.632-2.049-0.849l-1.558-4.378C17.165,0.708,16.588,0.667,16,0.667s-1.166,0.041-1.737,0.105L12.707,5.15c-0.716,0.217-1.401,0.502-2.05,0.849L6.464,4.005C5.554,4.73,4.73,5.554,4.005,6.464l1.994,4.192c-0.347,0.648-0.632,1.334-0.849,2.05l-4.378,1.557C0.708,14.834,0.667,15.412,0.667,16s0.041,1.165,0.105,1.736l4.378,1.558c0.217,0.715,0.502,1.401,0.849,2.049l-1.994,4.193c0.725,0.909,1.549,1.733,2.459,2.458l4.192-1.993c0.648,0.347,1.334,0.633,2.05,0.851l1.557,4.377c0.571,0.064,1.148,0.104,1.737,0.104c0.588,0,1.165-0.04,1.736-0.104l1.558-4.377c0.715-0.218,1.399-0.504,2.049-0.851l4.193,1.993c0.909-0.725,1.733-1.549,2.458-2.458l-1.993-4.193c0.347-0.647,0.633-1.334,0.851-2.049L31.229,17.736zM16,20.871c-2.69,0-4.872-2.182-4.872-4.871c0-2.69,2.182-4.872,4.872-4.872c2.689,0,4.871,2.182,4.871,4.872C20.871,18.689,18.689,20.871,16,20.871z"/>',
          '<title>Link options.</title>',
          '</g>',
          '</g>'
      ].join(''),
  
      // The default markup for showing/removing vertices. These elements are the children of the .marker-vertices element (see `this.markup`).
      // Only .marker-vertex and .marker-vertex-remove element have special meaning. The former is used for
      // dragging vertices (changin their position). The latter is used for removing vertices.
      vertexMarkup: [
          '<g class="marker-vertex-group" transform="translate(<%= x %>, <%= y %>)">',
          '<circle class="marker-vertex" idx="<%= idx %>" r="10" />',
          '<path class="marker-vertex-remove-area" idx="<%= idx %>" d="M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z" transform="translate(5, -33)"/>',
          '<path class="marker-vertex-remove" idx="<%= idx %>" transform="scale(.8) translate(9.5, -37)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z">',
          '<title>Remove vertex.</title>',
          '</path>',
          '</g>'
      ].join(''),
  
      arrowheadMarkup: [
          '<g class="marker-arrowhead-group marker-arrowhead-group-<%= end %>">',
          '<path class="marker-arrowhead" end="<%= end %>" d="M 26 0 L 0 13 L 26 26 z" />',
          '</g>'
      ].join(''),
  
      defaults: {
  
          type: 'link'
      },
  
      disconnect: function() {
  
          return this.set({ source: g.point(0, 0), target: g.point(0, 0) });
      },
  
      // A convenient way to set labels. Currently set values will be mixined with `value` if used as a setter.
      label: function(idx, value) {
  
          idx = idx || 0;
          
          var labels = this.get('labels') || [];
          
          // Is it a getter?
          if (arguments.length === 0 || arguments.length === 1) {
              
              return labels[idx];
          }
  
          var newValue = _.merge({}, labels[idx], value);
  
          var newLabels = labels.slice();
          newLabels[idx] = newValue;
          
          return this.set({ labels: newLabels });
      }
  });
  
  
  // joint.dia.Link base view and controller.
  // ----------------------------------------
  
  joint.dia.LinkView = joint.dia.CellView.extend({
  
      className: function() {
          return _.unique(this.model.get('type').split('.').concat('link')).join(' ');
      },
  
      options: {
  
          shortLinkLength: 100
      },
      
      initialize: function() {
  
          joint.dia.CellView.prototype.initialize.apply(this, arguments);
  
          // create methods in prototype, so they can be accessed from any instance and
          // don't need to be create over and over
          if (typeof this.constructor.prototype.watchSource !== 'function') {
              this.constructor.prototype.watchSource = this._createWatcher('source');
              this.constructor.prototype.watchTarget = this._createWatcher('target');
          }
  
          // `_.labelCache` is a mapping of indexes of labels in the `this.get('labels')` array to
          // `<g class="label">` nodes wrapped by Vectorizer. This allows for quick access to the
          // nodes in `updateLabelPosition()` in order to update the label positions.
          this._labelCache = {};
  
          // keeps markers bboxes and positions again for quicker access
          this._markerCache = {};
  
          // bind events
          this.startListening();
      },
  
      startListening: function() {
  
  	this.listenTo(this.model, 'change:markup', this.render);
  	this.listenTo(this.model, 'change:smooth change:manhattan change:router change:connector', this.update);
          this.listenTo(this.model, 'change:toolMarkup', function() {
              this.renderTools().updateToolsPosition();
          });
  	this.listenTo(this.model, 'change:labels change:labelMarkup', function() {
              this.renderLabels().updateLabelPositions();
          });
          this.listenTo(this.model, 'change:vertices change:vertexMarkup', function() {
              this.renderVertexMarkers().update();
          });
  	this.listenTo(this.model, 'change:source', function(cell, source) {
              this.watchSource(cell, source).update();
          });
  	this.listenTo(this.model, 'change:target', function(cell, target) {
              this.watchTarget(cell, target).update();
          });
      },
  
      // Rendering
      //----------
  
      render: function() {
  
  	this.$el.empty();
  
          // A special markup can be given in the `properties.markup` property. This might be handy
          // if e.g. arrowhead markers should be `<image>` elements or any other element than `<path>`s.
          // `.connection`, `.connection-wrap`, `.marker-source` and `.marker-target` selectors
          // of elements with special meaning though. Therefore, those classes should be preserved in any
          // special markup passed in `properties.markup`.
          var children = V(this.model.get('markup') || this.model.markup);
  
          // custom markup may contain only one children
          if (!_.isArray(children)) children = [children];
  
          // Cache all children elements for quicker access.
          this._V = {}; // vectorized markup;
          _.each(children, function(child) {
              var c = child.attr('class');
              c && (this._V[$.camelCase(c)] = child);
          }, this);
  
          // Only the connection path is mandatory
          if (!this._V.connection) throw new Error('link: no connection path in the markup');
  
          // partial rendering
          this.renderTools();
          this.renderVertexMarkers();
          this.renderArrowheadMarkers();
  
          V(this.el).append(children);
  
          // rendering labels has to be run after the link is appended to DOM tree. (otherwise <Text> bbox
          // returns zero values)
          this.renderLabels();
  
          // start watching the ends of the link for changes
          this.watchSource(this.model, this.model.get('source'))
              .watchTarget(this.model, this.model.get('target'))
              .update();
  
          return this;
      },
  
      renderLabels: function() {
  
          if (!this._V.labels) return this;
  
          this._labelCache = {};
          var $labels = $(this._V.labels.node).empty();
  
          var labels = this.model.get('labels') || [];
          if (!labels.length) return this;
          
          var labelTemplate = _.template(this.model.get('labelMarkup') || this.model.labelMarkup);
          // This is a prepared instance of a vectorized SVGDOM node for the label element resulting from
          // compilation of the labelTemplate. The purpose is that all labels will just `clone()` this
          // node to create a duplicate.
          var labelNodeInstance = V(labelTemplate());
  
          _.each(labels, function(label, idx) {
  
              var labelNode = labelNodeInstance.clone().node;
              // Cache label nodes so that the `updateLabels()` can just update the label node positions.
              this._labelCache[idx] = V(labelNode);
  
              var $text = $(labelNode).find('text');
              var $rect = $(labelNode).find('rect');
  
              // Text attributes with the default `text-anchor` and font-size set.
              var textAttributes = _.extend({ 'text-anchor': 'middle', 'font-size': 14 }, joint.util.getByPath(label, 'attrs/text', '/'));
              
              $text.attr(_.omit(textAttributes, 'text'));
                  
              if (!_.isUndefined(textAttributes.text)) {
  
                  V($text[0]).text(textAttributes.text + '');
              }
  
              // Note that we first need to append the `<text>` element to the DOM in order to
              // get its bounding box.
              $labels.append(labelNode);
  
              // `y-alignment` - center the text element around its y coordinate.
              var textBbox = V($text[0]).bbox(true, $labels[0]);
              V($text[0]).translate(0, -textBbox.height/2);
  
              // Add default values.
              var rectAttributes = _.extend({
  
                  fill: 'white',
                  rx: 3,
                  ry: 3
                  
              }, joint.util.getByPath(label, 'attrs/rect', '/'));
              
              $rect.attr(_.extend(rectAttributes, {
  
                  x: textBbox.x,
                  y: textBbox.y - textBbox.height/2,  // Take into account the y-alignment translation.
                  width: textBbox.width,
                  height: textBbox.height
              }));
              
          }, this);
  
          return this;
      },
  
      renderTools: function() {
  
          if (!this._V.linkTools) return this;
  
          // Tools are a group of clickable elements that manipulate the whole link.
          // A good example of this is the remove tool that removes the whole link.
          // Tools appear after hovering the link close to the `source` element/point of the link
          // but are offset a bit so that they don't cover the `marker-arrowhead`.
  
          var $tools = $(this._V.linkTools.node).empty();
          var toolTemplate = _.template(this.model.get('toolMarkup') || this.model.toolMarkup);
          var tool = V(toolTemplate());
  
          $tools.append(tool.node);
          
          // Cache the tool node so that the `updateToolsPosition()` can update the tool position quickly.
          this._toolCache = tool;
  
          return this;
      },
  
      renderVertexMarkers: function() {
  
          if (!this._V.markerVertices) return this;
  
          var $markerVertices = $(this._V.markerVertices.node).empty();
  
          // A special markup can be given in the `properties.vertexMarkup` property. This might be handy
          // if default styling (elements) are not desired. This makes it possible to use any
          // SVG elements for .marker-vertex and .marker-vertex-remove tools.
          var markupTemplate = _.template(this.model.get('vertexMarkup') || this.model.vertexMarkup);
          
          _.each(this.model.get('vertices'), function(vertex, idx) {
  
              $markerVertices.append(V(markupTemplate(_.extend({ idx: idx }, vertex))).node);
          });
          
          return this;
      },
  
      renderArrowheadMarkers: function() {
  
          // Custom markups might not have arrowhead markers. Therefore, jump of this function immediately if that's the case.
          if (!this._V.markerArrowheads) return this;
  
          var $markerArrowheads = $(this._V.markerArrowheads.node);
  
          $markerArrowheads.empty();
  
          // A special markup can be given in the `properties.vertexMarkup` property. This might be handy
          // if default styling (elements) are not desired. This makes it possible to use any
          // SVG elements for .marker-vertex and .marker-vertex-remove tools.
          var markupTemplate = _.template(this.model.get('arrowheadMarkup') || this.model.arrowheadMarkup);
  
          this._V.sourceArrowhead = V(markupTemplate({ end: 'source' }));
          this._V.targetArrowhead = V(markupTemplate({ end: 'target' }));
  
          $markerArrowheads.append(this._V.sourceArrowhead.node, this._V.targetArrowhead.node);
  
          return this;
      },
  
      // Updating
      //---------
  
      // Default is to process the `attrs` object and set attributes on subelements based on the selectors.
      update: function() {
  
          // Update attributes.
          _.each(this.model.get('attrs'), function(attrs, selector) {
              
              // If the `filter` attribute is an object, it is in the special JointJS filter format and so
              // it becomes a special attribute and is treated separately.
              if (_.isObject(attrs.filter)) {
                  
                  this.findBySelector(selector).attr(_.omit(attrs, 'filter'));
                  this.applyFilter(selector, attrs.filter);
                  
              } else {
                  
                  this.findBySelector(selector).attr(attrs);
              }
          }, this);
  
          // Path finding
          var vertices = this.route = this.findRoute(this.model.get('vertices') || []);
  
          // finds all the connection points taking new vertices into account
          this._findConnectionPoints(vertices);
  
          var pathData = this.getPathData(vertices);
  
          // The markup needs to contain a `.connection`
          this._V.connection.attr('d', pathData);
          this._V.connectionWrap && this._V.connectionWrap.attr('d', pathData);
  
          this._translateAndAutoOrientArrows(this._V.markerSource, this._V.markerTarget);
  
          //partials updates
          this.updateLabelPositions();
          this.updateToolsPosition();
          this.updateArrowheadMarkers();
  
          delete this.options.perpendicular;
  
          return this;
      },
  
      _findConnectionPoints: function(vertices) {
  
          // cache source and target points
          var sourcePoint, targetPoint, sourceMarkerPoint, targetMarkerPoint;
  
          var firstVertex = _.first(vertices);
  
          sourcePoint = this.getConnectionPoint(
              'source', this.model.get('source'), firstVertex || this.model.get('target')
          ).round();
  
          var lastVertex = _.last(vertices);
  
          targetPoint = this.getConnectionPoint(
              'target', this.model.get('target'), lastVertex || sourcePoint
          ).round();
  
          // Move the source point by the width of the marker taking into account
          // its scale around x-axis. Note that scale is the only transform that
          // makes sense to be set in `.marker-source` attributes object
          // as all other transforms (translate/rotate) will be replaced
          // by the `translateAndAutoOrient()` function.
          var cache = this._markerCache;
  
          if (this._V.markerSource) {
  
              cache.sourceBBox = cache.sourceBBox || this._V.markerSource.bbox(true);
  
              sourceMarkerPoint = g.point(sourcePoint).move(
                  firstVertex || targetPoint,
                  cache.sourceBBox.width * this._V.markerSource.scale().sx * -1
              ).round();
          }
  
          if (this._V.markerTarget) {
  
              cache.targetBBox = cache.targetBBox || this._V.markerTarget.bbox(true);
  
              targetMarkerPoint = g.point(targetPoint).move(
                  lastVertex || sourcePoint,
                  cache.targetBBox.width * this._V.markerTarget.scale().sx * -1
              ).round();
          }
  
          // if there was no markup for the marker, use the connection point.
          cache.sourcePoint = sourceMarkerPoint || sourcePoint;
          cache.targetPoint = targetMarkerPoint || targetPoint;
  
          // make connection points public
          this.sourcePoint = sourcePoint;
          this.targetPoint = targetPoint;
      },
  
      updateLabelPositions: function() {
  
          if (!this._V.labels) return this;
  
          // This method assumes all the label nodes are stored in the `this._labelCache` hash table
          // by their indexes in the `this.get('labels')` array. This is done in the `renderLabels()` method.
  
          var labels = this.model.get('labels') || [];
          if (!labels.length) return this;
  
          var connectionElement = this._V.connection.node;
          var connectionLength = connectionElement.getTotalLength();
  
          _.each(labels, function(label, idx) {
  
              var position = label.position;
              position = (position > connectionLength) ? connectionLength : position; // sanity check
              position = (position < 0) ? connectionLength + position : position;
              position = position > 1 ? position : connectionLength * position;
  
              var labelCoordinates = connectionElement.getPointAtLength(position);
  
              this._labelCache[idx].attr('transform', 'translate(' + labelCoordinates.x + ', ' + labelCoordinates.y + ')');
  
          }, this);
  
          return this;
      },
  
  
      updateToolsPosition: function() {
  
          if (!this._V.linkTools) return this;
  
          // Move the tools a bit to the target position but don't cover the `sourceArrowhead` marker.
          // Note that the offset is hardcoded here. The offset should be always
          // more than the `this.$('.marker-arrowhead[end="source"]')[0].bbox().width` but looking
          // this up all the time would be slow.
  
          var scale = '';
          var offset = 40;
  
          // If the link is too short, make the tools half the size and the offset twice as low.
          if (this.getConnectionLength() < this.options.shortLinkLength) {
              scale = 'scale(.5)';
              offset /= 2;
          }
  
          var toolPosition = this.getPointAtLength(offset);
          
          this._toolCache.attr('transform', 'translate(' + toolPosition.x + ', ' + toolPosition.y + ') ' + scale);
  
          return this;
      },
  
  
      updateArrowheadMarkers: function() {
  
          if (!this._V.markerArrowheads) return this;
  
          // getting bbox of an element with `display="none"` in IE9 ends up with access violation
          if ($.css(this._V.markerArrowheads.node, 'display') === 'none') return this;
  
          var sx = this.getConnectionLength() < this.options.shortLinkLength ? .5 : 1;
          this._V.sourceArrowhead.scale(sx);
          this._V.targetArrowhead.scale(sx);
  
          this._translateAndAutoOrientArrows(this._V.sourceArrowhead, this._V.targetArrowhead);
  
          return this;
      },
  
      // Returns a function observing changes on an end of the link. If a change happens and new end is a new model,
      // it stops listening on the previous one and starts listening to the new one.
      _createWatcher: function(endType) {
  
          function watchEnd(link, end) {
  
              end = end || {};
  
              var previousEnd = link.previous(endType) || {};
  
              // Pick updateMethod this._sourceBboxUpdate or this._targetBboxUpdate.
              var updateEndFunction = this['_' + endType + 'BBoxUpdate'];
  
              if (this._isModel(previousEnd)) {
                  this.stopListening(this.paper.getModelById(previousEnd.id), 'change', updateEndFunction);
              }
  
              if (this._isModel(end)) {
                  // If the observed model changes, it caches a new bbox and do the link update.
                  this.listenTo(this.paper.getModelById(end.id), 'change', updateEndFunction);
              }
  
              _.bind(updateEndFunction, this)({ cacheOnly: true });
  
              return this;
          }
  
          return watchEnd;
      },
  
      // It's important to keep both methods (sourceBboxUpdate and targetBboxUpdate) as unique methods
      // because of loop links. We have to be able to determine, which method we want to stop listen to.
      // ListenTo(model, event, handler) as model and event will be identical.
      _sourceBBoxUpdate: function(update) {
  
          // keep track which end had been changed very last
          this.lastEndChange = 'source';
  
          update = update || {};
          var end = this.model.get('source');
  
          if (this._isModel(end)) {
  
              var selector = this._makeSelector(end);
              var view = this.paper.findViewByModel(end.id);
              var magnetElement = this.paper.viewport.querySelector(selector);
  
              this.sourceBBox = view.getStrokeBBox(magnetElement);
  
          } else {
              // the link end is a point ~ rect 1x1
              this.sourceBBox = g.rect(end.x, end.y, 1, 1);
          }
  
          if (!update.cacheOnly) this.update();
      },
  
      _targetBBoxUpdate: function(update) {
  
          // keep track which end had been changed very last
          this.lastEndChange = 'target';
  
          update = update || {};
          var end = this.model.get('target');
  
          if (this._isModel(end)) {
  
              var selector = this._makeSelector(end);
              var view = this.paper.findViewByModel(end.id);
              var magnetElement = this.paper.viewport.querySelector(selector);
  
              this.targetBBox = view.getStrokeBBox(magnetElement);
  
          } else {
              // the link end is a point ~ rect 1x1
              this.targetBBox = g.rect(end.x, end.y, 1, 1);
          }
  
          if (!update.cacheOnly) this.update();
      },
  
      _translateAndAutoOrientArrows: function(sourceArrow, targetArrow) {
  
          // Make the markers "point" to their sticky points being auto-oriented towards
          // `targetPosition`/`sourcePosition`. And do so only if there is a markup for them.
          if (sourceArrow) {
              sourceArrow.translateAndAutoOrient(
                  this.sourcePoint,
                  _.first(this.route) || this.targetPoint,
                  this.paper.viewport
              );
          }
  
          if (targetArrow) {
              targetArrow.translateAndAutoOrient(
                  this.targetPoint,
                  _.last(this.route) || this.sourcePoint,
                  this.paper.viewport
              );
          }
      },
  
      removeVertex: function(idx) {
  
          var vertices = _.clone(this.model.get('vertices'));
          
          if (vertices && vertices.length) {
  
              vertices.splice(idx, 1);
              this.model.set('vertices', vertices);
          }
  
          return this;
      },
  
      // This method ads a new vertex to the `vertices` array of `.connection`. This method
      // uses a heuristic to find the index at which the new `vertex` should be placed at assuming
      // the new vertex is somewhere on the path.
      addVertex: function(vertex) {
  
          this.model.set('attrs', this.model.get('attrs') || {});
          var attrs = this.model.get('attrs');
          
          // As it is very hard to find a correct index of the newly created vertex,
          // a little heuristics is taking place here.
          // The heuristics checks if length of the newly created
          // path is lot more than length of the old path. If this is the case,
          // new vertex was probably put into a wrong index.
          // Try to put it into another index and repeat the heuristics again.
  
          var vertices = (this.model.get('vertices') || []).slice();
          // Store the original vertices for a later revert if needed.
          var originalVertices = vertices.slice();
  
          // A `<path>` element used to compute the length of the path during heuristics.
          var path = this._V.connection.node.cloneNode(false);
          
          // Length of the original path.        
          var originalPathLength = path.getTotalLength();
          // Current path length.
          var pathLength;
          // Tolerance determines the highest possible difference between the length
          // of the old and new path. The number has been chosen heuristically.
          var pathLengthTolerance = 20;
          // Total number of vertices including source and target points.
          var idx = vertices.length + 1;
  
          // Loop through all possible indexes and check if the difference between
          // path lengths changes significantly. If not, the found index is
          // most probably the right one.
          while (idx--) {
  
              vertices.splice(idx, 0, vertex);
              V(path).attr('d', this.getPathData(this.findRoute(vertices)));
  
              pathLength = path.getTotalLength();
  
              // Check if the path lengths changed significantly.
              if (pathLength - originalPathLength > pathLengthTolerance) {
  
                  // Revert vertices to the original array. The path length has changed too much
                  // so that the index was not found yet.
                  vertices = originalVertices.slice();
                  
              } else {
  
                  break;
              }
          }
  
          this.model.set('vertices', vertices);
  
          // In manhattan routing, if there are no vertices, the path length changes significantly
          // with the first vertex added. Shall we check vertices.length === 0? at beginning of addVertex()
          // in order to avoid the temporary path construction and other operations?
          return Math.max(idx, 0);
      },
  
  
      findRoute: function(oldVertices) {
  
          var router = this.model.get('router');
  
          if (!router) {
  
              if (this.model.get('manhattan')) {
                  // backwards compability
                  router = { name: 'orthogonal' };
              } else {
  
                  return oldVertices;
              }
          }
  
          var fn = joint.routers[router.name];
  
          if (!_.isFunction(fn)) {
  
              throw 'unknown router: ' + router.name;
          }
  
          var newVertices = fn.call(this, oldVertices || [], router.args || {}, this);
  
          return newVertices;
      },
  
      // Return the `d` attribute value of the `<path>` element representing the link
      // between `source` and `target`.
      getPathData: function(vertices) {
  
          var connector = this.model.get('connector');
  
          if (!connector) {
  
              // backwards compability
              connector = this.model.get('smooth') ? { name: 'smooth' } : { name: 'normal' };
          }
  
          if (!_.isFunction(joint.connectors[connector.name])) {
  
              throw 'unknown connector: ' + connector.name;
          }
  
          var pathData = joint.connectors[connector.name].call(
              this,
              this._markerCache.sourcePoint, // Note that the value is translated by the size
              this._markerCache.targetPoint, // of the marker. (We'r not using this.sourcePoint)
              vertices || (this.model.get('vertices') || {}),
              connector.args || {}, // options
              this
          );
  
          return pathData;
      },
  
      // Find a point that is the start of the connection.
      // If `selectorOrPoint` is a point, then we're done and that point is the start of the connection.
      // If the `selectorOrPoint` is an element however, we need to know a reference point (or element)
      // that the link leads to in order to determine the start of the connection on the original element.
      getConnectionPoint: function(end, selectorOrPoint, referenceSelectorOrPoint) {
  
          var spot;
  
          if (this._isPoint(selectorOrPoint)) {
  
              // If the source is a point, we don't need a reference point to find the sticky point of connection.
              spot = g.point(selectorOrPoint);
  
          } else {
  
              // If the source is an element, we need to find a point on the element boundary that is closest
              // to the reference point (or reference element).
              // Get the bounding box of the spot relative to the paper viewport. This is necessary
              // in order to follow paper viewport transformations (scale/rotate).
              // `_sourceBbox` (`_targetBbox`) comes from `_sourceBboxUpdate` (`_sourceBboxUpdate`)
              // method, it exists since first render and are automatically updated
              var spotBbox = end === 'source' ? this.sourceBBox : this.targetBBox;
              
              var reference;
              
              if (this._isPoint(referenceSelectorOrPoint)) {
  
                  // Reference was passed as a point, therefore, we're ready to find the sticky point of connection on the source element.
                  reference = g.point(referenceSelectorOrPoint);
  
              } else {
  
                  // Reference was passed as an element, therefore we need to find a point on the reference
                  // element boundary closest to the source element.
                  // Get the bounding box of the spot relative to the paper viewport. This is necessary
                  // in order to follow paper viewport transformations (scale/rotate).
                  var referenceBbox = end === 'source' ? this.targetBBox : this.sourceBBox;
  
                  reference = g.rect(referenceBbox).intersectionWithLineFromCenterToPoint(g.rect(spotBbox).center());
                  reference = reference || g.rect(referenceBbox).center();
              }
  
              // If `perpendicularLinks` flag is set on the paper and there are vertices
              // on the link, then try to find a connection point that makes the link perpendicular
              // even though the link won't point to the center of the targeted object.
              if (this.paper.options.perpendicularLinks || this.options.perpendicular) {
  
                  var horizontalLineRect = g.rect(0, reference.y, this.paper.options.width, 1);
                  var verticalLineRect = g.rect(reference.x, 0, 1, this.paper.options.height);
                  var nearestSide;
  
                  if (horizontalLineRect.intersect(g.rect(spotBbox))) {
  
                      nearestSide = g.rect(spotBbox).sideNearestToPoint(reference);
                      switch (nearestSide) {
                        case 'left':
                          spot = g.point(spotBbox.x, reference.y);
                          break;
                        case 'right':
                          spot = g.point(spotBbox.x + spotBbox.width, reference.y);
                          break;
                      default:
                          spot = g.rect(spotBbox).center();
                          break;
                      }
                      
                  } else if (verticalLineRect.intersect(g.rect(spotBbox))) {
  
                      nearestSide = g.rect(spotBbox).sideNearestToPoint(reference);
                      switch (nearestSide) {
                        case 'top':
                          spot = g.point(reference.x, spotBbox.y);
                          break;
                        case 'bottom':
                          spot = g.point(reference.x, spotBbox.y + spotBbox.height);
                          break;
                      default:
                          spot = g.rect(spotBbox).center();
                          break;
                      }
                      
                  } else {
  
                      // If there is no intersection horizontally or vertically with the object bounding box,
                      // then we fall back to the regular situation finding straight line (not perpendicular)
                      // between the object and the reference point.
  
                      spot = g.rect(spotBbox).intersectionWithLineFromCenterToPoint(reference);
                      spot = spot || g.rect(spotBbox).center();
                  }
                  
              } else {
              
                  spot = g.rect(spotBbox).intersectionWithLineFromCenterToPoint(reference);
                  spot = spot || g.rect(spotBbox).center();
              }
          }
  
          return spot;
      },
  
      _isModel: function(end) {
  
          return end && end.id;
      },
  
      _isPoint: function(end) {
  
          return !this._isModel(end);
      },
  
      _makeSelector: function(end) {
  
          var selector = '[model-id="' + end.id + '"]';
          // `port` has a higher precendence over `selector`. This is because the selector to the magnet
          // might change while the name of the port can stay the same.
          if (end.port) {
              selector += ' [port="' + end.port + '"]';
          } else if (end.selector) {
              selector += ' ' + end.selector;
          }
  
          return selector;
      },
  
      // Public API
      // ----------
  
      getConnectionLength: function() {
  
          return this._V.connection.node.getTotalLength();
      },
  
      getPointAtLength: function(length) {
  
          return this._V.connection.node.getPointAtLength(length);
      },
  
      // Interaction. The controller part.
      // ---------------------------------
  
      _beforeArrowheadMove: function() {
  
          this.model.trigger('batch:start');
  
          this._z = this.model.get('z');
          this.model.set('z', Number.MAX_VALUE);
  
          // Let the pointer propagate throught the link view elements so that
          // the `evt.target` is another element under the pointer, not the link itself.
          this.el.style.pointerEvents = 'none';
      },
  
      _afterArrowheadMove: function() {
  
          if (this._z) {
              this.model.set('z', this._z);
              delete this._z;
          }
  
          // Put `pointer-events` back to its original value. See `startArrowheadMove()` for explanation.
  	// Value `auto` doesn't work in IE9. We force to use `visiblePainted` instead.
  	// See `https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events`.
          this.el.style.pointerEvents = 'visiblePainted';
  
          this.model.trigger('batch:stop');
      },
  
      _createValidateConnectionArgs: function(arrowhead) {
          // It makes sure the arguments for validateConnection have the following form:
          // (source view, source magnet, target view, target magnet and link view)
          var args = [];
  
          args[4] = arrowhead;
          args[5] = this;
  
          var oppositeArrowhead, i = 0, j = 0;
  
          if (arrowhead === 'source') {
              i = 2;
              oppositeArrowhead = 'target';
          } else {
              j = 2;
              oppositeArrowhead = 'source';
          }
  
          var end = this.model.get(oppositeArrowhead);
  
          if (end.id) {
              args[i] = this.paper.findViewByModel(end.id);
              args[i+1] = end.selector && args[i].el.querySelector(end.selector);
          }
  
          function validateConnectionArgs(cellView, magnet) {
              args[j] = cellView;
              args[j+1] = cellView.el === magnet ? undefined : magnet;
              return args;
          }
  
          return validateConnectionArgs;
      },
  
      startArrowheadMove: function(end) {
          // Allow to delegate events from an another view to this linkView in order to trigger arrowhead
          // move without need to click on the actual arrowhead dom element.
          this._action = 'arrowhead-move';
          this._arrowhead = end;
          this._beforeArrowheadMove();
          this._validateConnectionArgs = this._createValidateConnectionArgs(this._arrowhead);
      },
  
      pointerdown: function(evt, x, y) {
  
          joint.dia.CellView.prototype.pointerdown.apply(this, arguments);
  
  	this._dx = x;
          this._dy = y;
  
          if (this.options.interactive === false) return;
  
          var className = evt.target.getAttribute('class');
  
          switch (className) {
  
          case 'marker-vertex':
              this._action = 'vertex-move';
              this._vertexIdx = evt.target.getAttribute('idx');
              break;
  
          case 'marker-vertex-remove':
          case 'marker-vertex-remove-area':
              this.removeVertex(evt.target.getAttribute('idx'));
              break;
  
          case 'marker-arrowhead':
              this.startArrowheadMove(evt.target.getAttribute('end'));
              break;
  
          default:
  
              var targetParentEvent = evt.target.parentNode.getAttribute('event');
  
              if (targetParentEvent) {
  
                  // `remove` event is built-in. Other custom events are triggered on the paper.
                  if (targetParentEvent === 'remove') {
                      this.model.remove();
                  } else {
                      this.paper.trigger(targetParentEvent, evt, this, x, y);
                  }
  
              } else {
  
                  // Store the index at which the new vertex has just been placed.
                  // We'll be update the very same vertex position in `pointermove()`.
                  this._vertexIdx = this.addVertex({ x: x, y: y });
                  this._action = 'vertex-move';
              }
          }
      },
  
      pointermove: function(evt, x, y) {
  
          joint.dia.CellView.prototype.pointermove.apply(this, arguments);
  
          switch (this._action) {
  
            case 'vertex-move':
  
              var vertices = _.clone(this.model.get('vertices'));
              vertices[this._vertexIdx] = { x: x, y: y };
              this.model.set('vertices', vertices);
              break;
  
            case 'arrowhead-move':
  
              if (this.paper.options.snapLinks) {
  
                  // checking view in close area of the pointer
  
                  var r = this.paper.options.snapLinks.radius || 50;
                  var viewsInArea = this.paper.findViewsInArea({ x: x - r, y: y - r, width: 2 * r, height: 2 * r });
  
                  this._closestView && this._closestView.unhighlight(this._closestEnd.selector);
                  this._closestView = this._closestEnd = null;
  
                  var pointer = g.point(x,y);
                  var distance, minDistance = Number.MAX_VALUE;
  
                  _.each(viewsInArea, function(view) {
  
                      // skip connecting to the element in case '.': { magnet: false } attribute present
                      if (view.el.getAttribute('magnet') !== 'false') {
  
                          // find distance from the center of the model to pointer coordinates
                          distance = view.model.getBBox().center().distance(pointer);
  
                          // the connection is looked up in a circle area by `distance < r`
                          if (distance < r && distance < minDistance) {
  
                              if (this.paper.options.validateConnection.apply(
                                  this.paper, this._validateConnectionArgs(view, null)
                              )) {
                                  minDistance = distance;
                                  this._closestView = view;
                                  this._closestEnd = { id: view.model.id };
                              }
                          }
                      }
  
                      view.$('[magnet]').each(_.bind(function(index, magnet) {
  
                          var bbox = V(magnet).bbox(false, this.paper.viewport);
  
                          distance = pointer.distance({
                              x: bbox.x + bbox.width / 2,
                              y: bbox.y + bbox.height / 2
                          });
  
                          if (distance < r && distance < minDistance) {
  
                              if (this.paper.options.validateConnection.apply(
                                  this.paper, this._validateConnectionArgs(view, magnet)
                              )) {
                                  minDistance = distance;
                                  this._closestView = view;
                                  this._closestEnd = {
                                      id: view.model.id,
                                      selector: view.getSelector(magnet),
                                      port: magnet.getAttribute('port')
                                  };
                              }
                          }
  
                      }, this));
  
                  }, this);
  
                  this._closestView && this._closestView.highlight(this._closestEnd.selector);
  
                  this.model.set(this._arrowhead, this._closestEnd || { x: x, y: y });
  
              } else {
  
                  // checking views right under the pointer
  
                  // Touchmove event's target is not reflecting the element under the coordinates as mousemove does.
                  // It holds the element when a touchstart triggered.
                  var target = (evt.type === 'mousemove')
                      ? evt.target
                      : document.elementFromPoint(evt.clientX, evt.clientY);
  
                  if (this._targetEvent !== target) {
                      // Unhighlight the previous view under pointer if there was one.
                      this._magnetUnderPointer && this._viewUnderPointer.unhighlight(this._magnetUnderPointer);
                      this._viewUnderPointer = this.paper.findView(target);
                      if (this._viewUnderPointer) {
                          // If we found a view that is under the pointer, we need to find the closest
                          // magnet based on the real target element of the event.
                          this._magnetUnderPointer = this._viewUnderPointer.findMagnet(target);
  
                          if (this._magnetUnderPointer && this.paper.options.validateConnection.apply(
                              this.paper,
                              this._validateConnectionArgs(this._viewUnderPointer, this._magnetUnderPointer)
                          )) {
                              // If there was no magnet found, do not highlight anything and assume there
                              // is no view under pointer we're interested in reconnecting to.
                              // This can only happen if the overall element has the attribute `'.': { magnet: false }`.
                              this._magnetUnderPointer && this._viewUnderPointer.highlight(this._magnetUnderPointer);
                          } else {
                              // This type of connection is not valid. Disregard this magnet.
                              this._magnetUnderPointer = null;
                          }
                      } else {
                          // Make sure we'll delete previous magnet
                          this._magnetUnderPointer = null;
                      }
                  }
  
  	        this._targetEvent = target;
  
                  this.model.set(this._arrowhead, { x: x, y: y });
              }
  
              break;
          }
  
          this._dx = x;
          this._dy = y;
      },
  
      pointerup: function(evt) {
  
          joint.dia.CellView.prototype.pointerup.apply(this, arguments);
  
          if (this._action === 'arrowhead-move') {
  
              if (this.paper.options.snapLinks) {
  
                  this._closestView && this._closestView.unhighlight(this._closestEnd.selector);
                  this._closestView = this._closestEnd = null;
  
              } else {
  
                  if (this._magnetUnderPointer) {
                      this._viewUnderPointer.unhighlight(this._magnetUnderPointer);
                      // Find a unique `selector` of the element under pointer that is a magnet. If the
                      // `this._magnetUnderPointer` is the root element of the `this._viewUnderPointer` itself,
                      // the returned `selector` will be `undefined`. That means we can directly pass it to the
                      // `source`/`target` attribute of the link model below.
  		    this.model.set(this._arrowhead, {
                          id: this._viewUnderPointer.model.id,
                          selector: this._viewUnderPointer.getSelector(this._magnetUnderPointer),
                          port: $(this._magnetUnderPointer).attr('port')
                      });
                  }
  
                  delete this._viewUnderPointer;
                  delete this._magnetUnderPointer;
                  delete this._staticView;
                  delete this._staticMagnet;
              }
  
              this._afterArrowheadMove();
          }
  
          delete this._action;
      }
  });
  
  
  if (typeof exports === 'object') {
  
      module.exports.Link = joint.dia.Link;
      module.exports.LinkView = joint.dia.LinkView;
  }
  
  //      JointJS library.
  //      (c) 2011-2013 client IO
  
  
  joint.dia.Paper = Backbone.View.extend({
  
      options: {
  
          width: 800,
          height: 600,
          gridSize: 50,
          perpendicularLinks: false,
          elementView: joint.dia.ElementView,
          linkView: joint.dia.LinkView,
          snapLinks: false, // false, true, { radius: value }
  
          // Defines what link model is added to the graph after an user clicks on an active magnet.
          // Value could be the Backbone.model or a function returning the Backbone.model
          // defaultLink: function(elementView, magnet) { return condition ? new customLink1() : new customLink2() }
          defaultLink: new joint.dia.Link,
  
          // Check whether to add a new link to the graph when user clicks on an a magnet.
          validateMagnet: function(cellView, magnet) {
              return magnet.getAttribute('magnet') !== 'passive';
          },
  
          // Check whether to allow or disallow the link connection while an arrowhead end (source/target)
          // being changed.
          validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
              return (end === 'target' ? cellViewT : cellViewS) instanceof joint.dia.ElementView;
          }
      },
  
      events: {
  
          'mousedown': 'pointerdown',
          'dblclick': 'mousedblclick',
          'click': 'mouseclick',
          'touchstart': 'pointerdown',
          'mousemove': 'pointermove',
          'touchmove': 'pointermove'
      },
  
      initialize: function() {
  
          _.bindAll(this, 'addCell', 'sortCells', 'resetCells', 'pointerup');
  
          this.svg = V('svg').node;
          this.viewport = V('g').node;
  
          // Append `<defs>` element to the SVG document. This is useful for filters and gradients.
          V(this.svg).append(V('defs').node);
  
          V(this.viewport).attr({ 'class': 'viewport' });
          
          V(this.svg).append(this.viewport);
  
          this.$el.append(this.svg);
  
          this.setDimensions();
  
  	this.listenTo(this.model, 'add', this.addCell);
  	this.listenTo(this.model, 'reset', this.resetCells);
  	this.listenTo(this.model, 'sort', this.sortCells);
  
  	$(document).on('mouseup touchend', this.pointerup);
  
          // Hold the value when mouse has been moved: when mouse moved, no click event will be triggered.
          this._mousemoved = false;
      },
  
      remove: function() {
  
  	$(document).off('mouseup touchend', this.pointerup);
  
  	Backbone.View.prototype.remove.call(this);
      },
  
      setDimensions: function(width, height) {
  
          if (width) this.options.width = width;
          if (height) this.options.height = height;
          
          V(this.svg).attr('width', this.options.width);
          V(this.svg).attr('height', this.options.height);
  
  	this.trigger('resize');
      },
  
      // Expand/shrink the paper to fit the content. Snap the width/height to the grid
      // defined in `gridWidth`, `gridHeight`. `padding` adds to the resulting width/height of the paper.
      fitToContent: function(gridWidth, gridHeight, padding) {
  
  	gridWidth = gridWidth || 1;
  	gridHeight = gridHeight || 1;
          padding = padding || 0;
  
  	// Calculate the paper size to accomodate all the graph's elements.
  	var bbox = V(this.viewport).bbox(true, this.svg);
  
  	var calcWidth = Math.ceil((bbox.width + bbox.x) / gridWidth) * gridWidth;
  	var calcHeight = Math.ceil((bbox.height + bbox.y) / gridHeight) * gridHeight;
  
          calcWidth += padding;
          calcHeight += padding;
          
  	// Change the dimensions only if there is a size discrepency
  	if (calcWidth != this.options.width || calcHeight != this.options.height) {
  	    this.setDimensions(calcWidth || this.options.width , calcHeight || this.options.height);
  	}
      },
  
      getContentBBox: function() {
  
          var crect = this.viewport.getBoundingClientRect();
  
          // Using Screen CTM was the only way to get the real viewport bounding box working in both
          // Google Chrome and Firefox.
          var ctm = this.viewport.getScreenCTM();
  
          var bbox = g.rect(Math.abs(crect.left - ctm.e), Math.abs(crect.top - ctm.f), crect.width, crect.height);
  
          return bbox;
      },
  
      createViewForModel: function(cell) {
  
          var view;
          
          var type = cell.get('type');
          var module = type.split('.')[0];
          var entity = type.split('.')[1];
  
          // If there is a special view defined for this model, use that one instead of the default `elementView`/`linkView`.
          if (joint.shapes[module] && joint.shapes[module][entity + 'View']) {
  
              view = new joint.shapes[module][entity + 'View']({ model: cell, interactive: this.options.interactive });
              
          } else if (cell instanceof joint.dia.Element) {
                  
              view = new this.options.elementView({ model: cell, interactive: this.options.interactive });
  
          } else {
  
              view = new this.options.linkView({ model: cell, interactive: this.options.interactive });
          }
  
          return view;
      },
      
      addCell: function(cell) {
  
          var view = this.createViewForModel(cell);
  
          V(this.viewport).append(view.el);
          view.paper = this;
          view.render();
  
          // This is the only way to prevent image dragging in Firefox that works.
          // Setting -moz-user-select: none, draggable="false" attribute or user-drag: none didn't help.
          $(view.el).find('image').on('dragstart', function() { return false; });
      },
  
      resetCells: function(cellsCollection) {
  
          $(this.viewport).empty();
  
          var cells = cellsCollection.models.slice();
  
          // Make sure links are always added AFTER elements.
          // They wouldn't find their sources/targets in the DOM otherwise.
          cells.sort(function(a, b) { return a instanceof joint.dia.Link ? 1 : -1; });
          
          _.each(cells, this.addCell, this);
  
          // Sort the cells in the DOM manually as we might have changed the order they
          // were added to the DOM (see above).
          this.sortCells();
      },
  
      sortCells: function() {
  
          // Run insertion sort algorithm in order to efficiently sort DOM elements according to their
          // associated model `z` attribute.
  
          var $cells = $(this.viewport).children('[model-id]');
          var cells = this.model.get('cells');
  
          this.sortElements($cells, function(a, b) {
  
              var cellA = cells.get($(a).attr('model-id'));
              var cellB = cells.get($(b).attr('model-id'));
              
              return (cellA.get('z') || 0) > (cellB.get('z') || 0) ? 1 : -1;
          });
      },
  
      // Highly inspired by the jquery.sortElements plugin by Padolsey.
      // See http://james.padolsey.com/javascript/sorting-elements-with-jquery/.
      sortElements: function(elements, comparator) {
  
          var $elements = $(elements);
          
          var placements = $elements.map(function() {
  
              var sortElement = this;
              var parentNode = sortElement.parentNode;
  
              // Since the element itself will change position, we have
              // to have some way of storing it's original position in
              // the DOM. The easiest way is to have a 'flag' node:
              var nextSibling = parentNode.insertBefore(
                  document.createTextNode(''),
                  sortElement.nextSibling
              );
  
              return function() {
                  
                  if (parentNode === this) {
                      throw new Error(
                          "You can't sort elements if any one is a descendant of another."
                      );
                  }
                  
                  // Insert before flag:
                  parentNode.insertBefore(this, nextSibling);
                  // Remove flag:
                  parentNode.removeChild(nextSibling);
                  
              };
          });
  
          return Array.prototype.sort.call($elements, comparator).each(function(i) {
              placements[i].call(this);
          });
      },
  
      scale: function(sx, sy, ox, oy) {
  
          if (!ox) {
  
              ox = 0;
              oy = 0;
          }
  
          // Remove previous transform so that the new scale is not affected by previous scales, especially
          // the old translate() does not affect the new translate if an origin is specified.
          V(this.viewport).attr('transform', '');
          
          // TODO: V.scale() doesn't support setting scale origin. #Fix        
          if (ox || oy) {
              V(this.viewport).translate(-ox * (sx - 1), -oy * (sy - 1));
          }
          
          V(this.viewport).scale(sx, sy);
  
  	this.trigger('scale', ox, oy);
  
          return this;
      },
  
      rotate: function(deg, ox, oy) {
          
          // If the origin is not set explicitely, rotate around the center. Note that
          // we must use the plain bounding box (`this.el.getBBox()` instead of the one that gives us
          // the real bounding box (`bbox()`) including transformations).
          if (_.isUndefined(ox)) {
  
              var bbox = this.viewport.getBBox();
              ox = bbox.width/2;
              oy = bbox.height/2;
          }
  
          V(this.viewport).rotate(deg, ox, oy);
      },
  
      // Find the first view climbing up the DOM tree starting at element `el`. Note that `el` can also
      // be a selector or a jQuery object.
      findView: function(el) {
  
          var $el = this.$(el);
  
          if ($el.length === 0 || $el[0] === this.el) {
  
              return undefined;
          }
  
          if ($el.data('view')) {
  
              return $el.data('view');
          }
  
          return this.findView($el.parent());
      },
  
      // Find a view for a model `cell`. `cell` can also be a string representing a model `id`.
      findViewByModel: function(cell) {
  
          var id = _.isString(cell) ? cell : cell.id;
          
          var $view = this.$('[model-id="' + id + '"]');
          if ($view.length) {
  
              return $view.data('view');
          }
          return undefined;
      },
  
      // Find all views at given point
      findViewsFromPoint: function(p) {
  
  	p = g.point(p);
  
          var views = _.map(this.model.getElements(), this.findViewByModel);
  
  	return _.filter(views, function(view) {
  	    return g.rect(V(view.el).bbox(false, this.viewport)).containsPoint(p);
  	}, this);
      },
  
      // Find all views in given area
      findViewsInArea: function(r) {
  
  	r = g.rect(r);
  
          var views = _.map(this.model.getElements(), this.findViewByModel);
  
  	return _.filter(views, function(view) {
  	    return r.intersect(g.rect(V(view.el).bbox(false, this.viewport)));
  	}, this);
      },
  
      getModelById: function(id) {
  
          return this.model.getCell(id);
      },
  
      snapToGrid: function(p) {
  
          // Convert global coordinates to the local ones of the `viewport`. Otherwise,
          // improper transformation would be applied when the viewport gets transformed (scaled/rotated). 
          var localPoint = V(this.viewport).toLocalPoint(p.x, p.y);
  
          return {
              x: g.snapToGrid(localPoint.x, this.options.gridSize),
              y: g.snapToGrid(localPoint.y, this.options.gridSize)
          };
      },
  
      getDefaultLink: function(cellView, magnet) {
  
          return _.isFunction(this.options.defaultLink)
          // default link is a function producing link model
              ? this.options.defaultLink.call(this, cellView, magnet)
          // default link is the Backbone model
              : this.options.defaultLink.clone();
      },
  
      // Interaction.
      // ------------
  
      mousedblclick: function(evt) {
          
          evt.preventDefault();
          evt = joint.util.normalizeEvent(evt);
          
          var view = this.findView(evt.target);
          var localPoint = this.snapToGrid({ x: evt.clientX, y: evt.clientY });
  
          if (view) {
              
              view.pointerdblclick(evt, localPoint.x, localPoint.y);
              
          } else {
              
              this.trigger('blank:pointerdblclick', evt, localPoint.x, localPoint.y);
          }
      },
  
      mouseclick: function(evt) {
  
          // Trigger event when mouse not moved.
          if (!this._mousemoved) {
              
              evt.preventDefault();
              evt = joint.util.normalizeEvent(evt);
  
              var view = this.findView(evt.target);
              var localPoint = this.snapToGrid({ x: evt.clientX, y: evt.clientY });
  
              if (view) {
  
                  view.pointerclick(evt, localPoint.x, localPoint.y);
                  
              } else {
  
                  this.trigger('blank:pointerclick', evt, localPoint.x, localPoint.y);
              }
          }
  
          this._mousemoved = false;
      },
  
      pointerdown: function(evt) {
  
          evt.preventDefault();
          evt = joint.util.normalizeEvent(evt);
          
          var view = this.findView(evt.target);
  
          var localPoint = this.snapToGrid({ x: evt.clientX, y: evt.clientY });
          
          if (view) {
  
              this.sourceView = view;
  
              view.pointerdown(evt, localPoint.x, localPoint.y);
              
          } else {
  
              this.trigger('blank:pointerdown', evt, localPoint.x, localPoint.y);
          }
      },
  
      pointermove: function(evt) {
  
          evt.preventDefault();
          evt = joint.util.normalizeEvent(evt);
  
          if (this.sourceView) {
  
              // Mouse moved.
              this._mousemoved = true;
  
              var localPoint = this.snapToGrid({ x: evt.clientX, y: evt.clientY });
  
              this.sourceView.pointermove(evt, localPoint.x, localPoint.y);
          }
      },
  
      pointerup: function(evt) {
  
          evt = joint.util.normalizeEvent(evt);
  
          var localPoint = this.snapToGrid({ x: evt.clientX, y: evt.clientY });
          
          if (this.sourceView) {
  
              this.sourceView.pointerup(evt, localPoint.x, localPoint.y);
  
              //"delete sourceView" occasionally throws an error in chrome (illegal access exception)
  	    this.sourceView = null;
  
          } else {
  
              this.trigger('blank:pointerup', evt, localPoint.x, localPoint.y);
          }
      }
  });
  
  
  //      JointJS library.
  //      (c) 2011-2013 client IO
  
  
  if (typeof exports === 'object') {
  
      var joint = {
          util: require('../src/core').util,
          shapes: {},
          dia: {
              Element: require('../src/joint.dia.element').Element,
              ElementView: require('../src/joint.dia.element').ElementView
          }
      };
      var _ = require('lodash');
  }
  
  
  joint.shapes.basic = {};
  
  
  joint.shapes.basic.Generic = joint.dia.Element.extend({
  
      defaults: joint.util.deepSupplement({
          
          type: 'basic.Generic',
          attrs: {
              '.': { fill: '#FFFFFF', stroke: 'none' }
          }
          
      }, joint.dia.Element.prototype.defaults)
  });
  
  joint.shapes.basic.Rect = joint.shapes.basic.Generic.extend({
  
      markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/></g>',
      
      defaults: joint.util.deepSupplement({
      
          type: 'basic.Rect',
          attrs: {
              'rect': { fill: '#FFFFFF', stroke: 'black', width: 100, height: 60 },
              'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
          }
          
      }, joint.shapes.basic.Generic.prototype.defaults)
  });
  
  joint.shapes.basic.Text = joint.shapes.basic.Generic.extend({
  
      markup: '<g class="rotatable"><g class="scalable"><text/></g></g>',
      
      defaults: joint.util.deepSupplement({
          
          type: 'basic.Text',
          attrs: {
              'text': { 'font-size': 18, fill: 'black' }
          }
          
      }, joint.shapes.basic.Generic.prototype.defaults)
  });
  
  joint.shapes.basic.Circle = joint.shapes.basic.Generic.extend({
  
      markup: '<g class="rotatable"><g class="scalable"><circle/></g><text/></g>',
      
      defaults: joint.util.deepSupplement({
  
          type: 'basic.Circle',
          size: { width: 60, height: 60 },
          attrs: {
              'circle': { fill: '#FFFFFF', stroke: 'black', r: 30, transform: 'translate(30, 30)' },
              'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-y': .5, ref: 'circle', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
          }
      }, joint.shapes.basic.Generic.prototype.defaults)
  });
  
  joint.shapes.basic.Image = joint.shapes.basic.Generic.extend({
  
      markup: '<g class="rotatable"><g class="scalable"><image/></g><text/></g>',
      
      defaults: joint.util.deepSupplement({
  
          type: 'basic.Image',
          attrs: {
              'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'image', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
          }
      }, joint.shapes.basic.Generic.prototype.defaults)
  });
  
  joint.shapes.basic.Path = joint.shapes.basic.Generic.extend({
  
      markup: '<g class="rotatable"><g class="scalable"><path/></g><text/></g>',
      
      defaults: joint.util.deepSupplement({
  
          type: 'basic.Path',
          size: { width: 60, height: 60 },
          attrs: {
              'path': { fill: '#FFFFFF', stroke: 'black' },
              'text': { 'font-size': 14, text: '', 'text-anchor': 'middle', 'ref-x': .5, 'ref-dy': 20, ref: 'path', 'y-alignment': 'middle', fill: 'black', 'font-family': 'Arial, helvetica, sans-serif' }
          }
      }, joint.shapes.basic.Generic.prototype.defaults)
  });
  
  // PortsModelInterface is a common interface for shapes that have ports. This interface makes it easy
  // to create new shapes with ports functionality. It is assumed that the new shapes have
  // `inPorts` and `outPorts` array properties. Only these properties should be used to set ports.
  // In other words, using this interface, it is no longer recommended to set ports directly through the
  // `attrs` object.
  
  // Usage:
  // joint.shapes.custom.MyElementWithPorts = joint.shapes.basic.Path.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
  //     getPortAttrs: function(portName, index, total, selector, type) {
  //         var attrs = {};
  //         var portClass = 'port' + index;
  //         var portSelector = selector + '>.' + portClass;
  //         var portTextSelector = portSelector + '>text';
  //         var portCircleSelector = portSelector + '>circle';
  //
  //         attrs[portTextSelector] = { text: portName };
  //         attrs[portCircleSelector] = { port: { id: portName || _.uniqueId(type) , type: type } };
  //         attrs[portSelector] = { ref: 'rect', 'ref-y': (index + 0.5) * (1 / total) };
  //
  //         if (selector === '.outPorts') { attrs[portSelector]['ref-dx'] = 0; }
  //
  //         return attrs;
  //     }
  //}));
  joint.shapes.basic.PortsModelInterface = {
  
      initialize: function() {
  
          this.updatePortsAttrs();
          this.on('change:inPorts change:outPorts', this.updatePortsAttrs, this);
  
          // Call the `initialize()` of the parent.
          this.constructor.__super__.constructor.__super__.initialize.apply(this, arguments);
      },
      
      updatePortsAttrs: function(eventName) {
  
          // Delete previously set attributes for ports.
          var currAttrs = this.get('attrs');
          _.each(this._portSelectors, function(selector) {
              if (currAttrs[selector]) delete currAttrs[selector];
          });
          
          // This holds keys to the `attrs` object for all the port specific attribute that
          // we set in this method. This is necessary in order to remove previously set
          // attributes for previous ports.
          this._portSelectors = [];
          
          var attrs = {};
          
          _.each(this.get('inPorts'), function(portName, index, ports) {
              var portAttributes = this.getPortAttrs(portName, index, ports.length, '.inPorts', 'in');
              this._portSelectors = this._portSelectors.concat(_.keys(portAttributes));
              _.extend(attrs, portAttributes);
          }, this);
          
          _.each(this.get('outPorts'), function(portName, index, ports) {
              var portAttributes = this.getPortAttrs(portName, index, ports.length, '.outPorts', 'out');
              this._portSelectors = this._portSelectors.concat(_.keys(portAttributes));
              _.extend(attrs, portAttributes);
          }, this);
  
          // Silently set `attrs` on the cell so that noone knows the attrs have changed. This makes sure
          // that, for example, command manager does not register `change:attrs` command but only
          // the important `change:inPorts`/`change:outPorts` command.
          this.attr(attrs, { silent: true });
          // Manually call the `processPorts()` method that is normally called on `change:attrs` (that we just made silent).
          this.processPorts();
          // Let the outside world (mainly the `ModelView`) know that we're done configuring the `attrs` object.
          this.trigger('process:ports');
      },
  
      getPortSelector: function(name) {
  
          var selector = '.inPorts';
          var index = this.get('inPorts').indexOf(name);
  
          if (index < 0) {
              selector = '.outPorts';
              index = this.get('outPorts').indexOf(name);
  
              if (index < 0) throw new Error("getPortSelector(): Port doesn't exist.");
          }
  
          return selector + '>g:nth-child(' + (index + 1) + ')>circle';
      }
  };
  
  joint.shapes.basic.PortsViewInterface = {
      
      initialize: function() {
  
          // `Model` emits the `process:ports` whenever it's done configuring the `attrs` object for ports.
          this.listenTo(this.model, 'process:ports', this.update);
          
          joint.dia.ElementView.prototype.initialize.apply(this, arguments);
      },
  
      update: function() {
  
          // First render ports so that `attrs` can be applied to those newly created DOM elements
          // in `ElementView.prototype.update()`.
          this.renderPorts();
          joint.dia.ElementView.prototype.update.apply(this, arguments);
      },
  
      renderPorts: function() {
  
          var $inPorts = this.$('.inPorts').empty();
          var $outPorts = this.$('.outPorts').empty();
  
          var portTemplate = _.template(this.model.portMarkup);
  
          _.each(_.filter(this.model.ports, function(p) { return p.type === 'in' }), function(port, index) {
  
              $inPorts.append(V(portTemplate({ id: index, port: port })).node);
          });
          _.each(_.filter(this.model.ports, function(p) { return p.type === 'out' }), function(port, index) {
  
              $outPorts.append(V(portTemplate({ id: index, port: port })).node);
          });
      }
  };
  
  joint.shapes.basic.TextBlock = joint.shapes.basic.Generic.extend({
  
      markup: ['<g class="rotatable"><g class="scalable"><rect/></g><switch>',
  
               // if foreignObject supported
  
               '<foreignObject requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" class="fobj">',
               '<body xmlns="http://www.w3.org/1999/xhtml"><div/></body>',
               '</foreignObject>',
  
               // else foreignObject is not supported (fallback for IE)
               '<text class="content"/>',
  
               '</switch></g>'].join(''),
  
      defaults: joint.util.deepSupplement({
  
          type: 'basic.TextBlock',
  
          // see joint.css for more element styles
          attrs: {
              rect: {
                  fill: '#ffffff',
                  stroke: '#000000',
                  width: 80,
                  height: 100
              },
              text: {
                  fill: '#000000',
                  'font-size': 14,
                  'font-family': 'Arial, helvetica, sans-serif'
              },
              '.content': {
                  text: '',
                  ref: 'rect',
                  'ref-x': .5,
                  'ref-y': .5,
                  'y-alignment': 'middle',
                  'x-alignment': 'middle'
              }
          },
  
          content: ''
  
      }, joint.shapes.basic.Generic.prototype.defaults),
  
      initialize: function() {
  
          if (typeof SVGForeignObjectElement !== 'undefined') {
  
              // foreignObject supported
              this.setForeignObjectSize(this, this.get('size'));
              this.setDivContent(this, this.get('content'));
              this.listenTo(this, 'change:size', this.setForeignObjectSize);
              this.listenTo(this, 'change:content', this.setDivContent);
  
          }
  
          joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
      },
  
      setForeignObjectSize: function(cell, size) {
  
          // Selector `foreignObject' doesn't work accross all browsers, we'r using class selector instead.
          // We have to clone size as we don't want attributes.div.style to be same object as attributes.size.
          cell.attr({
              '.fobj': _.clone(size),
              div: { style: _.clone(size) }
          });
      },
  
      setDivContent: function(cell, content) {
  
          // Append the content to div as html.
          cell.attr({ div : {
              html: content
          }});
      }
  
  });
  
  // TextBlockView implements the fallback for IE when no foreignObject exists and
  // the text needs to be manually broken.
  joint.shapes.basic.TextBlockView = joint.dia.ElementView.extend({
  
      initialize: function() {
  
          joint.dia.ElementView.prototype.initialize.apply(this, arguments);
  
          if (typeof SVGForeignObjectElement === 'undefined') {
  
              this.noSVGForeignObjectElement = true;
  
              this.listenTo(this.model, 'change:content', function(cell) {
                  // avoiding pass of extra paramters
                  this.updateContent(cell);
              });
          }
      },
  
      update: function(cell, renderingOnlyAttrs) {
  
          if (this.noSVGForeignObjectElement) {
  
              var model = this.model;
  
              // Update everything but the content first.
              var noTextAttrs = _.omit(renderingOnlyAttrs || model.get('attrs'), '.content');
              joint.dia.ElementView.prototype.update.call(this, model, noTextAttrs);
  
              if (!renderingOnlyAttrs || _.has(renderingOnlyAttrs, '.content')) {
                  // Update the content itself.
                  this.updateContent(model, renderingOnlyAttrs);
              }
  
          } else {
  
              joint.dia.ElementView.prototype.update.call(this, model, renderingOnlyAttrs);
          }
      },
  
      updateContent: function(cell, renderingOnlyAttrs) {
  
          // Create copy of the text attributes
          var textAttrs = _.merge({}, (renderingOnlyAttrs || cell.get('attrs'))['.content']);
  
          delete textAttrs.text;
  
          // Break the content to fit the element size taking into account the attributes
          // set on the model.
          var text = joint.util.breakText(cell.get('content'), cell.get('size'), textAttrs, {
              // measuring sandbox svg document
              svgDocument: this.paper.svg
          });
  
          // Create a new attrs with same structure as the model attrs { text: { *textAttributes* }}
          var attrs = joint.util.setByPath({}, '.content', textAttrs,'/');
  
          // Replace text attribute with the one we just processed.
          attrs['.content'].text = text;
  
          // Update the view using renderingOnlyAttributes parameter.
          joint.dia.ElementView.prototype.update.call(this, cell, attrs);
      }
  });
  
  if (typeof exports === 'object') {
  
      module.exports = joint.shapes.basic;
  }
  
  joint.routers.orthogonal = function() {
  
      var sourceBBox, targetBBox;
  
      // Return the direction that one would have to take traveling from `p1` to `p2`.
      // This function assumes the line between `p1` and `p2` is orthogonal.
      function direction(p1, p2) {
          
          if (p1.y < p2.y && p1.x === p2.x) {
              return 'down';
          } else if (p1.y > p2.y && p1.x === p2.x) {
              return 'up';
          } else if (p1.x < p2.x && p1.y === p2.y) {
              return 'right';
          }
          return 'left';
      }
  
      function bestDirection(p1, p2, preferredDirection) {
  
          var directions;
  
          // This branching determines possible directions that one can take to travel
          // from `p1` to `p2`.
          if (p1.x < p2.x) {
  
              if (p1.y > p2.y) { directions = ['up', 'right']; }
              else if (p1.y < p2.y) { directions = ['down', 'right']; }
              else { directions = ['right']; }
  
          } else if (p1.x > p2.x) {
  
              if (p1.y > p2.y) { directions = ['up', 'left']; }
              else if (p1.y < p2.y) { directions = ['down', 'left']; }
              else { directions = ['left']; }
  
          } else {
  
              if (p1.y > p2.y) { directions = ['up']; }
              else { directions = ['down']; }
          }
  
          if (_.contains(directions, preferredDirection)) {
              return preferredDirection;
          }
  
          var direction = _.first(directions);
  
          // Should the direction be the exact opposite of the preferred direction,
          // try another one if such direction exists.
          switch (preferredDirection) {
          case 'down': if (direction === 'up') return _.last(directions); break;
          case 'up': if (direction === 'down') return _.last(directions); break;
          case 'left': if (direction === 'right') return _.last(directions); break;
          case 'right': if (direction === 'left') return _.last(directions); break;
          }
          return direction;
      };
  
      // Find a vertex in between the vertices `p1` and `p2` so that the route between those vertices
      // is orthogonal. Prefer going the direction determined by `preferredDirection`.
      function findMiddleVertex(p1, p2, preferredDirection) {
          
          var direction = bestDirection(p1, p2, preferredDirection);
          if (direction === 'down' || direction === 'up') {
              return { x: p1.x, y: p2.y, d: direction };
          }
          return { x: p2.x, y: p1.y, d: direction };
      }
  
      // Return points that one needs to draw a connection through in order to have a orthogonal link
      // routing from source to target going through `vertices`.
      function findOrthogonalRoute(vertices) {
  
          vertices = (vertices || []).slice();
          var orthogonalVertices = [];
  
          var sourceCenter = sourceBBox.center();
          var targetCenter = targetBBox.center();
  
          if (!vertices.length) {
  
              if (Math.abs(sourceCenter.x - targetCenter.x) < (sourceBBox.width / 2) ||
                  Math.abs(sourceCenter.y - targetCenter.y) < (sourceBBox.height / 2)
              ) {
  
                  vertices = [{
                      x: Math.min(sourceCenter.x, targetCenter.x) +
                          Math.abs(sourceCenter.x - targetCenter.x) / 2,
                      y: Math.min(sourceCenter.y, targetCenter.y) +
                          Math.abs(sourceCenter.y - targetCenter.y) / 2
                  }];
              }
          }
  
          vertices.unshift(sourceCenter);
          vertices.push(targetCenter);
  
          var orthogonalVertex;
          var lastOrthogonalVertex;
          var vertex;
          var nextVertex;
  
          // For all the pairs of link model vertices...
          for (var i = 0; i < vertices.length - 1; i++) {
  
              vertex = vertices[i];
              nextVertex = vertices[i + 1];
              lastOrthogonalVertex = _.last(orthogonalVertices);
              
              if (i > 0) {
                  // Push all the link vertices to the orthogonal route.
                  orthogonalVertex = vertex;
                  // Determine a direction between the last vertex and the new one.
                  // Therefore, each vertex contains the `d` property describing the direction that one
                  // would have to take to travel to that vertex.
                  orthogonalVertex.d = lastOrthogonalVertex
                      ? direction(lastOrthogonalVertex, vertex)
                      : 'top';
  
                  orthogonalVertices.push(orthogonalVertex);
                  lastOrthogonalVertex = orthogonalVertex;
              }
  
              // Make sure that we don't create a vertex that would go the opposite direction then
              // that of the previous one.
              // Othwerwise, a 'spike' segment would be created which is not desirable.
              // Find a dummy vertex to keep the link orthogonal. Preferably, take the same direction
              // as the previous one.
              var d = lastOrthogonalVertex && lastOrthogonalVertex.d;
              orthogonalVertex = findMiddleVertex(vertex, nextVertex, d);
  
              // Do not add a new vertex that is the same as one of the vertices already added.
              if (!g.point(orthogonalVertex).equals(g.point(vertex)) &&
                  !g.point(orthogonalVertex).equals(g.point(nextVertex))) {
  
                  orthogonalVertices.push(orthogonalVertex);
              }
          }
          return orthogonalVertices;
      };
  
      return function(vertices) {
  
          sourceBBox = this.sourceBBox;
          targetBBox = this.targetBBox;
  
          return findOrthogonalRoute(vertices);
      };
  
  }();
  
  joint.routers.manhattan = (function() {
  
      'use strict';
  
      var config = {
  
          // size of the step to find a route
          step: 10,
  
          // use of the perpendicular linkView option to connect center of element with first vertex
          perpendicular: true,
  
          // tells how to divide the paper when creating the elements map
          mapGridSize: 100,
  
          // should be source or target not to be consider as an obstacle
          excludeEnds: [], // 'source', 'target'
  
          // should be any element with a certain type not to be consider as an obstacle
          excludeTypes: ['basic.Text'],
  
          // if number of route finding loops exceed the maximum, stops searching and returns
          // fallback route
          maximumLoops: 500,
  
          // possible starting directions from an element
          startDirections: ['left','right','top','bottom'],
  
          // possible ending directions to an element
          endDirections: ['left','right','top','bottom'],
  
          // specify directions above
          directionMap: {
              right: { x: 1, y: 0 },
              bottom: { x: 0, y: 1 },
              left: { x: -1, y: 0 },
              top: { x: 0, y: -1 }
          },
  
          // maximum change of the direction
          maxAllowedDirectionChange: 1,
  
          // padding applied on the element bounding boxes
          paddingBox: function() {
  
              var step = this.step;
  
              return {
                  x: -step,
                  y: -step,
                  width: 2*step,
                  height: 2*step
              }
          },
  
          // an array of directions to find next points on the route
          directions: function() {
  
              var step = this.step;
  
              return [
                  { offsetX: step  , offsetY: 0     , cost: step },
                  { offsetX: 0     , offsetY: step  , cost: step },
                  { offsetX: -step , offsetY: 0     , cost: step },
                  { offsetX: 0     , offsetY: -step , cost: step }
              ];
          },
  
          // a penalty received for direction change
          penalties: function() {
  
              return [0, this.step / 2, this.step];
          },
  
          // heurestic method to determine the distance between two points
          estimateCost: function(from, to) {
  
              return from.manhattanDistance(to);
          },
  
          // a simple route used in situations, when main routing method fails
          // (exceed loops, inaccessible).
          fallbackRoute: function(from, to, opts) {
  
              // Find an orthogonal route ignoring obstacles.
  
              var prevDirIndexes = opts.prevDirIndexes || {};
  
              var point = (prevDirIndexes[from] || 0) % 2
                      ? g.point(from.x, to.y)
                      : g.point(to.x, from.y);
  
              return [point, to];
          },
  
          // if a function is provided, it's used to route the link while dragging an end
          // i.e. function(from, to, opts) { return []; }
          draggingRoute: null
      };
  
      // reconstructs a route by concating points with their parents
      function reconstructRoute(parents, point) {
  
          var route = [];
          var prevDiff = { x: 0, y: 0 };
          var current = point;
          var parent;
  
          while ((parent = parents[current])) {
  
              var diff = parent.difference(current);
  
              if (!diff.equals(prevDiff)) {
  
                  route.unshift(current);
                  prevDiff = diff;
              }
  
              current = parent;
          }
  
          route.unshift(current);
  
          return route;
      };
  
      // find points around the rectangle taking given directions in the account
      function getRectPoints(bbox, directionList, opts) {
  
          var step = opts.step;
  
          var center = bbox.center();
  
          var startPoints = _.chain(opts.directionMap).pick(directionList).map(function(direction) {
  
              var x = direction.x * bbox.width / 2;
              var y = direction.y * bbox.height / 2;
  
              var point = g.point(center).offset(x,y).snapToGrid(step);
  
              if (bbox.containsPoint(point)) {
  
                  point.offset(direction.x * step, direction.y * step);
              }
  
              return point;
  
          }).value();
  
          return startPoints;
      };
  
      // returns a direction index from start point to end point
      function getDirection(start, end, dirLen) {
  
          var dirAngle = 360 / dirLen;
  
          var q = Math.floor(start.theta(end) / dirAngle);
  
          return dirLen - q;
      }
  
      // finds the route between to points/rectangles implementing A* alghoritm
      function findRoute(start, end, map, opt) {
  
          var startDirections = opt.reversed ? opt.endDirections : opt.startDirections;
          var endDirections = opt.reversed ? opt.startDirections : opt.endDirections;
  
          // set of points we start pathfinding from
          var startSet = start instanceof g.rect
                  ? getRectPoints(start, startDirections, opt)
                  : [start];
  
          // set of points we want the pathfinding to finish at
          var endSet = end instanceof g.rect
                  ? getRectPoints(end, endDirections, opt)
                  : [end];
  
          var startCenter = startSet.length > 1 ? start.center() : startSet[0];
          var endCenter = endSet.length > 1 ? end.center() : endSet[0];
  
          // take into account  only accessible end points
          var endPoints = _.filter(endSet, function(point) {
  
              var mapKey = g.point(point).snapToGrid(opt.mapGridSize).toString();
  
              var accesible = _.every(map[mapKey], function(obstacle) {
                  return !obstacle.containsPoint(point);
              });
  
              return accesible;
          });
  
  
          if (endPoints.length) {
  
              var step = opt.step;
              var penalties = opt.penalties;
  
              // choose the end point with the shortest estimated path cost
              var endPoint = _.chain(endPoints).invoke('snapToGrid', step).min(function(point) {
  
                  return opt.estimateCost(startCenter, point);
  
              }).value();
  
              var parents = {};
              var costFromStart = {};
              var totalCost = {};
  
              // directions
              var dirs = opt.directions;
              var dirLen = dirs.length;
              var dirHalfLen = dirLen / 2;
              var dirIndexes = opt.previousDirIndexes || {};
  
              // The set of point already evaluated.
              var closeHash = {}; // keeps only information whether a point was evaluated'
  
              // The set of tentative points to be evaluated, initially containing the start points
              var openHash = {}; // keeps only information whether a point is to be evaluated'
              var openSet = _.chain(startSet).invoke('snapToGrid', step).each(function(point) {
  
                  var key = point.toString();
  
                  costFromStart[key] = 0; // Cost from start along best known path.
                  totalCost[key] = opt.estimateCost(point, endPoint);
                  dirIndexes[key] = dirIndexes[key] || getDirection(startCenter, point, dirLen);
                  openHash[key] = true;
  
              }).map(function(point) {
  
                  return point.toString();
  
              }).sortBy(function(pointKey) {
  
                  return totalCost[pointKey];
  
              }).value();
  
              var loopCounter = opt.maximumLoops;
  
              var maxAllowedDirectionChange = opt.maxAllowedDirectionChange;
  
              // main route finding loop
              while (openSet.length && loopCounter--) {
  
                  var currentKey = openSet[0];
                  var currentPoint = g.point(currentKey);
  
                  if (endPoint.equals(currentPoint)) {
  
                      opt.previousDirIndexes = _.pick(dirIndexes, currentKey);
                      return reconstructRoute(parents, currentPoint);
                  }
  
                  // remove current from the open list
                  openSet.splice(0, 1);
                  openHash[neighborKey] = null;
  
                  // add current to the close list
                  closeHash[neighborKey] = true;
  
                  var currentDirIndex = dirIndexes[currentKey];
                  var currentDist = costFromStart[currentKey];
  
                  for (var dirIndex = 0; dirIndex < dirLen; dirIndex++) {
  
                      var dirChange = Math.abs(dirIndex - currentDirIndex);
  
                      if (dirChange > dirHalfLen) {
  
                          dirChange = dirLen - dirChange;
                      }
  
                      // if the direction changed rapidly don't use this point
                      if (dirChange > maxAllowedDirectionChange) {
  
                          continue;
                      }
  
                      var dir = dirs[dirIndex];
  
                      var neighborPoint = g.point(currentPoint).offset(dir.offsetX, dir.offsetY);
                      var neighborKey = neighborPoint.toString();
  
                      if (closeHash[neighborKey]) {
  
                          continue;
                      }
  
                      // is point accesible - no obstacle in the way
  
                      var mapKey = g.point(neighborPoint).snapToGrid(opt.mapGridSize).toString();
  
                      var isAccesible = _.every(map[mapKey], function(obstacle) {
                          return !obstacle.containsPoint(neighborPoint);
                      });
  
                      if (!isAccesible) {
  
                          continue;
                      }
  
                      var inOpenSet = _.has(openHash, neighborKey);
  
                      var costToNeighbor = currentDist + dir.cost;
  
                      if (!inOpenSet || costToNeighbor < costFromStart[neighborKey]) {
  
                          parents[neighborKey] = currentPoint;
                          dirIndexes[neighborKey] = dirIndex;
                          costFromStart[neighborKey] = costToNeighbor;
  
                          totalCost[neighborKey] = costToNeighbor +
                              opt.estimateCost(neighborPoint, endPoint) +
                              penalties[dirChange];
  
                          if (!inOpenSet) {
  
                              var openIndex = _.sortedIndex(openSet, neighborKey, function(openKey) {
  
                                  return totalCost[openKey];
                              });
  
                              openSet.splice(openIndex, 0, neighborKey);
                              openHash[neighborKey] = true;
                          }
                      };
                  };
              }
          }
  
          // no route found ('to' point wasn't either accessible or finding route took
          // way to much calculations)
          return opt.fallbackRoute(startCenter, endCenter, opt);
      };
  
      // initiation of the route finding
      function router(oldVertices, opt) {
  
          // resolve some of the options
          opt.directions = _.result(opt, 'directions');
          opt.penalties = _.result(opt, 'penalties');
          opt.paddingBox = _.result(opt, 'paddingBox');
  
          // enable/disable linkView perpendicular option
          this.options.perpendicular = !!opt.perpendicular;
  
          // As route changes its shape rapidly when we start finding route from different point
          // it's necessary to start from the element that was not interacted with
          // (the position was changed) at very last.
          var reverseRouting = opt.reversed = (this.lastEndChange === 'source');
  
          var sourceBBox = reverseRouting ? g.rect(this.targetBBox) : g.rect(this.sourceBBox);
          var targetBBox = reverseRouting ? g.rect(this.sourceBBox) : g.rect(this.targetBBox);
  
          // expand boxes by specific padding
          sourceBBox.moveAndExpand(opt.paddingBox);
          targetBBox.moveAndExpand(opt.paddingBox);
  
          // building an elements map
  
          var link = this.model;
          var graph = this.paper.model;
  
          // source or target element could be excluded from set of obstacles
          var excludedEnds = _.chain(opt.excludeEnds)
                  .map(link.get, link)
                  .pluck('id')
                  .map(graph.getCell, graph).value();
  
          var mapGridSize = opt.mapGridSize;
  
          // builds a map of all elements for quicker obstacle queries (i.e. is a point contained
          // in any obstacle?) (a simplified grid search)
          // The paper is divided to smaller cells, where each of them holds an information which
          // elements belong to it. When we query whether a point is in an obstacle we don't need
          // to go through all obstacles, we check only those in a particular cell.
          var map = _.chain(graph.getElements())
              // remove source and target element if required
              .difference(excludedEnds)
              // remove all elements whose type is listed in excludedTypes array
              .reject(function(element) {
                  return _.contains(opt.excludeTypes, element.get('type'));
              })
              // change elements (models) to their bounding boxes
              .invoke('getBBox')
              // expand their boxes by specific padding
              .invoke('moveAndExpand', opt.paddingBox)
              // build the map
              .foldl(function(res, bbox) {
  
                  var origin = bbox.origin().snapToGrid(mapGridSize);
                  var corner = bbox.corner().snapToGrid(mapGridSize);
  
                  for (var x = origin.x; x <= corner.x; x += mapGridSize) {
                      for (var y = origin.y; y <= corner.y; y += mapGridSize) {
  
                          var gridKey = x + '@' + y;
  
                          res[gridKey] = res[gridKey] || [];
                          res[gridKey].push(bbox);
                      }
                  }
  
                  return res;
  
              }, {}).value();
  
          // pathfinding
  
          var newVertices = [];
  
          var points = _.map(oldVertices, g.point);
  
          var tailPoint = sourceBBox.center();
  
          // find a route by concating all partial routes (routes need to go through the vertices)
          // startElement -> vertex[1] -> ... -> vertex[n] -> endElement
          for (var i = 0, len = points.length; i <= len; i++) {
  
              var partialRoute = null;
  
              var from = to || sourceBBox;
              var to = points[i];
  
              if (!to) {
  
                  to = targetBBox;
  
                  // 'to' is not a vertex. If the target is a point (i.e. it's not an element), we
                  // might use dragging route instead of main routing method if that is enabled.
                  var endingAtPoint = !this.model.get('source').id || !this.model.get('target').id;
  
                  if (endingAtPoint && _.isFunction(opt.draggingRoute)) {
                      // Make sure we passing points only (not rects).
                      var dragFrom = from instanceof g.rect ? from.center() : from;
                      partialRoute = opt.draggingRoute(dragFrom, to.origin(), opt);
                  }
              }
  
              // if partial route has not been calculated yet use the main routing method to find one
              partialRoute = partialRoute || findRoute(from, to, map, opt);
  
              var leadPoint = _.first(partialRoute);
  
              if (leadPoint && leadPoint.equals(tailPoint)) {
  
                  // remove the first point if the previous partial route had the same point as last
                  partialRoute.shift();
              }
  
              tailPoint = _.last(partialRoute) || tailPoint;
  
              newVertices = newVertices.concat(partialRoute);
          };
  
          // we might have to reverse the result if we swapped source and target at the beginning
          return reverseRouting ? newVertices.reverse() : newVertices;
      };
  
      // public function
      return function(vertices, opt, linkView) {
  
          return router.call(linkView, vertices, _.extend({}, config, opt));
      };
  
  })();
  
  joint.routers.metro = (function() {
  
      if (!_.isFunction(joint.routers.manhattan)) {
  
          throw('Metro requires the manhattan router.');
      }
  
      var config = {
  
          // cost of a diagonal step (calculated if not defined).
          diagonalCost: null,
  
          // an array of directions to find next points on the route
          directions: function() {
  
              var step = this.step;
              var diagonalCost = this.diagonalCost || Math.ceil(Math.sqrt(step * step << 1));
  
              return [
                  { offsetX: step  , offsetY: 0     , cost: step         },
                  { offsetX: step  , offsetY: step  , cost: diagonalCost },
                  { offsetX: 0     , offsetY: step  , cost: step         },
                  { offsetX: -step , offsetY: step  , cost: diagonalCost },
                  { offsetX: -step , offsetY: 0     , cost: step         },
                  { offsetX: -step , offsetY: -step , cost: diagonalCost },
                  { offsetX: 0     , offsetY: -step , cost: step         },
                  { offsetX: step  , offsetY: -step , cost: diagonalCost }
              ];
          },
  
          // a simple route used in situations, when main routing method fails
          // (exceed loops, inaccessible).
          fallbackRoute: function(from, to, opts) {
  
              // Find a route which breaks by 45 degrees ignoring all obstacles.
  
              var theta = from.theta(to);
  
              var a = { x: to.x, y: from.y };
              var b = { x: from.x, y: to.y };
  
              if (theta % 180 > 90) {
                  var t = a;
                  a = b;
                  b = t;
              }
  
              var p1 = (theta % 90) < 45 ? a : b;
  
              var l1 = g.line(from, p1);
  
              var alpha = 90 * Math.ceil(theta / 90);
  
              var p2 = g.point.fromPolar(l1.squaredLength(), g.toRad(alpha + 135), p1);
  
              var l2 = g.line(to, p2);
  
              var point = l1.intersection(l2);
  
              return point ? [point.round(), to] : [to];
          }
      };
  
      // public function
      return function(vertices, opts, linkView) {
  
          return joint.routers.manhattan(vertices, _.extend({}, config, opts), linkView);
      };
  
  })();
  
  joint.connectors.normal = function(sourcePoint, targetPoint, vertices) {
  
      // Construct the `d` attribute of the `<path>` element.
      var d = ['M', sourcePoint.x, sourcePoint.y];
  
      _.each(vertices, function(vertex) {
  
          d.push(vertex.x, vertex.y);
      });
  
      d.push(targetPoint.x, targetPoint.y);
  
      return d.join(' ');
  };
  
  joint.connectors.rounded = function(sourcePoint, targetPoint, vertices, opts) {
  
      var offset = opts.radius || 10;
  
      var c1, c2, d1, d2, prev, next;
  
      // Construct the `d` attribute of the `<path>` element.
      var d = ['M', sourcePoint.x, sourcePoint.y];
  
      _.each(vertices, function(vertex, index) {
  
          // the closest vertices
          prev = vertices[index-1] || sourcePoint;
          next = vertices[index+1] || targetPoint;
  
          // a half distance to the closest vertex
          d1 = d2 || g.point(vertex).distance(prev) / 2;
          d2 = g.point(vertex).distance(next) / 2;
  
          // control points
          c1 = g.point(vertex).move(prev, -Math.min(offset, d1)).round();
          c2 = g.point(vertex).move(next, -Math.min(offset, d2)).round();
  
          d.push(c1.x, c1.y, 'S', vertex.x, vertex.y, c2.x, c2.y, 'L');
      });
  
      d.push(targetPoint.x, targetPoint.y);
  
      return d.join(' ');
  };
  
  joint.connectors.smooth = function(sourcePoint, targetPoint, vertices) {
  
      var d;
  
      if (vertices.length) {
  
          d = g.bezier.curveThroughPoints([sourcePoint].concat(vertices).concat([targetPoint]));
  
      } else {
          // if we have no vertices use a default cubic bezier curve, cubic bezier requires
          // two control points. The two control points are both defined with X as mid way
          // between the source and target points. SourceControlPoint Y is equal to sourcePoint Y
          // and targetControlPointY being equal to targetPointY. Handle situation were
          // sourcePointX is greater or less then targetPointX.
          var controlPointX = (sourcePoint.x < targetPoint.x) 
                  ? targetPoint.x - ((targetPoint.x - sourcePoint.x) / 2)
                  : sourcePoint.x - ((sourcePoint.x - targetPoint.x) / 2);
  
          d = [
              'M', sourcePoint.x, sourcePoint.y,
              'C', controlPointX, sourcePoint.y, controlPointX, targetPoint.y,
              targetPoint.x, targetPoint.y
          ];
      }
  
      return d.join(' ');
  };