Skip to content

dream
dream
Commit e34796c6 authored by Sebastien Robin's avatar Sebastien Robin
Browse files
Options

add skeleton of demo, it's only import from jsPlumb demo

parent da40245f
Hide whitespace changes
Inline Side-by-side
Showing with 19008 additions and 0 deletions
ui/css/demo-new.css 0 → 100644
View file @ e34796c6
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src:local('Open Sans'),
local('OpenSans'),
url("../font/OpenSans-Regular.ttf") format('truetype'),
url("../font/OpenSans.woff") format('woff');
}
body {
padding:0;
margin:0;
background-color:white;
font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-align:center;
}
#headerWrapper {
width:100%;
background-color:black;
position:fixed;
top:0;left:0;
z-index:10000;
height:44px;
padding:0;
border-bottom:1px solid #999;
box-shadow: 0px 2px 19px #aaa;
-o-box-shadow: 0px 2px 19px #aaa;
-webkit-box-shadow: 0px 2px 19px #aaa;
-moz-box-shadow: 0px 2px 19px #aaa;
opacity:0.8;
}
#header {
margin-top:0;
height:44px;
font-size:80%;
margin-left:auto;
margin-right:auto;
width:950px;
background-image:url(../../img/logo_bw_44h.jpg);
background-repeat:no-repeat;
}
#intro {
margin-top:59px;
}
#main {
/* these two margins settings are here just to ensure that jsPlumb handles
margins properly.*/
margin-top:44px;
margin-left: auto;
position: relative;
font-size: 80%;
margin-right: auto;
width: 850px;
border-left: 2px solid #456;
border-right: 2px solid #456;
border-bottom: 2px solid #456;
height: 600px;
overflow: hidden;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color:#eaedef;
}
#sidebar {
margin-left:auto;
margin-right:auto;
width:800px;
font-size:13px;
}
/* demo elements */
.menu,#render, #explanation {
background-color:#fff;
}
.menu {
height: 15px;
float:right;
padding-top:1em;
padding-bottom:0.4em;
background-color: transparent;
margin-right:30px;
}
#render {
padding-top:2px;
margin-left:auto;
margin-right:auto;
z-index:5000;
margin-top:0px;
text-align: center;
background-color:white;
}
#render ul {
padding-left:1em;
}
#render ul li {
list-style-type:none;
}
#render h5 {
display:inline;
}
.otherLibraries {
display:inline;
}
a, a:visited {
text-decoration:none;
color:#01a3c6;
font-family:helvetica;
padding:0.3em;
border-radius:0.2em;
}
a:hover {
color:#1b911b;
}
.selected {
color:rgb(189,11,11) !important;
}
.window, .label {
background-color:white;
text-align:center;
z-index:23;
cursor:pointer;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
}
path, ._jsPlumb_endpoint { cursor:pointer; }
/* z index stuff */
._jsPlumb_connector { z-index:18; }
._jsPlumb_endpoint { z-index:19; }
._jsPlumb_overlay { z-index:23; }
._jsPlumb_connector._jsPlumb_hover {
z-index:21 !important;
}
._jsPlumb_endpoint._jsPlumb_hover {
z-index:22 !important;
}
ui/css/flowchartDemo.css 0 → 100644
View file @ e34796c6
.window { border:1px solid #346789;
box-shadow: 2px 2px 19px #aaa;
-o-box-shadow: 2px 2px 19px #aaa;
-webkit-box-shadow: 2px 2px 19px #aaa;
-moz-box-shadow: 2px 2px 19px #aaa;
-moz-border-radius:0.5em;
border-radius:0.5em;
opacity:0.8;
filter:alpha(opacity=80);
width:5em; height:5em;
line-height:5em;
text-align:center;
z-index:20; position:absolute;
background-color:#eeeeef;
color:black;
font-family:helvetica;padding:0.5em;
font-size:0.9em;}
.window:hover {
box-shadow: 2px 2px 19px #444;
-o-box-shadow: 2px 2px 19px #444;
-webkit-box-shadow: 2px 2px 19px #444;
-moz-box-shadow: 2px 2px 19px #444;
opacity:0.6;
filter:alpha(opacity=60);
}
.active {
border:1px dotted green;
}
.hover {
border:1px dotted red;
}
#window1 { top:34em;left:5em;}
#window2 { top:7em; left:36em;}
#window3 { top:27em;left:48em; }
#window4 { top:23em; left:22em;}
._jsPlumb_connector { z-index:4; }
._jsPlumb_endpoint, .endpointTargetLabel, .endpointSourceLabel{ z-index:21;cursor:pointer; }
.hl { border:3px solid red; }
#debug { position:absolute; background-color:black; color:red; z-index:5000 }
.aLabel {
background-color:white;
padding:0.4em;
font:12px sans-serif;
color:#444;
z-index:21;
border:1px dotted gray;
opacity:0.8;
filter:alpha(opacity=80);
}
\ No newline at end of file
ui/index.html 0 → 100644
View file @ e34796c6
<!doctype html>
<html>
<head>
<title>jsPlumb 1.4.0 - flowchart connectors demonstration - jQuery</title>
<link rel="stylesheet" href="css/demo-new.css">
<link rel="stylesheet" href="css/flowchartDemo.css">
</head>
<body data-demo-id="flowchartConnectorsDemo" data-library="jquery">
<div id="headerWrapper"><div id="header"></div></div>
<div id="main">
<div id="render"></div>
<div class="window" id="window1"><strong>1</strong><br/><br/></div>
<div class="window" id="window2"><strong>2</strong><br/><br/></div>
<div class="window" id="window3"><strong>3</strong><br/><br/></div>
<div class="window" id="window4"><strong>4</strong><br/><br/></div>
</div>
<div id="sidebar">
<div id="explanation">
<p>This is a demonstration of Flowchart connectors</p>
<p>Hover over connections to highlight them, click to delete. </p>
<p>Drag new connections from blue dots to green dots. You can also drag connections from green dots onto other green dots or back onto themselves.</p>
<p>This demonstration uses jsPlumb 1.4.0, jQuery 1.8.1 and jQuery UI 1.8.23.</p>
</div>
</div>
<!-- DEP -->
<script type="text/javascript" src="lib/jquery-1.8.1-min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.23-min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.touch-punch.min.js"></script>
<!-- /DEP -->
<!-- JS -->
<!-- support lib for bezier stuff -->
<script src="lib/jsBezier-0.5.js"></script>
<!-- jsplumb util -->
<script src="lib/jsPlumb/jsPlumb-util.js"></script>
<!-- base DOM adapter -->
<script src="lib/jsPlumb/jsPlumb-dom-adapter.js"></script>
<!-- main jsplumb engine -->
<script src="lib/jsPlumb/jsPlumb.js"></script>
<!-- anchors -->
<script src="lib/jsPlumb/jsPlumb-anchors.js"></script>
<!-- endpoint -->
<script src="lib/jsPlumb/jsPlumb-endpoint.js"></script>
<!-- connection -->
<script src="lib/jsPlumb/jsPlumb-connection.js"></script>
<!-- connector editors -->
<script src="lib/jsPlumb/jsPlumb-connector-editors.js"></script>
<!-- connectors, endpoint and overlays -->
<script src="lib/jsPlumb/jsPlumb-defaults.js"></script>
<!-- state machine connectors -->
<script src="lib/jsPlumb/jsPlumb-connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="lib/jsPlumb/jsPlumb-connectors-flowchart.js"></script>
<!-- SVG renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-svg.js"></script>
<!-- canvas renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-canvas.js"></script>
<!-- vml renderer -->
<script src="lib/jsPlumb/jsPlumb-renderers-vml.js"></script>
<!-- jquery jsPlumb adapter -->
<script src="lib/jsPlumb/jquery.jsPlumb.js"></script>
<!-- /JS -->
<!-- demo code -->
<script src="src/flowchartConnectorsDemo.js"></script>
<!-- demo helper code -->
<script src="src/demo-list.js"></script>
<script src="src/demo-helper-jquery.js"></script>
</body>
</html>
ui/lib/jquery-1.8.1-min.js 0 → 100644
View file @ e34796c6
/*! jQuery v@1.8.1 jquery.com | jquery.org/license */
(function(a,b){function G(a){var b=F[a]={};return p.each(a.split(s),function(a,c){b[c]=!0}),b}function J(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(I,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:+d+""===d?+d:H.test(d)?p.parseJSON(d):d}catch(f){}p.data(a,c,d)}else d=b}return d}function K(a){var b;for(b in a){if(b==="data"&&p.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function ba(){return!1}function bb(){return!0}function bh(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function bi(a,b){do a=a[b];while(a&&a.nodeType!==1);return a}function bj(a,b,c){b=b||0;if(p.isFunction(b))return p.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return p.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=p.grep(a,function(a){return a.nodeType===1});if(be.test(b))return p.filter(b,d,!c);b=p.filter(b,d)}return p.grep(a,function(a,d){return p.inArray(a,b)>=0===c})}function bk(a){var b=bl.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function bC(a,b){return a.getElementsByTagName(b)[0]||a.appendChild(a.ownerDocument.createElement(b))}function bD(a,b){if(b.nodeType!==1||!p.hasData(a))return;var c,d,e,f=p._data(a),g=p._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;d<e;d++)p.event.add(b,c,h[c][d])}g.data&&(g.data=p.extend({},g.data))}function bE(a,b){var c;if(b.nodeType!==1)return;b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase(),c==="object"?(b.parentNode&&(b.outerHTML=a.outerHTML),p.support.html5Clone&&a.innerHTML&&!p.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):c==="input"&&bv.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):c==="option"?b.selected=a.defaultSelected:c==="input"||c==="textarea"?b.defaultValue=a.defaultValue:c==="script"&&b.text!==a.text&&(b.text=a.text),b.removeAttribute(p.expando)}function bF(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bG(a){bv.test(a.type)&&(a.defaultChecked=a.checked)}function bY(a,b){if(b in a)return b;var c=b.charAt(0).toUpperCase()+b.slice(1),d=b,e=bW.length;while(e--){b=bW[e]+c;if(b in a)return b}return d}function bZ(a,b){return a=b||a,p.css(a,"display")==="none"||!p.contains(a.ownerDocument,a)}function b$(a,b){var c,d,e=[],f=0,g=a.length;for(;f<g;f++){c=a[f];if(!c.style)continue;e[f]=p._data(c,"olddisplay"),b?(!e[f]&&c.style.display==="none"&&(c.style.display=""),c.style.display===""&&bZ(c)&&(e[f]=p._data(c,"olddisplay",cc(c.nodeName)))):(d=bH(c,"display"),!e[f]&&d!=="none"&&p._data(c,"olddisplay",d))}for(f=0;f<g;f++){c=a[f];if(!c.style)continue;if(!b||c.style.display==="none"||c.style.display==="")c.style.display=b?e[f]||"":"none"}return a}function b_(a,b,c){var d=bP.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function ca(a,b,c,d){var e=c===(d?"border":"content")?4:b==="width"?1:0,f=0;for(;e<4;e+=2)c==="margin"&&(f+=p.css(a,c+bV[e],!0)),d?(c==="content"&&(f-=parseFloat(bH(a,"padding"+bV[e]))||0),c!=="margin"&&(f-=parseFloat(bH(a,"border"+bV[e]+"Width"))||0)):(f+=parseFloat(bH(a,"padding"+bV[e]))||0,c!=="padding"&&(f+=parseFloat(bH(a,"border"+bV[e]+"Width"))||0));return f}function cb(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=!0,f=p.support.boxSizing&&p.css(a,"boxSizing")==="border-box";if(d<=0||d==null){d=bH(a,b);if(d<0||d==null)d=a.style[b];if(bQ.test(d))return d;e=f&&(p.support.boxSizingReliable||d===a.style[b]),d=parseFloat(d)||0}return d+ca(a,b,c||(f?"border":"content"),e)+"px"}function cc(a){if(bS[a])return bS[a];var b=p("<"+a+">").appendTo(e.body),c=b.css("display");b.remove();if(c==="none"||c===""){bI=e.body.appendChild(bI||p.extend(e.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!bJ||!bI.createElement)bJ=(bI.contentWindow||bI.contentDocument).document,bJ.write("<!doctype html><html><body>"),bJ.close();b=bJ.body.appendChild(bJ.createElement(a)),c=bH(b,"display"),e.body.removeChild(bI)}return bS[a]=c,c}function ci(a,b,c,d){var e;if(p.isArray(b))p.each(b,function(b,e){c||ce.test(a)?d(a,e):ci(a+"["+(typeof e=="object"?b:"")+"]",e,c,d)});else if(!c&&p.type(b)==="object")for(e in b)ci(a+"["+e+"]",b[e],c,d);else d(a,b)}function cz(a){return function(b,c){typeof b!="string"&&(c=b,b="*");var d,e,f,g=b.toLowerCase().split(s),h=0,i=g.length;if(p.isFunction(c))for(;h<i;h++)d=g[h],f=/^\+/.test(d),f&&(d=d.substr(1)||"*"),e=a[d]=a[d]||[],e[f?"unshift":"push"](c)}}function cA(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h,i=a[f],j=0,k=i?i.length:0,l=a===cv;for(;j<k&&(l||!h);j++)h=i[j](c,d,e),typeof h=="string"&&(!l||g[h]?h=b:(c.dataTypes.unshift(h),h=cA(a,c,d,e,h,g)));return(l||!h)&&!g["*"]&&(h=cA(a,c,d,e,"*",g)),h}function cB(a,c){var d,e,f=p.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((f[d]?a:e||(e={}))[d]=c[d]);e&&p.extend(!0,a,e)}function cC(a,c,d){var e,f,g,h,i=a.contents,j=a.dataTypes,k=a.responseFields;for(f in k)f in d&&(c[k[f]]=d[f]);while(j[0]==="*")j.shift(),e===b&&(e=a.mimeType||c.getResponseHeader("content-type"));if(e)for(f in i)if(i[f]&&i[f].test(e)){j.unshift(f);break}if(j[0]in d)g=j[0];else{for(f in d){if(!j[0]||a.converters[f+" "+j[0]]){g=f;break}h||(h=f)}g=g||h}if(g)return g!==j[0]&&j.unshift(g),d[g]}function cD(a,b){var c,d,e,f,g=a.dataTypes.slice(),h=g[0],i={},j=0;a.dataFilter&&(b=a.dataFilter(b,a.dataType));if(g[1])for(c in a.converters)i[c.toLowerCase()]=a.converters[c];for(;e=g[++j];)if(e!=="*"){if(h!=="*"&&h!==e){c=i[h+" "+e]||i["* "+e];if(!c)for(d in i){f=d.split(" ");if(f[1]===e){c=i[h+" "+f[0]]||i["* "+f[0]];if(c){c===!0?c=i[d]:i[d]!==!0&&(e=f[0],g.splice(j--,0,e));break}}}if(c!==!0)if(c&&a["throws"])b=c(b);else try{b=c(b)}catch(k){return{state:"parsererror",error:c?k:"No conversion from "+h+" to "+e}}}h=e}return{state:"success",data:b}}function cL(){try{return new a.XMLHttpRequest}catch(b){}}function cM(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function cU(){return setTimeout(function(){cN=b},0),cN=p.now()}function cV(a,b){p.each(b,function(b,c){var d=(cT[b]||[]).concat(cT["*"]),e=0,f=d.length;for(;e<f;e++)if(d[e].call(a,b,c))return})}function cW(a,b,c){var d,e=0,f=0,g=cS.length,h=p.Deferred().always(function(){delete i.elem}),i=function(){var b=cN||cU(),c=Math.max(0,j.startTime+j.duration-b),d=1-(c/j.duration||0),e=0,f=j.tweens.length;for(;e<f;e++)j.tweens[e].run(d);return h.notifyWith(a,[j,d,c]),d<1&&f?c:(h.resolveWith(a,[j]),!1)},j=h.promise({elem:a,props:p.extend({},b),opts:p.extend(!0,{specialEasing:{}},c),originalProperties:b,originalOptions:c,startTime:cN||cU(),duration:c.duration,tweens:[],createTween:function(b,c,d){var e=p.Tween(a,j.opts,b,c,j.opts.specialEasing[b]||j.opts.easing);return j.tweens.push(e),e},stop:function(b){var c=0,d=b?j.tweens.length:0;for(;c<d;c++)j.tweens[c].run(1);return b?h.resolveWith(a,[j,b]):h.rejectWith(a,[j,b]),this}}),k=j.props;cX(k,j.opts.specialEasing);for(;e<g;e++){d=cS[e].call(j,a,k,j.opts);if(d)return d}return cV(j,k),p.isFunction(j.opts.start)&&j.opts.start.call(a,j),p.fx.timer(p.extend(i,{anim:j,queue:j.opts.queue,elem:a})),j.progress(j.opts.progress).done(j.opts.done,j.opts.complete).fail(j.opts.fail).always(j.opts.always)}function cX(a,b){var c,d,e,f,g;for(c in a){d=p.camelCase(c),e=b[d],f=a[c],p.isArray(f)&&(e=f[1],f=a[c]=f[0]),c!==d&&(a[d]=f,delete a[c]),g=p.cssHooks[d];if(g&&"expand"in g){f=g.expand(f),delete a[d];for(c in f)c in a||(a[c]=f[c],b[c]=e)}else b[d]=e}}function cY(a,b,c){var d,e,f,g,h,i,j,k,l=this,m=a.style,n={},o=[],q=a.nodeType&&bZ(a);c.queue||(j=p._queueHooks(a,"fx"),j.unqueued==null&&(j.unqueued=0,k=j.empty.fire,j.empty.fire=function(){j.unqueued||k()}),j.unqueued++,l.always(function(){l.always(function(){j.unqueued--,p.queue(a,"fx").length||j.empty.fire()})})),a.nodeType===1&&("height"in b||"width"in b)&&(c.overflow=[m.overflow,m.overflowX,m.overflowY],p.css(a,"display")==="inline"&&p.css(a,"float")==="none"&&(!p.support.inlineBlockNeedsLayout||cc(a.nodeName)==="inline"?m.display="inline-block":m.zoom=1)),c.overflow&&(m.overflow="hidden",p.support.shrinkWrapBlocks||l.done(function(){m.overflow=c.overflow[0],m.overflowX=c.overflow[1],m.overflowY=c.overflow[2]}));for(d in b){f=b[d];if(cP.exec(f)){delete b[d];if(f===(q?"hide":"show"))continue;o.push(d)}}g=o.length;if(g){h=p._data(a,"fxshow")||p._data(a,"fxshow",{}),q?p(a).show():l.done(function(){p(a).hide()}),l.done(function(){var b;p.removeData(a,"fxshow",!0);for(b in n)p.style(a,b,n[b])});for(d=0;d<g;d++)e=o[d],i=l.createTween(e,q?h[e]:0),n[e]=h[e]||p.style(a,e),e in h||(h[e]=i.start,q&&(i.end=i.start,i.start=e==="width"||e==="height"?1:0))}}function cZ(a,b,c,d,e){return new cZ.prototype.init(a,b,c,d,e)}function c$(a,b){var c,d={height:a},e=0;b=b?1:0;for(;e<4;e+=2-b)c=bV[e],d["margin"+c]=d["padding"+c]=a;return b&&(d.opacity=d.width=a),d}function da(a){return p.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}var c,d,e=a.document,f=a.location,g=a.navigator,h=a.jQuery,i=a.$,j=Array.prototype.push,k=Array.prototype.slice,l=Array.prototype.indexOf,m=Object.prototype.toString,n=Object.prototype.hasOwnProperty,o=String.prototype.trim,p=function(a,b){return new p.fn.init(a,b,c)},q=/[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source,r=/\S/,s=/\s+/,t=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,u=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,v=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,w=/^[\],:{}\s]*$/,x=/(?:^|:|,)(?:\s*\[)+/g,y=/\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,z=/"[^"\\\r\n]*"|true|false|null|-?(?:\d\d*\.|)\d+(?:[eE][\-+]?\d+|)/g,A=/^-ms-/,B=/-([\da-z])/gi,C=function(a,b){return(b+"").toUpperCase()},D=function(){e.addEventListener?(e.removeEventListener("DOMContentLoaded",D,!1),p.ready()):e.readyState==="complete"&&(e.detachEvent("onreadystatechange",D),p.ready())},E={};p.fn=p.prototype={constructor:p,init:function(a,c,d){var f,g,h,i;if(!a)return this;if(a.nodeType)return this.context=this[0]=a,this.length=1,this;if(typeof a=="string"){a.charAt(0)==="<"&&a.charAt(a.length-1)===">"&&a.length>=3?f=[null,a,null]:f=u.exec(a);if(f&&(f[1]||!c)){if(f[1])return c=c instanceof p?c[0]:c,i=c&&c.nodeType?c.ownerDocument||c:e,a=p.parseHTML(f[1],i,!0),v.test(f[1])&&p.isPlainObject(c)&&this.attr.call(a,c,!0),p.merge(this,a);g=e.getElementById(f[2]);if(g&&g.parentNode){if(g.id!==f[2])return d.find(a);this.length=1,this[0]=g}return this.context=e,this.selector=a,this}return!c||c.jquery?(c||d).find(a):this.constructor(c).find(a)}return p.isFunction(a)?d.ready(a):(a.selector!==b&&(this.selector=a.selector,this.context=a.context),p.makeArray(a,this))},selector:"",jquery:"1.8.1",length:0,size:function(){return this.length},toArray:function(){return k.call(this)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=p.merge(this.constructor(),a);return d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")"),d},each:function(a,b){return p.each(this,a,b)},ready:function(a){return p.ready.promise().done(a),this},eq:function(a){return a=+a,a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(k.apply(this,arguments),"slice",k.call(arguments).join(","))},map:function(a){return this.pushStack(p.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:j,sort:[].sort,splice:[].splice},p.fn.init.prototype=p.fn,p.extend=p.fn.extend=function(){var a,c,d,e,f,g,h=arguments[0]||{},i=1,j=arguments.length,k=!1;typeof h=="boolean"&&(k=h,h=arguments[1]||{},i=2),typeof h!="object"&&!p.isFunction(h)&&(h={}),j===i&&(h=this,--i);for(;i<j;i++)if((a=arguments[i])!=null)for(c in a){d=h[c],e=a[c];if(h===e)continue;k&&e&&(p.isPlainObject(e)||(f=p.isArray(e)))?(f?(f=!1,g=d&&p.isArray(d)?d:[]):g=d&&p.isPlainObject(d)?d:{},h[c]=p.extend(k,g,e)):e!==b&&(h[c]=e)}return h},p.extend({noConflict:function(b){return a.$===p&&(a.$=i),b&&a.jQuery===p&&(a.jQuery=h),p},isReady:!1,readyWait:1,holdReady:function(a){a?p.readyWait++:p.ready(!0)},ready:function(a){if(a===!0?--p.readyWait:p.isReady)return;if(!e.body)return setTimeout(p.ready,1);p.isReady=!0;if(a!==!0&&--p.readyWait>0)return;d.resolveWith(e,[p]),p.fn.trigger&&p(e).trigger("ready").off("ready")},isFunction:function(a){return p.type(a)==="function"},isArray:Array.isArray||function(a){return p.type(a)==="array"},isWindow:function(a){return a!=null&&a==a.window},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):E[m.call(a)]||"object"},isPlainObject:function(a){if(!a||p.type(a)!=="object"||a.nodeType||p.isWindow(a))return!1;try{if(a.constructor&&!n.call(a,"constructor")&&!n.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||n.call(a,d)},isEmptyObject:function(a){var b;for(b in a)return!1;return!0},error:function(a){throw new Error(a)},parseHTML:function(a,b,c){var d;return!a||typeof a!="string"?null:(typeof b=="boolean"&&(c=b,b=0),b=b||e,(d=v.exec(a))?[b.createElement(d[1])]:(d=p.buildFragment([a],b,c?null:[]),p.merge([],(d.cacheable?p.clone(d.fragment):d.fragment).childNodes)))},parseJSON:function(b){if(!b||typeof b!="string")return null;b=p.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(w.test(b.replace(y,"@").replace(z,"]").replace(x,"")))return(new Function("return "+b))();p.error("Invalid JSON: "+b)},parseXML:function(c){var d,e;if(!c||typeof c!="string")return null;try{a.DOMParser?(e=new DOMParser,d=e.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(f){d=b}return(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&p.error("Invalid XML: "+c),d},noop:function(){},globalEval:function(b){b&&r.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(A,"ms-").replace(B,C)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var e,f=0,g=a.length,h=g===b||p.isFunction(a);if(d){if(h){for(e in a)if(c.apply(a[e],d)===!1)break}else for(;f<g;)if(c.apply(a[f++],d)===!1)break}else if(h){for(e in a)if(c.call(a[e],e,a[e])===!1)break}else for(;f<g;)if(c.call(a[f],f,a[f++])===!1)break;return a},trim:o&&!o.call(" ")?function(a){return a==null?"":o.call(a)}:function(a){return a==null?"":a.toString().replace(t,"")},makeArray:function(a,b){var c,d=b||[];return a!=null&&(c=p.type(a),a.length==null||c==="string"||c==="function"||c==="regexp"||p.isWindow(a)?j.call(d,a):p.merge(d,a)),d},inArray:function(a,b,c){var d;if(b){if(l)return l.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=c.length,e=a.length,f=0;if(typeof d=="number")for(;f<d;f++)a[e++]=c[f];else while(c[f]!==b)a[e++]=c[f++];return a.length=e,a},grep:function(a,b,c){var d,e=[],f=0,g=a.length;c=!!c;for(;f<g;f++)d=!!b(a[f],f),c!==d&&e.push(a[f]);return e},map:function(a,c,d){var e,f,g=[],h=0,i=a.length,j=a instanceof p||i!==b&&typeof i=="number"&&(i>0&&a[0]&&a[i-1]||i===0||p.isArray(a));if(j)for(;h<i;h++)e=c(a[h],h,d),e!=null&&(g[g.length]=e);else for(f in a)e=c(a[f],f,d),e!=null&&(g[g.length]=e);return g.concat.apply([],g)},guid:1,proxy:function(a,c){var d,e,f;return typeof c=="string"&&(d=a[c],c=a,a=d),p.isFunction(a)?(e=k.call(arguments,2),f=function(){return a.apply(c,e.concat(k.call(arguments)))},f.guid=a.guid=a.guid||f.guid||p.guid++,f):b},access:function(a,c,d,e,f,g,h){var i,j=d==null,k=0,l=a.length;if(d&&typeof d=="object"){for(k in d)p.access(a,c,k,d[k],1,g,e);f=1}else if(e!==b){i=h===b&&p.isFunction(e),j&&(i?(i=c,c=function(a,b,c){return i.call(p(a),c)}):(c.call(a,e),c=null));if(c)for(;k<l;k++)c(a[k],d,i?e.call(a[k],k,c(a[k],d)):e,h);f=1}return f?a:j?c.call(a):l?c(a[0],d):g},now:function(){return(new Date).getTime()}}),p.ready.promise=function(b){if(!d){d=p.Deferred();if(e.readyState==="complete")setTimeout(p.ready,1);else if(e.addEventListener)e.addEventListener("DOMContentLoaded",D,!1),a.addEventListener("load",p.ready,!1);else{e.attachEvent("onreadystatechange",D),a.attachEvent("onload",p.ready);var c=!1;try{c=a.frameElement==null&&e.documentElement}catch(f){}c&&c.doScroll&&function g(){if(!p.isReady){try{c.doScroll("left")}catch(a){return setTimeout(g,50)}p.ready()}}()}}return d.promise(b)},p.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){E["[object "+b+"]"]=b.toLowerCase()}),c=p(e);var F={};p.Callbacks=function(a){a=typeof a=="string"?F[a]||G(a):p.extend({},a);var c,d,e,f,g,h,i=[],j=!a.once&&[],k=function(b){c=a.memory&&b,d=!0,h=f||0,f=0,g=i.length,e=!0;for(;i&&h<g;h++)if(i[h].apply(b[0],b[1])===!1&&a.stopOnFalse){c=!1;break}e=!1,i&&(j?j.length&&k(j.shift()):c?i=[]:l.disable())},l={add:function(){if(i){var b=i.length;(function d(b){p.each(b,function(b,c){var e=p.type(c);e==="function"&&(!a.unique||!l.has(c))?i.push(c):c&&c.length&&e!=="string"&&d(c)})})(arguments),e?g=i.length:c&&(f=b,k(c))}return this},remove:function(){return i&&p.each(arguments,function(a,b){var c;while((c=p.inArray(b,i,c))>-1)i.splice(c,1),e&&(c<=g&&g--,c<=h&&h--)}),this},has:function(a){return p.inArray(a,i)>-1},empty:function(){return i=[],this},disable:function(){return i=j=c=b,this},disabled:function(){return!i},lock:function(){return j=b,c||l.disable(),this},locked:function(){return!j},fireWith:function(a,b){return b=b||[],b=[a,b.slice?b.slice():b],i&&(!d||j)&&(e?j.push(b):k(b)),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!d}};return l},p.extend({Deferred:function(a){var b=[["resolve","done",p.Callbacks("once memory"),"resolved"],["reject","fail",p.Callbacks("once memory"),"rejected"],["notify","progress",p.Callbacks("memory")]],c="pending",d={state:function(){return c},always:function(){return e.done(arguments).fail(arguments),this},then:function(){var a=arguments;return p.Deferred(function(c){p.each(b,function(b,d){var f=d[0],g=a[b];e[d[1]](p.isFunction(g)?function(){var a=g.apply(this,arguments);a&&p.isFunction(a.promise)?a.promise().done(c.resolve).fail(c.reject).progress(c.notify):c[f+"With"](this===e?c:this,[a])}:c[f])}),a=null}).promise()},promise:function(a){return typeof a=="object"?p.extend(a,d):d}},e={};return d.pipe=d.then,p.each(b,function(a,f){var g=f[2],h=f[3];d[f[1]]=g.add,h&&g.add(function(){c=h},b[a^1][2].disable,b[2][2].lock),e[f[0]]=g.fire,e[f[0]+"With"]=g.fireWith}),d.promise(e),a&&a.call(e,e),e},when:function(a){var b=0,c=k.call(arguments),d=c.length,e=d!==1||a&&p.isFunction(a.promise)?d:0,f=e===1?a:p.Deferred(),g=function(a,b,c){return function(d){b[a]=this,c[a]=arguments.length>1?k.call(arguments):d,c===h?f.notifyWith(b,c):--e||f.resolveWith(b,c)}},h,i,j;if(d>1){h=new Array(d),i=new Array(d),j=new Array(d);for(;b<d;b++)c[b]&&p.isFunction(c[b].promise)?c[b].promise().done(g(b,j,c)).fail(f.reject).progress(g(b,i,h)):--e}return e||f.resolveWith(j,c),f.promise()}}),p.support=function(){var b,c,d,f,g,h,i,j,k,l,m,n=e.createElement("div");n.setAttribute("className","t"),n.innerHTML=" <link/><table></table><a href='/a'>a</a><input type='checkbox'/>",c=n.getElementsByTagName("*"),d=n.getElementsByTagName("a")[0],d.style.cssText="top:1px;float:left;opacity:.5";if(!c||!c.length||!d)return{};f=e.createElement("select"),g=f.appendChild(e.createElement("option")),h=n.getElementsByTagName("input")[0],b={leadingWhitespace:n.firstChild.nodeType===3,tbody:!n.getElementsByTagName("tbody").length,htmlSerialize:!!n.getElementsByTagName("link").length,style:/top/.test(d.getAttribute("style")),hrefNormalized:d.getAttribute("href")==="/a",opacity:/^0.5/.test(d.style.opacity),cssFloat:!!d.style.cssFloat,checkOn:h.value==="on",optSelected:g.selected,getSetAttribute:n.className!=="t",enctype:!!e.createElement("form").enctype,html5Clone:e.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",boxModel:e.compatMode==="CSS1Compat",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,boxSizingReliable:!0,pixelPosition:!1},h.checked=!0,b.noCloneChecked=h.cloneNode(!0).checked,f.disabled=!0,b.optDisabled=!g.disabled;try{delete n.test}catch(o){b.deleteExpando=!1}!n.addEventListener&&n.attachEvent&&n.fireEvent&&(n.attachEvent("onclick",m=function(){b.noCloneEvent=!1}),n.cloneNode(!0).fireEvent("onclick"),n.detachEvent("onclick",m)),h=e.createElement("input"),h.value="t",h.setAttribute("type","radio"),b.radioValue=h.value==="t",h.setAttribute("checked","checked"),h.setAttribute("name","t"),n.appendChild(h),i=e.createDocumentFragment(),i.appendChild(n.lastChild),b.checkClone=i.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=h.checked,i.removeChild(h),i.appendChild(n);if(n.attachEvent)for(k in{submit:!0,change:!0,focusin:!0})j="on"+k,l=j in n,l||(n.setAttribute(j,"return;"),l=typeof n[j]=="function"),b[k+"Bubbles"]=l;return p(function(){var c,d,f,g,h="padding:0;margin:0;border:0;display:block;overflow:hidden;",i=e.getElementsByTagName("body")[0];if(!i)return;c=e.createElement("div"),c.style.cssText="visibility:hidden;border:0;width:0;height:0;position:static;top:0;margin-top:1px",i.insertBefore(c,i.firstChild),d=e.createElement("div"),c.appendChild(d),d.innerHTML="<table><tr><td></td><td>t</td></tr></table>",f=d.getElementsByTagName("td"),f[0].style.cssText="padding:0;margin:0;border:0;display:none",l=f[0].offsetHeight===0,f[0].style.display="",f[1].style.display="none",b.reliableHiddenOffsets=l&&f[0].offsetHeight===0,d.innerHTML="",d.style.cssText="box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;",b.boxSizing=d.offsetWidth===4,b.doesNotIncludeMarginInBodyOffset=i.offsetTop!==1,a.getComputedStyle&&(b.pixelPosition=(a.getComputedStyle(d,null)||{}).top!=="1%",b.boxSizingReliable=(a.getComputedStyle(d,null)||{width:"4px"}).width==="4px",g=e.createElement("div"),g.style.cssText=d.style.cssText=h,g.style.marginRight=g.style.width="0",d.style.width="1px",d.appendChild(g),b.reliableMarginRight=!parseFloat((a.getComputedStyle(g,null)||{}).marginRight)),typeof d.style.zoom!="undefined"&&(d.innerHTML="",d.style.cssText=h+"width:1px;padding:1px;display:inline;zoom:1",b.inlineBlockNeedsLayout=d.offsetWidth===3,d.style.display="block",d.style.overflow="visible",d.innerHTML="<div></div>",d.firstChild.style.width="5px",b.shrinkWrapBlocks=d.offsetWidth!==3,c.style.zoom=1),i.removeChild(c),c=d=f=g=null}),i.removeChild(n),c=d=f=g=h=i=n=null,b}();var H=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,I=/([A-Z])/g;p.extend({cache:{},deletedIds:[],uuid:0,expando:"jQuery"+(p.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){return a=a.nodeType?p.cache[a[p.expando]]:a[p.expando],!!a&&!K(a)},data:function(a,c,d,e){if(!p.acceptData(a))return;var f,g,h=p.expando,i=typeof c=="string",j=a.nodeType,k=j?p.cache:a,l=j?a[h]:a[h]&&h;if((!l||!k[l]||!e&&!k[l].data)&&i&&d===b)return;l||(j?a[h]=l=p.deletedIds.pop()||++p.uuid:l=h),k[l]||(k[l]={},j||(k[l].toJSON=p.noop));if(typeof c=="object"||typeof c=="function")e?k[l]=p.extend(k[l],c):k[l].data=p.extend(k[l].data,c);return f=k[l],e||(f.data||(f.data={}),f=f.data),d!==b&&(f[p.camelCase(c)]=d),i?(g=f[c],g==null&&(g=f[p.camelCase(c)])):g=f,g},removeData:function(a,b,c){if(!p.acceptData(a))return;var d,e,f,g=a.nodeType,h=g?p.cache:a,i=g?a[p.expando]:p.expando;if(!h[i])return;if(b){d=c?h[i]:h[i].data;if(d){p.isArray(b)||(b in d?b=[b]:(b=p.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,f=b.length;e<f;e++)delete d[b[e]];if(!(c?K:p.isEmptyObject)(d))return}}if(!c){delete h[i].data;if(!K(h[i]))return}g?p.cleanData([a],!0):p.support.deleteExpando||h!=h.window?delete h[i]:h[i]=null},_data:function(a,b,c){return p.data(a,b,c,!0)},acceptData:function(a){var b=a.nodeName&&p.noData[a.nodeName.toLowerCase()];return!b||b!==!0&&a.getAttribute("classid")===b}}),p.fn.extend({data:function(a,c){var d,e,f,g,h,i=this[0],j=0,k=null;if(a===b){if(this.length){k=p.data(i);if(i.nodeType===1&&!p._data(i,"parsedAttrs")){f=i.attributes;for(h=f.length;j<h;j++)g=f[j].name,g.indexOf("data-")===0&&(g=p.camelCase(g.substring(5)),J(i,g,k[g]));p._data(i,"parsedAttrs",!0)}}return k}return typeof a=="object"?this.each(function(){p.data(this,a)}):(d=a.split(".",2),d[1]=d[1]?"."+d[1]:"",e=d[1]+"!",p.access(this,function(c){if(c===b)return k=this.triggerHandler("getData"+e,[d[0]]),k===b&&i&&(k=p.data(i,a),k=J(i,a,k)),k===b&&d[1]?this.data(d[0]):k;d[1]=c,this.each(function(){var b=p(this);b.triggerHandler("setData"+e,d),p.data(this,a,c),b.triggerHandler("changeData"+e,d)})},null,c,arguments.length>1,null,!1))},removeData:function(a){return this.each(function(){p.removeData(this,a)})}}),p.extend({queue:function(a,b,c){var d;if(a)return b=(b||"fx")+"queue",d=p._data(a,b),c&&(!d||p.isArray(c)?d=p._data(a,b,p.makeArray(c)):d.push(c)),d||[]},dequeue:function(a,b){b=b||"fx";var c=p.queue(a,b),d=c.length,e=c.shift(),f=p._queueHooks(a,b),g=function(){p.dequeue(a,b)};e==="inprogress"&&(e=c.shift(),d--),e&&(b==="fx"&&c.unshift("inprogress"),delete f.stop,e.call(a,g,f)),!d&&f&&f.empty.fire()},_queueHooks:function(a,b){var c=b+"queueHooks";return p._data(a,c)||p._data(a,c,{empty:p.Callbacks("once memory").add(function(){p.removeData(a,b+"queue",!0),p.removeData(a,c,!0)})})}}),p.fn.extend({queue:function(a,c){var d=2;return typeof a!="string"&&(c=a,a="fx",d--),arguments.length<d?p.queue(this[0],a):c===b?this:this.each(function(){var b=p.queue(this,a,c);p._queueHooks(this,a),a==="fx"&&b[0]!=="inprogress"&&p.dequeue(this,a)})},dequeue:function(a){return this.each(function(){p.dequeue(this,a)})},delay:function(a,b){return a=p.fx?p.fx.speeds[a]||a:a,b=b||"fx",this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){var d,e=1,f=p.Deferred(),g=this,h=this.length,i=function(){--e||f.resolveWith(g,[g])};typeof a!="string"&&(c=a,a=b),a=a||"fx";while(h--)d=p._data(g[h],a+"queueHooks"),d&&d.empty&&(e++,d.empty.add(i));return i(),f.promise(c)}});var L,M,N,O=/[\t\r\n]/g,P=/\r/g,Q=/^(?:button|input)$/i,R=/^(?:button|input|object|select|textarea)$/i,S=/^a(?:rea|)$/i,T=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,U=p.support.getSetAttribute;p.fn.extend({attr:function(a,b){return p.access(this,p.attr,a,b,arguments.length>1)},removeAttr:function(a){return this.each(function(){p.removeAttr(this,a)})},prop:function(a,b){return p.access(this,p.prop,a,b,arguments.length>1)},removeProp:function(a){return a=p.propFix[a]||a,this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,f,g,h;if(p.isFunction(a))return this.each(function(b){p(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(s);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{f=" "+e.className+" ";for(g=0,h=b.length;g<h;g++)~f.indexOf(" "+b[g]+" ")||(f+=b[g]+" ");e.className=p.trim(f)}}}return this},removeClass:function(a){var c,d,e,f,g,h,i;if(p.isFunction(a))return this.each(function(b){p(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(s);for(h=0,i=this.length;h<i;h++){e=this[h];if(e.nodeType===1&&e.className){d=(" "+e.className+" ").replace(O," ");for(f=0,g=c.length;f<g;f++)while(d.indexOf(" "+c[f]+" ")>-1)d=d.replace(" "+c[f]+" "," ");e.className=a?p.trim(d):""}}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";return p.isFunction(a)?this.each(function(c){p(this).toggleClass(a.call(this,c,this.className,b),b)}):this.each(function(){if(c==="string"){var e,f=0,g=p(this),h=b,i=a.split(s);while(e=i[f++])h=d?h:!g.hasClass(e),g[h?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&p._data(this,"__className__",this.className),this.className=this.className||a===!1?"":p._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(O," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,f=this[0];if(!arguments.length){if(f)return c=p.valHooks[f.type]||p.valHooks[f.nodeName.toLowerCase()],c&&"get"in c&&(d=c.get(f,"value"))!==b?d:(d=f.value,typeof d=="string"?d.replace(P,""):d==null?"":d);return}return e=p.isFunction(a),this.each(function(d){var f,g=p(this);if(this.nodeType!==1)return;e?f=a.call(this,d,g.val()):f=a,f==null?f="":typeof f=="number"?f+="":p.isArray(f)&&(f=p.map(f,function(a){return a==null?"":a+""})),c=p.valHooks[this.type]||p.valHooks[this.nodeName.toLowerCase()];if(!c||!("set"in c)||c.set(this,f,"value")===b)this.value=f})}}),p.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,f=a.selectedIndex,g=[],h=a.options,i=a.type==="select-one";if(f<0)return null;c=i?f:0,d=i?f+1:h.length;for(;c<d;c++){e=h[c];if(e.selected&&(p.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!p.nodeName(e.parentNode,"optgroup"))){b=p(e).val();if(i)return b;g.push(b)}}return i&&!g.length&&h.length?p(h[f]).val():g},set:function(a,b){var c=p.makeArray(b);return p(a).find("option").each(function(){this.selected=p.inArray(p(this).val(),c)>=0}),c.length||(a.selectedIndex=-1),c}}},attrFn:{},attr:function(a,c,d,e){var f,g,h,i=a.nodeType;if(!a||i===3||i===8||i===2)return;if(e&&p.isFunction(p.fn[c]))return p(a)[c](d);if(typeof a.getAttribute=="undefined")return p.prop(a,c,d);h=i!==1||!p.isXMLDoc(a),h&&(c=c.toLowerCase(),g=p.attrHooks[c]||(T.test(c)?M:L));if(d!==b){if(d===null){p.removeAttr(a,c);return}return g&&"set"in g&&h&&(f=g.set(a,d,c))!==b?f:(a.setAttribute(c,""+d),d)}return g&&"get"in g&&h&&(f=g.get(a,c))!==null?f:(f=a.getAttribute(c),f===null?b:f)},removeAttr:function(a,b){var c,d,e,f,g=0;if(b&&a.nodeType===1){d=b.split(s);for(;g<d.length;g++)e=d[g],e&&(c=p.propFix[e]||e,f=T.test(e),f||p.attr(a,e,""),a.removeAttribute(U?e:c),f&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(Q.test(a.nodeName)&&a.parentNode)p.error("type property can't be changed");else if(!p.support.radioValue&&b==="radio"&&p.nodeName(a,"input")){var c=a.value;return a.setAttribute("type",b),c&&(a.value=c),b}}},value:{get:function(a,b){return L&&p.nodeName(a,"button")?L.get(a,b):b in a?a.value:null},set:function(a,b,c){if(L&&p.nodeName(a,"button"))return L.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,f,g,h=a.nodeType;if(!a||h===3||h===8||h===2)return;return g=h!==1||!p.isXMLDoc(a),g&&(c=p.propFix[c]||c,f=p.propHooks[c]),d!==b?f&&"set"in f&&(e=f.set(a,d,c))!==b?e:a[c]=d:f&&"get"in f&&(e=f.get(a,c))!==null?e:a[c]},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):R.test(a.nodeName)||S.test(a.nodeName)&&a.href?0:b}}}}),M={get:function(a,c){var d,e=p.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;return b===!1?p.removeAttr(a,c):(d=p.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase())),c}},U||(N={name:!0,id:!0,coords:!0},L=p.valHooks.button={get:function(a,c){var d;return d=a.getAttributeNode(c),d&&(N[c]?d.value!=="":d.specified)?d.value:b},set:function(a,b,c){var d=a.getAttributeNode(c);return d||(d=e.createAttribute(c),a.setAttributeNode(d)),d.value=b+""}},p.each(["width","height"],function(a,b){p.attrHooks[b]=p.extend(p.attrHooks[b],{set:function(a,c){if(c==="")return a.setAttribute(b,"auto"),c}})}),p.attrHooks.contenteditable={get:L.get,set:function(a,b,c){b===""&&(b="false"),L.set(a,b,c)}}),p.support.hrefNormalized||p.each(["href","src","width","height"],function(a,c){p.attrHooks[c]=p.extend(p.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),p.support.style||(p.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),p.support.optSelected||(p.propHooks.selected=p.extend(p.propHooks.selected,{get:function(a){var b=a.parentNode;return b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex),null}})),p.support.enctype||(p.propFix.enctype="encoding"),p.support.checkOn||p.each(["radio","checkbox"],function(){p.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),p.each(["radio","checkbox"],function(){p.valHooks[this]=p.extend(p.valHooks[this],{set:function(a,b){if(p.isArray(b))return a.checked=p.inArray(p(a).val(),b)>=0}})});var V=/^(?:textarea|input|select)$/i,W=/^([^\.]*|)(?:\.(.+)|)$/,X=/(?:^|\s)hover(\.\S+|)\b/,Y=/^key/,Z=/^(?:mouse|contextmenu)|click/,$=/^(?:focusinfocus|focusoutblur)$/,_=function(a){return p.event.special.hover?a:a.replace(X,"mouseenter$1 mouseleave$1")};p.event={add:function(a,c,d,e,f){var g,h,i,j,k,l,m,n,o,q,r;if(a.nodeType===3||a.nodeType===8||!c||!d||!(g=p._data(a)))return;d.handler&&(o=d,d=o.handler,f=o.selector),d.guid||(d.guid=p.guid++),i=g.events,i||(g.events=i={}),h=g.handle,h||(g.handle=h=function(a){return typeof p!="undefined"&&(!a||p.event.triggered!==a.type)?p.event.dispatch.apply(h.elem,arguments):b},h.elem=a),c=p.trim(_(c)).split(" ");for(j=0;j<c.length;j++){k=W.exec(c[j])||[],l=k[1],m=(k[2]||"").split(".").sort(),r=p.event.special[l]||{},l=(f?r.delegateType:r.bindType)||l,r=p.event.special[l]||{},n=p.extend({type:l,origType:k[1],data:e,handler:d,guid:d.guid,selector:f,namespace:m.join(".")},o),q=i[l];if(!q){q=i[l]=[],q.delegateCount=0;if(!r.setup||r.setup.call(a,e,m,h)===!1)a.addEventListener?a.addEventListener(l,h,!1):a.attachEvent&&a.attachEvent("on"+l,h)}r.add&&(r.add.call(a,n),n.handler.guid||(n.handler.guid=d.guid)),f?q.splice(q.delegateCount++,0,n):q.push(n),p.event.global[l]=!0}a=null},global:{},remove:function(a,b,c,d,e){var f,g,h,i,j,k,l,m,n,o,q,r=p.hasData(a)&&p._data(a);if(!r||!(m=r.events))return;b=p.trim(_(b||"")).split(" ");for(f=0;f<b.length;f++){g=W.exec(b[f])||[],h=i=g[1],j=g[2];if(!h){for(h in m)p.event.remove(a,h+b[f],c,d,!0);continue}n=p.event.special[h]||{},h=(d?n.delegateType:n.bindType)||h,o=m[h]||[],k=o.length,j=j?new RegExp("(^|\\.)"+j.split(".").sort().join("\\.(?:.*\\.|)")+"(\\.|$)"):null;for(l=0;l<o.length;l++)q=o[l],(e||i===q.origType)&&(!c||c.guid===q.guid)&&(!j||j.test(q.namespace))&&(!d||d===q.selector||d==="**"&&q.selector)&&(o.splice(l--,1),q.selector&&o.delegateCount--,n.remove&&n.remove.call(a,q));o.length===0&&k!==o.length&&((!n.teardown||n.teardown.call(a,j,r.handle)===!1)&&p.removeEvent(a,h,r.handle),delete m[h])}p.isEmptyObject(m)&&(delete r.handle,p.removeData(a,"events",!0))},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,f,g){if(!f||f.nodeType!==3&&f.nodeType!==8){var h,i,j,k,l,m,n,o,q,r,s=c.type||c,t=[];if($.test(s+p.event.triggered))return;s.indexOf("!")>=0&&(s=s.slice(0,-1),i=!0),s.indexOf(".")>=0&&(t=s.split("."),s=t.shift(),t.sort());if((!f||p.event.customEvent[s])&&!p.event.global[s])return;c=typeof c=="object"?c[p.expando]?c:new p.Event(s,c):new p.Event(s),c.type=s,c.isTrigger=!0,c.exclusive=i,c.namespace=t.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+t.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,m=s.indexOf(":")<0?"on"+s:"";if(!f){h=p.cache;for(j in h)h[j].events&&h[j].events[s]&&p.event.trigger(c,d,h[j].handle.elem,!0);return}c.result=b,c.target||(c.target=f),d=d!=null?p.makeArray(d):[],d.unshift(c),n=p.event.special[s]||{};if(n.trigger&&n.trigger.apply(f,d)===!1)return;q=[[f,n.bindType||s]];if(!g&&!n.noBubble&&!p.isWindow(f)){r=n.delegateType||s,k=$.test(r+s)?f:f.parentNode;for(l=f;k;k=k.parentNode)q.push([k,r]),l=k;l===(f.ownerDocument||e)&&q.push([l.defaultView||l.parentWindow||a,r])}for(j=0;j<q.length&&!c.isPropagationStopped();j++)k=q[j][0],c.type=q[j][1],o=(p._data(k,"events")||{})[c.type]&&p._data(k,"handle"),o&&o.apply(k,d),o=m&&k[m],o&&p.acceptData(k)&&o.apply(k,d)===!1&&c.preventDefault();return c.type=s,!g&&!c.isDefaultPrevented()&&(!n._default||n._default.apply(f.ownerDocument,d)===!1)&&(s!=="click"||!p.nodeName(f,"a"))&&p.acceptData(f)&&m&&f[s]&&(s!=="focus"&&s!=="blur"||c.target.offsetWidth!==0)&&!p.isWindow(f)&&(l=f[m],l&&(f[m]=null),p.event.triggered=s,f[s](),p.event.triggered=b,l&&(f[m]=l)),c.result}return},dispatch:function(c){c=p.event.fix(c||a.event);var d,e,f,g,h,i,j,k,l,m,n=(p._data(this,"events")||{})[c.type]||[],o=n.delegateCount,q=[].slice.call(arguments),r=!c.exclusive&&!c.namespace,s=p.event.special[c.type]||{},t=[];q[0]=c,c.delegateTarget=this;if(s.preDispatch&&s.preDispatch.call(this,c)===!1)return;if(o&&(!c.button||c.type!=="click"))for(f=c.target;f!=this;f=f.parentNode||this)if(f.disabled!==!0||c.type!=="click"){h={},j=[];for(d=0;d<o;d++)k=n[d],l=k.selector,h[l]===b&&(h[l]=p(l,this).index(f)>=0),h[l]&&j.push(k);j.length&&t.push({elem:f,matches:j})}n.length>o&&t.push({elem:this,matches:n.slice(o)});for(d=0;d<t.length&&!c.isPropagationStopped();d++){i=t[d],c.currentTarget=i.elem;for(e=0;e<i.matches.length&&!c.isImmediatePropagationStopped();e++){k=i.matches[e];if(r||!c.namespace&&!k.namespace||c.namespace_re&&c.namespace_re.test(k.namespace))c.data=k.data,c.handleObj=k,g=((p.event.special[k.origType]||{}).handle||k.handler).apply(i.elem,q),g!==b&&(c.result=g,g===!1&&(c.preventDefault(),c.stopPropagation()))}}return s.postDispatch&&s.postDispatch.call(this,c),c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){return a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode),a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,c){var d,f,g,h=c.button,i=c.fromElement;return a.pageX==null&&c.clientX!=null&&(d=a.target.ownerDocument||e,f=d.documentElement,g=d.body,a.pageX=c.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=c.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?c.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0),a}},fix:function(a){if(a[p.expando])return a;var b,c,d=a,f=p.event.fixHooks[a.type]||{},g=f.props?this.props.concat(f.props):this.props;a=p.Event(d);for(b=g.length;b;)c=g[--b],a[c]=d[c];return a.target||(a.target=d.srcElement||e),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey=!!a.metaKey,f.filter?f.filter(a,d):a},special:{load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){p.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=p.extend(new p.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?p.event.trigger(e,null,b):p.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},p.event.handle=p.event.dispatch,p.removeEvent=e.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){var d="on"+b;a.detachEvent&&(typeof a[d]=="undefined"&&(a[d]=null),a.detachEvent(d,c))},p.Event=function(a,b){if(this instanceof p.Event)a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?bb:ba):this.type=a,b&&p.extend(this,b),this.timeStamp=a&&a.timeStamp||p.now(),this[p.expando]=!0;else return new p.Event(a,b)},p.Event.prototype={preventDefault:function(){this.isDefaultPrevented=bb;var a=this.originalEvent;if(!a)return;a.preventDefault?a.preventDefault():a.returnValue=!1},stopPropagation:function(){this.isPropagationStopped=bb;var a=this.originalEvent;if(!a)return;a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=bb,this.stopPropagation()},isDefaultPrevented:ba,isPropagationStopped:ba,isImmediatePropagationStopped:ba},p.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){p.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c,d=this,e=a.relatedTarget,f=a.handleObj,g=f.selector;if(!e||e!==d&&!p.contains(d,e))a.type=f.origType,c=f.handler.apply(this,arguments),a.type=b;return c}}}),p.support.submitBubbles||(p.event.special.submit={setup:function(){if(p.nodeName(this,"form"))return!1;p.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=p.nodeName(c,"input")||p.nodeName(c,"button")?c.form:b;d&&!p._data(d,"_submit_attached")&&(p.event.add(d,"submit._submit",function(a){a._submit_bubble=!0}),p._data(d,"_submit_attached",!0))})},postDispatch:function(a){a._submit_bubble&&(delete a._submit_bubble,this.parentNode&&!a.isTrigger&&p.event.simulate("submit",this.parentNode,a,!0))},teardown:function(){if(p.nodeName(this,"form"))return!1;p.event.remove(this,"._submit")}}),p.support.changeBubbles||(p.event.special.change={setup:function(){if(V.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")p.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),p.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1),p.event.simulate("change",this,a,!0)});return!1}p.event.add(this,"beforeactivate._change",function(a){var b=a.target;V.test(b.nodeName)&&!p._data(b,"_change_attached")&&(p.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&p.event.simulate("change",this.parentNode,a,!0)}),p._data(b,"_change_attached",!0))})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){return p.event.remove(this,"._change"),!V.test(this.nodeName)}}),p.support.focusinBubbles||p.each({focus:"focusin",blur:"focusout"},function(a,b){var c=0,d=function(a){p.event.simulate(b,a.target,p.event.fix(a),!0)};p.event.special[b]={setup:function(){c++===0&&e.addEventListener(a,d,!0)},teardown:function(){--c===0&&e.removeEventListener(a,d,!0)}}}),p.fn.extend({on:function(a,c,d,e,f){var g,h;if(typeof a=="object"){typeof c!="string"&&(d=d||c,c=b);for(h in a)this.on(h,c,d,a[h],f);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=ba;else if(!e)return this;return f===1&&(g=e,e=function(a){return p().off(a),g.apply(this,arguments)},e.guid=g.guid||(g.guid=p.guid++)),this.each(function(){p.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on(a,b,c,d,1)},off:function(a,c,d){var e,f;if(a&&a.preventDefault&&a.handleObj)return e=a.handleObj,p(a.delegateTarget).off(e.namespace?e.origType+"."+e.namespace:e.origType,e.selector,e.handler),this;if(typeof a=="object"){for(f in a)this.off(f,c,a[f]);return this}if(c===!1||typeof c=="function")d=c,c=b;return d===!1&&(d=ba),this.each(function(){p.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){return p(this.context).on(a,this.selector,b,c),this},die:function(a,b){return p(this.context).off(a,this.selector||"**",b),this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a||"**",c)},trigger:function(a,b){return this.each(function(){p.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return p.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||p.guid++,d=0,e=function(c){var e=(p._data(this,"lastToggle"+a.guid)||0)%d;return p._data(this,"lastToggle"+a.guid,e+1),c.preventDefault(),b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),p.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){p.fn[b]=function(a,c){return c==null&&(c=a,a=null),arguments.length>0?this.on(b,null,a,c):this.trigger(b)},Y.test(b)&&(p.event.fixHooks[b]=p.event.keyHooks),Z.test(b)&&(p.event.fixHooks[b]=p.event.mouseHooks)}),function(a,b){function $(a,b,c,d){c=c||[],b=b||q;var e,f,g,j,k=b.nodeType;if(k!==1&&k!==9)return[];if(!a||typeof a!="string")return c;g=h(b);if(!g&&!d)if(e=L.exec(a))if(j=e[1]){if(k===9){f=b.getElementById(j);if(!f||!f.parentNode)return c;if(f.id===j)return c.push(f),c}else if(b.ownerDocument&&(f=b.ownerDocument.getElementById(j))&&i(b,f)&&f.id===j)return c.push(f),c}else{if(e[2])return u.apply(c,t.call(b.getElementsByTagName(a),0)),c;if((j=e[3])&&X&&b.getElementsByClassName)return u.apply(c,t.call(b.getElementsByClassName(j),0)),c}return bk(a,b,c,d,g)}function _(a){return function(b){var c=b.nodeName.toLowerCase();return c==="input"&&b.type===a}}function ba(a){return function(b){var c=b.nodeName.toLowerCase();return(c==="input"||c==="button")&&b.type===a}}function bb(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}function bc(a,b,c,d){var e,g,h,i,j,k,l,m,n,p,r=!c&&b!==q,s=(r?"<s>":"")+a.replace(H,"$1<s>"),u=y[o][s];if(u)return d?0:t.call(u,0);j=a,k=[],m=0,n=f.preFilter,p=f.filter;while(j){if(!e||(g=I.exec(j)))g&&(j=j.slice(g[0].length),h.selector=l),k.push(h=[]),l="",r&&(j=" "+j);e=!1;if(g=J.exec(j))l+=g[0],j=j.slice(g[0].length),e=h.push({part:g.pop().replace(H," "),string:g[0],captures:g});for(i in p)(g=S[i].exec(j))&&(!n[i]||(g=n[i](g,b,c)))&&(l+=g[0],j=j.slice(g[0].length),e=h.push({part:i,string:g.shift(),captures:g}));if(!e)break}return l&&(h.selector=l),d?j.length:j?$.error(a):t.call(y(s,k),0)}function bd(a,b,e,f){var g=b.dir,h=s++;return a||(a=function(a){return a===e}),b.first?function(b){while(b=b[g])if(b.nodeType===1)return a(b)&&b}:f?function(b){while(b=b[g])if(b.nodeType===1&&a(b))return b}:function(b){var e,f=h+"."+c,i=f+"."+d;while(b=b[g])if(b.nodeType===1){if((e=b[o])===i)return b.sizset;if(typeof e=="string"&&e.indexOf(f)===0){if(b.sizset)return b}else{b[o]=i;if(a(b))return b.sizset=!0,b;b.sizset=!1}}}}function be(a,b){return a?function(c){var d=b(c);return d&&a(d===!0?c:d)}:b}function bf(a,b,c){var d,e,g=0;for(;d=a[g];g++)f.relative[d.part]?e=bd(e,f.relative[d.part],b,c):e=be(e,f.filter[d.part].apply(null,d.captures.concat(b,c)));return e}function bg(a){return function(b){var c,d=0;for(;c=a[d];d++)if(c(b))return!0;return!1}}function bh(a,b,c,d){var e=0,f=b.length;for(;e<f;e++)$(a,b[e],c,d)}function bi(a,b,c,d,e,g){var h,i=f.setFilters[b.toLowerCase()];return i||$.error(b),(a||!(h=e))&&bh(a||"*",d,h=[],e),h.length>0?i(h,c,g):[]}function bj(a,c,d,e){var f,g,h,i,j,k,l,m,n,o,p,q,r,s=0,t=a.length,v=S.POS,w=new RegExp("^"+v.source+"(?!"+A+")","i"),x=function(){var a=1,c=arguments.length-2;for(;a<c;a++)arguments[a]===b&&(n[a]=b)};for(;s<t;s++){f=a[s],g="",m=e;for(h=0,i=f.length;h<i;h++){j=f[h],k=j.string;if(j.part==="PSEUDO"){v.exec(""),l=0;while(n=v.exec(k)){o=!0,p=v.lastIndex=n.index+n[0].length;if(p>l){g+=k.slice(l,n.index),l=p,q=[c],J.test(g)&&(m&&(q=m),m=e);if(r=O.test(g))g=g.slice(0,-5).replace(J,"$&*"),l++;n.length>1&&n[0].replace(w,x),m=bi(g,n[1],n[2],q,m,r)}g=""}}o||(g+=k),o=!1}g?J.test(g)?bh(g,m||[c],d,e):$(g,c,d,e?e.concat(m):m):u.apply(d,m)}return t===1?d:$.uniqueSort(d)}function bk(a,b,e,g,h){a=a.replace(H,"$1");var i,k,l,m,n,o,p,q,r,s,v=bc(a,b,h),w=b.nodeType;if(S.POS.test(a))return bj(v,b,e,g);if(g)i=t.call(g,0);else if(v.length===1){if((o=t.call(v[0],0)).length>2&&(p=o[0]).part==="ID"&&w===9&&!h&&f.relative[o[1].part]){b=f.find.ID(p.captures[0].replace(R,""),b,h)[0];if(!b)return e;a=a.slice(o.shift().string.length)}r=(v=N.exec(o[0].string))&&!v.index&&b.parentNode||b,q="";for(n=o.length-1;n>=0;n--){p=o[n],s=p.part,q=p.string+q;if(f.relative[s])break;if(f.order.test(s)){i=f.find[s](p.captures[0].replace(R,""),r,h);if(i==null)continue;a=a.slice(0,a.length-q.length)+q.replace(S[s],""),a||u.apply(e,t.call(i,0));break}}}if(a){k=j(a,b,h),c=k.dirruns++,i==null&&(i=f.find.TAG("*",N.test(a)&&b.parentNode||b));for(n=0;m=i[n];n++)d=k.runs++,k(m)&&e.push(m)}return e}var c,d,e,f,g,h,i,j,k,l,m=!0,n="undefined",o=("sizcache"+Math.random()).replace(".",""),q=a.document,r=q.documentElement,s=0,t=[].slice,u=[].push,v=function(a,b){return a[o]=b||!0,a},w=function(){var a={},b=[];return v(function(c,d){return b.push(c)>f.cacheLength&&delete a[b.shift()],a[c]=d},a)},x=w(),y=w(),z=w(),A="[\\x20\\t\\r\\n\\f]",B="(?:\\\\.|[-\\w]|[^\\x00-\\xa0])+",C=B.replace("w","w#"),D="([*^$|!~]?=)",E="\\["+A+"*("+B+")"+A+"*(?:"+D+A+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+C+")|)|)"+A+"*\\]",F=":("+B+")(?:\\((?:(['\"])((?:\\\\.|[^\\\\])*?)\\2|([^()[\\]]*|(?:(?:"+E+")|[^:]|\\\\.)*|.*))\\)|)",G=":(nth|eq|gt|lt|first|last|even|odd)(?:\\(((?:-\\d)?\\d*)\\)|)(?=[^-]|$)",H=new RegExp("^"+A+"+|((?:^|[^\\\\])(?:\\\\.)*)"+A+"+$","g"),I=new RegExp("^"+A+"*,"+A+"*"),J=new RegExp("^"+A+"*([\\x20\\t\\r\\n\\f>+~])"+A+"*"),K=new RegExp(F),L=/^(?:#([\w\-]+)|(\w+)|\.([\w\-]+))$/,M=/^:not/,N=/[\x20\t\r\n\f]*[+~]/,O=/:not\($/,P=/h\d/i,Q=/input|select|textarea|button/i,R=/\\(?!\\)/g,S={ID:new RegExp("^#("+B+")"),CLASS:new RegExp("^\\.("+B+")"),NAME:new RegExp("^\\[name=['\"]?("+B+")['\"]?\\]"),TAG:new RegExp("^("+B.replace("w","w*")+")"),ATTR:new RegExp("^"+E),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|nth|last|first)-child(?:\\("+A+"*(even|odd|(([+-]|)(\\d*)n|)"+A+"*(?:([+-]|)"+A+"*(\\d+)|))"+A+"*\\)|)","i"),POS:new RegExp(G,"ig"),needsContext:new RegExp("^"+A+"*[>+~]|"+G,"i")},T=function(a){var b=q.createElement("div");try{return a(b)}catch(c){return!1}finally{b=null}},U=T(function(a){return a.appendChild(q.createComment("")),!a.getElementsByTagName("*").length}),V=T(function(a){return a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!==n&&a.firstChild.getAttribute("href")==="#"}),W=T(function(a){a.innerHTML="<select></select>";var b=typeof a.lastChild.getAttribute("multiple");return b!=="boolean"&&b!=="string"}),X=T(function(a){return a.innerHTML="<div class='hidden e'></div><div class='hidden'></div>",!a.getElementsByClassName||!a.getElementsByClassName("e").length?!1:(a.lastChild.className="e",a.getElementsByClassName("e").length===2)}),Y=T(function(a){a.id=o+0,a.innerHTML="<a name='"+o+"'></a><div name='"+o+"'></div>",r.insertBefore(a,r.firstChild);var b=q.getElementsByName&&q.getElementsByName(o).length===2+q.getElementsByName(o+0).length;return e=!q.getElementById(o),r.removeChild(a),b});try{t.call(r.childNodes,0)[0].nodeType}catch(Z){t=function(a){var b,c=[];for(;b=this[a];a++)c.push(b);return c}}$.matches=function(a,b){return $(a,null,null,b)},$.matchesSelector=function(a,b){return $(b,null,null,[a]).length>0},g=$.getText=function(a){var b,c="",d=0,e=a.nodeType;if(e){if(e===1||e===9||e===11){if(typeof a.textContent=="string")return a.textContent;for(a=a.firstChild;a;a=a.nextSibling)c+=g(a)}else if(e===3||e===4)return a.nodeValue}else for(;b=a[d];d++)c+=g(b);return c},h=$.isXML=function(a){var b=a&&(a.ownerDocument||a).documentElement;return b?b.nodeName!=="HTML":!1},i=$.contains=r.contains?function(a,b){var c=a.nodeType===9?a.documentElement:a,d=b&&b.parentNode;return a===d||!!(d&&d.nodeType===1&&c.contains&&c.contains(d))}:r.compareDocumentPosition?function(a,b){return b&&!!(a.compareDocumentPosition(b)&16)}:function(a,b){while(b=b.parentNode)if(b===a)return!0;return!1},$.attr=function(a,b){var c,d=h(a);return d||(b=b.toLowerCase()),f.attrHandle[b]?f.attrHandle[b](a):W||d?a.getAttribute(b):(c=a.getAttributeNode(b),c?typeof a[b]=="boolean"?a[b]?b:null:c.specified?c.value:null:null)},f=$.selectors={cacheLength:50,createPseudo:v,match:S,order:new RegExp("ID|TAG"+(Y?"|NAME":"")+(X?"|CLASS":"")),attrHandle:V?{}:{href:function(a){return a.getAttribute("href",2)},type:function(a){return a.getAttribute("type")}},find:{ID:e?function(a,b,c){if(typeof b.getElementById!==n&&!c){var d=b.getElementById(a);return d&&d.parentNode?[d]:[]}}:function(a,c,d){if(typeof c.getElementById!==n&&!d){var e=c.getElementById(a);return e?e.id===a||typeof e.getAttributeNode!==n&&e.getAttributeNode("id").value===a?[e]:b:[]}},TAG:U?function(a,b){if(typeof b.getElementsByTagName!==n)return b.getElementsByTagName(a)}:function(a,b){var c=b.getElementsByTagName(a);if(a==="*"){var d,e=[],f=0;for(;d=c[f];f++)d.nodeType===1&&e.push(d);return e}return c},NAME:function(a,b){if(typeof b.getElementsByName!==n)return b.getElementsByName(name)},CLASS:function(a,b,c){if(typeof b.getElementsByClassName!==n&&!c)return b.getElementsByClassName(a)}},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(a){return a[1]=a[1].replace(R,""),a[3]=(a[4]||a[5]||"").replace(R,""),a[2]==="~="&&(a[3]=" "+a[3]+" "),a.slice(0,4)},CHILD:function(a){return a[1]=a[1].toLowerCase(),a[1]==="nth"?(a[2]||$.error(a[0]),a[3]=+(a[3]?a[4]+(a[5]||1):2*(a[2]==="even"||a[2]==="odd")),a[4]=+(a[6]+a[7]||a[2]==="odd")):a[2]&&$.error(a[0]),a},PSEUDO:function(a,b,c){var d,e;if(S.CHILD.test(a[0]))return null;if(a[3])a[2]=a[3];else if(d=a[4])K.test(d)&&(e=bc(d,b,c,!0))&&(e=d.indexOf(")",d.length-e)-d.length)&&(d=d.slice(0,e),a[0]=a[0].slice(0,e)),a[2]=d;return a.slice(0,3)}},filter:{ID:e?function(a){return a=a.replace(R,""),function(b){return b.getAttribute("id")===a}}:function(a){return a=a.replace(R,""),function(b){var c=typeof b.getAttributeNode!==n&&b.getAttributeNode("id");return c&&c.value===a}},TAG:function(a){return a==="*"?function(){return!0}:(a=a.replace(R,"").toLowerCase(),function(b){return b.nodeName&&b.nodeName.toLowerCase()===a})},CLASS:function(a){var b=x[o][a];return b||(b=x(a,new RegExp("(^|"+A+")"+a+"("+A+"|$)"))),function(a){return b.test(a.className||typeof a.getAttribute!==n&&a.getAttribute("class")||"")}},ATTR:function(a,b,c){return b?function(d){var e=$.attr(d,a),f=e+"";if(e==null)return b==="!=";switch(b){case"=":return f===c;case"!=":return f!==c;case"^=":return c&&f.indexOf(c)===0;case"*=":return c&&f.indexOf(c)>-1;case"$=":return c&&f.substr(f.length-c.length)===c;case"~=":return(" "+f+" ").indexOf(c)>-1;case"|=":return f===c||f.substr(0,c.length+1)===c+"-"}}:function(b){return $.attr(b,a)!=null}},CHILD:function(a,b,c,d){if(a==="nth"){var e=s++;return function(a){var b,f,g=0,h=a;if(c===1&&d===0)return!0;b=a.parentNode;if(b&&(b[o]!==e||!a.sizset)){for(h=b.firstChild;h;h=h.nextSibling)if(h.nodeType===1){h.sizset=++g;if(h===a)break}b[o]=e}return f=a.sizset-d,c===0?f===0:f%c===0&&f/c>=0}}return function(b){var c=b;switch(a){case"only":case"first":while(c=c.previousSibling)if(c.nodeType===1)return!1;if(a==="first")return!0;c=b;case"last":while(c=c.nextSibling)if(c.nodeType===1)return!1;return!0}}},PSEUDO:function(a,b,c,d){var e,g=f.pseudos[a]||f.pseudos[a.toLowerCase()];return g||$.error("unsupported pseudo: "+a),g[o]?g(b,c,d):g.length>1?(e=[a,a,"",b],function(a){return g(a,0,e)}):g}},pseudos:{not:v(function(a,b,c){var d=j(a.replace(H,"$1"),b,c);return function(a){return!d(a)}}),enabled:function(a){return a.disabled===!1},disabled:function(a){return a.disabled===!0},checked:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&!!a.checked||b==="option"&&!!a.selected},selected:function(a){return a.parentNode&&a.parentNode.selectedIndex,a.selected===!0},parent:function(a){return!f.pseudos.empty(a)},empty:function(a){var b;a=a.firstChild;while(a){if(a.nodeName>"@"||(b=a.nodeType)===3||b===4)return!1;a=a.nextSibling}return!0},contains:v(function(a){return function(b){return(b.textContent||b.innerText||g(b)).indexOf(a)>-1}}),has:v(function(a){return function(b){return $(a,b).length>0}}),header:function(a){return P.test(a.nodeName)},text:function(a){var b,c;return a.nodeName.toLowerCase()==="input"&&(b=a.type)==="text"&&((c=a.getAttribute("type"))==null||c.toLowerCase()===b)},radio:_("radio"),checkbox:_("checkbox"),file:_("file"),password:_("password"),image:_("image"),submit:ba("submit"),reset:ba("reset"),button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&a.type==="button"||b==="button"},input:function(a){return Q.test(a.nodeName)},focus:function(a){var b=a.ownerDocument;return a===b.activeElement&&(!b.hasFocus||b.hasFocus())&&(!!a.type||!!a.href)},active:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b,c){return c?a.slice(1):[a[0]]},last:function(a,b,c){var d=a.pop();return c?a:[d]},even:function(a,b,c){var d=[],e=c?1:0,f=a.length;for(;e<f;e=e+2)d.push(a[e]);return d},odd:function(a,b,c){var d=[],e=c?0:1,f=a.length;for(;e<f;e=e+2)d.push(a[e]);return d},lt:function(a,b,c){return c?a.slice(+b):a.slice(0,+b)},gt:function(a,b,c){return c?a.slice(0,+b+1):a.slice(+b+1)},eq:function(a,b,c){var d=a.splice(+b,1);return c?a:d}}},k=r.compareDocumentPosition?function(a,b){return a===b?(l=!0,0):(!a.compareDocumentPosition||!b.compareDocumentPosition?a.compareDocumentPosition:a.compareDocumentPosition(b)&4)?-1:1}:function(a,b){if(a===b)return l=!0,0;if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,h=b.parentNode,i=g;if(g===h)return bb(a,b);if(!g)return-1;if(!h)return 1;while(i)e.unshift(i),i=i.parentNode;i=h;while(i)f.unshift(i),i=i.parentNode;c=e.length,d=f.length;for(var j=0;j<c&&j<d;j++)if(e[j]!==f[j])return bb(e[j],f[j]);return j===c?bb(a,f[j],-1):bb(e[j],b,1)},[0,0].sort(k),m=!l,$.uniqueSort=function(a){var b,c=1;l=m,a.sort(k);if(l)for(;b=a[c];c++)b===a[c-1]&&a.splice(c--,1);return a},$.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)},j=$.compile=function(a,b,c){var d,e,f,g=z[o][a];if(g&&g.context===b)return g;d=bc(a,b,c);for(e=0,f=d.length;e<f;e++)d[e]=bf(d[e],b,c);return g=z(a,bg(d)),g.context=b,g.runs=g.dirruns=0,g},q.querySelectorAll&&function(){var a,b=bk,c=/'|\\/g,d=/\=[\x20\t\r\n\f]*([^'"\]]*)[\x20\t\r\n\f]*\]/g,e=[],f=[":active"],g=r.matchesSelector||r.mozMatchesSelector||r.webkitMatchesSelector||r.oMatchesSelector||r.msMatchesSelector;T(function(a){a.innerHTML="<select><option selected=''></option></select>",a.querySelectorAll("[selected]").length||e.push("\\["+A+"*(?:checked|disabled|ismap|multiple|readonly|selected|value)"),a.querySelectorAll(":checked").length||e.push(":checked")}),T(function(a){a.innerHTML="<p test=''></p>",a.querySelectorAll("[test^='']").length&&e.push("[*^$]="+A+"*(?:\"\"|'')"),a.innerHTML="<input type='hidden'/>",a.querySelectorAll(":enabled").length||e.push(":enabled",":disabled")}),e=e.length&&new RegExp(e.join("|")),bk=function(a,d,f,g,h){if(!g&&!h&&(!e||!e.test(a)))if(d.nodeType===9)try{return u.apply(f,t.call(d.querySelectorAll(a),0)),f}catch(i){}else if(d.nodeType===1&&d.nodeName.toLowerCase()!=="object"){var j,k,l,m=d.getAttribute("id"),n=m||o,p=N.test(a)&&d.parentNode||d;m?n=n.replace(c,"\\$&"):d.setAttribute("id",n),j=bc(a,d,h),n="[id='"+n+"']";for(k=0,l=j.length;k<l;k++)j[k]=n+j[k].selector;try{return u.apply(f,t.call(p.querySelectorAll(j.join(",")),0)),f}catch(i){}finally{m||d.removeAttribute("id")}}return b(a,d,f,g,h)},g&&(T(function(b){a=g.call(b,"div");try{g.call(b,"[test!='']:sizzle"),f.push(S.PSEUDO.source,S.POS.source,"!=")}catch(c){}}),f=new RegExp(f.join("|")),$.matchesSelector=function(b,c){c=c.replace(d,"='$1']");if(!h(b)&&!f.test(c)&&(!e||!e.test(c)))try{var i=g.call(b,c);if(i||a||b.document&&b.document.nodeType!==11)return i}catch(j){}return $(c,null,null,[b]).length>0})}(),f.setFilters.nth=f.setFilters.eq,f.filters=f.pseudos,$.attr=p.attr,p.find=$,p.expr=$.selectors,p.expr[":"]=p.expr.pseudos,p.unique=$.uniqueSort,p.text=$.getText,p.isXMLDoc=$.isXML,p.contains=$.contains}(a);var bc=/Until$/,bd=/^(?:parents|prev(?:Until|All))/,be=/^.[^:#\[\.,]*$/,bf=p.expr.match.needsContext,bg={children:!0,contents:!0,next:!0,prev:!0};p.fn.extend({find:function(a){var b,c,d,e,f,g,h=this;if(typeof a!="string")return p(a).filter(function(){for(b=0,c=h.length;b<c;b++)if(p.contains(h[b],this))return!0});g=this.pushStack("","find",a);for(b=0,c=this.length;b<c;b++){d=g.length,p.find(a,this[b],g);if(b>0)for(e=d;e<g.length;e++)for(f=0;f<d;f++)if(g[f]===g[e]){g.splice(e--,1);break}}return g},has:function(a){var b,c=p(a,this),d=c.length;return this.filter(function(){for(b=0;b<d;b++)if(p.contains(this,c[b]))return!0})},not:function(a){return this.pushStack(bj(this,a,!1),"not",a)},filter:function(a){return this.pushStack(bj(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?bf.test(a)?p(a,this.context).index(this[0])>=0:p.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c,d=0,e=this.length,f=[],g=bf.test(a)||typeof a!="string"?p(a,b||this.context):0;for(;d<e;d++){c=this[d];while(c&&c.ownerDocument&&c!==b&&c.nodeType!==11){if(g?g.index(c)>-1:p.find.matchesSelector(c,a)){f.push(c);break}c=c.parentNode}}return f=f.length>1?p.unique(f):f,this.pushStack(f,"closest",a)},index:function(a){return a?typeof a=="string"?p.inArray(this[0],p(a)):p.inArray(a.jquery?a[0]:a,this):this[0]&&this[0].parentNode?this.prevAll().length:-1},add:function(a,b){var c=typeof a=="string"?p(a,b):p.makeArray(a&&a.nodeType?[a]:a),d=p.merge(this.get(),c);return this.pushStack(bh(c[0])||bh(d[0])?d:p.unique(d))},addBack:function(a){return this.add(a==null?this.prevObject:this.prevObject.filter(a))}}),p.fn.andSelf=p.fn.addBack,p.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return p.dir(a,"parentNode")},parentsUntil:function(a,b,c){return p.dir(a,"parentNode",c)},next:function(a){return bi(a,"nextSibling")},prev:function(a){return bi(a,"previousSibling")},nextAll:function(a){return p.dir(a,"nextSibling")},prevAll:function(a){return p.dir(a,"previousSibling")},nextUntil:function(a,b,c){return p.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return p.dir(a,"previousSibling",c)},siblings:function(a){return p.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return p.sibling(a.firstChild)},contents:function(a){return p.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:p.merge([],a.childNodes)}},function(a,b){p.fn[a]=function(c,d){var e=p.map(this,b,c);return bc.test(a)||(d=c),d&&typeof d=="string"&&(e=p.filter(d,e)),e=this.length>1&&!bg[a]?p.unique(e):e,this.length>1&&bd.test(a)&&(e=e.reverse()),this.pushStack(e,a,k.call(arguments).join(","))}}),p.extend({filter:function(a,b,c){return c&&(a=":not("+a+")"),b.length===1?p.find.matchesSelector(b[0],a)?[b[0]]:[]:p.find.matches(a,b)},dir:function(a,c,d){var e=[],f=a[c];while(f&&f.nodeType!==9&&(d===b||f.nodeType!==1||!p(f).is(d)))f.nodeType===1&&e.push(f),f=f[c];return e},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var bl="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",bm=/ jQuery\d+="(?:null|\d+)"/g,bn=/^\s+/,bo=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,bp=/<([\w:]+)/,bq=/<tbody/i,br=/<|&#?\w+;/,bs=/<(?:script|style|link)/i,bt=/<(?:script|object|embed|option|style)/i,bu=new RegExp("<(?:"+bl+")[\\s/>]","i"),bv=/^(?:checkbox|radio)$/,bw=/checked\s*(?:[^=]|=\s*.checked.)/i,bx=/\/(java|ecma)script/i,by=/^\s*<!(?:\[CDATA\[|\-\-)|[\]\-]{2}>\s*$/g,bz={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bA=bk(e),bB=bA.appendChild(e.createElement("div"));bz.optgroup=bz.option,bz.tbody=bz.tfoot=bz.colgroup=bz.caption=bz.thead,bz.th=bz.td,p.support.htmlSerialize||(bz._default=[1,"X<div>","</div>"]),p.fn.extend({text:function(a){return p.access(this,function(a){return a===b?p.text(this):this.empty().append((this[0]&&this[0].ownerDocument||e).createTextNode(a))},null,a,arguments.length)},wrapAll:function(a){if(p.isFunction(a))return this.each(function(b){p(this).wrapAll(a.call(this,b))});if(this[0]){var b=p(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){return p.isFunction(a)?this.each(function(b){p(this).wrapInner(a.call(this,b))}):this.each(function(){var b=p(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=p.isFunction(a);return this.each(function(c){p(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){p.nodeName(this,"body")||p(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){(this.nodeType===1||this.nodeType===11)&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){(this.nodeType===1||this.nodeType===11)&&this.insertBefore(a,this.firstChild)})},before:function(){if(!bh(this[0]))return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=p.clean(arguments);return this.pushStack(p.merge(a,this),"before",this.selector)}},after:function(){if(!bh(this[0]))return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=p.clean(arguments);return this.pushStack(p.merge(this,a),"after",this.selector)}},remove:function(a,b){var c,d=0;for(;(c=this[d])!=null;d++)if(!a||p.filter(a,[c]).length)!b&&c.nodeType===1&&(p.cleanData(c.getElementsByTagName("*")),p.cleanData([c])),c.parentNode&&c.parentNode.removeChild(c);return this},empty:function(){var a,b=0;for(;(a=this[b])!=null;b++){a.nodeType===1&&p.cleanData(a.getElementsByTagName("*"));while(a.firstChild)a.removeChild(a.firstChild)}return this},clone:function(a,b){return a=a==null?!1:a,b=b==null?a:b,this.map(function(){return p.clone(this,a,b)})},html:function(a){return p.access(this,function(a){var c=this[0]||{},d=0,e=this.length;if(a===b)return c.nodeType===1?c.innerHTML.replace(bm,""):b;if(typeof a=="string"&&!bs.test(a)&&(p.support.htmlSerialize||!bu.test(a))&&(p.support.leadingWhitespace||!bn.test(a))&&!bz[(bp.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(bo,"<$1></$2>");try{for(;d<e;d++)c=this[d]||{},c.nodeType===1&&(p.cleanData(c.getElementsByTagName("*")),c.innerHTML=a);c=0}catch(f){}}c&&this.empty().append(a)},null,a,arguments.length)},replaceWith:function(a){return bh(this[0])?this.length?this.pushStack(p(p.isFunction(a)?a():a),"replaceWith",a):this:p.isFunction(a)?this.each(function(b){var c=p(this),d=c.html();c.replaceWith(a.call(this,b,d))}):(typeof a!="string"&&(a=p(a).detach()),this.each(function(){var b=this.nextSibling,c=this.parentNode;p(this).remove(),b?p(b).before(a):p(c).append(a)}))},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){a=[].concat.apply([],a);var e,f,g,h,i=0,j=a[0],k=[],l=this.length;if(!p.support.checkClone&&l>1&&typeof j=="string"&&bw.test(j))return this.each(function(){p(this).domManip(a,c,d)});if(p.isFunction(j))return this.each(function(e){var f=p(this);a[0]=j.call(this,e,c?f.html():b),f.domManip(a,c,d)});if(this[0]){e=p.buildFragment(a,this,k),g=e.fragment,f=g.firstChild,g.childNodes.length===1&&(g=f);if(f){c=c&&p.nodeName(f,"tr");for(h=e.cacheable||l-1;i<l;i++)d.call(c&&p.nodeName(this[i],"table")?bC(this[i],"tbody"):this[i],i===h?g:p.clone(g,!0,!0))}g=f=null,k.length&&p.each(k,function(a,b){b.src?p.ajax?p.ajax({url:b.src,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0}):p.error("no ajax"):p.globalEval((b.text||b.textContent||b.innerHTML||"").replace(by,"")),b.parentNode&&b.parentNode.removeChild(b)})}return this}}),p.buildFragment=function(a,c,d){var f,g,h,i=a[0];return c=c||e,c=!c.nodeType&&c[0]||c,c=c.ownerDocument||c,a.length===1&&typeof i=="string"&&i.length<512&&c===e&&i.charAt(0)==="<"&&!bt.test(i)&&(p.support.checkClone||!bw.test(i))&&(p.support.html5Clone||!bu.test(i))&&(g=!0,f=p.fragments[i],h=f!==b),f||(f=c.createDocumentFragment(),p.clean(a,c,f,d),g&&(p.fragments[i]=h&&f)),{fragment:f,cacheable:g}},p.fragments={},p.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){p.fn[a]=function(c){var d,e=0,f=[],g=p(c),h=g.length,i=this.length===1&&this[0].parentNode;if((i==null||i&&i.nodeType===11&&i.childNodes.length===1)&&h===1)return g[b](this[0]),this;for(;e<h;e++)d=(e>0?this.clone(!0):this).get(),p(g[e])[b](d),f=f.concat(d);return this.pushStack(f,a,g.selector)}}),p.extend({clone:function(a,b,c){var d,e,f,g;p.support.html5Clone||p.isXMLDoc(a)||!bu.test("<"+a.nodeName+">")?g=a.cloneNode(!0):(bB.innerHTML=a.outerHTML,bB.removeChild(g=bB.firstChild));if((!p.support.noCloneEvent||!p.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!p.isXMLDoc(a)){bE(a,g),d=bF(a),e=bF(g);for(f=0;d[f];++f)e[f]&&bE(d[f],e[f])}if(b){bD(a,g);if(c){d=bF(a),e=bF(g);for(f=0;d[f];++f)bD(d[f],e[f])}}return d=e=null,g},clean:function(a,b,c,d){var f,g,h,i,j,k,l,m,n,o,q,r,s=b===e&&bA,t=[];if(!b||typeof b.createDocumentFragment=="undefined")b=e;for(f=0;(h=a[f])!=null;f++){typeof h=="number"&&(h+="");if(!h)continue;if(typeof h=="string")if(!br.test(h))h=b.createTextNode(h);else{s=s||bk(b),l=b.createElement("div"),s.appendChild(l),h=h.replace(bo,"<$1></$2>"),i=(bp.exec(h)||["",""])[1].toLowerCase(),j=bz[i]||bz._default,k=j[0],l.innerHTML=j[1]+h+j[2];while(k--)l=l.lastChild;if(!p.support.tbody){m=bq.test(h),n=i==="table"&&!m?l.firstChild&&l.firstChild.childNodes:j[1]==="<table>"&&!m?l.childNodes:[];for(g=n.length-1;g>=0;--g)p.nodeName(n[g],"tbody")&&!n[g].childNodes.length&&n[g].parentNode.removeChild(n[g])}!p.support.leadingWhitespace&&bn.test(h)&&l.insertBefore(b.createTextNode(bn.exec(h)[0]),l.firstChild),h=l.childNodes,l.parentNode.removeChild(l)}h.nodeType?t.push(h):p.merge(t,h)}l&&(h=l=s=null);if(!p.support.appendChecked)for(f=0;(h=t[f])!=null;f++)p.nodeName(h,"input")?bG(h):typeof h.getElementsByTagName!="undefined"&&p.grep(h.getElementsByTagName("input"),bG);if(c){q=function(a){if(!a.type||bx.test(a.type))return d?d.push(a.parentNode?a.parentNode.removeChild(a):a):c.appendChild(a)};for(f=0;(h=t[f])!=null;f++)if(!p.nodeName(h,"script")||!q(h))c.appendChild(h),typeof h.getElementsByTagName!="undefined"&&(r=p.grep(p.merge([],h.getElementsByTagName("script")),q),t.splice.apply(t,[f+1,0].concat(r)),f+=r.length)}return t},cleanData:function(a,b){var c,d,e,f,g=0,h=p.expando,i=p.cache,j=p.support.deleteExpando,k=p.event.special;for(;(e=a[g])!=null;g++)if(b||p.acceptData(e)){d=e[h],c=d&&i[d];if(c){if(c.events)for(f in c.events)k[f]?p.event.remove(e,f):p.removeEvent(e,f,c.handle);i[d]&&(delete i[d],j?delete e[h]:e.removeAttribute?e.removeAttribute(h):e[h]=null,p.deletedIds.push(d))}}}}),function(){var a,b;p.uaMatch=function(a){a=a.toLowerCase();var b=/(chrome)[ \/]([\w.]+)/.exec(a)||/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||a.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},a=p.uaMatch(g.userAgent),b={},a.browser&&(b[a.browser]=!0,b.version=a.version),b.chrome?b.webkit=!0:b.webkit&&(b.safari=!0),p.browser=b,p.sub=function(){function a(b,c){return new a.fn.init(b,c)}p.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function c(c,d){return d&&d instanceof p&&!(d instanceof a)&&(d=a(d)),p.fn.init.call(this,c,d,b)},a.fn.init.prototype=a.fn;var b=a(e);return a}}();var bH,bI,bJ,bK=/alpha\([^)]*\)/i,bL=/opacity=([^)]*)/,bM=/^(top|right|bottom|left)$/,bN=/^(none|table(?!-c[ea]).+)/,bO=/^margin/,bP=new RegExp("^("+q+")(.*)$","i"),bQ=new RegExp("^("+q+")(?!px)[a-z%]+$","i"),bR=new RegExp("^([-+])=("+q+")","i"),bS={},bT={position:"absolute",visibility:"hidden",display:"block"},bU={letterSpacing:0,fontWeight:400},bV=["Top","Right","Bottom","Left"],bW=["Webkit","O","Moz","ms"],bX=p.fn.toggle;p.fn.extend({css:function(a,c){return p.access(this,function(a,c,d){return d!==b?p.style(a,c,d):p.css(a,c)},a,c,arguments.length>1)},show:function(){return b$(this,!0)},hide:function(){return b$(this)},toggle:function(a,b){var c=typeof a=="boolean";return p.isFunction(a)&&p.isFunction(b)?bX.apply(this,arguments):this.each(function(){(c?a:bZ(this))?p(this).show():p(this).hide()})}}),p.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bH(a,"opacity");return c===""?"1":c}}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":p.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!a||a.nodeType===3||a.nodeType===8||!a.style)return;var f,g,h,i=p.camelCase(c),j=a.style;c=p.cssProps[i]||(p.cssProps[i]=bY(j,i)),h=p.cssHooks[c]||p.cssHooks[i];if(d===b)return h&&"get"in h&&(f=h.get(a,!1,e))!==b?f:j[c];g=typeof d,g==="string"&&(f=bR.exec(d))&&(d=(f[1]+1)*f[2]+parseFloat(p.css(a,c)),g="number");if(d==null||g==="number"&&isNaN(d))return;g==="number"&&!p.cssNumber[i]&&(d+="px");if(!h||!("set"in h)||(d=h.set(a,d,e))!==b)try{j[c]=d}catch(k){}},css:function(a,c,d,e){var f,g,h,i=p.camelCase(c);return c=p.cssProps[i]||(p.cssProps[i]=bY(a.style,i)),h=p.cssHooks[c]||p.cssHooks[i],h&&"get"in h&&(f=h.get(a,!0,e)),f===b&&(f=bH(a,c)),f==="normal"&&c in bU&&(f=bU[c]),d||e!==b?(g=parseFloat(f),d||p.isNumeric(g)?g||0:f):f},swap:function(a,b,c){var d,e,f={};for(e in b)f[e]=a.style[e],a.style[e]=b[e];d=c.call(a);for(e in b)a.style[e]=f[e];return d}}),a.getComputedStyle?bH=function(b,c){var d,e,f,g,h=a.getComputedStyle(b,null),i=b.style;return h&&(d=h[c],d===""&&!p.contains(b.ownerDocument,b)&&(d=p.style(b,c)),bQ.test(d)&&bO.test(c)&&(e=i.width,f=i.minWidth,g=i.maxWidth,i.minWidth=i.maxWidth=i.width=d,d=h.width,i.width=e,i.minWidth=f,i.maxWidth=g)),d}:e.documentElement.currentStyle&&(bH=function(a,b){var c,d,e=a.currentStyle&&a.currentStyle[b],f=a.style;return e==null&&f&&f[b]&&(e=f[b]),bQ.test(e)&&!bM.test(b)&&(c=f.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),f.left=b==="fontSize"?"1em":e,e=f.pixelLeft+"px",f.left=c,d&&(a.runtimeStyle.left=d)),e===""?"auto":e}),p.each(["height","width"],function(a,b){p.cssHooks[b]={get:function(a,c,d){if(c)return a.offsetWidth===0&&bN.test(bH(a,"display"))?p.swap(a,bT,function(){return cb(a,b,d)}):cb(a,b,d)},set:function(a,c,d){return b_(a,c,d?ca(a,b,d,p.support.boxSizing&&p.css(a,"boxSizing")==="border-box"):0)}}}),p.support.opacity||(p.cssHooks.opacity={get:function(a,b){return bL.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?.01*parseFloat(RegExp.$1)+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=p.isNumeric(b)?"alpha(opacity="+b*100+")":"",f=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&p.trim(f.replace(bK,""))===""&&c.removeAttribute){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bK.test(f)?f.replace(bK,e):f+" "+e}}),p(function(){p.support.reliableMarginRight||(p.cssHooks.marginRight={get:function(a,b){return p.swap(a,{display:"inline-block"},function(){if(b)return bH(a,"marginRight")})}}),!p.support.pixelPosition&&p.fn.position&&p.each(["top","left"],function(a,b){p.cssHooks[b]={get:function(a,c){if(c){var d=bH(a,b);return bQ.test(d)?p(a).position()[b]+"px":d}}}})}),p.expr&&p.expr.filters&&(p.expr.filters.hidden=function(a){return a.offsetWidth===0&&a.offsetHeight===0||!p.support.reliableHiddenOffsets&&(a.style&&a.style.display||bH(a,"display"))==="none"},p.expr.filters.visible=function(a){return!p.expr.filters.hidden(a)}),p.each({margin:"",padding:"",border:"Width"},function(a,b){p.cssHooks[a+b]={expand:function(c){var d,e=typeof c=="string"?c.split(" "):[c],f={};for(d=0;d<4;d++)f[a+bV[d]+b]=e[d]||e[d-2]||e[0];return f}},bO.test(a)||(p.cssHooks[a+b].set=b_)});var cd=/%20/g,ce=/\[\]$/,cf=/\r?\n/g,cg=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,ch=/^(?:select|textarea)/i;p.fn.extend({serialize:function(){return p.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?p.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||ch.test(this.nodeName)||cg.test(this.type))}).map(function(a,b){var c=p(this).val();return c==null?null:p.isArray(c)?p.map(c,function(a,c){return{name:b.name,value:a.replace(cf,"\r\n")}}):{name:b.name,value:c.replace(cf,"\r\n")}}).get()}}),p.param=function(a,c){var d,e=[],f=function(a,b){b=p.isFunction(b)?b():b==null?"":b,e[e.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=p.ajaxSettings&&p.ajaxSettings.traditional);if(p.isArray(a)||a.jquery&&!p.isPlainObject(a))p.each(a,function(){f(this.name,this.value)});else for(d in a)ci(d,a[d],c,f);return e.join("&").replace(cd,"+")};var cj,ck,cl=/#.*$/,cm=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,cn=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,co=/^(?:GET|HEAD)$/,cp=/^\/\//,cq=/\?/,cr=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,cs=/([?&])_=[^&]*/,ct=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,cu=p.fn.load,cv={},cw={},cx=["*/"]+["*"];try{cj=f.href}catch(cy){cj=e.createElement("a"),cj.href="",cj=cj.href}ck=ct.exec(cj.toLowerCase())||[],p.fn.load=function(a,c,d){if(typeof a!="string"&&cu)return cu.apply(this,arguments);if(!this.length)return this;var e,f,g,h=this,i=a.indexOf(" ");return i>=0&&(e=a.slice(i,a.length),a=a.slice(0,i)),p.isFunction(c)?(d=c,c=b):c&&typeof c=="object"&&(f="POST"),p.ajax({url:a,type:f,dataType:"html",data:c,complete:function(a,b){d&&h.each(d,g||[a.responseText,b,a])}}).done(function(a){g=arguments,h.html(e?p("<div>").append(a.replace(cr,"")).find(e):a)}),this},p.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){p.fn[b]=function(a){return this.on(b,a)}}),p.each(["get","post"],function(a,c){p[c]=function(a,d,e,f){return p.isFunction(d)&&(f=f||e,e=d,d=b),p.ajax({type:c,url:a,data:d,success:e,dataType:f})}}),p.extend({getScript:function(a,c){return p.get(a,b,c,"script")},getJSON:function(a,b,c){return p.get(a,b,c,"json")},ajaxSetup:function(a,b){return b?cB(a,p.ajaxSettings):(b=a,a=p.ajaxSettings),cB(a,b),a},ajaxSettings:{url:cj,isLocal:cn.test(ck[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":cx},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":p.parseJSON,"text xml":p.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:cz(cv),ajaxTransport:cz(cw),ajax:function(a,c){function y(a,c,f,i){var k,s,t,u,w,y=c;if(v===2)return;v=2,h&&clearTimeout(h),g=b,e=i||"",x.readyState=a>0?4:0,f&&(u=cC(l,x,f));if(a>=200&&a<300||a===304)l.ifModified&&(w=x.getResponseHeader("Last-Modified"),w&&(p.lastModified[d]=w),w=x.getResponseHeader("Etag"),w&&(p.etag[d]=w)),a===304?(y="notmodified",k=!0):(k=cD(l,u),y=k.state,s=k.data,t=k.error,k=!t);else{t=y;if(!y||a)y="error",a<0&&(a=0)}x.status=a,x.statusText=""+(c||y),k?o.resolveWith(m,[s,y,x]):o.rejectWith(m,[x,y,t]),x.statusCode(r),r=b,j&&n.trigger("ajax"+(k?"Success":"Error"),[x,l,k?s:t]),q.fireWith(m,[x,y]),j&&(n.trigger("ajaxComplete",[x,l]),--p.active||p.event.trigger("ajaxStop"))}typeof a=="object"&&(c=a,a=b),c=c||{};var d,e,f,g,h,i,j,k,l=p.ajaxSetup({},c),m=l.context||l,n=m!==l&&(m.nodeType||m instanceof p)?p(m):p.event,o=p.Deferred(),q=p.Callbacks("once memory"),r=l.statusCode||{},t={},u={},v=0,w="canceled",x={readyState:0,setRequestHeader:function(a,b){if(!v){var c=a.toLowerCase();a=u[c]=u[c]||a,t[a]=b}return this},getAllResponseHeaders:function(){return v===2?e:null},getResponseHeader:function(a){var c;if(v===2){if(!f){f={};while(c=cm.exec(e))f[c[1].toLowerCase()]=c[2]}c=f[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){return v||(l.mimeType=a),this},abort:function(a){return a=a||w,g&&g.abort(a),y(0,a),this}};o.promise(x),x.success=x.done,x.error=x.fail,x.complete=q.add,x.statusCode=function(a){if(a){var b;if(v<2)for(b in a)r[b]=[r[b],a[b]];else b=a[x.status],x.always(b)}return this},l.url=((a||l.url)+"").replace(cl,"").replace(cp,ck[1]+"//"),l.dataTypes=p.trim(l.dataType||"*").toLowerCase().split(s),l.crossDomain==null&&(i=ct.exec(l.url.toLowerCase()),l.crossDomain=!(!i||i[1]==ck[1]&&i[2]==ck[2]&&(i[3]||(i[1]==="http:"?80:443))==(ck[3]||(ck[1]==="http:"?80:443)))),l.data&&l.processData&&typeof l.data!="string"&&(l.data=p.param(l.data,l.traditional)),cA(cv,l,c,x);if(v===2)return x;j=l.global,l.type=l.type.toUpperCase(),l.hasContent=!co.test(l.type),j&&p.active++===0&&p.event.trigger("ajaxStart");if(!l.hasContent){l.data&&(l.url+=(cq.test(l.url)?"&":"?")+l.data,delete l.data),d=l.url;if(l.cache===!1){var z=p.now(),A=l.url.replace(cs,"$1_="+z);l.url=A+(A===l.url?(cq.test(l.url)?"&":"?")+"_="+z:"")}}(l.data&&l.hasContent&&l.contentType!==!1||c.contentType)&&x.setRequestHeader("Content-Type",l.contentType),l.ifModified&&(d=d||l.url,p.lastModified[d]&&x.setRequestHeader("If-Modified-Since",p.lastModified[d]),p.etag[d]&&x.setRequestHeader("If-None-Match",p.etag[d])),x.setRequestHeader("Accept",l.dataTypes[0]&&l.accepts[l.dataTypes[0]]?l.accepts[l.dataTypes[0]]+(l.dataTypes[0]!=="*"?", "+cx+"; q=0.01":""):l.accepts["*"]);for(k in l.headers)x.setRequestHeader(k,l.headers[k]);if(!l.beforeSend||l.beforeSend.call(m,x,l)!==!1&&v!==2){w="abort";for(k in{success:1,error:1,complete:1})x[k](l[k]);g=cA(cw,l,c,x);if(!g)y(-1,"No Transport");else{x.readyState=1,j&&n.trigger("ajaxSend",[x,l]),l.async&&l.timeout>0&&(h=setTimeout(function(){x.abort("timeout")},l.timeout));try{v=1,g.send(t,y)}catch(B){if(v<2)y(-1,B);else throw B}}return x}return x.abort()},active:0,lastModified:{},etag:{}});var cE=[],cF=/\?/,cG=/(=)\?(?=&|$)|\?\?/,cH=p.now();p.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var a=cE.pop()||p.expando+"_"+cH++;return this[a]=!0,a}}),p.ajaxPrefilter("json jsonp",function(c,d,e){var f,g,h,i=c.data,j=c.url,k=c.jsonp!==!1,l=k&&cG.test(j),m=k&&!l&&typeof i=="string"&&!(c.contentType||"").indexOf("application/x-www-form-urlencoded")&&cG.test(i);if(c.dataTypes[0]==="jsonp"||l||m)return f=c.jsonpCallback=p.isFunction(c.jsonpCallback)?c.jsonpCallback():c.jsonpCallback,g=a[f],l?c.url=j.replace(cG,"$1"+f):m?c.data=i.replace(cG,"$1"+f):k&&(c.url+=(cF.test(j)?"&":"?")+c.jsonp+"="+f),c.converters["script json"]=function(){return h||p.error(f+" was not called"),h[0]},c.dataTypes[0]="json",a[f]=function(){h=arguments},e.always(function(){a[f]=g,c[f]&&(c.jsonpCallback=d.jsonpCallback,cE.push(f)),h&&p.isFunction(g)&&g(h[0]),h=g=b}),"script"}),p.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){return p.globalEval(a),a}}}),p.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),p.ajaxTransport("script",function(a){if(a.crossDomain){var c,d=e.head||e.getElementsByTagName("head")[0]||e.documentElement;return{send:function(f,g){c=e.createElement("script"),c.async="async",a.scriptCharset&&(c.charset=a.scriptCharset),c.src=a.url,c.onload=c.onreadystatechange=function(a,e){if(e||!c.readyState||/loaded|complete/.test(c.readyState))c.onload=c.onreadystatechange=null,d&&c.parentNode&&d.removeChild(c),c=b,e||g(200,"success")},d.insertBefore(c,d.firstChild)},abort:function(){c&&c.onload(0,1)}}}});var cI,cJ=a.ActiveXObject?function(){for(var a in cI)cI[a](0,1)}:!1,cK=0;p.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&cL()||cM()}:cL,function(a){p.extend(p.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(p.ajaxSettings.xhr()),p.support.ajax&&p.ajaxTransport(function(c){if(!c.crossDomain||p.support.cors){var d;return{send:function(e,f){var g,h,i=c.xhr();c.username?i.open(c.type,c.url,c.async,c.username,c.password):i.open(c.type,c.url,c.async);if(c.xhrFields)for(h in c.xhrFields)i[h]=c.xhrFields[h];c.mimeType&&i.overrideMimeType&&i.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(h in e)i.setRequestHeader(h,e[h])}catch(j){}i.send(c.hasContent&&c.data||null),d=function(a,e){var h,j,k,l,m;try{if(d&&(e||i.readyState===4)){d=b,g&&(i.onreadystatechange=p.noop,cJ&&delete cI[g]);if(e)i.readyState!==4&&i.abort();else{h=i.status,k=i.getAllResponseHeaders(),l={},m=i.responseXML,m&&m.documentElement&&(l.xml=m);try{l.text=i.responseText}catch(a){}try{j=i.statusText}catch(n){j=""}!h&&c.isLocal&&!c.crossDomain?h=l.text?200:404:h===1223&&(h=204)}}}catch(o){e||f(-1,o)}l&&f(h,j,l,k)},c.async?i.readyState===4?setTimeout(d,0):(g=++cK,cJ&&(cI||(cI={},p(a).unload(cJ)),cI[g]=d),i.onreadystatechange=d):d()},abort:function(){d&&d(0,1)}}}});var cN,cO,cP=/^(?:toggle|show|hide)$/,cQ=new RegExp("^(?:([-+])=|)("+q+")([a-z%]*)$","i"),cR=/queueHooks$/,cS=[cY],cT={"*":[function(a,b){var c,d,e,f=this.createTween(a,b),g=cQ.exec(b),h=f.cur(),i=+h||0,j=1;if(g){c=+g[2],d=g[3]||(p.cssNumber[a]?"":"px");if(d!=="px"&&i){i=p.css(f.elem,a,!0)||c||1;do e=j=j||".5",i=i/j,p.style(f.elem,a,i+d),j=f.cur()/h;while(j!==1&&j!==e)}f.unit=d,f.start=i,f.end=g[1]?i+(g[1]+1)*c:c}return f}]};p.Animation=p.extend(cW,{tweener:function(a,b){p.isFunction(a)?(b=a,a=["*"]):a=a.split(" ");var c,d=0,e=a.length;for(;d<e;d++)c=a[d],cT[c]=cT[c]||[],cT[c].unshift(b)},prefilter:function(a,b){b?cS.unshift(a):cS.push(a)}}),p.Tween=cZ,cZ.prototype={constructor:cZ,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||"swing",this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(p.cssNumber[c]?"":"px")},cur:function(){var a=cZ.propHooks[this.prop];return a&&a.get?a.get(this):cZ.propHooks._default.get(this)},run:function(a){var b,c=cZ.propHooks[this.prop];return this.options.duration?this.pos=b=p.easing[this.easing](a,this.options.duration*a,0,1,this.options.duration):this.pos=b=a,this.now=(this.end-this.start)*b+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),c&&c.set?c.set(this):cZ.propHooks._default.set(this),this}},cZ.prototype.init.prototype=cZ.prototype,cZ.propHooks={_default:{get:function(a){var b;return a.elem[a.prop]==null||!!a.elem.style&&a.elem.style[a.prop]!=null?(b=p.css(a.elem,a.prop,!1,""),!b||b==="auto"?0:b):a.elem[a.prop]},set:function(a){p.fx.step[a.prop]?p.fx.step[a.prop](a):a.elem.style&&(a.elem.style[p.cssProps[a.prop]]!=null||p.cssHooks[a.prop])?p.style(a.elem,a.prop,a.now+a.unit):a.elem[a.prop]=a.now}}},cZ.propHooks.scrollTop=cZ.propHooks.scrollLeft={set:function(a){a.elem.nodeType&&a.elem.parentNode&&(a.elem[a.prop]=a.now)}},p.each(["toggle","show","hide"],function(a,b){var c=p.fn[b];p.fn[b]=function(d,e,f){return d==null||typeof d=="boolean"||!a&&p.isFunction(d)&&p.isFunction(e)?c.apply(this,arguments):this.animate(c$(b,!0),d,e,f)}}),p.fn.extend({fadeTo:function(a,b,c,d){return this.filter(bZ).css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){var e=p.isEmptyObject(a),f=p.speed(b,c,d),g=function(){var b=cW(this,p.extend({},a),f);e&&b.stop(!0)};return e||f.queue===!1?this.each(g):this.queue(f.queue,g)},stop:function(a,c,d){var e=function(a){var b=a.stop;delete a.stop,b(d)};return typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]),this.each(function(){var b=!0,c=a!=null&&a+"queueHooks",f=p.timers,g=p._data(this);if(c)g[c]&&g[c].stop&&e(g[c]);else for(c in g)g[c]&&g[c].stop&&cR.test(c)&&e(g[c]);for(c=f.length;c--;)f[c].elem===this&&(a==null||f[c].queue===a)&&(f[c].anim.stop(d),b=!1,f.splice(c,1));(b||!d)&&p.dequeue(this,a)})}}),p.each({slideDown:c$("show"),slideUp:c$("hide"),slideToggle:c$("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){p.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),p.speed=function(a,b,c){var d=a&&typeof a=="object"?p.extend({},a):{complete:c||!c&&b||p.isFunction(a)&&a,duration:a,easing:c&&b||b&&!p.isFunction(b)&&b};d.duration=p.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in p.fx.speeds?p.fx.speeds[d.duration]:p.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";return d.old=d.complete,d.complete=function(){p.isFunction(d.old)&&d.old.call(this),d.queue&&p.dequeue(this,d.queue)},d},p.easing={linear:function(a){return a},swing:function(a){return.5-Math.cos(a*Math.PI)/2}},p.timers=[],p.fx=cZ.prototype.init,p.fx.tick=function(){var a,b=p.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||p.fx.stop()},p.fx.timer=function(a){a()&&p.timers.push(a)&&!cO&&(cO=setInterval(p.fx.tick,p.fx.interval))},p.fx.interval=13,p.fx.stop=function(){clearInterval(cO),cO=null},p.fx.speeds={slow:600,fast:200,_default:400},p.fx.step={},p.expr&&p.expr.filters&&(p.expr.filters.animated=function(a){return p.grep(p.timers,function(b){return a===b.elem}).length});var c_=/^(?:body|html)$/i;p.fn.offset=function(a){if(arguments.length)return a===b?this:this.each(function(b){p.offset.setOffset(this,a,b)});var c,d,e,f,g,h,i,j,k,l,m=this[0],n=m&&m.ownerDocument;if(!n)return;return(e=n.body)===m?p.offset.bodyOffset(m):(d=n.documentElement,p.contains(d,m)?(c=m.getBoundingClientRect(),f=da(n),g=d.clientTop||e.clientTop||0,h=d.clientLeft||e.clientLeft||0,i=f.pageYOffset||d.scrollTop,j=f.pageXOffset||d.scrollLeft,k=c.top+i-g,l=c.left+j-h,{top:k,left:l}):{top:0,left:0})},p.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;return p.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(p.css(a,"marginTop"))||0,c+=parseFloat(p.css(a,"marginLeft"))||0),{top:b,left:c}},setOffset:function(a,b,c){var d=p.css(a,"position");d==="static"&&(a.style.position="relative");var e=p(a),f=e.offset(),g=p.css(a,"top"),h=p.css(a,"left"),i=(d==="absolute"||d==="fixed")&&p.inArray("auto",[g,h])>-1,j={},k={},l,m;i?(k=e.position(),l=k.top,m=k.left):(l=parseFloat(g)||0,m=parseFloat(h)||0),p.isFunction(b)&&(b=b.call(a,c,f)),b.top!=null&&(j.top=b.top-f.top+l),b.left!=null&&(j.left=b.left-f.left+m),"using"in b?b.using.call(a,j):e.css(j)}},p.fn.extend({position:function(){if(!this[0])return;var a=this[0],b=this.offsetParent(),c=this.offset(),d=c_.test(b[0].nodeName)?{top:0,left:0}:b.offset();return c.top-=parseFloat(p.css(a,"marginTop"))||0,c.left-=parseFloat(p.css(a,"marginLeft"))||0,d.top+=parseFloat(p.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(p.css(b[0],"borderLeftWidth"))||0,{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||e.body;while(a&&!c_.test(a.nodeName)&&p.css(a,"position")==="static")a=a.offsetParent;return a||e.body})}}),p.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,c){var d=/Y/.test(c);p.fn[a]=function(e){return p.access(this,function(a,e,f){var g=da(a);if(f===b)return g?c in g?g[c]:g.document.documentElement[e]:a[e];g?g.scrollTo(d?p(g).scrollLeft():f,d?f:p(g).scrollTop()):a[e]=f},a,e,arguments.length,null)}}),p.each({Height:"height",Width:"width"},function(a,c){p.each({padding:"inner"+a,content:c,"":"outer"+a},function(d,e){p.fn[e]=function(e,f){var g=arguments.length&&(d||typeof e!="boolean"),h=d||(e===!0||f===!0?"margin":"border");return p.access(this,function(c,d,e){var f;return p.isWindow(c)?c.document.documentElement["client"+a]:c.nodeType===9?(f=c.documentElement,Math.max(c.body["scroll"+a],f["scroll"+a],c.body["offset"+a],f["offset"+a],f["client"+a])):e===b?p.css(c,d,e,h):p.style(c,d,e,h)},c,g?e:b,g,null)}})}),a.jQuery=a.$=p,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return p})})(window);
\ No newline at end of file
ui/lib/jquery-ui-1.8.23-min.js 0 → 100644
View file @ e34796c6
This source diff could not be displayed because it is too large. You can view the blob instead.
ui/lib/jquery.ui.touch-punch.min.js 0 → 100644
View file @ e34796c6
/*
* jQuery UI Touch Punch 0.2.2
*
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
\ No newline at end of file
ui/lib/jsBezier-0.5.js 0 → 100644
View file @ e34796c6
/**
* jsBezier-0.5
*
* Copyright (c) 2010 - 2011 Simon Porritt (simon.porritt@gmail.com)
*
* licensed under the MIT license.
*
* a set of Bezier curve functions that deal with Beziers, used by jsPlumb, and perhaps useful for other people. These functions work with Bezier
* curves of arbitrary degree.
*
* - functions are all in the 'jsBezier' namespace.
*
* - all input points should be in the format {x:.., y:..}. all output points are in this format too.
*
* - all input curves should be in the format [ {x:.., y:..}, {x:.., y:..}, {x:.., y:..}, {x:.., y:..} ]
*
* - 'location' as used as an input here refers to a decimal in the range 0-1 inclusive, which indicates a point some proportion along the length
* of the curve. location as output has the same format and meaning.
*
*
* Function List:
* --------------
*
* distanceFromCurve(point, curve)
*
* Calculates the distance that the given point lies from the given Bezier. Note that it is computed relative to the center of the Bezier,
* so if you have stroked the curve with a wide pen you may wish to take that into account! The distance returned is relative to the values
* of the curve and the point - it will most likely be pixels.
*
* gradientAtPoint(curve, location)
*
* Calculates the gradient to the curve at the given location, as a decimal between 0 and 1 inclusive.
*
* gradientAtPointAlongCurveFrom (curve, location)
*
* Calculates the gradient at the point on the given curve that is 'distance' units from location.
*
* nearestPointOnCurve(point, curve)
*
* Calculates the nearest point to the given point on the given curve. The return value of this is a JS object literal, containing both the
*point's coordinates and also the 'location' of the point (see above), for example: { point:{x:551,y:150}, location:0.263365 }.
*
* pointOnCurve(curve, location)
*
* Calculates the coordinates of the point on the given Bezier curve at the given location.
*
* pointAlongCurveFrom(curve, location, distance)
*
* Calculates the coordinates of the point on the given curve that is 'distance' units from location. 'distance' should be in the same coordinate
* space as that used to construct the Bezier curve. For an HTML Canvas usage, for example, distance would be a measure of pixels.
*
* locationAlongCurveFrom(curve, location, distance)
*
* Calculates the location on the given curve that is 'distance' units from location. 'distance' should be in the same coordinate
* space as that used to construct the Bezier curve. For an HTML Canvas usage, for example, distance would be a measure of pixels.
*
* perpendicularToCurveAt(curve, location, length, distance)
*
* Calculates the perpendicular to the given curve at the given location. length is the length of the line you wish for (it will be centered
* on the point at 'location'). distance is optional, and allows you to specify a point along the path from the given location as the center of
* the perpendicular returned. The return value of this is an array of two points: [ {x:...,y:...}, {x:...,y:...} ].
*
*
*/
(function() {
if(typeof Math.sgn == "undefined") {
Math.sgn = function(x) { return x == 0 ? 0 : x > 0 ? 1 :-1; };
}
var Vectors = {
subtract : function(v1, v2) { return {x:v1.x - v2.x, y:v1.y - v2.y }; },
dotProduct : function(v1, v2) { return (v1.x * v2.x) + (v1.y * v2.y); },
square : function(v) { return Math.sqrt((v.x * v.x) + (v.y * v.y)); },
scale : function(v, s) { return {x:v.x * s, y:v.y * s }; }
},
maxRecursion = 64,
flatnessTolerance = Math.pow(2.0,-maxRecursion-1);
/**
* Calculates the distance that the point lies from the curve.
*
* @param point a point in the form {x:567, y:3342}
* @param curve a Bezier curve in the form [{x:..., y:...}, {x:..., y:...}, {x:..., y:...}, {x:..., y:...}]. note that this is currently
* hardcoded to assume cubiz beziers, but would be better off supporting any degree.
* @return a JS object literal containing location and distance, for example: {location:0.35, distance:10}. Location is analogous to the location
* argument you pass to the pointOnPath function: it is a ratio of distance travelled along the curve. Distance is the distance in pixels from
* the point to the curve.
*/
var _distanceFromCurve = function(point, curve) {
var candidates = [],
w = _convertToBezier(point, curve),
degree = curve.length - 1, higherDegree = (2 * degree) - 1,
numSolutions = _findRoots(w, higherDegree, candidates, 0),
v = Vectors.subtract(point, curve[0]), dist = Vectors.square(v), t = 0.0;
for (var i = 0; i < numSolutions; i++) {
v = Vectors.subtract(point, _bezier(curve, degree, candidates[i], null, null));
var newDist = Vectors.square(v);
if (newDist < dist) {
dist = newDist;
t = candidates[i];
}
}
v = Vectors.subtract(point, curve[degree]);
newDist = Vectors.square(v);
if (newDist < dist) {
dist = newDist;
t = 1.0;
}
return {location:t, distance:dist};
};
/**
* finds the nearest point on the curve to the given point.
*/
var _nearestPointOnCurve = function(point, curve) {
var td = _distanceFromCurve(point, curve);
return {point:_bezier(curve, curve.length - 1, td.location, null, null), location:td.location};
};
var _convertToBezier = function(point, curve) {
var degree = curve.length - 1, higherDegree = (2 * degree) - 1,
c = [], d = [], cdTable = [], w = [],
z = [ [1.0, 0.6, 0.3, 0.1], [0.4, 0.6, 0.6, 0.4], [0.1, 0.3, 0.6, 1.0] ];
for (var i = 0; i <= degree; i++) c[i] = Vectors.subtract(curve[i], point);
for (var i = 0; i <= degree - 1; i++) {
d[i] = Vectors.subtract(curve[i+1], curve[i]);
d[i] = Vectors.scale(d[i], 3.0);
}
for (var row = 0; row <= degree - 1; row++) {
for (var column = 0; column <= degree; column++) {
if (!cdTable[row]) cdTable[row] = [];
cdTable[row][column] = Vectors.dotProduct(d[row], c[column]);
}
}
for (i = 0; i <= higherDegree; i++) {
if (!w[i]) w[i] = [];
w[i].y = 0.0;
w[i].x = parseFloat(i) / higherDegree;
}
var n = degree, m = degree-1;
for (var k = 0; k <= n + m; k++) {
var lb = Math.max(0, k - m),
ub = Math.min(k, n);
for (i = lb; i <= ub; i++) {
j = k - i;
w[i+j].y += cdTable[j][i] * z[j][i];
}
}
return w;
};
/**
* counts how many roots there are.
*/
var _findRoots = function(w, degree, t, depth) {
var left = [], right = [],
left_count, right_count,
left_t = [], right_t = [];
switch (_getCrossingCount(w, degree)) {
case 0 : {
return 0;
}
case 1 : {
if (depth >= maxRecursion) {
t[0] = (w[0].x + w[degree].x) / 2.0;
return 1;
}
if (_isFlatEnough(w, degree)) {
t[0] = _computeXIntercept(w, degree);
return 1;
}
break;
}
}
_bezier(w, degree, 0.5, left, right);
left_count = _findRoots(left, degree, left_t, depth+1);
right_count = _findRoots(right, degree, right_t, depth+1);
for (var i = 0; i < left_count; i++) t[i] = left_t[i];
for (var i = 0; i < right_count; i++) t[i+left_count] = right_t[i];
return (left_count+right_count);
};
var _getCrossingCount = function(curve, degree) {
var n_crossings = 0, sign, old_sign;
sign = old_sign = Math.sgn(curve[0].y);
for (var i = 1; i <= degree; i++) {
sign = Math.sgn(curve[i].y);
if (sign != old_sign) n_crossings++;
old_sign = sign;
}
return n_crossings;
};
var _isFlatEnough = function(curve, degree) {
var error,
intercept_1, intercept_2, left_intercept, right_intercept,
a, b, c, det, dInv, a1, b1, c1, a2, b2, c2;
a = curve[0].y - curve[degree].y;
b = curve[degree].x - curve[0].x;
c = curve[0].x * curve[degree].y - curve[degree].x * curve[0].y;
var max_distance_above = max_distance_below = 0.0;
for (var i = 1; i < degree; i++) {
var value = a * curve[i].x + b * curve[i].y + c;
if (value > max_distance_above)
max_distance_above = value;
else if (value < max_distance_below)
max_distance_below = value;
}
a1 = 0.0; b1 = 1.0; c1 = 0.0; a2 = a; b2 = b;
c2 = c - max_distance_above;
det = a1 * b2 - a2 * b1;
dInv = 1.0/det;
intercept_1 = (b1 * c2 - b2 * c1) * dInv;
a2 = a; b2 = b; c2 = c - max_distance_below;
det = a1 * b2 - a2 * b1;
dInv = 1.0/det;
intercept_2 = (b1 * c2 - b2 * c1) * dInv;
left_intercept = Math.min(intercept_1, intercept_2);
right_intercept = Math.max(intercept_1, intercept_2);
error = right_intercept - left_intercept;
return (error < flatnessTolerance)? 1 : 0;
};
var _computeXIntercept = function(curve, degree) {
var XLK = 1.0, YLK = 0.0,
XNM = curve[degree].x - curve[0].x, YNM = curve[degree].y - curve[0].y,
XMK = curve[0].x - 0.0, YMK = curve[0].y - 0.0,
det = XNM*YLK - YNM*XLK, detInv = 1.0/det,
S = (XNM*YMK - YNM*XMK) * detInv;
return 0.0 + XLK * S;
};
var _bezier = function(curve, degree, t, left, right) {
var temp = [[]];
for (var j =0; j <= degree; j++) temp[0][j] = curve[j];
for (var i = 1; i <= degree; i++) {
for (var j =0 ; j <= degree - i; j++) {
if (!temp[i]) temp[i] = [];
if (!temp[i][j]) temp[i][j] = {};
temp[i][j].x = (1.0 - t) * temp[i-1][j].x + t * temp[i-1][j+1].x;
temp[i][j].y = (1.0 - t) * temp[i-1][j].y + t * temp[i-1][j+1].y;
}
}
if (left != null)
for (j = 0; j <= degree; j++) left[j] = temp[j][0];
if (right != null)
for (j = 0; j <= degree; j++) right[j] = temp[degree-j][j];
return (temp[degree][0]);
};
var _curveFunctionCache = {};
var _getCurveFunctions = function(order) {
var fns = _curveFunctionCache[order];
if (!fns) {
fns = [];
var f_term = function() { return function(t) { return Math.pow(t, order); }; },
l_term = function() { return function(t) { return Math.pow((1-t), order); }; },
c_term = function(c) { return function(t) { return c; }; },
t_term = function() { return function(t) { return t; }; },
one_minus_t_term = function() { return function(t) { return 1-t; }; },
_termFunc = function(terms) {
return function(t) {
var p = 1;
for (var i = 0; i < terms.length; i++) p = p * terms[i](t);
return p;
};
};
fns.push(new f_term()); // first is t to the power of the curve order
for (var i = 1; i < order; i++) {
var terms = [new c_term(order)];
for (var j = 0 ; j < (order - i); j++) terms.push(new t_term());
for (var j = 0 ; j < i; j++) terms.push(new one_minus_t_term());
fns.push(new _termFunc(terms));
}
fns.push(new l_term()); // last is (1-t) to the power of the curve order
_curveFunctionCache[order] = fns;
}
return fns;
};
/**
* calculates a point on the curve, for a Bezier of arbitrary order.
* @param curve an array of control points, eg [{x:10,y:20}, {x:50,y:50}, {x:100,y:100}, {x:120,y:100}]. For a cubic bezier this should have four points.
* @param location a decimal indicating the distance along the curve the point should be located at. this is the distance along the curve as it travels, taking the way it bends into account. should be a number from 0 to 1, inclusive.
*/
var _pointOnPath = function(curve, location) {
var cc = _getCurveFunctions(curve.length - 1),
_x = 0, _y = 0;
for (var i = 0; i < curve.length ; i++) {
_x = _x + (curve[i].x * cc[i](location));
_y = _y + (curve[i].y * cc[i](location));
}
return {x:_x, y:_y};
};
var _dist = function(p1,p2) {
return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
};
/**
* finds the point that is 'distance' along the path from 'location'. this method returns both the x,y location of the point and also
* its 'location' (proportion of travel along the path); the method below - _pointAlongPathFrom - calls this method and just returns the
* point.
*/
var _pointAlongPath = function(curve, location, distance) {
var prev = _pointOnPath(curve, location),
tally = 0,
curLoc = location,
direction = distance > 0 ? 1 : -1,
cur = null;
while (tally < Math.abs(distance)) {
curLoc += (0.005 * direction);
cur = _pointOnPath(curve, curLoc);
tally += _dist(cur, prev);
prev = cur;
}
return {point:cur, location:curLoc};
};
var _length = function(curve) {
var prev = _pointOnPath(curve, 0),
tally = 0,
curLoc = 0,
direction = 1,
cur = null;
while (curLoc < 1) {
curLoc += (0.005 * direction);
cur = _pointOnPath(curve, curLoc);
tally += _dist(cur, prev);
prev = cur;
}
return tally;
};
/**
* finds the point that is 'distance' along the path from 'location'.
*/
var _pointAlongPathFrom = function(curve, location, distance) {
return _pointAlongPath(curve, location, distance).point;
};
/**
* finds the location that is 'distance' along the path from 'location'.
*/
var _locationAlongPathFrom = function(curve, location, distance) {
return _pointAlongPath(curve, location, distance).location;
};
/**
* returns the gradient of the curve at the given location, which is a decimal between 0 and 1 inclusive.
*
* thanks // http://bimixual.org/AnimationLibrary/beziertangents.html
*/
var _gradientAtPoint = function(curve, location) {
var p1 = _pointOnPath(curve, location),
p2 = _pointOnPath(curve.slice(0, curve.length - 1), location),
dy = p2.y - p1.y, dx = p2.x - p1.x;
return dy == 0 ? Infinity : Math.atan(dy / dx);
};
/**
returns the gradient of the curve at the point which is 'distance' from the given location.
if this point is greater than location 1, the gradient at location 1 is returned.
if this point is less than location 0, the gradient at location 0 is returned.
*/
var _gradientAtPointAlongPathFrom = function(curve, location, distance) {
var p = _pointAlongPath(curve, location, distance);
if (p.location > 1) p.location = 1;
if (p.location < 0) p.location = 0;
return _gradientAtPoint(curve, p.location);
};
/**
* calculates a line that is 'length' pixels long, perpendicular to, and centered on, the path at 'distance' pixels from the given location.
* if distance is not supplied, the perpendicular for the given location is computed (ie. we set distance to zero).
*/
var _perpendicularToPathAt = function(curve, location, length, distance) {
distance = distance == null ? 0 : distance;
var p = _pointAlongPath(curve, location, distance),
m = _gradientAtPoint(curve, p.location),
_theta2 = Math.atan(-1 / m),
y = length / 2 * Math.sin(_theta2),
x = length / 2 * Math.cos(_theta2);
return [{x:p.point.x + x, y:p.point.y + y}, {x:p.point.x - x, y:p.point.y - y}];
};
var jsBezier = window.jsBezier = {
distanceFromCurve : _distanceFromCurve,
gradientAtPoint : _gradientAtPoint,
gradientAtPointAlongCurveFrom : _gradientAtPointAlongPathFrom,
nearestPointOnCurve : _nearestPointOnCurve,
pointOnCurve : _pointOnPath,
pointAlongCurveFrom : _pointAlongPathFrom,
perpendicularToCurveAt : _perpendicularToPathAt,
locationAlongCurveFrom:_locationAlongPathFrom,
getLength:_length
};
})();
ui/lib/jsPlumb/jquery.jsPlumb.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the jQuery adapter.
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
/*
* the library specific functions, such as find offset, get id, get attribute, extend etc.
* the full list is:
*
* addClass adds a class to the given element
* animate calls the underlying library's animate functionality
* appendElement appends a child element to a parent element.
* bind binds some event to an element
* dragEvents a dictionary of event names
* extend extend some js object with another. probably not overly necessary; jsPlumb could just do this internally.
* getAttribute gets some attribute from an element
* getDragObject gets the object that is being dragged, by extracting it from the arguments passed to a drag callback
* getDragScope gets the drag scope for a given element.
* getDropScope gets the drop scope for a given element.
* getElementObject turns an id or dom element into an element object of the underlying library's type.
* getOffset gets an element's offset
* getOriginalEvent gets the original browser event from some wrapper event
* getPageXY gets the page event's xy location.
* getParent gets the parent of some element.
* getScrollLeft gets an element's scroll left. TODO: is this actually used? will it be?
* getScrollTop gets an element's scroll top. TODO: is this actually used? will it be?
* getSize gets an element's size.
* getUIPosition gets the position of some element that is currently being dragged, by extracting it from the arguments passed to a drag callback.
* hasClass returns whether or not the given element has the given class.
* initDraggable initializes an element to be draggable
* initDroppable initializes an element to be droppable
* isDragSupported returns whether or not drag is supported for some element.
* isDropSupported returns whether or not drop is supported for some element.
* removeClass removes a class from a given element.
* removeElement removes some element completely from the DOM.
* setAttribute sets an attribute on some element.
* setDraggable sets whether or not some element should be draggable.
* setDragScope sets the drag scope for a given element.
* setOffset sets the offset of some element.
* trigger triggers some event on an element.
* unbind unbinds some listener from some element.
*/
(function($) {
//var getBoundingClientRectSupported = "getBoundingClientRect" in document.documentElement;
jsPlumb.CurrentLibrary = {
/**
* adds the given class to the element object.
*/
addClass : function(el, clazz) {
el = jsPlumb.CurrentLibrary.getElementObject(el);
try {
if (el[0].className.constructor == SVGAnimatedString) {
jsPlumbUtil.svg.addClass(el[0], clazz);
}
}
catch (e) {
// SVGAnimatedString not supported; no problem.
}
try {
el.addClass(clazz);
}
catch (e) {
// you probably have jQuery 1.9 and Firefox.
}
},
/**
* animates the given element.
*/
animate : function(el, properties, options) {
el.animate(properties, options);
},
/**
* appends the given child to the given parent.
*/
appendElement : function(child, parent) {
jsPlumb.CurrentLibrary.getElementObject(parent).append(child);
},
/**
* executes an ajax call.
*/
ajax : function(params) {
params = params || {};
params.type = params.type || "get";
$.ajax(params);
},
/**
* event binding wrapper. it just so happens that jQuery uses 'bind' also. yui3, for example,
* uses 'on'.
*/
bind : function(el, event, callback) {
el = jsPlumb.CurrentLibrary.getElementObject(el);
el.bind(event, callback);
},
/**
* mapping of drag events for jQuery
*/
dragEvents : {
'start':'start', 'stop':'stop', 'drag':'drag', 'step':'step',
'over':'over', 'out':'out', 'drop':'drop', 'complete':'complete'
},
/**
* wrapper around the library's 'extend' functionality (which it hopefully has.
* otherwise you'll have to do it yourself). perhaps jsPlumb could do this for you
* instead. it's not like its hard.
*/
extend : function(o1, o2) {
return $.extend(o1, o2);
},
/**
* gets the named attribute from the given element object.
*/
getAttribute : function(el, attName) {
return el.attr(attName);
},
getClientXY : function(eventObject) {
return [eventObject.clientX, eventObject.clientY];
},
/**
* takes the args passed to an event function and returns you an object representing that which is being dragged.
*/
getDragObject : function(eventArgs) {
return eventArgs[1].draggable || eventArgs[1].helper;
},
getDragScope : function(el) {
return el.draggable("option", "scope");
},
getDropEvent : function(args) {
return args[0];
},
getDropScope : function(el) {
return el.droppable("option", "scope");
},
/**
* gets a DOM element from the given input, which might be a string (in which case we just do document.getElementById),
* a selector (in which case we return el[0]), or a DOM element already (we assume this if it's not either of the other
* two cases). this is the opposite of getElementObject below.
*/
getDOMElement : function(el) {
if (typeof(el) == "string") return document.getElementById(el);
else if (el.context || el.length != null) return el[0];
else return el;
},
/**
* gets an "element object" from the given input. this means an object that is used by the
* underlying library on which jsPlumb is running. 'el' may already be one of these objects,
* in which case it is returned as-is. otherwise, 'el' is a String, the library's lookup
* function is used to find the element, using the given String as the element's id.
*
*/
getElementObject : function(el) {
return typeof(el) == "string" ? $("#" + el) : $(el);
},
/**
* gets the offset for the element object. this should return a js object like this:
*
* { left:xxx, top: xxx }
*/
getOffset : function(el) {
return el.offset();
},
getOriginalEvent : function(e) {
return e.originalEvent;
},
getPageXY : function(eventObject) {
return [eventObject.pageX, eventObject.pageY];
},
getParent : function(el) {
return jsPlumb.CurrentLibrary.getElementObject(el).parent();
},
getScrollLeft : function(el) {
return el.scrollLeft();
},
getScrollTop : function(el) {
return el.scrollTop();
},
getSelector : function(context, spec) {
if (arguments.length == 2)
return jsPlumb.CurrentLibrary.getElementObject(context).find(spec);
else
return $(context);
},
/**
* gets the size for the element object, in an array : [ width, height ].
*/
getSize : function(el) {
return [el.outerWidth(), el.outerHeight()];
},
getTagName : function(el) {
var e = jsPlumb.CurrentLibrary.getElementObject(el);
return e.length > 0 ? e[0].tagName : null;
},
/**
* takes the args passed to an event function and returns you an object that gives the
* position of the object being moved, as a js object with the same params as the result of
* getOffset, ie: { left: xxx, top: xxx }.
*
* different libraries have different signatures for their event callbacks.
* see getDragObject as well
*/
getUIPosition : function(eventArgs, zoom) {
zoom = zoom || 1;
// this code is a workaround for the case that the element being dragged has a margin set on it. jquery UI passes
// in the wrong offset if the element has a margin (it doesn't take the margin into account). the getBoundingClientRect
// method, which is in pretty much all browsers now, reports the right numbers. but it introduces a noticeable lag, which
// i don't like.
/*if ( getBoundingClientRectSupported ) {
var r = eventArgs[1].helper[0].getBoundingClientRect();
return { left : r.left, top: r.top };
} else {*/
if (eventArgs.length == 1) {
ret = { left: eventArgs[0].pageX, top:eventArgs[0].pageY };
}
else {
var ui = eventArgs[1],
_offset = ui.offset;
ret = _offset || ui.absolutePosition;
// adjust ui position to account for zoom, because jquery ui does not do this.
ui.position.left /= zoom;
ui.position.top /= zoom;
}
return { left:ret.left / zoom, top: ret.top / zoom };
},
hasClass : function(el, clazz) {
return el.hasClass(clazz);
},
/**
* initialises the given element to be draggable.
*/
initDraggable : function(el, options, isPlumbedComponent) {
options = options || {};
// remove helper directive if present and no override
if (!options.doNotRemoveHelper)
options.helper = null;
if (isPlumbedComponent)
options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
el.draggable(options);
},
/**
* initialises the given element to be droppable.
*/
initDroppable : function(el, options) {
options['scope'] = options['scope'] || jsPlumb.Defaults.Scope;
el.droppable(options);
},
isAlreadyDraggable : function(el) {
el = jsPlumb.CurrentLibrary.getElementObject(el);
return el.hasClass("ui-draggable");
},
/**
* returns whether or not drag is supported (by the library, not whether or not it is disabled) for the given element.
*/
isDragSupported : function(el, options) {
return el.draggable;
},
/**
* returns whether or not drop is supported (by the library, not whether or not it is disabled) for the given element.
*/
isDropSupported : function(el, options) {
return el.droppable;
},
/**
* removes the given class from the element object.
*/
removeClass : function(el, clazz) {
el = jsPlumb.CurrentLibrary.getElementObject(el);
try {
if (el[0].className.constructor == SVGAnimatedString) {
jsPlumbUtil.svg.removeClass(el[0], clazz);
return;
}
}
catch (e) {
// SVGAnimatedString not supported; no problem.
}
el.removeClass(clazz);
},
removeElement : function(element) {
jsPlumb.CurrentLibrary.getElementObject(element).remove();
},
/**
* sets the named attribute on the given element object.
*/
setAttribute : function(el, attName, attValue) {
el.attr(attName, attValue);
},
/**
* sets the draggable state for the given element
*/
setDraggable : function(el, draggable) {
el.draggable("option", "disabled", !draggable);
},
/**
* sets the drag scope. probably time for a setDragOption method (roll this and the one above together)
* @param el
* @param scope
*/
setDragScope : function(el, scope) {
el.draggable("option", "scope", scope);
},
setOffset : function(el, o) {
jsPlumb.CurrentLibrary.getElementObject(el).offset(o);
},
/**
* note that jquery ignores the name of the event you wanted to trigger, and figures it out for itself.
* the other libraries do not. yui, in fact, cannot even pass an original event. we have to pull out stuff
* from the originalEvent to put in an options object for YUI.
* @param el
* @param event
* @param originalEvent
*/
trigger : function(el, event, originalEvent) {
//originalEvent.stopPropagation();
//jsPlumb.CurrentLibrary.getElementObject(el).trigger(originalEvent);
var h = jQuery._data(jsPlumb.CurrentLibrary.getElementObject(el)[0], "handle");
h(originalEvent);
//originalEvent.stopPropagation();
},
/**
* event unbinding wrapper. it just so happens that jQuery uses 'unbind' also. yui3, for example,
* uses..something else.
*/
unbind : function(el, event, callback) {
el = jsPlumb.CurrentLibrary.getElementObject(el);
el.unbind(event, callback);
}
};
$(document).ready(jsPlumb.init);
})(jQuery);
ui/lib/jsPlumb/jsPlumb-1.4.0-tests.js 0 → 100644
View file @ e34796c6
This source diff could not be displayed because it is too large. You can view the blob instead.
ui/lib/jsPlumb/jsPlumb-anchors.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the code for creating and manipulating anchors.
*
* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt@gmail.com)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
//
// manages anchors for all elements.
//
jsPlumb.AnchorManager = function(params) {
var _amEndpoints = {},
continuousAnchors = {},
continuousAnchorLocations = {},
userDefinedContinuousAnchorLocations = {},
continuousAnchorOrientations = {},
Orientation = { HORIZONTAL : "horizontal", VERTICAL : "vertical", DIAGONAL : "diagonal", IDENTITY:"identity" },
connectionsByElementId = {},
self = this,
anchorLists = {},
jsPlumbInstance = params.jsPlumbInstance,
jpcl = jsPlumb.CurrentLibrary,
floatingConnections = {},
// TODO this functions uses a crude method of determining orientation between two elements.
// 'diagonal' should be chosen when the angle of the line between the two centers is around
// one of 45, 135, 225 and 315 degrees. maybe +- 15 degrees.
// used by AnchorManager.redraw
calculateOrientation = function(sourceId, targetId, sd, td, sourceAnchor, targetAnchor) {
if (sourceId === targetId) return {
orientation:Orientation.IDENTITY,
a:["top", "top"]
};
var theta = Math.atan2((td.centery - sd.centery) , (td.centerx - sd.centerx)),
theta2 = Math.atan2((sd.centery - td.centery) , (sd.centerx - td.centerx)),
h = ((sd.left <= td.left && sd.right >= td.left) || (sd.left <= td.right && sd.right >= td.right) ||
(sd.left <= td.left && sd.right >= td.right) || (td.left <= sd.left && td.right >= sd.right)),
v = ((sd.top <= td.top && sd.bottom >= td.top) || (sd.top <= td.bottom && sd.bottom >= td.bottom) ||
(sd.top <= td.top && sd.bottom >= td.bottom) || (td.top <= sd.top && td.bottom >= sd.bottom)),
possiblyTranslateEdges = function(edges) {
// this function checks to see if either anchor is Continuous, and if so, runs the suggested edge
// through the anchor: Continuous anchors can say which faces they support, and they get to choose
// whether a certain face is honoured, or, if not, which face to replace it with. the behaviour when
// choosing an alternate face is to try for the opposite face first, then the next one clockwise, and then
// the opposite of that one.
return [
sourceAnchor.isContinuous ? sourceAnchor.verifyEdge(edges[0]) : edges[0],
targetAnchor.isContinuous ? targetAnchor.verifyEdge(edges[1]) : edges[1]
];
},
out = {
orientation:Orientation.DIAGONAL,
theta:theta,
theta2:theta2
};
if (! (h || v)) {
if (td.left > sd.left && td.top > sd.top)
out.a = ["right", "top"];
else if (td.left > sd.left && sd.top > td.top)
out.a = [ "top", "left"];
else if (td.left < sd.left && td.top < sd.top)
out.a = [ "top", "right"];
else if (td.left < sd.left && td.top > sd.top)
out.a = ["left", "top" ];
}
else if (h) {
out.orientation = Orientation.HORIZONTAL;
out.a = sd.top < td.top ? ["bottom", "top"] : ["top", "bottom"];
}
else {
out.orientation = Orientation.VERTICAL;
out.a = sd.left < td.left ? ["right", "left"] : ["left", "right"];
}
out.a = possiblyTranslateEdges(out.a);
return out;
},
// used by placeAnchors function
placeAnchorsOnLine = function(desc, elementDimensions, elementPosition,
connections, horizontal, otherMultiplier, reverse) {
var a = [], step = elementDimensions[horizontal ? 0 : 1] / (connections.length + 1);
for (var i = 0; i < connections.length; i++) {
var val = (i + 1) * step, other = otherMultiplier * elementDimensions[horizontal ? 1 : 0];
if (reverse)
val = elementDimensions[horizontal ? 0 : 1] - val;
var dx = (horizontal ? val : other), x = elementPosition[0] + dx, xp = dx / elementDimensions[0],
dy = (horizontal ? other : val), y = elementPosition[1] + dy, yp = dy / elementDimensions[1];
a.push([ x, y, xp, yp, connections[i][1], connections[i][2] ]);
}
return a;
},
// used by edgeSortFunctions
standardEdgeSort = function(a, b) { return a[0] > b[0] ? 1 : -1 },
// used by edgeSortFunctions
currySort = function(reverseAngles) {
return function(a,b) {
var r = true;
if (reverseAngles) {
if (a[0][0] < b[0][0])
r = true;
else
r = a[0][1] > b[0][1];
}
else {
if (a[0][0] > b[0][0])
r= true;
else
r =a[0][1] > b[0][1];
}
return r === false ? -1 : 1;
};
},
// used by edgeSortFunctions
leftSort = function(a,b) {
// first get adjusted values
var p1 = a[0][0] < 0 ? -Math.PI - a[0][0] : Math.PI - a[0][0],
p2 = b[0][0] < 0 ? -Math.PI - b[0][0] : Math.PI - b[0][0];
if (p1 > p2) return 1;
else return a[0][1] > b[0][1] ? 1 : -1;
},
// used by placeAnchors
edgeSortFunctions = {
"top":standardEdgeSort,
"right":currySort(true),
"bottom":currySort(true),
"left":leftSort
},
// used by placeAnchors
_sortHelper = function(_array, _fn) {
return _array.sort(_fn);
},
// used by AnchorManager.redraw
placeAnchors = function(elementId, _anchorLists) {
var cd = jsPlumbInstance.getCachedData(elementId), sS = cd.s, sO = cd.o,
placeSomeAnchors = function(desc, elementDimensions, elementPosition, unsortedConnections, isHorizontal, otherMultiplier, orientation) {
if (unsortedConnections.length > 0) {
var sc = _sortHelper(unsortedConnections, edgeSortFunctions[desc]), // puts them in order based on the target element's pos on screen
reverse = desc === "right" || desc === "top",
anchors = placeAnchorsOnLine(desc, elementDimensions,
elementPosition, sc,
isHorizontal, otherMultiplier, reverse );
// takes a computed anchor position and adjusts it for parent offset and scroll, then stores it.
var _setAnchorLocation = function(endpoint, anchorPos) {
var a = jsPlumbInstance.adjustForParentOffsetAndScroll([anchorPos[0], anchorPos[1]], endpoint.canvas);
continuousAnchorLocations[endpoint.id] = [ a[0], a[1], anchorPos[2], anchorPos[3] ];
continuousAnchorOrientations[endpoint.id] = orientation;
};
for (var i = 0; i < anchors.length; i++) {
var c = anchors[i][4], weAreSource = c.endpoints[0].elementId === elementId, weAreTarget = c.endpoints[1].elementId === elementId;
if (weAreSource)
_setAnchorLocation(c.endpoints[0], anchors[i]);
else if (weAreTarget)
_setAnchorLocation(c.endpoints[1], anchors[i]);
}
}
};
placeSomeAnchors("bottom", sS, [sO.left,sO.top], _anchorLists.bottom, true, 1, [0,1]);
placeSomeAnchors("top", sS, [sO.left,sO.top], _anchorLists.top, true, 0, [0,-1]);
placeSomeAnchors("left", sS, [sO.left,sO.top], _anchorLists.left, false, 0, [-1,0]);
placeSomeAnchors("right", sS, [sO.left,sO.top], _anchorLists.right, false, 1, [1,0]);
};
this.reset = function() {
_amEndpoints = {};
connectionsByElementId = {};
anchorLists = {};
};
this.addFloatingConnection = function(key, conn) {
floatingConnections[key] = conn;
};
this.removeFloatingConnection = function(key) {
delete floatingConnections[key];
};
this.newConnection = function(conn) {
var sourceId = conn.sourceId, targetId = conn.targetId,
ep = conn.endpoints,
doRegisterTarget = true,
registerConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) {
if ((sourceId == targetId) && otherAnchor.isContinuous){
// remove the target endpoint's canvas. we dont need it.
jpcl.removeElement(ep[1].canvas);
doRegisterTarget = false;
}
jsPlumbUtil.addToList(connectionsByElementId, elId, [c, otherEndpoint, otherAnchor.constructor == jsPlumb.DynamicAnchor]);
};
registerConnection(0, ep[0], ep[0].anchor, targetId, conn);
if (doRegisterTarget)
registerConnection(1, ep[1], ep[1].anchor, sourceId, conn);
};
this.connectionDetached = function(connInfo) {
var connection = connInfo.connection || connInfo,
sourceId = connection.sourceId,
targetId = connection.targetId,
ep = connection.endpoints,
removeConnection = function(otherIndex, otherEndpoint, otherAnchor, elId, c) {
if (otherAnchor.constructor == jsPlumb.FloatingAnchor) {
// no-op
}
else {
jsPlumbUtil.removeWithFunction(connectionsByElementId[elId], function(_c) {
return _c[0].id == c.id;
});
}
};
removeConnection(1, ep[1], ep[1].anchor, sourceId, connection);
removeConnection(0, ep[0], ep[0].anchor, targetId, connection);
// remove from anchorLists
var sEl = connection.sourceId,
tEl = connection.targetId,
sE = connection.endpoints[0].id,
tE = connection.endpoints[1].id,
_remove = function(list, eId) {
if (list) { // transient anchors dont get entries in this list.
var f = function(e) { return e[4] == eId; };
jsPlumbUtil.removeWithFunction(list["top"], f);
jsPlumbUtil.removeWithFunction(list["left"], f);
jsPlumbUtil.removeWithFunction(list["bottom"], f);
jsPlumbUtil.removeWithFunction(list["right"], f);
}
};
_remove(anchorLists[sEl], sE);
_remove(anchorLists[tEl], tE);
self.redraw(sEl);
self.redraw(tEl);
};
this.add = function(endpoint, elementId) {
jsPlumbUtil.addToList(_amEndpoints, elementId, endpoint);
};
this.changeId = function(oldId, newId) {
connectionsByElementId[newId] = connectionsByElementId[oldId];
_amEndpoints[newId] = _amEndpoints[oldId];
delete connectionsByElementId[oldId];
delete _amEndpoints[oldId];
};
this.getConnectionsFor = function(elementId) {
return connectionsByElementId[elementId] || [];
};
this.getEndpointsFor = function(elementId) {
return _amEndpoints[elementId] || [];
};
this.deleteEndpoint = function(endpoint) {
jsPlumbUtil.removeWithFunction(_amEndpoints[endpoint.elementId], function(e) {
return e.id == endpoint.id;
});
};
this.clearFor = function(elementId) {
delete _amEndpoints[elementId];
_amEndpoints[elementId] = [];
};
// updates the given anchor list by either updating an existing anchor's info, or adding it. this function
// also removes the anchor from its previous list, if the edge it is on has changed.
// all connections found along the way (those that are connected to one of the faces this function
// operates on) are added to the connsToPaint list, as are their endpoints. in this way we know to repaint
// them wthout having to calculate anything else about them.
var _updateAnchorList = function(lists, theta, order, conn, aBoolean, otherElId, idx, reverse, edgeId, elId, connsToPaint, endpointsToPaint) {
// first try to find the exact match, but keep track of the first index of a matching element id along the way.s
var exactIdx = -1,
firstMatchingElIdx = -1,
endpoint = conn.endpoints[idx],
endpointId = endpoint.id,
oIdx = [1,0][idx],
values = [ [ theta, order ], conn, aBoolean, otherElId, endpointId ],
listToAddTo = lists[edgeId],
listToRemoveFrom = endpoint._continuousAnchorEdge ? lists[endpoint._continuousAnchorEdge] : null;
if (listToRemoveFrom) {
var rIdx = jsPlumbUtil.findWithFunction(listToRemoveFrom, function(e) { return e[4] == endpointId });
if (rIdx != -1) {
listToRemoveFrom.splice(rIdx, 1);
// get all connections from this list
for (var i = 0; i < listToRemoveFrom.length; i++) {
jsPlumbUtil.addWithFunction(connsToPaint, listToRemoveFrom[i][1], function(c) { return c.id == listToRemoveFrom[i][1].id });
jsPlumbUtil.addWithFunction(endpointsToPaint, listToRemoveFrom[i][1].endpoints[idx], function(e) { return e.id == listToRemoveFrom[i][1].endpoints[idx].id });
}
}
}
for (var i = 0; i < listToAddTo.length; i++) {
if (params.idx == 1 && listToAddTo[i][3] === otherElId && firstMatchingElIdx == -1)
firstMatchingElIdx = i;
jsPlumbUtil.addWithFunction(connsToPaint, listToAddTo[i][1], function(c) { return c.id == listToAddTo[i][1].id });
jsPlumbUtil.addWithFunction(endpointsToPaint, listToAddTo[i][1].endpoints[idx], function(e) { return e.id == listToAddTo[i][1].endpoints[idx].id });
}
if (exactIdx != -1) {
listToAddTo[exactIdx] = values;
}
else {
var insertIdx = reverse ? firstMatchingElIdx != -1 ? firstMatchingElIdx : 0 : listToAddTo.length; // of course we will get this from having looked through the array shortly.
listToAddTo.splice(insertIdx, 0, values);
}
// store this for next time.
endpoint._continuousAnchorEdge = edgeId;
};
this.redraw = function(elementId, ui, timestamp, offsetToUI, clearEdits) {
if (!jsPlumbInstance.isSuspendDrawing()) {
// get all the endpoints for this element
var ep = _amEndpoints[elementId] || [],
endpointConnections = connectionsByElementId[elementId] || [],
connectionsToPaint = [],
endpointsToPaint = [],
anchorsToUpdate = [];
timestamp = timestamp || jsPlumbInstance.timestamp();
// offsetToUI are values that would have been calculated in the dragManager when registering
// an endpoint for an element that had a parent (somewhere in the hierarchy) that had been
// registered as draggable.
offsetToUI = offsetToUI || {left:0, top:0};
if (ui) {
ui = {
left:ui.left + offsetToUI.left,
top:ui.top + offsetToUI.top
}
}
// valid for one paint cycle.
var myOffset = jsPlumbInstance.updateOffset( { elId : elementId, offset : ui, recalc : false, timestamp : timestamp }),
myWH = jsPlumbInstance.getSize(elementId),
orientationCache = {};
// actually, first we should compute the orientation of this element to all other elements to which
// this element is connected with a continuous anchor (whether both ends of the connection have
// a continuous anchor or just one)
for (var i = 0; i < endpointConnections.length; i++) {
var conn = endpointConnections[i][0],
sourceId = conn.sourceId,
targetId = conn.targetId,
sourceContinuous = conn.endpoints[0].anchor.isContinuous,
targetContinuous = conn.endpoints[1].anchor.isContinuous;
if (sourceContinuous || targetContinuous) {
var oKey = sourceId + "_" + targetId,
oKey2 = targetId + "_" + sourceId,
o = orientationCache[oKey],
oIdx = conn.sourceId == elementId ? 1 : 0;
if (sourceContinuous && !anchorLists[sourceId]) anchorLists[sourceId] = { top:[], right:[], bottom:[], left:[] };
if (targetContinuous && !anchorLists[targetId]) anchorLists[targetId] = { top:[], right:[], bottom:[], left:[] };
if (elementId != targetId) jsPlumbInstance.updateOffset( { elId : targetId, timestamp : timestamp });
if (elementId != sourceId) jsPlumbInstance.updateOffset( { elId : sourceId, timestamp : timestamp });
var td = jsPlumbInstance.getCachedData(targetId),
sd = jsPlumbInstance.getCachedData(sourceId);
if (targetId == sourceId && (sourceContinuous || targetContinuous)) {
// here we may want to improve this by somehow determining the face we'd like
// to put the connector on. ideally, when drawing, the face should be calculated
// by determining which face is closest to the point at which the mouse button
// was released. for now, we're putting it on the top face.
_updateAnchorList(
anchorLists[sourceId],
-Math.PI / 2,
0,
conn,
false,
targetId,
0, false, "top", sourceId, connectionsToPaint, endpointsToPaint);
}
else {
if (!o) {
o = calculateOrientation(sourceId, targetId, sd.o, td.o, conn.endpoints[0].anchor, conn.endpoints[1].anchor);
orientationCache[oKey] = o;
// this would be a performance enhancement, but the computed angles need to be clamped to
//the (-PI/2 -> PI/2) range in order for the sorting to work properly.
/* orientationCache[oKey2] = {
orientation:o.orientation,
a:[o.a[1], o.a[0]],
theta:o.theta + Math.PI,
theta2:o.theta2 + Math.PI
};*/
}
if (sourceContinuous) _updateAnchorList(anchorLists[sourceId], o.theta, 0, conn, false, targetId, 0, false, o.a[0], sourceId, connectionsToPaint, endpointsToPaint);
if (targetContinuous) _updateAnchorList(anchorLists[targetId], o.theta2, -1, conn, true, sourceId, 1, true, o.a[1], targetId, connectionsToPaint, endpointsToPaint);
}
if (sourceContinuous) jsPlumbUtil.addWithFunction(anchorsToUpdate, sourceId, function(a) { return a === sourceId; });
if (targetContinuous) jsPlumbUtil.addWithFunction(anchorsToUpdate, targetId, function(a) { return a === targetId; });
jsPlumbUtil.addWithFunction(connectionsToPaint, conn, function(c) { return c.id == conn.id; });
if ((sourceContinuous && oIdx == 0) || (targetContinuous && oIdx == 1))
jsPlumbUtil.addWithFunction(endpointsToPaint, conn.endpoints[oIdx], function(e) { return e.id == conn.endpoints[oIdx].id; });
}
}
// place Endpoints whose anchors are continuous but have no Connections
for (var i = 0; i < ep.length; i++) {
if (ep[i].connections.length == 0 && ep[i].anchor.isContinuous) {
if (!anchorLists[elementId]) anchorLists[elementId] = { top:[], right:[], bottom:[], left:[] };
_updateAnchorList(anchorLists[elementId], -Math.PI / 2, 0, {endpoints:[ep[i], ep[i]], paint:function(){}}, false, elementId, 0, false, "top", elementId, connectionsToPaint, endpointsToPaint)
jsPlumbUtil.addWithFunction(anchorsToUpdate, elementId, function(a) { return a === elementId; })
}
}
// now place all the continuous anchors we need to;
for (var i = 0; i < anchorsToUpdate.length; i++) {
placeAnchors(anchorsToUpdate[i], anchorLists[anchorsToUpdate[i]]);
}
// now that continuous anchors have been placed, paint all the endpoints for this element
// TODO performance: add the endpoint ids to a temp array, and then when iterating in the next
// loop, check that we didn't just paint that endpoint. we can probably shave off a few more milliseconds this way.
for (var i = 0; i < ep.length; i++) {
ep[i].paint( { timestamp : timestamp, offset : myOffset, dimensions : myWH });
}
// ... and any other endpoints we came across as a result of the continuous anchors.
for (var i = 0; i < endpointsToPaint.length; i++) {
var cd = jsPlumbInstance.getCachedData(endpointsToPaint[i].elementId);
endpointsToPaint[i].paint( { timestamp : timestamp, offset : cd, dimensions : cd.s });
}
// paint all the standard and "dynamic connections", which are connections whose other anchor is
// static and therefore does need to be recomputed; we make sure that happens only one time.
// TODO we could have compiled a list of these in the first pass through connections; might save some time.
for (var i = 0; i < endpointConnections.length; i++) {
var otherEndpoint = endpointConnections[i][1];
if (otherEndpoint.anchor.constructor == jsPlumb.DynamicAnchor) {
otherEndpoint.paint({ elementWithPrecedence:elementId });
jsPlumbUtil.addWithFunction(connectionsToPaint, endpointConnections[i][0], function(c) { return c.id == endpointConnections[i][0].id; });
// all the connections for the other endpoint now need to be repainted
for (var k = 0; k < otherEndpoint.connections.length; k++) {
if (otherEndpoint.connections[k] !== endpointConnections[i][0])
jsPlumbUtil.addWithFunction(connectionsToPaint, otherEndpoint.connections[k], function(c) { return c.id == otherEndpoint.connections[k].id; });
}
} else if (otherEndpoint.anchor.constructor == jsPlumb.Anchor) {
jsPlumbUtil.addWithFunction(connectionsToPaint, endpointConnections[i][0], function(c) { return c.id == endpointConnections[i][0].id; });
}
}
// paint current floating connection for this element, if there is one.
var fc = floatingConnections[elementId];
if (fc)
fc.paint({timestamp:timestamp, recalc:false, elId:elementId});
// paint all the connections
for (var i = 0; i < connectionsToPaint.length; i++) {
connectionsToPaint[i].paint({elId:elementId, timestamp:timestamp, recalc:false, clearEdits:clearEdits});
}
}
};
this.rehomeEndpoint = function(currentId, element) {
var eps = _amEndpoints[currentId] || [],
elementId = jsPlumbInstance.getId(element);
if (elementId !== currentId) {
for (var i = 0; i < eps.length; i++) {
self.add(eps[i], elementId);
}
eps.splice(0, eps.length);
}
};
var ContinuousAnchor = function(anchorParams) {
this.type = "Continuous";
this.isDynamic = true;
this.isContinuous = true;
var faces = anchorParams.faces || ["top", "right", "bottom", "left"],
clockwise = !(anchorParams.clockwise === false),
availableFaces = { },
opposites = { "top":"bottom", "right":"left","left":"right","bottom":"top" },
clockwiseOptions = { "top":"right", "right":"bottom","left":"top","bottom":"left" },
antiClockwiseOptions = { "top":"left", "right":"top","left":"bottom","bottom":"right" },
secondBest = clockwise ? clockwiseOptions : antiClockwiseOptions,
lastChoice = clockwise ? antiClockwiseOptions : clockwiseOptions;
for (var i = 0; i < faces.length; i++) { availableFaces[faces[i]] = true; }
// if the given edge is suported, returns it. otherwise looks for a substitute that _is_
// supported. if none supported we also return the request edge.
this.verifyEdge = function(edge) {
if (availableFaces[edge]) return edge;
else if (availableFaces[opposites[edge]]) return opposites[edge];
else if (availableFaces[secondBest[edge]]) return secondBest[edge];
else if (availableFaces[lastChoice[edge]]) return lastChoice[edge];
return edge; // we have to give them something.
};
this.compute = function(params) {
return userDefinedContinuousAnchorLocations[params.element.id] || continuousAnchorLocations[params.element.id] || [0,0];
};
this.getCurrentLocation = function(endpoint) {
return userDefinedContinuousAnchorLocations[endpoint.id] || continuousAnchorLocations[endpoint.id] || [0,0];
};
this.getOrientation = function(endpoint) {
return continuousAnchorOrientations[endpoint.id] || [0,0];
};
this.clearUserDefinedLocation = function() {
delete userDefinedContinuousAnchorLocations[anchorParams.elementId];
};
this.setUserDefinedLocation = function(loc) {
userDefinedContinuousAnchorLocations[anchorParams.elementId] = loc;
};
};
// continuous anchors
jsPlumbInstance.continuousAnchorFactory = {
get:function(params) {
var existing = continuousAnchors[params.elementId];
if (!existing) {
existing = new ContinuousAnchor(params);
continuousAnchors[params.elementId] = existing;
}
return existing;
}
};
};
/**
* Anchors model a position on some element at which an Endpoint may be located. They began as a first class citizen of jsPlumb, ie. a user
* was required to create these themselves, but over time this has been replaced by the concept of referring to them either by name (eg. "TopMiddle"),
* or by an array describing their coordinates (eg. [ 0, 0.5, 0, -1 ], which is the same as "TopMiddle"). jsPlumb now handles all of the
* creation of Anchors without user intervention.
*/
jsPlumb.Anchor = function(params) {
var self = this;
this.x = params.x || 0;
this.y = params.y || 0;
this.elementId = params.elementId;
var orientation = params.orientation || [ 0, 0 ],
jsPlumbInstance = params.jsPlumbInstance,
lastTimestamp = null, lastReturnValue = null, userDefinedLocation = null;
this.offsets = params.offsets || [ 0, 0 ];
self.timestamp = null;
this.compute = function(params) {
var xy = params.xy, wh = params.wh, element = params.element, timestamp = params.timestamp;
if(params.clearUserDefinedLocation)
userDefinedLocation = null;
if (timestamp && timestamp === self.timestamp)
return lastReturnValue;
if (userDefinedLocation != null) {
lastReturnValue = userDefinedLocation;
}
else {
lastReturnValue = [ xy[0] + (self.x * wh[0]) + self.offsets[0], xy[1] + (self.y * wh[1]) + self.offsets[1] ];
// adjust loc if there is an offsetParent
lastReturnValue = jsPlumbInstance.adjustForParentOffsetAndScroll(lastReturnValue, element.canvas);
}
self.timestamp = timestamp;
return lastReturnValue;
};
this.getOrientation = function(_endpoint) { return orientation; };
this.equals = function(anchor) {
if (!anchor) return false;
var ao = anchor.getOrientation();
var o = this.getOrientation();
return this.x == anchor.x && this.y == anchor.y
&& this.offsets[0] == anchor.offsets[0]
&& this.offsets[1] == anchor.offsets[1]
&& o[0] == ao[0] && o[1] == ao[1];
};
this.getCurrentLocation = function() { return lastReturnValue; };
this.getUserDefinedLocation = function() {
return userDefinedLocation;
};
this.setUserDefinedLocation = function(l) {
userDefinedLocation = l;
};
this.clearUserDefinedLocation = function() {
userDefinedLocation = null;
};
};
/**
* An Anchor that floats. its orientation is computed dynamically from
* its position relative to the anchor it is floating relative to. It is used when creating
* a connection through drag and drop.
*
* TODO FloatingAnchor could totally be refactored to extend Anchor just slightly.
*/
jsPlumb.FloatingAnchor = function(params) {
jsPlumb.Anchor.apply(this, arguments);
// this is the anchor that this floating anchor is referenced to for
// purposes of calculating the orientation.
var ref = params.reference,
jpcl = jsPlumb.CurrentLibrary,
jsPlumbInstance = params.jsPlumbInstance,
// the canvas this refers to.
refCanvas = params.referenceCanvas,
size = jpcl.getSize(jpcl.getElementObject(refCanvas)),
// these are used to store the current relative position of our
// anchor wrt the reference anchor. they only indicate
// direction, so have a value of 1 or -1 (or, very rarely, 0). these
// values are written by the compute method, and read
// by the getOrientation method.
xDir = 0, yDir = 0,
// temporary member used to store an orientation when the floating
// anchor is hovering over another anchor.
orientation = null,
_lastResult = null;
// set these to 0 each; they are used by certain types of connectors in the loopback case,
// when the connector is trying to clear the element it is on. but for floating anchor it's not
// very important.
this.x = 0; this.y = 0;
this.isFloating = true;
this.compute = function(params) {
var xy = params.xy, element = params.element,
result = [ xy[0] + (size[0] / 2), xy[1] + (size[1] / 2) ]; // return origin of the element. we may wish to improve this so that any object can be the drag proxy.
// adjust loc if there is an offsetParent
result = jsPlumbInstance.adjustForParentOffsetAndScroll(result, element.canvas);
_lastResult = result;
return result;
};
this.getOrientation = function(_endpoint) {
if (orientation) return orientation;
else {
var o = ref.getOrientation(_endpoint);
// here we take into account the orientation of the other
// anchor: if it declares zero for some direction, we declare zero too. this might not be the most awesome. perhaps we can come
// up with a better way. it's just so that the line we draw looks like it makes sense. maybe this wont make sense.
return [ Math.abs(o[0]) * xDir * -1,
Math.abs(o[1]) * yDir * -1 ];
}
};
/**
* notification the endpoint associated with this anchor is hovering
* over another anchor; we want to assume that anchor's orientation
* for the duration of the hover.
*/
this.over = function(anchor) {
orientation = anchor.getOrientation();
};
/**
* notification the endpoint associated with this anchor is no
* longer hovering over another anchor; we should resume calculating
* orientation as we normally do.
*/
this.out = function() { orientation = null; };
this.getCurrentLocation = function() { return _lastResult; };
};
/*
* A DynamicAnchor is an Anchor that contains a list of other Anchors, which it cycles
* through at compute time to find the one that is located closest to
* the center of the target element, and returns that Anchor's compute
* method result. this causes endpoints to follow each other with
* respect to the orientation of their target elements, which is a useful
* feature for some applications.
*
*/
jsPlumb.DynamicAnchor = function(anchors, anchorSelector, elementId, jsPlumbInstance) {
jsPlumb.Anchor.apply(this, arguments);
this.isSelective = true;
this.isDynamic = true;
var _anchors = [], self = this,
_convert = function(anchor) {
return anchor.constructor == jsPlumb.Anchor ? anchor: jsPlumbInstance.makeAnchor(anchor, elementId, jsPlumbInstance);
};
for (var i = 0; i < anchors.length; i++)
_anchors[i] = _convert(anchors[i]);
this.addAnchor = function(anchor) { _anchors.push(_convert(anchor)); };
this.getAnchors = function() { return _anchors; };
this.locked = false;
var _curAnchor = _anchors.length > 0 ? _anchors[0] : null,
_curIndex = _anchors.length > 0 ? 0 : -1,
self = this,
// helper method to calculate the distance between the centers of the two elements.
_distance = function(anchor, cx, cy, xy, wh) {
var ax = xy[0] + (anchor.x * wh[0]), ay = xy[1] + (anchor.y * wh[1]),
acx = xy[0] + (wh[0] / 2), acy = xy[1] + (wh[1] / 2);
return (Math.sqrt(Math.pow(cx - ax, 2) + Math.pow(cy - ay, 2)) +
Math.sqrt(Math.pow(acx - ax, 2) + Math.pow(acy - ay, 2)));
},
// default method uses distance between element centers. you can provide your own method in the dynamic anchor
// constructor (and also to jsPlumb.makeDynamicAnchor). the arguments to it are four arrays:
// xy - xy loc of the anchor's element
// wh - anchor's element's dimensions
// txy - xy loc of the element of the other anchor in the connection
// twh - dimensions of the element of the other anchor in the connection.
// anchors - the list of selectable anchors
_anchorSelector = anchorSelector || function(xy, wh, txy, twh, anchors) {
var cx = txy[0] + (twh[0] / 2), cy = txy[1] + (twh[1] / 2);
var minIdx = -1, minDist = Infinity;
for ( var i = 0; i < anchors.length; i++) {
var d = _distance(anchors[i], cx, cy, xy, wh);
if (d < minDist) {
minIdx = i + 0;
minDist = d;
}
}
return anchors[minIdx];
};
this.compute = function(params) {
var xy = params.xy, wh = params.wh, timestamp = params.timestamp, txy = params.txy, twh = params.twh;
if(params.clearUserDefinedLocation)
userDefinedLocation = null;
var udl = self.getUserDefinedLocation();
if (udl != null) {
return udl;
}
// if anchor is locked or an opposite element was not given, we
// maintain our state. anchor will be locked
// if it is the source of a drag and drop.
if (self.locked || txy == null || twh == null)
return _curAnchor.compute(params);
else
params.timestamp = null; // otherwise clear this, i think. we want the anchor to compute.
_curAnchor = _anchorSelector(xy, wh, txy, twh, _anchors);
self.x = _curAnchor.x;
self.y = _curAnchor.y;
return _curAnchor.compute(params);
};
this.getCurrentLocation = function() {
return self.getUserDefinedLocation() || (_curAnchor != null ? _curAnchor.getCurrentLocation() : null);
};
this.getOrientation = function(_endpoint) { return _curAnchor != null ? _curAnchor.getOrientation(_endpoint) : [ 0, 0 ]; };
this.over = function(anchor) { if (_curAnchor != null) _curAnchor.over(anchor); };
this.out = function() { if (_curAnchor != null) _curAnchor.out(); };
};
// -------- basic anchors ------------------
var _curryAnchor = function(x, y, ox, oy, type, fnInit) {
jsPlumb.Anchors[type] = function(params) {
var a = params.jsPlumbInstance.makeAnchor([ x, y, ox, oy, 0, 0 ], params.elementId, params.jsPlumbInstance);
a.type = type;
if (fnInit) fnInit(a, params);
return a;
};
};
_curryAnchor(0.5, 0, 0,-1, "TopCenter");
_curryAnchor(0.5, 1, 0, 1, "BottomCenter");
_curryAnchor(0, 0.5, -1, 0, "LeftMiddle");
_curryAnchor(1, 0.5, 1, 0, "RightMiddle");
// from 1.4.0: Top, Right, Bottom, Left
_curryAnchor(0.5, 0, 0,-1, "Top");
_curryAnchor(0.5, 1, 0, 1, "Bottom");
_curryAnchor(0, 0.5, -1, 0, "Left");
_curryAnchor(1, 0.5, 1, 0, "Right");
_curryAnchor(0.5, 0.5, 0, 0, "Center");
_curryAnchor(1, 0, 0,-1, "TopRight");
_curryAnchor(1, 1, 0, 1, "BottomRight");
_curryAnchor(0, 0, 0, -1, "TopLeft");
_curryAnchor(0, 1, 0, 1, "BottomLeft");
// ------- dynamic anchors -------------------
// default dynamic anchors chooses from Top, Right, Bottom, Left
jsPlumb.Defaults.DynamicAnchors = function(params) {
return params.jsPlumbInstance.makeAnchors(["TopCenter", "RightMiddle", "BottomCenter", "LeftMiddle"], params.elementId, params.jsPlumbInstance);
};
// default dynamic anchors bound to name 'AutoDefault'
jsPlumb.Anchors["AutoDefault"] = function(params) {
var a = params.jsPlumbInstance.makeDynamicAnchor(jsPlumb.Defaults.DynamicAnchors(params));
a.type = "AutoDefault";
return a;
};
// ------- continuous anchors -------------------
var _curryContinuousAnchor = function(type, faces) {
jsPlumb.Anchors[type] = function(params) {
var a = params.jsPlumbInstance.makeAnchor(["Continuous", { faces:faces }], params.elementId, params.jsPlumbInstance);
a.type = type;
return a;
};
};
jsPlumb.Anchors["Continuous"] = function(params) {
return params.jsPlumbInstance.continuousAnchorFactory.get(params);
};
_curryContinuousAnchor("ContinuousLeft", ["left"]);
_curryContinuousAnchor("ContinuousTop", ["top"]);
_curryContinuousAnchor("ContinuousBottom", ["bottom"]);
_curryContinuousAnchor("ContinuousRight", ["right"]);
// ------- position assign anchors -------------------
// this anchor type lets you assign the position at connection time.
jsPlumb.Anchors["Assign"] = _curryAnchor(0, 0, 0, 0, "Assign", function(anchor, params) {
// find what to use as the "position finder". the user may have supplied a String which represents
// the id of a position finder in jsPlumb.AnchorPositionFinders, or the user may have supplied the
// position finder as a function. we find out what to use and then set it on the anchor.
var pf = params.position || "Fixed";
anchor.positionFinder = pf.constructor == String ? params.jsPlumbInstance.AnchorPositionFinders[pf] : pf;
// always set the constructor params; the position finder might need them later (the Grid one does,
// for example)
anchor.constructorParams = params;
});
// these are the default anchor positions finders, which are used by the makeTarget function. supplying
// a position finder argument to that function allows you to specify where the resulting anchor will
// be located
jsPlumb.AnchorPositionFinders = {
"Fixed": function(dp, ep, es, params) {
return [ (dp.left - ep.left) / es[0], (dp.top - ep.top) / es[1] ];
},
"Grid":function(dp, ep, es, params) {
var dx = dp.left - ep.left, dy = dp.top - ep.top,
gx = es[0] / (params.grid[0]), gy = es[1] / (params.grid[1]),
mx = Math.floor(dx / gx), my = Math.floor(dy / gy);
return [ ((mx * gx) + (gx / 2)) / es[0], ((my * gy) + (gy / 2)) / es[1] ];
}
};
// ------- perimeter anchors -------------------
jsPlumb.Anchors["Perimeter"] = function(params) {
params = params || {};
var anchorCount = params.anchorCount || 60,
shape = params.shape;
if (!shape) throw new Error("no shape supplied to Perimeter Anchor type");
var _circle = function() {
var r = 0.5, step = Math.PI * 2 / anchorCount, current = 0, a = [];
for (var i = 0; i < anchorCount; i++) {
var x = r + (r * Math.sin(current)),
y = r + (r * Math.cos(current));
a.push( [ x, y, 0, 0 ] );
current += step;
}
return a;
},
_path = function(segments) {
var anchorsPerFace = anchorCount / segments.length, a = [],
_computeFace = function(x1, y1, x2, y2, fractionalLength) {
anchorsPerFace = anchorCount * fractionalLength;
var dx = (x2 - x1) / anchorsPerFace, dy = (y2 - y1) / anchorsPerFace;
for (var i = 0; i < anchorsPerFace; i++) {
a.push( [
x1 + (dx * i),
y1 + (dy * i),
0,
0
]);
}
};
for (var i = 0; i < segments.length; i++)
_computeFace.apply(null, segments[i]);
return a;
},
_shape = function(faces) {
var s = [];
for (var i = 0; i < faces.length; i++) {
s.push([faces[i][0], faces[i][1], faces[i][2], faces[i][3], 1 / faces.length]);
}
return _path(s);
},
_rectangle = function() {
return _shape([
[ 0, 0, 1, 0 ], [ 1, 0, 1, 1 ], [ 1, 1, 0, 1 ], [ 0, 1, 0, 0 ]
]);
};
var _shapes = {
"Circle":_circle,
"Ellipse":_circle,
"Diamond":function() {
return _shape([
[ 0.5, 0, 1, 0.5 ], [ 1, 0.5, 0.5, 1 ], [ 0.5, 1, 0, 0.5 ], [ 0, 0.5, 0.5, 0 ]
]);
},
"Rectangle":_rectangle,
"Square":_rectangle,
"Triangle":function() {
return _shape([
[ 0.5, 0, 1, 1 ], [ 1, 1, 0, 1 ], [ 0, 1, 0.5, 0]
]);
},
"Path":function(params) {
var points = params.points, p = [], tl = 0;
for (var i = 0; i < points.length - 1; i++) {
var l = Math.sqrt(Math.pow(points[i][2] - points[i][0]) + Math.pow(points[i][3] - points[i][1]));
tl += l;
p.push([points[i][0], points[i][1], points[i+1][0], points[i+1][1], l]);
}
for (var i = 0; i < p.length; i++) {
p[i][4] = p[i][4] / tl;
}
return _path(p);
}
},
_rotate = function(points, amountInDegrees) {
var o = [], theta = amountInDegrees / 180 * Math.PI ;
for (var i = 0; i < points.length; i++) {
var _x = points[i][0] - 0.5,
_y = points[i][1] - 0.5;
o.push([
0.5 + ((_x * Math.cos(theta)) - (_y * Math.sin(theta))),
0.5 + ((_x * Math.sin(theta)) + (_y * Math.cos(theta))),
points[i][2],
points[i][3]
]);
}
return o;
};
if (!_shapes[shape]) throw new Error("Shape [" + shape + "] is unknown by Perimeter Anchor type");
var da = _shapes[shape](params);
if (params.rotation) da = _rotate(da, params.rotation);
var a = params.jsPlumbInstance.makeDynamicAnchor(da);
a.type = "Perimeter";
return a;
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-apidoc.js 0 → 100644
View file @ e34796c6
// ---------------- JSPLUMB ----------------------------------------
/**
* Class: jsPlumb
* The jsPlumb engine, registered as a static object in the window. This object contains all of the methods you will use to
* create and maintain Connections and Endpoints.
*/
/*
* Function: importDefaults
* Imports all the given defaults into this instance of jsPlumb.
*/
/*
* Function: restoreDefaults
* Restores the default settings to "factory" values.
*/
/*
* Function: bind
* Bind to an event on jsPlumb.
*
* Parameters:
* event - the event to bind. Available events on jsPlumb are:
* - *jsPlumbConnection* : notification that a new Connection was established. jsPlumb passes the new Connection to the callback.
* - *jsPlumbConnectionDetached* : notification that a Connection was detached. jsPlumb passes the detached Connection to the callback.
* - *click* : notification that a Connection was clicked. jsPlumb passes the Connection that was clicked to the callback.
* - *dblclick* : notification that a Connection was double clicked. jsPlumb passes the Connection that was double clicked to the callback.
* - *endpointClick* : notification that an Endpoint was clicked. jsPlumb passes the Endpoint that was clicked to the callback.
* - *endpointDblClick* : notification that an Endpoint was double clicked. jsPlumb passes the Endpoint that was double clicked to the callback.
* - *beforeDrop* : notification that a Connection is about to be dropped. Returning false from this method cancels the drop. jsPlumb passes { sourceId, targetId, scope, connection, dropEndpoint } to your callback. For more information, refer to the jsPlumb documentation.
* - *beforeDetach* : notification that a Connection is about to be detached. Returning false from this method cancels the detach. jsPlumb passes the Connection to your callback. For more information, refer to the jsPlumb documentation.
* - *connectionDrag* : notification that an existing Connection is being dragged. jsPlumb passes the Connection to your callback function.
* - *connectionDragEnd* : notification that the drag of an existing Connection has ended. jsPlumb passes the Connection to your callback function.
*
* callback - function to callback. This function will be passed the Connection/Endpoint that caused the event, and also the original event.
*/
/*
* Function: unbind
* Clears either all listeners, or listeners for some specific event.
*
* Parameters:
* event - optional. constrains the clear to just listeners for this event.
*/
/*
* Function: addClass
* Add class(es) to some element(s).
*
* Parameters:
* el - element id, dom element, or selector representing the element(s) to add class(es) to.
* clazz - string representing the class(es) to add. may contain multiple classes separated by spaces.
*/
/*
* Function: removeClass
* Remove class from some selement(s).
*
* Parameters:
* el - element id, dom element, or selector representing the element(s) to remove a class from.
* clazz - string representing the class to remove.
*/
/*
* Function: hasClass
* Checks if an element has some class.
*
* Parameters:
* el - element id, dom element, or selector representing the element to test. If the selector matches multiple elements, we return the test for the first element in the selector only.
* clazz - string representing the class to test for.
*/
/*
* Property: Anchors.TopCenter
* An Anchor that is located at the top center of the element.
*/
/*
* Property: Anchors.BottomCenter
* An Anchor that is located at the bottom center of the element.
*/
/*
* Property: Anchors.LeftMiddle
* An Anchor that is located at the left middle of the element.
*/
/*
* Property: Anchors.RightMiddle
* An Anchor that is located at the right middle of the element.
*/
/*
* Property: Anchors.Center
* An Anchor that is located at the center of the element.
*/
/*
* Property: Anchors.TopRight
* An Anchor that is located at the top right corner of the element.
*/
/*
* Property: Anchors.BottomRight
* An Anchor that is located at the bottom right corner of the element.
*/
/*
* Property: Anchors.TopLeft
* An Anchor that is located at the top left corner of the element.
*/
/*
* Property: Anchors.BottomLeft
* An Anchor that is located at the bototm left corner of the element.
*/
/*
* Property: Anchors.AutoDefault
* Default DynamicAnchors - chooses from TopCenter, RightMiddle, BottomCenter, LeftMiddle.
*/
/*
* Property: Anchors.Assign
* An Anchor whose location is assigned at connection time, through an AnchorPositionFinder. Used in conjunction
* with the 'makeTarget' function. jsPlumb has two of these - 'Fixed' and 'Grid', and you can also write your own.
*/
/*
* Property: Anchors.Continuous
* An Anchor that tracks the other element in the connection, choosing the closest face.
*/
/*
* Property: Anchors.ContinuousLeft
* A continuous anchor that uses only the left edge of the element.
*/
/*
* Property: Anchors.ContinuousTop
* A continuous anchor that uses only the top edge of the element.
*/
/*
* Property: Anchors.ContinuousBottom
* A continuous anchor that uses only the bottom edge of the element.
*/
/*
* Property: Anchors.ContinuousRight
* A continuous anchor that uses only the right edge of the element.
*/
/*
* Property: Anchors.Perimeter
* An Anchor that tracks the perimeter of some shape, approximating it with a given number of dynamically
* positioned locations.
*
* Parameters:
*
* anchorCount - optional number of anchors to use to approximate the perimeter. default is 60.
* shape - required. the name of the shape. valid values are 'rectangle', 'square', 'ellipse', 'circle', 'triangle' and 'diamond'
* rotation - optional rotation, in degrees, to apply.
*/
// ---------------- ENDPOINT -----------------------------------------------------
/*
* Class: Endpoint
*
* Models an endpoint. Can have 1 to 'maxConnections' Connections emanating from it (set maxConnections to -1
* to allow unlimited). Typically, if you use 'jsPlumb.connect' to programmatically connect two elements, you won't
* actually deal with the underlying Endpoint objects. But if you wish to support drag and drop Connections, one of the ways you
* do so is by creating and registering Endpoints using 'jsPlumb.addEndpoint', and marking these Endpoints as 'source' and/or
* 'target' Endpoints for Connections.
*
*
*/
/*
* Function: Endpoint
*
* Endpoint constructor.
*
* Parameters:
* anchor - definition of the Anchor for the endpoint. You can include one or more Anchor definitions here; if you include more than one, jsPlumb creates a 'dynamic' Anchor, ie. an Anchor which changes position relative to the other elements in a Connection. Each Anchor definition can be either a string nominating one of the basic Anchors provided by jsPlumb (eg. "TopCenter"), or a four element array that designates the Anchor's location and orientation (eg, and this is equivalent to TopCenter, [ 0.5, 0, 0, -1 ]). To provide more than one Anchor definition just put them all in an array. You can mix string definitions with array definitions.
* endpoint - optional Endpoint definition. This takes the form of either a string nominating one of the basic Endpoints provided by jsPlumb (eg. "Rectangle"), or an array containing [name,params] for those cases where you don't wish to use the default values, eg. [ "Rectangle", { width:5, height:10 } ].
* enabled - optional, defaults to true. Indicates whether or not the Endpoint should be enabled for mouse events (drag/drop).
* paintStyle - endpoint style, a js object. may be null.
* hoverPaintStyle - style to use when the mouse is hovering over the Endpoint. A js object. may be null; defaults to null.
* cssClass - optional CSS class to set on the display element associated with this Endpoint.
* hoverClass - optional CSS class to set on the display element associated with this Endpoint when it is in hover state.
* source - element the Endpoint is attached to, of type String (an element id) or element selector. Required.
* canvas - canvas element to use. may be, and most often is, null.
* container - optional id or selector instructing jsPlumb where to attach the element it creates for this endpoint. you should read the documentation for a full discussion of this.
* connections - optional list of Connections to configure the Endpoint with.
* isSource - boolean. indicates the endpoint can act as a source of new connections. Optional; defaults to false.
* maxConnections - integer; defaults to 1. a value of -1 means no upper limit.
* dragOptions - if isSource is set to true, you can supply arguments for the underlying library's drag method. Optional; defaults to null.
* connectorStyle - if isSource is set to true, this is the paint style for Connections from this Endpoint. Optional; defaults to null.
* connectorHoverStyle - if isSource is set to true, this is the hover paint style for Connections from this Endpoint. Optional; defaults to null.
* connector - optional Connector type to use. Like 'endpoint', this may be either a single string nominating a known Connector type (eg. "Bezier", "Straight"), or an array containing [name, params], eg. [ "Bezier", { curviness:160 } ].
* connectorOverlays - optional array of Overlay definitions that will be applied to any Connection from this Endpoint.
* connectorClass - optional CSS class to set on Connections emanating from this Endpoint.
* connectorHoverClass - optional CSS class to set on to set on Connections emanating from this Endpoint when they are in hover state.
* connectionsDetachable - optional, defaults to true. Sets whether connections to/from this Endpoint should be detachable or not.
* isTarget - boolean. indicates the endpoint can act as a target of new connections. Optional; defaults to false.
* dropOptions - if isTarget is set to true, you can supply arguments for the underlying library's drop method with this parameter. Optional; defaults to null.
* reattach - optional boolean that determines whether or not the Connections reattach after they have been dragged off an Endpoint and left floating. defaults to false: Connections dropped in this way will just be deleted.
* parameters - Optional JS object containing parameters to set on the Endpoint. These parameters are then available via the getParameter method. When a connection is made involving this Endpoint, the parameters from this Endpoint are copied into that Connection. Source Endpoint parameters override target Endpoint parameters if they both have a parameter with the same name.
* connector-pointer-events - Optional. a value for the 'pointer-events' property of any SVG elements that are created to render connections from this endoint.
*/
/*
* Function: addConnection
* Adds a Connection to this Endpoint.
*
* Parameters:
* connection - the Connection to add.
*/
/*
* Function: detach
* Detaches the given Connection from this Endpoint.
*
* Parameters:
* connection - the Connection to detach.
* ignoreTarget - optional; tells the Endpoint to not notify the Connection target that the Connection was detached. The default behaviour is to notify the target.
*/
/*
* Function: detachAll
* Detaches all Connections this Endpoint has.
*
* Parameters:
* fireEvent - whether or not to fire the detach event. defaults to false.
*/
/*
* Function: detachFrom
* Removes any connections from this Endpoint that are connected to the given target endpoint.
*
* Parameters:
* targetEndpoint - Endpoint from which to detach all Connections from this Endpoint.
* fireEvent - whether or not to fire the detach event. defaults to false.
*/
/*
* Function: detachFromConnection
* Detach this Endpoint from the Connection, but leave the Connection alive. Used when dragging.
*
* Parameters:
* connection - Connection to detach from.
*/
/*
* Function: getElement
*
* Returns:
* The DOM element this Endpoint is attached to.
*/
/*
* Function: setElement
* Sets the DOM element this Endpoint is attached to.
*
* Parameters:
* el - dom element or selector
* container - optional, specifies the actual parent element to use as the parent for this Endpoint's visual representation.
* See the jsPlumb documentation for a discussion about this.
*/
/*
* Function: getUuid
* Returns the UUID for this Endpoint, if there is one. Otherwise returns null.
*/
/*
* Function: isConnectedTo
* Returns whether or not this endpoint is connected to the given Endpoint.
*
* Parameters:
* endpoint - Endpoint to test.
*/
/*
* Function: isFull
* Returns whether or not the Endpoint can accept any more Connections.
*/
/*
* Function: setDragAllowedWhenFull
* Sets whether or not connections can be dragged from this Endpoint once it is full. You would use this in a UI in
* which you're going to provide some other way of breaking connections, if you need to break them at all. This property
* is by default true; use it in conjunction with the 'reattach' option on a connect call.
*
* Parameters:
* allowed - whether drag is allowed or not when the Endpoint is full.
*/
/*
* Function: setStyle
* Sets the paint style of the Endpoint. This is a JS object of the same form you supply to a jsPlumb.addEndpoint or jsPlumb.connect call.
* TODO move setStyle into EventGenerator, remove it from here. is Connection's method currently setPaintStyle ? wire that one up to
* setStyle and deprecate it if so.
*
* Parameters:
* style - Style object to set, for example {fillStyle:"blue"}.
*
* @deprecated use setPaintStyle instead.
*/
/*
* Function: paint
* Paints the Endpoint, recalculating offset and anchor positions if necessary. This does NOT paint
* any of the Endpoint's connections.
*
* Parameters:
* timestamp - optional timestamp advising the Endpoint of the current paint time; if it has painted already once for this timestamp, it will not paint again.
* canvas - optional Canvas to paint on. Only used internally by jsPlumb in certain obscure situations.
* connectorPaintStyle - paint style of the Connector attached to this Endpoint. Used to get a fillStyle if nothing else was supplied.
*/
/*
* Function: bind
* Bind to an event on the Endpoint.
*
* Parameters:
* event - the event to bind. Available events on an Endpoint are:
* - *click* : notification that a Endpoint was clicked.
* - *dblclick* : notification that a Endpoint was double clicked.
* - *mouseenter* : notification that the mouse is over a Endpoint.
* - *mouseexit* : notification that the mouse exited a Endpoint.
* - *contextmenu* : notification that the user right-clicked on the Endpoint.
*
* callback - function to callback. This function will be passed the Endpoint that caused the event, and also the original event.
*/
/*
* Function: setPaintStyle
* Sets the Endpoint's paint style and then repaints the Endpoint.
*
* Parameters:
* style - Style to use.
*/
/*
* Function: getPaintStyle
* Gets the Endpoint's paint style. This is not necessarily the paint style in use at the time;
* this is the paint style for the Endpoint when the mouse it not hovering over it.
*/
/*
* Function: setHoverPaintStyle
* Sets the paint style to use when the mouse is hovering over the Endpoint. This is null by default.
* The hover paint style is applied as extensions to the paintStyle; it does not entirely replace
* it. This is because people will most likely want to change just one thing when hovering, say the
* color for example, but leave the rest of the appearance the same.
*
* Parameters:
* style - Style to use when the mouse is hovering.
* doNotRepaint - if true, the Endpoint will not be repainted. useful when setting things up initially.
*/
/*
* Function: setHover
* Sets/unsets the hover state of this Endpoint.
*
* Parameters:
* hover - hover state boolean
* ignoreAttachedElements - if true, does not notify any attached elements of the change in hover state. used mostly to avoid infinite loops.
*/
/*
* Function: getParameter
* Gets the named parameter; returns null if no parameter with that name is set. Parameters may have been set on the Endpoint in the 'addEndpoint' call, or they may have been set with the setParameter function.
*
* Parameters:
* key - Parameter name.
*/
/*
* Function: setParameter
* Sets the named parameter to the given value.
*
* Parameters:
* key - Parameter name.
* value - Parameter value.
*/
/*
* Property: canvas
* The Endpoint's drawing area.
*/
/*
* Property: connections
* List of Connections this Endpoint is attached to.
*/
/*
* Property: scope
* Scope descriptor for this Endpoint.
*/
/*
* Property: overlays
* List of Overlays for this Endpoint.
*/
/*
* Function: addOverlay
* Adds an Overlay to the Endpoint.
*
* Parameters:
* overlay - Overlay to add.
*/
/*
* Function: getOverlay
* Gets an overlay, by ID. Note: by ID. You would pass an 'id' parameter
* in to the Overlay's constructor arguments, and then use that to retrieve
* it via this method.
*/
/*
* Function: getOverlays
* Gets all the overlays for this component.
*/
/*
* Function: hideOverlay
* Hides the overlay specified by the given id.
*/
/*
* Function: hideOverlays
* Hides all Overlays
*/
/*
* Function: showOverlay
* Shows the overlay specified by the given id.
*/
/*
* Function: showOverlays
* Shows all Overlays
*/
/*
* Function: removeAllOverlays
* Removes all overlays from the Endpoint, and then repaints.
*/
/*
* Function: removeOverlay
* Removes an overlay by ID. Note: by ID. this is a string you set in the overlay spec.
* Parameters:
* overlayId - id of the overlay to remove.
*/
/*
* Function: removeOverlays
* Removes a set of overlays by ID. Note: by ID. this is a string you set in the overlay spec.
* Parameters:
* overlayIds - this function takes an arbitrary number of arguments, each of which is a single overlay id.
*/
/*
* Function: setLabel
* Sets the Endpoint's label.
*
* Parameters:
* l - label to set. May be a String, a Function that returns a String, or a params object containing { "label", "labelStyle", "location", "cssClass" }. Note that this uses innerHTML on the label div, so keep
* that in mind if you need escaped HTML.
*/
/*
Function: getLabel
Returns the label text for this Endpoint (or a function if you are labelling with a function).
This does not return the overlay itself; this is a convenience method which is a pair with
setLabel; together they allow you to add and access a Label Overlay without having to create the
Overlay object itself. For access to the underlying label overlay that jsPlumb has created,
use getLabelOverlay.
*/
/*
Function: getLabelOverlay
Returns the underlying internal label overlay, which will exist if you specified a label on
an addEndpoint call, or have called setLabel at any stage.
*/
/*
Function: isVisible
Returns whether or not the Endpoint is currently visible.
*/
/*
Function: setVisible
Sets whether or not the Endpoint is currently visible.
Parameters:
visible - whether or not the Endpoint should be visible.
doNotChangeConnections - Instructs jsPlumb to not pass the visible state on to any attached Connections. defaults to false.
doNotNotifyOtherEndpoint - Instructs jsPlumb to not pass the visible state on to Endpoints at the other end of any attached Connections. defaults to false.
*/
// ---------------- / ENDPOINT -----------------------------------------------------
// --------------- CONNECTION ----------------------
/*
* Class: Connection
* The connecting line between two Endpoints.
*/
/*
* Function: Connection
* Connection constructor. You should not ever create one of these directly. If you make a call to jsPlumb.connect, all of
* the parameters that you pass in to that function will be passed to the Connection constructor; if your UI
* uses the various Endpoint-centric methods like addEndpoint/makeSource/makeTarget, along with drag and drop,
* then the parameters you set on those functions are translated and passed in to the Connection constructor. So
* you should check the documentation for each of those methods.
*
* Parameters:
* source - either an element id, a selector for an element, or an Endpoint.
* target - either an element id, a selector for an element, or an Endpoint
* scope - scope descriptor for this connection. optional.
* container - optional id or selector instructing jsPlumb where to attach all the elements it creates for this connection. you should read the documentation for a full discussion of this.
* detachable - optional, defaults to true. Defines whether or not the connection may be detached using the mouse.
* reattach - optional, defaults to false. Defines whether not the connection should be retached if it was dragged off an Endpoint and then dropped in whitespace.
* endpoint - Optional. Endpoint definition to use for both ends of the connection.
* endpoints - Optional. Array of two Endpoint definitions, one for each end of the Connection. This and 'endpoint' are mutually exclusive parameters.
* endpointStyle - Optional. Endpoint style definition to use for both ends of the Connection.
* endpointStyles - Optional. Array of two Endpoint style definitions, one for each end of the Connection. This and 'endpoint' are mutually exclusive parameters.
* paintStyle - Parameters defining the appearance of the Connection. Optional; jsPlumb will use the defaults if you supply nothing here.
* hoverPaintStyle - Parameters defining the appearance of the Connection when the mouse is hovering over it. Optional; jsPlumb will use the defaults if you supply nothing here (note that the default hoverPaintStyle is null).
* cssClass - optional CSS class to set on the display element associated with this Connection.
* hoverClass - optional CSS class to set on the display element associated with this Connection when it is in hover state.
* overlays - Optional array of Overlay definitions to appear on this Connection.
* drawEndpoints - if false, instructs jsPlumb to not draw the endpoints for this Connection. Be careful with this: it only really works when you tell jsPlumb to attach elements to the document body. Read the documentation for a full discussion of this.
* parameters - Optional JS object containing parameters to set on the Connection. These parameters are then available via the getParameter method.
*/
/*
* Function: bind
* Bind to an event on the Connection.
*
* Parameters:
* event - the event to bind. Available events on a Connection are:
* - *click* : notification that a Connection was clicked.
* - *dblclick* : notification that a Connection was double clicked.
* - *mouseenter* : notification that the mouse is over a Connection.
* - *mouseexit* : notification that the mouse exited a Connection.
* - *contextmenu* : notification that the user right-clicked on the Connection.
*
* callback - function to callback. This function will be passed the Connection that caused the event, and also the original event.
*/
/*
* Function: setPaintStyle
* Sets the Connection's paint style and then repaints the Connection.
*
* Parameters:
* style - Style to use.
*/
/*
* Function: getPaintStyle
* Gets the Connection's paint style. This is not necessarily the paint style in use at the time;
* this is the paint style for the connection when the mouse it not hovering over it.
*/
/*
* Function: setHoverPaintStyle
* Sets the paint style to use when the mouse is hovering over the Connection. This is null by default.
* The hover paint style is applied as extensions to the paintStyle; it does not entirely replace
* it. This is because people will most likely want to change just one thing when hovering, say the
* color for example, but leave the rest of the appearance the same.
*
* Parameters:
* style - Style to use when the mouse is hovering.
* doNotRepaint - if true, the Connection will not be repainted. useful when setting things up initially.
*/
/*
* Function: setHover
* Sets/unsets the hover state of this Connection.
*
* Parameters:
* hover - hover state boolean
* ignoreAttachedElements - if true, does not notify any attached elements of the change in hover state. used mostly to avoid infinite loops.
*/
/*
* Function: getParameter
* Gets the named parameter; returns null if no parameter with that name is set. Parameter values may have been supplied to a 'connect' or 'addEndpoint' call (connections made with the mouse get a copy of all parameters set on each of their Endpoints), or the parameter value may have been set with setParameter.
*
* Parameters:
* key - Parameter name.
*/
/*
* Function: setParameter
* Sets the named parameter to the given value.
*
* Parameters:
* key - Parameter name.
* value - Parameter value.
*/
/*
* Property: connector
* The underlying Connector for this Connection (eg. a Bezier connector, straight line connector, flowchart connector etc)
*/
/*
* Property: sourceId
* Id of the source element in the connection.
*/
/*
* Property: targetId
* Id of the target element in the connection.
*/
/*
* Property: scope
* Optional scope descriptor for the connection.
*/
/*
* Property: endpoints
* Array of [source, target] Endpoint objects.
*/
/*
* Property: source
* The source element for this Connection.
*/
/*
* Property: target
* The target element for this Connection.
*/
/*
* Property: overlays
* List of Overlays for this component.
*/
/*
* Function: addOverlay
* Adds an Overlay to the Connection.
*
* Parameters:
* overlay - Overlay to add.
*/
/*
* Function: getOverlay
* Gets an overlay, by ID. Note: by ID. You would pass an 'id' parameter
* in to the Overlay's constructor arguments, and then use that to retrieve
* it via this method.
*
* Parameters:
* overlayId - id of the overlay to retrieve.
*/
/*
* Function: getOverlays
* Gets all the overlays for this component.
*/
/*
* Function: hideOverlay
* Hides the overlay specified by the given id.
*
* Parameters:
* overlayId - id of the overlay to hide.
*/
/*
* Function: hideOverlays
* Hides all Overlays
*/
/*
* Function: showOverlay
* Shows the overlay specified by the given id.
*
* Parameters:
* overlayId - id of the overlay to show.
*/
/*
* Function: showOverlays
* Shows all Overlays
*/
/*
* Function: removeAllOverlays
* Removes all overlays from the Connection, and then repaints.
*/
/*
* Function: removeOverlay
* Removes an overlay by ID. Note: by ID. this is a string you set in the overlay spec.
*
* Parameters:
* overlayId - id of the overlay to remove.
*/
/*
* Function: removeOverlays
* Removes a set of overlays by ID. Note: by ID. this is a string you set in the overlay spec.
*
* Parameters:
* overlayIds - this function takes an arbitrary number of arguments, each of which is a single overlay id.
*/
/*
* Function: setLabel
* Sets the Connection's label.
*
* Parameters:
* l - label to set. May be a String, a Function that returns a String, or a params object containing { "label", "labelStyle", "location", "cssClass" }. Note that this uses innerHTML on the label div, so keep
* that in mind if you need escaped HTML.
*/
/*
* Function: getLabel
* Returns the label text for this Connection (or a function if you are labelling with a function).
*
* This does not return the overlay itself; this is a convenience method which is a pair with
* setLabel; together they allow you to add and access a Label Overlay without having to create the
* Overlay object itself. For access to the underlying label overlay that jsPlumb has created,
* use getLabelOverlay.
*
* See Also:
* <getOverlay>
*/
/*
* Function: getLabelOverlay
* Returns the underlying internal label overlay, which will exist if you specified a label on
* a connect call, or have called setLabel at any stage.
*/
/*
* Function: isVisible
* Returns whether or not the Connection is currently visible.
*/
/*
* Function: setVisible
* Sets whether or not the Connection should be visible.
*
* Parameters:
* visible - boolean indicating desired visible state.
*/
/**
* Function: setEditable
* Sets whether or not the Connection is editable. This will only be honoured if
* the underlying Connector is editable - not all types are.
*/
/**
* Function: isEditable
* Returns whether or not the Connection is editable.
*/
/*
* Function: setConnector
* Sets the Connection's connector (eg "Bezier", "Flowchart", etc). You pass a Connector definition into this method, the same
* thing that you would set as the 'connector' property on a jsPlumb.connect call.
*
* Parameters:
* connector - Connector definition
*/
/*
* Function: isDetachable
* Returns whether or not this connection can be detached from its target/source endpoint. by default this
* is false; use it in conjunction with the 'reattach' parameter.
*/
/*
* Function: setDetachable
* Sets whether or not this connection is detachable.
*
* Parameters:
* detachable - whether or not to set the Connection to be detachable.
*/
/*
* Function: isReattach
* Returns whether or not this connection will be reattached after having been detached via the mouse and dropped. by default this
* is false; use it in conjunction with the 'detachable' parameter.
*/
/*
* Function: setReattach
* Sets whether or not this connection will reattach after having been detached via the mouse and dropped.
*
* Parameters:
* reattach - whether or not to set the Connection to reattach after drop in whitespace.
*/
/**
* implementation of abstract method in jsPlumbUtil.EventGenerator
* @return list of attached elements. in our case, a list of Endpoints.
*/
ui/lib/jsPlumb/jsPlumb-connection.js 0 → 100644
View file @ e34796c6
;(function() {
jsPlumb.Connection = function(params) {
var self = this, visible = true, _internalHover, _superClassHover,
_jsPlumb = params["_jsPlumb"],
jpcl = jsPlumb.CurrentLibrary,
_att = jpcl.getAttribute,
_gel = jpcl.getElementObject,
_ju = jsPlumbUtil,
_getOffset = jpcl.getOffset,
_newConnection = params.newConnection,
_newEndpoint = params.newEndpoint,
connector = null;
self.idPrefix = "_jsplumb_c_";
self.defaultLabelLocation = 0.5;
self.defaultOverlayKeys = ["Overlays", "ConnectionOverlays"];
this.parent = params.parent;
overlayCapableJsPlumbUIComponent.apply(this, arguments);
// ************** get the source and target and register the connection. *******************
// VISIBILITY
this.isVisible = function() { return visible; };
this.setVisible = function(v) {
visible = v;
self[v ? "showOverlays" : "hideOverlays"]();
if (connector && connector.canvas) connector.canvas.style.display = v ? "block" : "none";
self.repaint();
};
// END VISIBILITY
// EDITABLE
var editable = params.editable === true;
this.setEditable = function(e) {
if (connector && connector.isEditable())
editable = e;
return editable;
};
this.isEditable = function() { return editable; };
this.editStarted = function() {
self.fire("editStarted", {
path:connector.getPath()
});
_jsPlumb.setHoverSuspended(true);
};
this.editCompleted = function() {
self.fire("editCompleted", {
path:connector.getPath()
});
self.setHover(false);
_jsPlumb.setHoverSuspended(false);
};
this.editCanceled = function() {
self.fire("editCanceled", {
path:connector.getPath()
});
self.setHover(false);
_jsPlumb.setHoverSuspended(false);
};
// END EDITABLE
// ADD CLASS/REMOVE CLASS - override to support adding/removing to/from endpoints
var _ac = this.addClass, _rc = this.removeClass;
this.addClass = function(c, informEndpoints) {
_ac(c);
if (informEndpoints) {
self.endpoints[0].addClass(c);
self.endpoints[1].addClass(c);
}
};
this.removeClass = function(c, informEndpoints) {
_rc(c);
if (informEndpoints) {
self.endpoints[0].removeClass(c);
self.endpoints[1].removeClass(c);
}
};
// TYPE
this.getTypeDescriptor = function() { return "connection"; };
this.getDefaultType = function() {
return {
parameters:{},
scope:null,
detachable:self._jsPlumb.Defaults.ConnectionsDetachable,
rettach:self._jsPlumb.Defaults.ReattachConnections,
paintStyle:self._jsPlumb.Defaults.PaintStyle || jsPlumb.Defaults.PaintStyle,
connector:self._jsPlumb.Defaults.Connector || jsPlumb.Defaults.Connector,
hoverPaintStyle:self._jsPlumb.Defaults.HoverPaintStyle || jsPlumb.Defaults.HoverPaintStyle,
overlays:self._jsPlumb.Defaults.ConnectorOverlays || jsPlumb.Defaults.ConnectorOverlays
};
};
var superAt = this.applyType;
this.applyType = function(t, doNotRepaint) {
superAt(t, doNotRepaint);
if (t.detachable != null) self.setDetachable(t.detachable);
if (t.reattach != null) self.setReattach(t.reattach);
if (t.scope) self.scope = t.scope;
editable = t.editable;
self.setConnector(t.connector, doNotRepaint);
};
// END TYPE
// HOVER
// override setHover to pass it down to the underlying connector
_superClassHover = self.setHover;
self.setHover = function(state) {
connector.setHover.apply(connector, arguments);
_superClassHover.apply(self, arguments);
};
_internalHover = function(state) {
if (!_jsPlumb.isConnectionBeingDragged()) {
self.setHover(state, false);
}
};
// END HOVER
var makeConnector = function(renderMode, connectorName, connectorArgs) {
var c = new Object();
jsPlumb.Connectors[connectorName].apply(c, [connectorArgs]);
jsPlumb.ConnectorRenderers[renderMode].apply(c, [connectorArgs]);
return c;
};
this.setConnector = function(connectorSpec, doNotRepaint) {
if (connector != null) jsPlumbUtil.removeElements(connector.getDisplayElements());
var connectorArgs = {
_jsPlumb:self._jsPlumb,
parent:params.parent,
cssClass:params.cssClass,
container:params.container,
tooltip:self.tooltip,
"pointer-events":params["pointer-events"]
},
renderMode = _jsPlumb.getRenderMode();
if (_ju.isString(connectorSpec))
connector = makeConnector(renderMode, connectorSpec, connectorArgs); // lets you use a string as shorthand.
else if (_ju.isArray(connectorSpec)) {
if (connectorSpec.length == 1)
connector = makeConnector(renderMode, connectorSpec[0], connectorArgs);
else
connector = makeConnector(renderMode, connectorSpec[0], jsPlumbUtil.merge(connectorSpec[1], connectorArgs));
}
// binds mouse listeners to the current connector.
self.bindListeners(connector, self, _internalHover);
self.canvas = connector.canvas;
if (editable && jsPlumb.ConnectorEditors != null && jsPlumb.ConnectorEditors[connector.type] && connector.isEditable()) {
new jsPlumb.ConnectorEditors[connector.type]({
connector:connector,
connection:self,
params:params.editorParams || { }
});
}
else {
editable = false;
}
if (!doNotRepaint) self.repaint();
};
this.getConnector = function() { return connector; };
// INITIALISATION CODE
this.source = _gel(params.source);
this.target = _gel(params.target);
// sourceEndpoint and targetEndpoint override source/target, if they are present. but
// source is not overridden if the Endpoint has declared it is not the final target of a connection;
// instead we use the source that the Endpoint declares will be the final source element.
if (params.sourceEndpoint) this.source = params.sourceEndpoint.endpointWillMoveTo || params.sourceEndpoint.getElement();
if (params.targetEndpoint) this.target = params.targetEndpoint.getElement();
// if a new connection is the result of moving some existing connection, params.previousConnection
// will have that Connection in it. listeners for the jsPlumbConnection event can look for that
// member and take action if they need to.
self.previousConnection = params.previousConnection;
this.sourceId = _att(this.source, "id");
this.targetId = _att(this.target, "id");
this.scope = params.scope; // scope may have been passed in to the connect call. if it wasn't, we will pull it from the source endpoint, after having initialised the endpoints.
this.endpoints = [];
this.endpointStyles = [];
// wrapped the main function to return null if no input given. this lets us cascade defaults properly.
var _makeAnchor = function(anchorParams, elementId) {
return (anchorParams) ? _jsPlumb.makeAnchor(anchorParams, elementId, _jsPlumb) : null;
},
prepareEndpoint = function(existing, index, params, element, elementId, connectorPaintStyle, connectorHoverPaintStyle) {
var e;
if (existing) {
self.endpoints[index] = existing;
existing.addConnection(self);
} else {
if (!params.endpoints) params.endpoints = [ null, null ];
var ep = params.endpoints[index]
|| params.endpoint
|| _jsPlumb.Defaults.Endpoints[index]
|| jsPlumb.Defaults.Endpoints[index]
|| _jsPlumb.Defaults.Endpoint
|| jsPlumb.Defaults.Endpoint;
if (!params.endpointStyles) params.endpointStyles = [ null, null ];
if (!params.endpointHoverStyles) params.endpointHoverStyles = [ null, null ];
var es = params.endpointStyles[index] || params.endpointStyle || _jsPlumb.Defaults.EndpointStyles[index] || jsPlumb.Defaults.EndpointStyles[index] || _jsPlumb.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle;
// Endpoints derive their fillStyle from the connector's strokeStyle, if no fillStyle was specified.
if (es.fillStyle == null && connectorPaintStyle != null)
es.fillStyle = connectorPaintStyle.strokeStyle;
// TODO: decide if the endpoint should derive the connection's outline width and color. currently it does:
//*
if (es.outlineColor == null && connectorPaintStyle != null)
es.outlineColor = connectorPaintStyle.outlineColor;
if (es.outlineWidth == null && connectorPaintStyle != null)
es.outlineWidth = connectorPaintStyle.outlineWidth;
//*/
var ehs = params.endpointHoverStyles[index] || params.endpointHoverStyle || _jsPlumb.Defaults.EndpointHoverStyles[index] || jsPlumb.Defaults.EndpointHoverStyles[index] || _jsPlumb.Defaults.EndpointHoverStyle || jsPlumb.Defaults.EndpointHoverStyle;
// endpoint hover fill style is derived from connector's hover stroke style. TODO: do we want to do this by default? for sure?
if (connectorHoverPaintStyle != null) {
if (ehs == null) ehs = {};
if (ehs.fillStyle == null) {
ehs.fillStyle = connectorHoverPaintStyle.strokeStyle;
}
}
var a = params.anchors ? params.anchors[index] :
params.anchor ? params.anchor :
_makeAnchor(_jsPlumb.Defaults.Anchors[index], elementId) ||
_makeAnchor(jsPlumb.Defaults.Anchors[index], elementId) ||
_makeAnchor(_jsPlumb.Defaults.Anchor, elementId) ||
_makeAnchor(jsPlumb.Defaults.Anchor, elementId),
u = params.uuids ? params.uuids[index] : null;
e = _newEndpoint({
paintStyle : es, hoverPaintStyle:ehs, endpoint : ep, connections : [ self ],
uuid : u, anchor : a, source : element, scope : params.scope, container:params.container,
reattach:params.reattach || _jsPlumb.Defaults.ReattachConnections,
detachable:params.detachable || _jsPlumb.Defaults.ConnectionsDetachable
});
self.endpoints[index] = e;
if (params.drawEndpoints === false) e.setVisible(false, true, true);
}
return e;
};
var eS = prepareEndpoint(params.sourceEndpoint, 0, params, self.source,
self.sourceId, params.paintStyle, params.hoverPaintStyle);
if (eS) _ju.addToList(params.endpointsByElement, this.sourceId, eS);
var eT = prepareEndpoint(params.targetEndpoint, 1, params, self.target,
self.targetId, params.paintStyle, params.hoverPaintStyle);
if (eT) _ju.addToList(params.endpointsByElement, this.targetId, eT);
// if scope not set, set it to be the scope for the source endpoint.
if (!this.scope) this.scope = this.endpoints[0].scope;
// if delete endpoints on detach, keep a record of just exactly which endpoints they are.
self.endpointsToDeleteOnDetach = [null, null];
if (params.deleteEndpointsOnDetach) {
if (params.sourceIsNew) self.endpointsToDeleteOnDetach[0] = self.endpoints[0];
if (params.targetIsNew) self.endpointsToDeleteOnDetach[1] = self.endpoints[1];
}
// or if the endpoints were supplied, use them.
if (params.endpointsToDeleteOnDetach)
self.endpointsToDeleteOnDetach = params.endpointsToDeleteOnDetach;
// TODO these could surely be refactored into some method that tries them one at a time until something exists
self.setConnector(this.endpoints[0].connector ||
this.endpoints[1].connector ||
params.connector ||
_jsPlumb.Defaults.Connector ||
jsPlumb.Defaults.Connector, true);
if (params.path)
connector.setPath(params.path);
this.setPaintStyle(this.endpoints[0].connectorStyle ||
this.endpoints[1].connectorStyle ||
params.paintStyle ||
_jsPlumb.Defaults.PaintStyle ||
jsPlumb.Defaults.PaintStyle, true);
this.setHoverPaintStyle(this.endpoints[0].connectorHoverStyle ||
this.endpoints[1].connectorHoverStyle ||
params.hoverPaintStyle ||
_jsPlumb.Defaults.HoverPaintStyle ||
jsPlumb.Defaults.HoverPaintStyle, true);
this.paintStyleInUse = this.getPaintStyle();
var _suspendedAt = _jsPlumb.getSuspendedAt();
_jsPlumb.updateOffset( { elId : this.sourceId, timestamp:_suspendedAt });
_jsPlumb.updateOffset( { elId : this.targetId, timestamp:_suspendedAt });
// paint the endpoints
var myInfo = _jsPlumb.getCachedData(this.sourceId),
myOffset = myInfo.o, myWH = myInfo.s,
otherInfo = _jsPlumb.getCachedData(this.targetId),
otherOffset = otherInfo.o,
otherWH = otherInfo.s,
initialTimestamp = _suspendedAt || _jsPlumb.timestamp(),
anchorLoc = this.endpoints[0].anchor.compute( {
xy : [ myOffset.left, myOffset.top ], wh : myWH, element : this.endpoints[0],
elementId:this.endpoints[0].elementId,
txy : [ otherOffset.left, otherOffset.top ], twh : otherWH, tElement : this.endpoints[1],
timestamp:initialTimestamp
});
this.endpoints[0].paint( { anchorLoc : anchorLoc, timestamp:initialTimestamp });
anchorLoc = this.endpoints[1].anchor.compute( {
xy : [ otherOffset.left, otherOffset.top ], wh : otherWH, element : this.endpoints[1],
elementId:this.endpoints[1].elementId,
txy : [ myOffset.left, myOffset.top ], twh : myWH, tElement : this.endpoints[0],
timestamp:initialTimestamp
});
this.endpoints[1].paint({ anchorLoc : anchorLoc, timestamp:initialTimestamp });
// END INITIALISATION CODE
// DETACHABLE
var _detachable = _jsPlumb.Defaults.ConnectionsDetachable;
if (params.detachable === false) _detachable = false;
if(self.endpoints[0].connectionsDetachable === false) _detachable = false;
if(self.endpoints[1].connectionsDetachable === false) _detachable = false;
this.isDetachable = function() {
return _detachable === true;
};
this.setDetachable = function(detachable) {
_detachable = detachable === true;
};
// END DETACHABLE
// REATTACH
var _reattach = params.reattach ||
self.endpoints[0].reattachConnections ||
self.endpoints[1].reattachConnections ||
_jsPlumb.Defaults.ReattachConnections;
this.isReattach = function() {
return _reattach === true;
};
this.setReattach = function(reattach) {
_reattach = reattach === true;
};
// END REATTACH
// COST + DIRECTIONALITY
// if cost not supplied, try to inherit from source endpoint
var _cost = params.cost || self.endpoints[0].getConnectionCost();
self.getCost = function() { return _cost; };
self.setCost = function(c) { _cost = c; };
var directed = params.directed;
// inherit directed flag if set no source endpoint
if (params.directed == null) directed = self.endpoints[0].areConnectionsDirected();
self.isDirected = function() { return directed === true; };
// END COST + DIRECTIONALITY
// PARAMETERS
// merge all the parameters objects into the connection. parameters set
// on the connection take precedence; then target endpoint params, then
// finally source endpoint params.
// TODO jsPlumb.extend could be made to take more than two args, and it would
// apply the second through nth args in order.
var _p = jsPlumb.extend({}, this.endpoints[0].getParameters());
jsPlumb.extend(_p, this.endpoints[1].getParameters());
jsPlumb.extend(_p, self.getParameters());
self.setParameters(_p);
// END PARAMETERS
// MISCELLANEOUS
this.getAttachedElements = function() {
return self.endpoints;
};
//
// changes the parent element of this connection to newParent. not exposed for the public API.
//
this.moveParent = function(newParent) {
var jpcl = jsPlumb.CurrentLibrary, curParent = jpcl.getParent(connector.canvas);
if (connector.bgCanvas) {
jpcl.removeElement(connector.bgCanvas);
jpcl.appendElement(connector.bgCanvas, newParent);
}
jpcl.removeElement(connector.canvas);
jpcl.appendElement(connector.canvas, newParent);
// this only applies for DOMOverlays
for (var i = 0; i < self.overlays.length; i++) {
if (self.overlays[i].isAppendedAtTopLevel) {
jpcl.removeElement(self.overlays[i].canvas);
jpcl.appendElement(self.overlays[i].canvas, newParent);
if (self.overlays[i].reattachListeners)
self.overlays[i].reattachListeners(connector);
}
}
if (connector.reattachListeners) // this is for SVG/VML; change an element's parent and you have to reinit its listeners.
connector.reattachListeners(); // the Canvas implementation doesn't have to care about this
};
// END MISCELLANEOUS
// PAINTING
/*
* Paints the Connection. Not exposed for public usage.
*
* Parameters:
* elId - Id of the element that is in motion.
* ui - current library's event system ui object (present if we came from a drag to get here).
* recalc - whether or not to recalculate all anchors etc before painting.
* timestamp - timestamp of this paint. If the Connection was last painted with the same timestamp, it does not paint again.
*/
var lastPaintedAt = null;
this.paint = function(params) {
if (visible) {
params = params || {};
var elId = params.elId, ui = params.ui, recalc = params.recalc, timestamp = params.timestamp,
// if the moving object is not the source we must transpose the two references.
swap = false,
tId = swap ? this.sourceId : this.targetId, sId = swap ? this.targetId : this.sourceId,
tIdx = swap ? 0 : 1, sIdx = swap ? 1 : 0;
if (timestamp == null || timestamp != lastPaintedAt) {
var sourceInfo = _jsPlumb.updateOffset( { elId : elId, offset : ui, recalc : recalc, timestamp : timestamp }).o,
targetInfo = _jsPlumb.updateOffset( { elId : tId, timestamp : timestamp }).o, // update the target if this is a forced repaint. otherwise, only the source has been moved.
sE = this.endpoints[sIdx], tE = this.endpoints[tIdx];
if (params.clearEdits) {
sE.anchor.clearUserDefinedLocation();
tE.anchor.clearUserDefinedLocation();
connector.setEdited(false);
}
var sAnchorP = sE.anchor.getCurrentLocation(sE),
tAnchorP = tE.anchor.getCurrentLocation(tE);
connector.resetBounds();
connector.compute({
sourcePos:sAnchorP,
targetPos:tAnchorP,
sourceEndpoint:this.endpoints[sIdx],
targetEndpoint:this.endpoints[tIdx],
sourceAnchor:this.endpoints[sIdx].anchor,
targetAnchor:this.endpoints[tIdx].anchor,
lineWidth:self.paintStyleInUse.lineWidth,
sourceInfo:sourceInfo,
targetInfo:targetInfo,
clearEdits:params.clearEdits === true
});
var overlayExtents = {
minX:Infinity,
minY:Infinity,
maxX:-Infinity,
maxY:-Infinity
};
// compute overlays. we do this first so we can get their placements, and adjust the
// container if needs be (if an overlay would be clipped)
for ( var i = 0; i < self.overlays.length; i++) {
var o = self.overlays[i];
if (o.isVisible()) {
self.overlayPlacements[i] = o.draw(connector, self.paintStyleInUse);
overlayExtents.minX = Math.min(overlayExtents.minX, self.overlayPlacements[i].minX);
overlayExtents.maxX = Math.max(overlayExtents.maxX, self.overlayPlacements[i].maxX);
overlayExtents.minY = Math.min(overlayExtents.minY, self.overlayPlacements[i].minY);
overlayExtents.maxY = Math.max(overlayExtents.maxY, self.overlayPlacements[i].maxY);
}
}
var lineWidth = (self.paintStyleInUse.lineWidth || 1) / 2,
outlineWidth = self.paintStyleInUse.lineWidth || 0,
extents = {
xmin : Math.min(connector.bounds.minX - (lineWidth + outlineWidth), overlayExtents.minX),
ymin : Math.min(connector.bounds.minY - (lineWidth + outlineWidth), overlayExtents.minY),
xmax : Math.max(connector.bounds.maxX + (lineWidth + outlineWidth), overlayExtents.maxX),
ymax : Math.max(connector.bounds.maxY + (lineWidth + outlineWidth), overlayExtents.maxY)
};
// paint the connector.
connector.paint(self.paintStyleInUse, null, extents);
// and then the overlays
for ( var i = 0; i < self.overlays.length; i++) {
var o = self.overlays[i];
if (o.isVisible()) {
o.paint(self.overlayPlacements[i], extents);
}
}
}
lastPaintedAt = timestamp;
}
};
/*
* Function: repaint
* Repaints the Connection. No parameters exposed to public API.
*/
this.repaint = function(params) {
params = params || {};
var recalc = !(params.recalc === false);
this.paint({ elId : this.sourceId, recalc : recalc, timestamp:params.timestamp, clearEdits:params.clearEdits });
};
// the very last thing we do is check to see if a 'type' was supplied in the params
var _type = params.type || self.endpoints[0].connectionType || self.endpoints[1].connectionType;
if (_type)
self.addType(_type, params.data, _jsPlumb.isSuspendDrawing());
// END PAINTING
}; // END Connection class
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-connector-editors.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the jsPlumb connector editors. It is not deployed wth the released versions of jsPlumb; you need to
* include it as an extra script.
*
* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt@gmail.com)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
var AbstractEditor = function(params) {
var self = this;
};
// TODO: this is for a Straight segment.it would be better to have these all available somewjere, keyed
// by segment type
var findClosestPointOnPath = function(seg, x, y, i) {
var m = seg[0] == seg[2] ? Infinity : 0,
m2 = -1 / m,
out = { s:seg, m:m, i:i, x:-1, y:-1, d:Infinity };
if (m == 0) {
// a horizontal line. if x is in the range of this line then distance is delta y. otherwise we consider it to be
// infinity.
if ( (seg[0] <= x && x <= seg[2]) || (seg[2] <= x && x <= seg[0])) {
out.x = x,
out.y = seg[1];
out.d = Math.abs(y - seg[1]);
}
}
else if (m == Infinity || m == -Infinity) {
// a vertical line. if y is in the range of this line then distance is delta x. otherwise we consider it to be
// infinity.
if ((seg[1] <= y && y <= seg[3]) || (seg[3] <= y && y <= seg[1])){
out.x = seg[0];
out.y = y;
out.d = Math.abs(x - seg[0]);
}
}
else {
// closest point lies on normal from given point to this line.
var b = seg[1] - (m * seg[0]),
b2 = y - (m2 * x),
// now we know that
// y1 = m.x1 + b and y1 = m2.x1 + b2
// so: m.x1 + b = m2.x1 + b2
// x1(m - m2) = b2 - b
// x1 = (b2 - b) / (m - m2)
_x1 = (b2 -b) / (m - m2),
_y1 = (m * _x1) + b,
d = jsPlumbUtil.lineLength([ x, y ], [ _x1, _y1 ]),
fractionInSegment = jsPlumbUtil.lineLength([ _x1, _y1 ], [ seg[0], seg[1] ]);
out.d = d;
out.x = _x1;
out.y = _y1;
out.l = fractionInSegment / length;
}
return out;
};
jsPlumb.ConnectorEditors = {
/*
Function: FlowchartConnectorEditor
lets you drag the segments of a flowchart connection around.
*/
"Flowchart":function(params) {
AbstractEditor.apply(this, arguments);
var jpcl = jsPlumb.CurrentLibrary,
documentMouseUp = function(e) {
e.stopPropagation();
e.preventDefault();
jpcl.unbind(document, "mouseup", documentMouseUp);
jpcl.unbind(document, "mousemove", documentMouseMove);
downAt = null;
currentSegments = null;
selectedSegment = null;
segmentCoords = null;
params.connection.setHover(false);
params.connector.setSuspendEvents(false);
params.connection.endpoints[0].setSuspendEvents(false);
params.connection.endpoints[1].setSuspendEvents(false);
params.connection.editCompleted();
},
downAt = null,
currentSegments = null,
selectedSegment = null,
segmentCoords = null,
anchorsMoveable = params.params.anchorsMoveable,
sgn = function(p1, p2) {
if (p1[0] == p2[0])
return p1[1] < p2[1] ? 1 : -1;
else
return p1[0] < p2[0] ? 1 : -1;
},
// collapses currentSegments by joining subsequent segments that are in the
// same axis. we do this because it doesn't matter about stubs any longer once a user
// is editing a connector. so it is best to reduce the number of segments to the
// minimum.
_collapseSegments = function() {
var _last = null, _lastAxis = null, s = [];
for (var i = 0; i < currentSegments.length; i++) {
var seg = currentSegments[i], axis = seg[4], axisIndex = (axis == "v" ? 3 : 2);
if (_last != null && _lastAxis === axis) {
_last[axisIndex] = seg[axisIndex];
}
else {
s.push(seg);
_last = seg;
_lastAxis = seg[4];
}
}
currentSegments = s;
},
// attempt to shift anchor
_shiftAnchor = function(endpoint, horizontal, value) {
var elementSize = jpcl.getSize(endpoint.element),
sizeValue = elementSize[horizontal ? 1 : 0],
off = jpcl.getOffset(endpoint.element),
cc = jpcl.getElementObject(params.connector.canvas.parentNode),
co = jpcl.getOffset(cc),
offValue = off[horizontal ? "top" : "left"] - co[horizontal ? "top" : "left"],
ap = endpoint.anchor.getCurrentLocation(),
desiredLoc = horizontal ? params.connector.y + value : params.connector.x + value;
if (anchorsMoveable) {
if (offValue < desiredLoc && desiredLoc < offValue + sizeValue) {
// if still on the element, okay to move.
var udl = [ ap[0], ap[1] ];
ap[horizontal ? 1 : 0] = desiredLoc;
endpoint.anchor.setUserDefinedLocation(ap);
return value;
}
else {
// otherwise, clamp to element edge
var edgeVal = desiredLoc < offValue ? offValue : offValue + sizeValue;
return edgeVal - (horizontal ? params.connector.y: params.connector.x);
}
}
else {
// otherwise, return the current anchor point.
return ap[horizontal ? 1 : 0] - params.connector[horizontal ? "y" : "x"];
}
},
_updateSegmentOrientation = function(seg) {
if (seg[0] != seg[2]) seg[5] = (seg[0] < seg[2]) ? 1 : -1;
if (seg[1] != seg[3]) seg[6] = (seg[1] < seg[3]) ? 1 : -1;
},
documentMouseMove = function(e) {
if (selectedSegment != null) {
var m = selectedSegment.m, s = selectedSegment.s,
x = (e.pageX || e.page.x), y = (e.pageY || e.page.y),
dx = m == 0 ? 0 : x - downAt[0], dy = m == 0 ? y - downAt[1] : 0,
newX1 = segmentCoords[0] + dx,
newY1 = segmentCoords[1] + dy,
newX2 = segmentCoords[2] + dx,
newY2 = segmentCoords[3] + dy,
horizontal = s[4] == "h";
// so here we know the new x,y values we would like to set for the start
// and end of this segment. but we may not be able to set these values: if this
// is the first segment, for example, then we are constrained by how far the anchor
// can move (before it slides off its element). same thing goes if this is the last
// segment. if this is not the first or last segment then there are other considerations.
// we know, from having run collapse segments, that there will never be two
// consecutive segments that are not at right angles to each other, so what we need to
// know is whether we can adjust the endpoint of the previous segment to the values we
// want, and the same question for the start values of the next segment. the answer to
// that is whether or not the segment in question would be rendered too small by such
// a change. if that is the case (and the same goes for anchors) then we want to know
// what an agreeable value is, and we use that.
if (selectedSegment.i == 0) {
var anchorLoc = _shiftAnchor(params.connection.endpoints[0], horizontal, horizontal ? newY1 : newX1);
if (horizontal)
newY1 = newY2 = anchorLoc;
else
newX1 = newX2 = anchorLoc;
currentSegments[1][0] = newX2;
currentSegments[1][1] = newY2;
_updateSegmentOrientation(currentSegments[1]);
}
else if (selectedSegment.i == currentSegments.length - 1) {
var anchorLoc = _shiftAnchor(params.connection.endpoints[1], horizontal, horizontal ? newY1 : newX1);
if (horizontal)
newY1 = newY2 = anchorLoc;
else
newX1 = newX2 = anchorLoc;
currentSegments[currentSegments.length - 2][2] = newX1;
currentSegments[currentSegments.length - 2][3] = newY1;
_updateSegmentOrientation(currentSegments[currentSegments.length - 2]);
}
else {
if (!horizontal) {
currentSegments[selectedSegment.i - 1][2] = newX1;
currentSegments[selectedSegment.i + 1][0] = newX2;
}
else {
currentSegments[selectedSegment.i - 1][3] = newY1;
currentSegments[selectedSegment.i + 1][1] = newY2;
}
_updateSegmentOrientation(currentSegments[selectedSegment.i + 1]);
_updateSegmentOrientation(currentSegments[selectedSegment.i - 1]);
}
s[0] = newX1;
s[1] = newY1;
s[2] = newX2;
s[3] = newY2;
params.connector.setSegments(currentSegments);
params.connection.repaint();
params.connection.endpoints[0].repaint();
params.connection.endpoints[1].repaint();
params.connector.setEdited(true);
}
};
// bind to mousedown and mouseup, for editing
params.connector.bind("mousedown", function(c, e) {
var x = (e.pageX || e.page.x),
y = (e.pageY || e.page.y),
oe = jpcl.getElementObject(params.connection.getConnector().canvas),
o = jpcl.getOffset(oe),
minD = Infinity;
params.connection.setHover(true);
params.connector.setSuspendEvents(true);
params.connection.endpoints[0].setSuspendEvents(true);
params.connection.endpoints[1].setSuspendEvents(true);
currentSegments = params.connector.getOriginalSegments();
_collapseSegments();
for (var i = 0; i < currentSegments.length; i++) {
var _s = findClosestPointOnPath(currentSegments[i], x - o.left, y - o.top, i);
if (_s.d < minD) {
selectedSegment = _s;
segmentCoords = [ _s.s[0], _s.s[1], _s.s[2], _s.s[3] ]; // copy the coords at mousedown
minD = _s.d;
}
}
downAt = [ x, y ];
jpcl.bind(document, "mouseup", documentMouseUp);
jpcl.bind(document, "mousemove", documentMouseMove);
if (selectedSegment != null) {
params.connection.editStarted();
}
});
}
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-connectors-flowchart.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the 'flowchart' connectors, consisting of vertical and horizontal line segments.
*
* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt@gmail.com)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
/**
* Function: Constructor
*
* Parameters:
* stub - minimum length for the stub at each end of the connector. This can be an integer, giving a value for both ends of the connections,
* or an array of two integers, giving separate values for each end. The default is an integer with value 30 (pixels).
* gap - gap to leave between the end of the connector and the element on which the endpoint resides. if you make this larger than stub then you will see some odd looking behaviour.
Like stub, this can be an array or a single value. defaults to 0 pixels for each end.
* cornerRadius - optional, defines the radius of corners between segments. defaults to 0 (hard edged corners).
*/
jsPlumb.Connectors.Flowchart = function(params) {
this.type = "Flowchart";
params = params || {};
params.stub = params.stub || 30;
var self = this,
_super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments),
midpoint = params.midpoint || 0.5,
points = [], segments = [],
grid = params.grid,
userSuppliedSegments = null,
lastx = null, lasty = null, lastOrientation,
cornerRadius = params.cornerRadius != null ? params.cornerRadius : 10,
sgn = function(n) { return n < 0 ? -1 : n == 0 ? 0 : 1; },
/**
* helper method to add a segment.
*/
addSegment = function(segments, x, y, sx, sy) {
// if segment would have length zero, dont add it.
if (sx == lastx && sy == lasty) return;
if (x == lastx && y == lasty) return;
var lx = lastx == null ? sx : lastx,
ly = lasty == null ? sy : lasty,
o = lx == x ? "v" : "h",
sgnx = sgn(x - lx),
sgny = sgn(y - ly);
lastx = x;
lasty = y;
segments.push([lx, ly, x, y, o, sgnx, sgny]);
},
segLength = function(s) {
return Math.sqrt(Math.pow(s[0] - s[2], 2) + Math.pow(s[1] - s[3], 2));
},
_cloneArray = function(a) { var _a = []; _a.push.apply(_a, a); return _a;},
updateMinMax = function(a1) {
self.bounds.minX = Math.min(self.bounds.minX, a1[2]);
self.bounds.maxX = Math.max(self.bounds.maxX, a1[2]);
self.bounds.minY = Math.min(self.bounds.minY, a1[3]);
self.bounds.maxY = Math.max(self.bounds.maxY, a1[3]);
},
writeSegments = function(segments, paintInfo) {
var current, next;
for (var i = 0; i < segments.length - 1; i++) {
current = current || _cloneArray(segments[i]);
next = _cloneArray(segments[i + 1]);
if (cornerRadius > 0 && current[4] != next[4]) {
var radiusToUse = Math.min(cornerRadius, segLength(current), segLength(next));
// right angle. adjust current segment's end point, and next segment's start point.
current[2] -= current[5] * radiusToUse;
current[3] -= current[6] * radiusToUse;
next[0] += next[5] * radiusToUse;
next[1] += next[6] * radiusToUse;
var ac = (current[6] == next[5] && next[5] == 1) ||
((current[6] == next[5] && next[5] == 0) && current[5] != next[6]) ||
(current[6] == next[5] && next[5] == -1),
sgny = next[1] > current[3] ? 1 : -1,
sgnx = next[0] > current[2] ? 1 : -1,
sgnEqual = sgny == sgnx,
cx = (sgnEqual && ac || (!sgnEqual && !ac)) ? next[0] : current[2],
cy = (sgnEqual && ac || (!sgnEqual && !ac)) ? current[3] : next[1];
_super.addSegment("Straight", {
x1:current[0], y1:current[1], x2:current[2], y2:current[3]
});
_super.addSegment("Arc", {
r:radiusToUse,
x1:current[2],
y1:current[3],
x2:next[0],
y2:next[1],
cx:cx,
cy:cy,
ac:ac
});
}
else {
_super.addSegment("Straight", {
x1:current[0], y1:current[1], x2:current[2], y2:current[3]
});
}
current = next;
}
// last segment
_super.addSegment("Straight", {
x1:next[0], y1:next[1], x2:next[2], y2:next[3]
});
};
this.setSegments = function(s) {
userSuppliedSegments = s;
};
this.isEditable = function() { return true; };
/*
Function: getOriginalSegments
Gets the segments before the addition of rounded corners. This is used by the flowchart
connector editor, since it only wants to concern itself with the original segments.
*/
this.getOriginalSegments = function() {
return userSuppliedSegments || segments;
};
this._compute = function(paintInfo, params) {
if (params.clearEdits)
userSuppliedSegments = null;
if (userSuppliedSegments != null) {
writeSegments(userSuppliedSegments, paintInfo);
return;
}
segments = [];
lastx = null; lasty = null;
lastOrientation = null;
var midx = paintInfo.startStubX + ((paintInfo.endStubX - paintInfo.startStubX) * midpoint),
midy = paintInfo.startStubY + ((paintInfo.endStubY - paintInfo.startStubY) * midpoint);
// add the start stub segment.
addSegment(segments, paintInfo.startStubX, paintInfo.startStubY, paintInfo.sx, paintInfo.sy);
var findClearedLine = function(start, mult, anchorPos, dimension) {
return start + (mult * (( 1 - anchorPos) * dimension) + _super.maxStub);
},
orientations = { x:[ 0, 1 ], y:[ 1, 0 ] },
lineCalculators = {
perpendicular : function(axis) {
with (paintInfo) {
var sis = {
x:[ [ [ 1,2,3,4 ], null, [ 2,1,4,3 ] ], null, [ [ 4,3,2,1 ], null, [ 3,4,1,2 ] ] ],
y:[ [ [ 3,2,1,4 ], null, [ 2,3,4,1 ] ], null, [ [ 4,1,2,3 ], null, [ 1,4,3,2 ] ] ]
},
stubs = {
x:[ [ startStubX, endStubX ] , null, [ endStubX, startStubX ] ],
y:[ [ startStubY, endStubY ] , null, [ endStubY, startStubY ] ]
},
midLines = {
x:[ [ midx, startStubY ], [ midx, endStubY ] ],
y:[ [ startStubX, midy ], [ endStubX, midy ] ]
},
linesToEnd = {
x:[ [ endStubX, startStubY ] ],
y:[ [ startStubX, endStubY ] ]
},
startToEnd = {
x:[ [ startStubX, endStubY ], [ endStubX, endStubY ] ],
y:[ [ endStubX, startStubY ], [ endStubX, endStubY ] ]
},
startToMidToEnd = {
x:[ [ startStubX, midy ], [ endStubX, midy ], [ endStubX, endStubY ] ],
y:[ [ midx, startStubY ], [ midx, endStubY ], [ endStubX, endStubY ] ]
},
otherStubs = {
x:[ startStubY, endStubY ],
y:[ startStubX, endStubX ]
},
soIdx = orientations[axis][0], toIdx = orientations[axis][1],
_so = so[soIdx] + 1,
_to = to[toIdx] + 1,
otherFlipped = (to[toIdx] == -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (to[toIdx] == 1 && (otherStubs[axis][1] > otherStubs[axis][0])),
stub1 = stubs[axis][_so][0],
stub2 = stubs[axis][_so][1],
segmentIndexes = sis[axis][_so][_to];
if (segment == segmentIndexes[3] || (segment == segmentIndexes[2] && otherFlipped)) {
return midLines[axis];
}
else if (segment == segmentIndexes[2] && stub2 < stub1) {
return linesToEnd[axis];
}
else if ((segment == segmentIndexes[2] && stub2 >= stub1) || (segment == segmentIndexes[1] && !otherFlipped)) {
return startToMidToEnd[axis];
}
else if (segment == segmentIndexes[0] || (segment == segmentIndexes[1] && otherFlipped)) {
return startToEnd[axis];
}
}
},
orthogonal : function(axis) {
var pi = paintInfo,
extent = {
"x":pi.so[0] == -1 ? Math.min(pi.startStubX, pi.endStubX) : Math.max(pi.startStubX, pi.endStubX),
"y":pi.so[1] == -1 ? Math.min(pi.startStubY, pi.endStubY) : Math.max(pi.startStubY, pi.endStubY)
}[axis];
return {
"x":[ [ extent, pi.startStubY ],[ extent, pi.endStubY ], [ pi.endStubX, pi.endStubY ] ],
"y":[ [ pi.startStubX, extent ], [ pi.endStubX, extent ],[ pi.endStubX, pi.endStubY ] ]
}[axis];
},
opposite : function(axis) {
var pi = paintInfo,
otherAxis = {"x":"y","y":"x"}[axis],
stub = "Stub" + axis.toUpperCase(),
otherStub = "Stub" + otherAxis.toUpperCase(),
otherStartStub = pi["start" + otherStub],
startStub = pi["start" + stub],
otherEndStub = pi["end" + otherStub],
endStub = pi["end" + stub],
dim = {"x":"height","y":"width"}[axis],
comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"],
idx = axis == "x" ? 0 : 1;
if (params.sourceEndpoint.elementId == params.targetEndpoint.elementId) {
var _val = otherStartStub + ((1 - params.sourceAnchor[otherAxis]) * params.sourceInfo[dim]) + _super.maxStub;
return {
"x":[ [ startStub, _val ], [ endStub, _val ] ],
"y":[ [ _val, startStub ], [ _val, endStub ] ]
}[axis];
}
else if (!comparator || (pi.so[idx] == 1 && startStub > endStub)
|| (pi.so[idx] == -1 && startStub < endStub)) {
return {
"x":[[ startStub, midy ], [ endStub, midy ]],
"y":[[ midx, startStub ], [ midx, endStub ]]
}[axis];
}
else if ((pi.so[idx] == 1 && startStub < endStub) || (pi.so[idx] == -1 && startStub > endStub)) {
return {
"x":[[ midx, pi.sy ], [ midx, pi.ty ]],
"y":[[ pi.sx, midy ], [ pi.tx, midy ]]
}[axis];
}
}
},
p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis);
if (p) {
for (var i = 0; i < p.length; i++) {
addSegment(segments, p[i][0], p[i][1]);
}
}
addSegment(segments, paintInfo.endStubX, paintInfo.endStubY);
// end stub
addSegment(segments, paintInfo.tx, paintInfo.ty);
writeSegments(segments, paintInfo);
};
this.getPath = function() {
var _last = null, _lastAxis = null, s = [], segs = userSuppliedSegments || segments;
for (var i = 0; i < segs.length; i++) {
var seg = segs[i], axis = seg[4], axisIndex = (axis == "v" ? 3 : 2);
if (_last != null && _lastAxis === axis) {
_last[axisIndex] = seg[axisIndex];
}
else {
if (seg[0] != seg[2] || seg[1] != seg[3]) {
s.push({
start:[ seg[0], seg[1] ],
end:[ seg[2], seg[3] ]
});
_last = seg;
_lastAxis = seg[4];
}
}
}
return s;
};
this.setPath = function(path) {
userSuppliedSegments = [];
for (var i = 0; i < path.length; i++) {
var lx = path[i].start[0],
ly = path[i].start[1],
x = path[i].end[0],
y = path[i].end[1],
o = lx == x ? "v" : "h",
sgnx = sgn(x - lx),
sgny = sgn(y - ly);
userSuppliedSegments.push([lx, ly, x, y, o, sgnx, sgny]);
}
};
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-connectors-statemachine.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the state machine connectors.
*
* Thanks to Brainstorm Mobile Solutions for supporting the development of these.
*
* Copyright (c) 2010 - 2013 Simon Porritt (simon.porritt@gmail.com)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
var Line = function(x1, y1, x2, y2) {
this.m = (y2 - y1) / (x2 - x1);
this.b = -1 * ((this.m * x1) - y1);
this.rectIntersect = function(x,y,w,h) {
var results = [];
// try top face
// the equation of the top face is y = (0 * x) + b; y = b.
var xInt = (y - this.b) / this.m;
// test that the X value is in the line's range.
if (xInt >= x && xInt <= (x + w)) results.push([ xInt, (this.m * xInt) + this.b ]);
// try right face
var yInt = (this.m * (x + w)) + this.b;
if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]);
// bottom face
var xInt = ((y + h) - this.b) / this.m;
// test that the X value is in the line's range.
if (xInt >= x && xInt <= (x + w)) results.push([ xInt, (this.m * xInt) + this.b ]);
// try left face
var yInt = (this.m * x) + this.b;
if (yInt >= y && yInt <= (y + h)) results.push([ (yInt - this.b) / this.m, yInt ]);
if (results.length == 2) {
var midx = (results[0][0] + results[1][0]) / 2, midy = (results[0][1] + results[1][1]) / 2;
results.push([ midx,midy ]);
// now calculate the segment inside the rectangle where the midpoint lies.
var xseg = midx <= x + (w / 2) ? -1 : 1,
yseg = midy <= y + (h / 2) ? -1 : 1;
results.push([xseg, yseg]);
return results;
}
return null;
};
},
_segment = function(x1, y1, x2, y2) {
if (x1 <= x2 && y2 <= y1) return 1;
else if (x1 <= x2 && y1 <= y2) return 2;
else if (x2 <= x1 && y2 >= y1) return 3;
return 4;
},
// the control point we will use depends on the faces to which each end of the connection is assigned, specifically whether or not the
// two faces are parallel or perpendicular. if they are parallel then the control point lies on the midpoint of the axis in which they
// are parellel and varies only in the other axis; this variation is proportional to the distance that the anchor points lie from the
// center of that face. if the two faces are perpendicular then the control point is at some distance from both the midpoints; the amount and
// direction are dependent on the orientation of the two elements. 'seg', passed in to this method, tells you which segment the target element
// lies in with respect to the source: 1 is top right, 2 is bottom right, 3 is bottom left, 4 is top left.
//
// sourcePos and targetPos are arrays of info about where on the source and target each anchor is located. their contents are:
//
// 0 - absolute x
// 1 - absolute y
// 2 - proportional x in element (0 is left edge, 1 is right edge)
// 3 - proportional y in element (0 is top edge, 1 is bottom edge)
//
_findControlPoint = function(midx, midy, segment, sourceEdge, targetEdge, dx, dy, distance, proximityLimit) {
// TODO (maybe)
// - if anchor pos is 0.5, make the control point take into account the relative position of the elements.
if (distance <= proximityLimit) return [midx, midy];
if (segment === 1) {
if (sourceEdge[3] <= 0 && targetEdge[3] >= 1) return [ midx + (sourceEdge[2] < 0.5 ? -1 * dx : dx), midy ];
else if (sourceEdge[2] >= 1 && targetEdge[2] <= 0) return [ midx, midy + (sourceEdge[3] < 0.5 ? -1 * dy : dy) ];
else return [ midx + (-1 * dx) , midy + (-1 * dy) ];
}
else if (segment === 2) {
if (sourceEdge[3] >= 1 && targetEdge[3] <= 0) return [ midx + (sourceEdge[2] < 0.5 ? -1 * dx : dx), midy ];
else if (sourceEdge[2] >= 1 && targetEdge[2] <= 0) return [ midx, midy + (sourceEdge[3] < 0.5 ? -1 * dy : dy) ];
else return [ midx + (1 * dx) , midy + (-1 * dy) ];
}
else if (segment === 3) {
if (sourceEdge[3] >= 1 && targetEdge[3] <= 0) return [ midx + (sourceEdge[2] < 0.5 ? -1 * dx : dx), midy ];
else if (sourceEdge[2] <= 0 && targetEdge[2] >= 1) return [ midx, midy + (sourceEdge[3] < 0.5 ? -1 * dy : dy) ];
else return [ midx + (-1 * dx) , midy + (-1 * dy) ];
}
else if (segment === 4) {
if (sourceEdge[3] <= 0 && targetEdge[3] >= 1) return [ midx + (sourceEdge[2] < 0.5 ? -1 * dx : dx), midy ];
else if (sourceEdge[2] <= 0 && targetEdge[2] >= 1) return [ midx, midy + (sourceEdge[3] < 0.5 ? -1 * dy : dy) ];
else return [ midx + (1 * dx) , midy + (-1 * dy) ];
}
};
/**
* Class: Connectors.StateMachine
* Provides 'state machine' connectors.
*/
/*
* Function: Constructor
*
* Parameters:
* curviness - measure of how "curvy" the connectors will be. this is translated as the distance that the
* Bezier curve's control point is from the midpoint of the straight line connecting the two
* endpoints, and does not mean that the connector is this wide. The Bezier curve never reaches
* its control points; they act as gravitational masses. defaults to 10.
* margin - distance from element to start and end connectors, in pixels. defaults to 5.
* proximityLimit - sets the distance beneath which the elements are consider too close together to bother
* with fancy curves. by default this is 80 pixels.
* loopbackRadius - the radius of a loopback connector. optional; defaults to 25.
* showLoopback - If set to false this tells the connector that it is ok to paint connections whose source and target is the same element with a connector running through the element. The default value for this is true; the connector always makes a loopback connection loop around the element rather than passing through it.
*/
jsPlumb.Connectors.StateMachine = function(params) {
params = params || {};
this.type = "StateMachine";
var self = this,
_super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments),
curviness = params.curviness || 10,
margin = params.margin || 5,
proximityLimit = params.proximityLimit || 80,
clockwise = params.orientation && params.orientation === "clockwise",
loopbackRadius = params.loopbackRadius || 25,
showLoopback = params.showLoopback !== false;
this._compute = function(paintInfo, params) {
var w = Math.abs(params.sourcePos[0] - params.targetPos[0]),
h = Math.abs(params.sourcePos[1] - params.targetPos[1]),
x = Math.min(params.sourcePos[0], params.targetPos[0]),
y = Math.min(params.sourcePos[1], params.targetPos[1]);
if (!showLoopback || (params.sourceEndpoint.elementId !== params.targetEndpoint.elementId)) {
var _sx = params.sourcePos[0] < params.targetPos[0] ? 0 : w,
_sy = params.sourcePos[1] < params.targetPos[1] ? 0:h,
_tx = params.sourcePos[0] < params.targetPos[0] ? w : 0,
_ty = params.sourcePos[1] < params.targetPos[1] ? h : 0;
// now adjust for the margin
if (params.sourcePos[2] === 0) _sx -= margin;
if (params.sourcePos[2] === 1) _sx += margin;
if (params.sourcePos[3] === 0) _sy -= margin;
if (params.sourcePos[3] === 1) _sy += margin;
if (params.targetPos[2] === 0) _tx -= margin;
if (params.targetPos[2] === 1) _tx += margin;
if (params.targetPos[3] === 0) _ty -= margin;
if (params.targetPos[3] === 1) _ty += margin;
//
// these connectors are quadratic bezier curves, having a single control point. if both anchors
// are located at 0.5 on their respective faces, the control point is set to the midpoint and you
// get a straight line. this is also the case if the two anchors are within 'proximityLimit', since
// it seems to make good aesthetic sense to do that. outside of that, the control point is positioned
// at 'curviness' pixels away along the normal to the straight line connecting the two anchors.
//
// there may be two improvements to this. firstly, we might actually support the notion of avoiding nodes
// in the UI, or at least making a good effort at doing so. if a connection would pass underneath some node,
// for example, we might increase the distance the control point is away from the midpoint in a bid to
// steer it around that node. this will work within limits, but i think those limits would also be the likely
// limits for, once again, aesthetic good sense in the layout of a chart using these connectors.
//
// the second possible change is actually two possible changes: firstly, it is possible we should gradually
// decrease the 'curviness' as the distance between the anchors decreases; start tailing it off to 0 at some
// point (which should be configurable). secondly, we might slightly increase the 'curviness' for connectors
// with respect to how far their anchor is from the center of its respective face. this could either look cool,
// or stupid, and may indeed work only in a way that is so subtle as to have been a waste of time.
//
var _midx = (_sx + _tx) / 2, _midy = (_sy + _ty) / 2,
m2 = (-1 * _midx) / _midy, theta2 = Math.atan(m2),
dy = (m2 == Infinity || m2 == -Infinity) ? 0 : Math.abs(curviness / 2 * Math.sin(theta2)),
dx = (m2 == Infinity || m2 == -Infinity) ? 0 : Math.abs(curviness / 2 * Math.cos(theta2)),
segment = _segment(_sx, _sy, _tx, _ty),
distance = Math.sqrt(Math.pow(_tx - _sx, 2) + Math.pow(_ty - _sy, 2)),
// calculate the control point. this code will be where we'll put in a rudimentary element avoidance scheme; it
// will work by extending the control point to force the curve to be, um, curvier.
_controlPoint = _findControlPoint(_midx,
_midy,
segment,
params.sourcePos,
params.targetPos,
curviness, curviness,
distance,
proximityLimit);
_super.addSegment("Bezier", {
x1:_tx, y1:_ty, x2:_sx, y2:_sy,
cp1x:_controlPoint[0], cp1y:_controlPoint[1],
cp2x:_controlPoint[0], cp2y:_controlPoint[1]
});
}
else {
// a loopback connector. draw an arc from one anchor to the other.
var x1 = params.sourcePos[0], x2 = params.sourcePos[0], y1 = params.sourcePos[1] - margin, y2 = params.sourcePos[1] - margin,
cx = x1, cy = y1 - loopbackRadius;
// canvas sizing stuff, to ensure the whole painted area is visible.
w = 2 * loopbackRadius,
h = 2 * loopbackRadius,
x = cx - loopbackRadius,
y = cy - loopbackRadius;
paintInfo.points[0] = x;
paintInfo.points[1] = y;
paintInfo.points[2] = w;
paintInfo.points[3] = h;
// ADD AN ARC SEGMENT.
_super.addSegment("Arc", {
x1:(x1-x) + 4,
y1:y1-y,
startAngle:0,
endAngle: 2 * Math.PI,
r:loopbackRadius,
ac:!clockwise,
x2:(x1-x) - 4,
y2:y1-y,
cx:cx-x,
cy:cy-y
});
}
};
};
})();
/*
// a possible rudimentary avoidance scheme, old now, perhaps not useful.
// if (avoidSelector) {
// var testLine = new Line(sourcePos[0] + _sx,sourcePos[1] + _sy,sourcePos[0] + _tx,sourcePos[1] + _ty);
// var sel = jsPlumb.getSelector(avoidSelector);
// for (var i = 0; i < sel.length; i++) {
// var id = jsPlumb.getId(sel[i]);
// if (id != sourceEndpoint.elementId && id != targetEndpoint.elementId) {
// o = jsPlumb.getOffset(id), s = jsPlumb.getSize(id);
//
// if (o && s) {
// var collision = testLine.rectIntersect(o.left,o.top,s[0],s[1]);
// if (collision) {
// set the control point to be a certain distance from the midpoint of the two points that
// the line crosses on the rectangle.
// TODO where will this 75 number come from?
// _controlX = collision[2][0] + (75 * collision[3][0]);
// / _controlY = collision[2][1] + (75 * collision[3][1]);
// }
// }
// }
// }
//}
*/
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-defaults.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the default Connectors, Endpoint and Overlay definitions.
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
/**
*
* Helper class to consume unused mouse events by components that are DOM elements and
* are used by all of the different rendering modes.
*
*/
jsPlumb.DOMElementComponent = function(params) {
jsPlumb.jsPlumbUIComponent.apply(this, arguments);
// when render mode is canvas, these functions may be called by the canvas mouse handler.
// this component is safe to pipe this stuff to /dev/null.
this.mousemove =
this.dblclick =
this.click =
this.mousedown =
this.mouseup = function(e) { };
};
jsPlumb.Segments = {
/*
* Class: AbstractSegment
* A Connector is made up of 1..N Segments, each of which has a Type, such as 'Straight', 'Arc',
* 'Bezier'. This is new from 1.4.0, and gives us a lot more flexibility when drawing connections: things such
* as rounded corners for flowchart connectors, for example, or a straight line stub for Bezier connections, are
* much easier to do now.
*
* A Segment is responsible for providing coordinates for painting it, and also must be able to report its length.
*
*/
AbstractSegment : function(params) {
this.params = params;
/**
* Function: findClosestPointOnPath
* Finds the closest point on this segment to the given [x, y],
* returning both the x and y of the point plus its distance from
* the supplied point, and its location along the length of the
* path inscribed by the segment. This implementation returns
* Infinity for distance and null values for everything else;
* subclasses are expected to override.
*/
this.findClosestPointOnPath = function(x, y) {
return {
d:Infinity,
x:null,
y:null,
l:null
};
};
this.getBounds = function() {
return {
minX:Math.min(params.x1, params.x2),
minY:Math.min(params.y1, params.y2),
maxX:Math.max(params.x1, params.x2),
maxY:Math.max(params.y1, params.y2)
};
};
},
Straight : function(params) {
var self = this,
_super = jsPlumb.Segments.AbstractSegment.apply(this, arguments),
length, m, m2, x1, x2, y1, y2,
_recalc = function() {
length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
m = jsPlumbUtil.gradient({x:x1, y:y1}, {x:x2, y:y2});
m2 = -1 / m;
};
this.type = "Straight";
self.getLength = function() { return length; };
self.getGradient = function() { return m; };
this.getCoordinates = function() {
return { x1:x1,y1:y1,x2:x2,y2:y2 };
};
this.setCoordinates = function(coords) {
x1 = coords.x1; y1 = coords.y1; x2 = coords.x2; y2 = coords.y2;
_recalc();
};
this.setCoordinates({x1:params.x1, y1:params.y1, x2:params.x2, y2:params.y2});
this.getBounds = function() {
return {
minX:Math.min(x1, x2),
minY:Math.min(y1, y2),
maxX:Math.max(x1, x2),
maxY:Math.max(y1, y2)
};
};
/**
* returns the point on the segment's path that is 'location' along the length of the path, where 'location' is a decimal from
* 0 to 1 inclusive. for the straight line segment this is simple maths.
*/
this.pointOnPath = function(location, absolute) {
if (location == 0 && !absolute)
return { x:x1, y:y1 };
else if (location == 1 && !absolute)
return { x:x2, y:y2 };
else {
var l = absolute ? location > 0 ? location : length + location : location * length;
return jsPlumbUtil.pointOnLine({x:x1, y:y1}, {x:x2, y:y2}, l);
}
};
/**
* returns the gradient of the segment at the given point - which for us is constant.
*/
this.gradientAtPoint = function(_) {
return m;
};
/**
* returns the point on the segment's path that is 'distance' along the length of the path from 'location', where
* 'location' is a decimal from 0 to 1 inclusive, and 'distance' is a number of pixels.
* this hands off to jsPlumbUtil to do the maths, supplying two points and the distance.
*/
this.pointAlongPathFrom = function(location, distance, absolute) {
var p = self.pointOnPath(location, absolute),
farAwayPoint = location == 1 ? {
x:x1 + ((x2 - x1) * 10),
y:y1 + ((y1 - y2) * 10)
} : distance <= 0 ? {x:x1, y:y1} : {x:x2, y:y2 };
if (distance <= 0 && Math.abs(distance) > 1) distance *= -1;
return jsPlumbUtil.pointOnLine(p, farAwayPoint, distance);
};
/**
Function: findClosestPointOnPath
Finds the closest point on this segment to [x,y]. See
notes on this method in AbstractSegment.
*/
this.findClosestPointOnPath = function(x, y) {
if (m == 0) {
return {
x:x,
y:y1,
d:Math.abs(y - y1)
};
}
else if (m == Infinity || m == -Infinity) {
return {
x:x1,
y:y,
d:Math.abs(x - 1)
};
}
else {
// closest point lies on normal from given point to this line.
var b = y1 - (m * x1),
b2 = y - (m2 * x),
// y1 = m.x1 + b and y1 = m2.x1 + b2
// so m.x1 + b = m2.x1 + b2
// x1(m - m2) = b2 - b
// x1 = (b2 - b) / (m - m2)
_x1 = (b2 -b) / (m - m2),
_y1 = (m * _x1) + b,
d = jsPlumbUtil.lineLength([ x, y ], [ _x1, _y1 ]),
fractionInSegment = jsPlumbUtil.lineLength([ _x1, _y1 ], [ x1, y1 ]);
return { d:d, x:_x1, y:_y1, l:fractionInSegment / length};
}
};
},
/*
Arc Segment. You need to supply:
r - radius
cx - center x for the arc
cy - center y for the arc
ac - whether the arc is anticlockwise or not. default is clockwise.
and then either:
startAngle - startAngle for the arc.
endAngle - endAngle for the arc.
or:
x1 - x for start point
y1 - y for start point
x2 - x for end point
y2 - y for end point
*/
Arc : function(params) {
var self = this,
_super = jsPlumb.Segments.AbstractSegment.apply(this, arguments),
_calcAngle = function(_x, _y) {
return jsPlumbUtil.theta([params.cx, params.cy], [_x, _y]);
},
_calcAngleForLocation = function(location) {
if (self.anticlockwise) {
var sa = self.startAngle < self.endAngle ? self.startAngle + TWO_PI : self.startAngle,
s = Math.abs(sa - self.endAngle);
return sa - (s * location);
}
else {
var ea = self.endAngle < self.startAngle ? self.endAngle + TWO_PI : self.endAngle,
s = Math.abs (ea - self.startAngle);
return self.startAngle + (s * location);
}
},
TWO_PI = 2 * Math.PI;
this.radius = params.r;
this.anticlockwise = params.ac;
this.type = "Arc";
if (params.startAngle && params.endAngle) {
this.startAngle = params.startAngle;
this.endAngle = params.endAngle;
this.x1 = params.cx + (self.radius * Math.cos(params.startAngle));
this.y1 = params.cy + (self.radius * Math.sin(params.startAngle));
this.x2 = params.cx + (self.radius * Math.cos(params.endAngle));
this.y2 = params.cy + (self.radius * Math.sin(params.endAngle));
}
else {
this.startAngle = _calcAngle(params.x1, params.y1);
this.endAngle = _calcAngle(params.x2, params.y2);
this.x1 = params.x1;
this.y1 = params.y1;
this.x2 = params.x2;
this.y2 = params.y2;
}
if (this.endAngle < 0) this.endAngle += TWO_PI;
if (this.startAngle < 0) this.startAngle += TWO_PI;
// segment is used by vml
this.segment = jsPlumbUtil.segment([this.x1, this.y1], [this.x2, this.y2]);
// we now have startAngle and endAngle as positive numbers, meaning the
// absolute difference (|d|) between them is the sweep (s) of this arc, unless the
// arc is 'anticlockwise' in which case 's' is given by 2PI - |d|.
var ea = self.endAngle < self.startAngle ? self.endAngle + TWO_PI : self.endAngle;
self.sweep = Math.abs (ea - self.startAngle);
if (self.anticlockwise) self.sweep = TWO_PI - self.sweep;
var circumference = 2 * Math.PI * self.radius,
frac = self.sweep / TWO_PI,
length = circumference * frac;
this.getLength = function() {
return length;
};
this.getBounds = function() {
return {
minX:params.cx - params.r,
maxX:params.cx + params.r,
minY:params.cy - params.r,
maxY:params.cy + params.r
}
};
var VERY_SMALL_VALUE = 0.0000000001,
gentleRound = function(n) {
var f = Math.floor(n), r = Math.ceil(n);
if (n - f < VERY_SMALL_VALUE)
return f;
else if (r - n < VERY_SMALL_VALUE)
return r;
return n;
};
/**
* returns the point on the segment's path that is 'location' along the length of the path, where 'location' is a decimal from
* 0 to 1 inclusive.
*/
this.pointOnPath = function(location, absolute) {
if (location == 0) {
return { x:self.x1, y:self.y1, theta:self.startAngle };
}
else if (location == 1) {
return { x:self.x2, y:self.y2, theta:self.endAngle };
}
if (absolute) {
location = location / length;
}
var angle = _calcAngleForLocation(location),
_x = params.cx + (params.r * Math.cos(angle)),
_y = params.cy + (params.r * Math.sin(angle));
return { x:gentleRound(_x), y:gentleRound(_y), theta:angle };
};
/**
* returns the gradient of the segment at the given point.
*/
this.gradientAtPoint = function(location, absolute) {
var p = self.pointOnPath(location, absolute);
var m = jsPlumbUtil.normal( [ params.cx, params.cy ], [p.x, p.y ] );
if (!self.anticlockwise && (m == Infinity || m == -Infinity)) m *= -1;
return m;
};
this.pointAlongPathFrom = function(location, distance, absolute) {
var p = self.pointOnPath(location, absolute),
arcSpan = distance / circumference * 2 * Math.PI,
dir = self.anticlockwise ? -1 : 1,
startAngle = p.theta + (dir * arcSpan),
startX = params.cx + (self.radius * Math.cos(startAngle)),
startY = params.cy + (self.radius * Math.sin(startAngle));
return {x:startX, y:startY};
};
},
Bezier : function(params) {
var self = this,
_super = jsPlumb.Segments.AbstractSegment.apply(this, arguments),
curve = [
{ x:params.x1, y:params.y1},
{ x:params.cp1x, y:params.cp1y },
{ x:params.cp2x, y:params.cp2y },
{ x:params.x2, y:params.y2 }
],
// although this is not a strictly rigorous determination of bounds
// of a bezier curve, it works for the types of curves that this segment
// type produces.
bounds = {
minX:Math.min(params.x1, params.x2, params.cp1x, params.cp2x),
minY:Math.min(params.y1, params.y2, params.cp1y, params.cp2y),
maxX:Math.max(params.x1, params.x2, params.cp1x, params.cp2x),
maxY:Math.max(params.y1, params.y2, params.cp1y, params.cp2y)
};
this.type = "Bezier";
var _translateLocation = function(_curve, location, absolute) {
if (absolute)
location = jsBezier.locationAlongCurveFrom(_curve, location > 0 ? 0 : 1, location);
return location;
};
/**
* returns the point on the segment's path that is 'location' along the length of the path, where 'location' is a decimal from
* 0 to 1 inclusive.
*/
this.pointOnPath = function(location, absolute) {
location = _translateLocation(curve, location, absolute);
return jsBezier.pointOnCurve(curve, location);
};
/**
* returns the gradient of the segment at the given point.
*/
this.gradientAtPoint = function(location, absolute) {
location = _translateLocation(curve, location, absolute);
return jsBezier.gradientAtPoint(curve, location);
};
this.pointAlongPathFrom = function(location, distance, absolute) {
location = _translateLocation(curve, location, absolute);
return jsBezier.pointAlongCurveFrom(curve, location, distance);
};
this.getLength = function() {
return jsBezier.getLength(curve);
};
this.getBounds = function() {
return bounds;
};
}
};
/*
Class: AbstractComponent
Superclass for AbstractConnector and AbstractEndpoint.
*/
var AbstractComponent = function() {
var self = this;
self.resetBounds = function() {
self.bounds = { minX:Infinity, minY:Infinity, maxX:-Infinity, maxY:-Infinity };
};
self.resetBounds();
};
/*
* Class: AbstractConnector
* Superclass for all Connectors; here is where Segments are managed. This is exposed on jsPlumb just so it
* can be accessed from other files. You should not try to instantiate one of these directly.
*
* When this class is asked for a pointOnPath, or gradient etc, it must first figure out which segment to dispatch
* that request to. This is done by keeping track of the total connector length as segments are added, and also
* their cumulative ratios to the total length. Then when the right segment is found it is a simple case of dispatching
* the request to it (and adjusting 'location' so that it is relative to the beginning of that segment.)
*/
jsPlumb.Connectors.AbstractConnector = function(params) {
AbstractComponent.apply(this, arguments);
var self = this,
segments = [],
editing = false,
totalLength = 0,
segmentProportions = [],
segmentProportionalLengths = [],
stub = params.stub || 0,
sourceStub = jsPlumbUtil.isArray(stub) ? stub[0] : stub,
targetStub = jsPlumbUtil.isArray(stub) ? stub[1] : stub,
gap = params.gap || 0,
sourceGap = jsPlumbUtil.isArray(gap) ? gap[0] : gap,
targetGap = jsPlumbUtil.isArray(gap) ? gap[1] : gap,
userProvidedSegments = null,
edited = false,
paintInfo = null;
// subclasses should override.
this.isEditable = function() { return false; };
this.setEdited = function(ed) {
edited = ed;
};
// to be overridden by subclasses.
this.getPath = function() { };
this.setPath = function(path) { };
/**
* Function: findSegmentForPoint
* Returns the segment that is closest to the given [x,y],
* null if nothing found. This function returns a JS
* object with:
*
* d - distance from segment
* l - proportional location in segment
* x - x point on the segment
* y - y point on the segment
* s - the segment itself.
*/
this.findSegmentForPoint = function(x, y) {
var out = { d:Infinity, s:null, x:null, y:null, l:null };
for (var i = 0; i < segments.length; i++) {
var _s = segments[i].findClosestPointOnPath(x, y);
if (_s.d < out.d) {
out.d = _s.d;
out.l = _s.l;
out.x = _s.x;
out.y = _s.y;
out.s = segments[i];
}
}
return out;
};
var _updateSegmentProportions = function() {
var curLoc = 0;
for (var i = 0; i < segments.length; i++) {
var sl = segments[i].getLength();
segmentProportionalLengths[i] = sl / totalLength;
segmentProportions[i] = [curLoc, (curLoc += (sl / totalLength)) ];
}
},
/**
* returns [segment, proportion of travel in segment, segment index] for the segment
* that contains the point which is 'location' distance along the entire path, where
* 'location' is a decimal between 0 and 1 inclusive. in this connector type, paths
* are made up of a list of segments, each of which contributes some fraction to
* the total length.
* From 1.3.10 this also supports the 'absolute' property, which lets us specify a location
* as the absolute distance in pixels, rather than a proportion of the total path.
*/
_findSegmentForLocation = function(location, absolute) {
if (absolute) {
location = location > 0 ? location / totalLength : (totalLength + location) / totalLength;
}
var idx = segmentProportions.length - 1, inSegmentProportion = 1;
//if (location < 1) {
for (var i = 0; i < segmentProportions.length; i++) {
if (segmentProportions[i][1] >= location) {
idx = i;
// todo is this correct for all connector path types?
inSegmentProportion = location == 1 ? 1 : location == 0 ? 0 : (location - segmentProportions[i][0]) / segmentProportionalLengths[i];
break;
}
}
//}
return { segment:segments[idx], proportion:inSegmentProportion, index:idx };
},
_addSegment = function(type, params) {
var s = new jsPlumb.Segments[type](params);
segments.push(s);
totalLength += s.getLength();
self.updateBounds(s);
},
_clearSegments = function() {
totalLength = 0;
segments.splice(0, segments.length);
segmentProportions.splice(0, segmentProportions.length);
segmentProportionalLengths.splice(0, segmentProportionalLengths.length);
};
this.setSegments = function(_segs) {
userProvidedSegments = [];
totalLength = 0;
for (var i = 0; i < _segs.length; i++) {
userProvidedSegments.push(_segs[i]);
totalLength += _segs[i].getLength();
}
};
var _prepareCompute = function(params) {
self.lineWidth = params.lineWidth;
var segment = jsPlumbUtil.segment(params.sourcePos, params.targetPos),
swapX = params.targetPos[0] < params.sourcePos[0],
swapY = params.targetPos[1] < params.sourcePos[1],
lw = params.lineWidth || 1,
so = params.sourceAnchor.orientation || params.sourceAnchor.getOrientation(params.sourceEndpoint),
to = params.targetAnchor.orientation || params.targetAnchor.getOrientation(params.targetEndpoint),
x = swapX ? params.targetPos[0] : params.sourcePos[0],
y = swapY ? params.targetPos[1] : params.sourcePos[1],
w = Math.abs(params.targetPos[0] - params.sourcePos[0]),
h = Math.abs(params.targetPos[1] - params.sourcePos[1]);
// if either anchor does not have an orientation set, we derive one from their relative
// positions. we fix the axis to be the one in which the two elements are further apart, and
// point each anchor at the other element. this is also used when dragging a new connection.
if (so[0] == 0 && so[1] == 0 || to[0] == 0 && to[1] == 0) {
var index = w > h ? 0 : 1, oIndex = [1,0][index];
so = []; to = [];
so[index] = params.sourcePos[index] > params.targetPos[index] ? -1 : 1;
to[index] = params.sourcePos[index] > params.targetPos[index] ? 1 : -1;
so[oIndex] = 0; to[oIndex] = 0;
}
var sx = swapX ? w + (sourceGap * so[0]) : sourceGap * so[0],
sy = swapY ? h + (sourceGap * so[1]) : sourceGap * so[1],
tx = swapX ? targetGap * to[0] : w + (targetGap * to[0]),
ty = swapY ? targetGap * to[1] : h + (targetGap * to[1]),
oProduct = ((so[0] * to[0]) + (so[1] * to[1]));
var result = {
sx:sx, sy:sy, tx:tx, ty:ty, lw:lw,
xSpan:Math.abs(tx - sx),
ySpan:Math.abs(ty - sy),
mx:(sx + tx) / 2,
my:(sy + ty) / 2,
so:so, to:to, x:x, y:y, w:w, h:h,
segment : segment,
startStubX : sx + (so[0] * sourceStub),
startStubY : sy + (so[1] * sourceStub),
endStubX : tx + (to[0] * targetStub),
endStubY : ty + (to[1] * targetStub),
isXGreaterThanStubTimes2 : Math.abs(sx - tx) > (sourceStub + targetStub),
isYGreaterThanStubTimes2 : Math.abs(sy - ty) > (sourceStub + targetStub),
opposite:oProduct == -1,
perpendicular:oProduct == 0,
orthogonal:oProduct == 1,
sourceAxis : so[0] == 0 ? "y" : "x",
points:[x, y, w, h, sx, sy, tx, ty ]
};
result.anchorOrientation = result.opposite ? "opposite" : result.orthogonal ? "orthogonal" : "perpendicular";
return result;
};
this.getSegments = function() { return segments; };
self.updateBounds = function(segment) {
var segBounds = segment.getBounds();
self.bounds.minX = Math.min(self.bounds.minX, segBounds.minX);
self.bounds.maxX = Math.max(self.bounds.maxX, segBounds.maxX);
self.bounds.minY = Math.min(self.bounds.minY, segBounds.minY);
self.bounds.maxY = Math.max(self.bounds.maxY, segBounds.maxY);
};
var dumpSegmentsToConsole = function() {
console.log("SEGMENTS:");
for (var i = 0; i < segments.length; i++) {
console.log(segments[i].type, segments[i].getLength(), segmentProportions[i]);
}
};
this.pointOnPath = function(location, absolute) {
//console.log("point on path", location);
var seg = _findSegmentForLocation(location, absolute);
//console.log("point on path", location, seg);
return seg.segment.pointOnPath(seg.proportion, absolute);
};
this.gradientAtPoint = function(location) {
var seg = _findSegmentForLocation(location, absolute);
return seg.segment.gradientAtPoint(seg.proportion, absolute);
};
this.pointAlongPathFrom = function(location, distance, absolute) {
var seg = _findSegmentForLocation(location, absolute);
// TODO what happens if this crosses to the next segment?
return seg.segment.pointAlongPathFrom(seg.proportion, distance, absolute);
};
this.compute = function(params) {
if (!edited)
paintInfo = _prepareCompute(params);
_clearSegments();
this._compute(paintInfo, params);
self.x = paintInfo.points[0];
self.y = paintInfo.points[1];
self.w = paintInfo.points[2];
self.h = paintInfo.points[3];
self.segment = paintInfo.segment;
_updateSegmentProportions();
};
return {
addSegment:_addSegment,
prepareCompute:_prepareCompute,
sourceStub:sourceStub,
targetStub:targetStub,
maxStub:Math.max(sourceStub, targetStub),
sourceGap:sourceGap,
targetGap:targetGap,
maxGap:Math.max(sourceGap, targetGap)
};
};
/**
* Class: Connectors.Straight
* The Straight connector draws a simple straight line between the two anchor points. It does not have any constructor parameters.
*/
jsPlumb.Connectors.Straight = function() {
this.type = "Straight";
var _super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments);
this._compute = function(paintInfo, _) {
_super.addSegment("Straight", {x1:paintInfo.sx, y1:paintInfo.sy, x2:paintInfo.startStubX, y2:paintInfo.startStubY});
_super.addSegment("Straight", {x1:paintInfo.startStubX, y1:paintInfo.startStubY, x2:paintInfo.endStubX, y2:paintInfo.endStubY});
_super.addSegment("Straight", {x1:paintInfo.endStubX, y1:paintInfo.endStubY, x2:paintInfo.tx, y2:paintInfo.ty});
};
};
/**
* Class:Connectors.Bezier
* This Connector draws a Bezier curve with two control points. You can provide a 'curviness' value which gets applied to jsPlumb's
* internal voodoo machine and ends up generating locations for the two control points. See the constructor documentation below.
*/
/**
* Function:Constructor
*
* Parameters:
* curviness - How 'curvy' you want the curve to be! This is a directive for the placement of control points, not endpoints of the curve, so your curve does not
* actually touch the given point, but it has the tendency to lean towards it. The larger this value, the greater the curve is pulled from a straight line.
* Optional; defaults to 150.
* stub - optional value for a distance to travel from the connector's endpoint before beginning the Bezier curve. defaults to 0.
*
*/
jsPlumb.Connectors.Bezier = function(params) {
params = params || {};
var self = this,
_super = jsPlumb.Connectors.AbstractConnector.apply(this, arguments),
stub = params.stub || 50,
majorAnchor = params.curviness || 150,
minorAnchor = 10;
this.type = "Bezier";
this.getCurviness = function() { return majorAnchor; };
this._findControlPoint = function(point, sourceAnchorPosition, targetAnchorPosition, sourceEndpoint, targetEndpoint, sourceAnchor, targetAnchor) {
// determine if the two anchors are perpendicular to each other in their orientation. we swap the control
// points around if so (code could be tightened up)
var soo = sourceAnchor.getOrientation(sourceEndpoint),
too = targetAnchor.getOrientation(targetEndpoint),
perpendicular = soo[0] != too[0] || soo[1] == too[1],
p = [];
if (!perpendicular) {
if (soo[0] == 0) // X
p.push(sourceAnchorPosition[0] < targetAnchorPosition[0] ? point[0] + minorAnchor : point[0] - minorAnchor);
else p.push(point[0] - (majorAnchor * soo[0]));
if (soo[1] == 0) // Y
p.push(sourceAnchorPosition[1] < targetAnchorPosition[1] ? point[1] + minorAnchor : point[1] - minorAnchor);
else p.push(point[1] + (majorAnchor * too[1]));
}
else {
if (too[0] == 0) // X
p.push(targetAnchorPosition[0] < sourceAnchorPosition[0] ? point[0] + minorAnchor : point[0] - minorAnchor);
else p.push(point[0] + (majorAnchor * too[0]));
if (too[1] == 0) // Y
p.push(targetAnchorPosition[1] < sourceAnchorPosition[1] ? point[1] + minorAnchor : point[1] - minorAnchor);
else p.push(point[1] + (majorAnchor * soo[1]));
}
return p;
};
this._compute = function(paintInfo, p) {
var sp = p.sourcePos,
tp = p.targetPos,
_w = Math.abs(sp[0] - tp[0]),
_h = Math.abs(sp[1] - tp[1]),
_sx = sp[0] < tp[0] ? _w : 0,
_sy = sp[1] < tp[1] ? _h : 0,
_tx = sp[0] < tp[0] ? 0 : _w,
_ty = sp[1] < tp[1] ? 0 : _h,
_CP = self._findControlPoint([_sx, _sy], sp, tp, p.sourceEndpoint, p.targetEndpoint, p.sourceAnchor, p.targetAnchor),
_CP2 = self._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint, p.targetAnchor, p.sourceAnchor);
_super.addSegment("Bezier", {
x1:_sx, y1:_sy, x2:_tx, y2:_ty,
cp1x:_CP[0], cp1y:_CP[1], cp2x:_CP2[0], cp2y:_CP2[1]
});
};
};
// ********************************* END OF CONNECTOR TYPES *******************************************************************
// ********************************* ENDPOINT TYPES *******************************************************************
jsPlumb.Endpoints.AbstractEndpoint = function(params) {
AbstractComponent.apply(this, arguments);
var self = this;
this.compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) {
var out = self._compute.apply(self, arguments);
self.x = out[0];
self.y = out[1];
self.w = out[2];
self.h = out[3];
self.bounds.minX = self.x;
self.bounds.minY = self.y;
self.bounds.maxX = self.x + self.w;
self.bounds.maxY = self.y + self.h;
return out;
};
return {
compute:self.compute,
cssClass:params.cssClass
};
};
/**
* Class: Endpoints.Dot
* A round endpoint, with default radius 10 pixels.
*/
/**
* Function: Constructor
*
* Parameters:
*
* radius - radius of the endpoint. defaults to 10 pixels.
*/
jsPlumb.Endpoints.Dot = function(params) {
this.type = "Dot";
var self = this,
_super = jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments);
params = params || {};
this.radius = params.radius || 10;
this.defaultOffset = 0.5 * this.radius;
this.defaultInnerRadius = this.radius / 3;
this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) {
var r = endpointStyle.radius || self.radius,
x = anchorPoint[0] - r,
y = anchorPoint[1] - r;
return [ x, y, r * 2, r * 2, r ];
};
};
/**
* Class: Endpoints.Rectangle
* A Rectangular Endpoint, with default size 20x20.
*/
/**
* Function: Constructor
*
* Parameters:
*
* width - width of the endpoint. defaults to 20 pixels.
* height - height of the endpoint. defaults to 20 pixels.
*/
jsPlumb.Endpoints.Rectangle = function(params) {
this.type = "Rectangle";
var self = this,
_super = jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments);
params = params || {};
this.width = params.width || 20;
this.height = params.height || 20;
this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) {
var width = endpointStyle.width || self.width,
height = endpointStyle.height || self.height,
x = anchorPoint[0] - (width/2),
y = anchorPoint[1] - (height/2);
return [ x, y, width, height];
};
};
var DOMElementEndpoint = function(params) {
jsPlumb.DOMElementComponent.apply(this, arguments);
var self = this;
var displayElements = [ ];
this.getDisplayElements = function() {
return displayElements;
};
this.appendDisplayElement = function(el) {
displayElements.push(el);
};
};
/**
* Class: Endpoints.Image
* Draws an image as the Endpoint.
*/
/**
* Function: Constructor
*
* Parameters:
*
* src - location of the image to use.
*/
jsPlumb.Endpoints.Image = function(params) {
this.type = "Image";
DOMElementEndpoint.apply(this, arguments);
var self = this,
_super = jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments),
initialized = false,
deleted = false,
widthToUse = params.width,
heightToUse = params.height,
_onload = null,
_endpoint = params.endpoint;
this.img = new Image();
self.ready = false;
this.img.onload = function() {
self.ready = true;
widthToUse = widthToUse || self.img.width;
heightToUse = heightToUse || self.img.height;
if (_onload) {
_onload(self);
}
};
/*
Function: setImage
Sets the Image to use in this Endpoint.
Parameters:
img - may be a URL or an Image object
onload - optional; a callback to execute once the image has loaded.
*/
_endpoint.setImage = function(img, onload) {
var s = img.constructor == String ? img : img.src;
_onload = onload;
self.img.src = img;
if (self.canvas != null)
self.canvas.setAttribute("src", img);
};
_endpoint.setImage(params.src || params.url, params.onload);
this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) {
self.anchorPoint = anchorPoint;
if (self.ready) return [anchorPoint[0] - widthToUse / 2, anchorPoint[1] - heightToUse / 2,
widthToUse, heightToUse];
else return [0,0,0,0];
};
self.canvas = document.createElement("img"), initialized = false;
self.canvas.style["margin"] = 0;
self.canvas.style["padding"] = 0;
self.canvas.style["outline"] = 0;
self.canvas.style["position"] = "absolute";
var clazz = params.cssClass ? " " + params.cssClass : "";
self.canvas.className = jsPlumb.endpointClass + clazz;
if (widthToUse) self.canvas.setAttribute("width", widthToUse);
if (heightToUse) self.canvas.setAttribute("height", heightToUse);
jsPlumb.appendElement(self.canvas, params.parent);
self.attachListeners(self.canvas, self);
self.cleanup = function() {
deleted = true;
};
var actuallyPaint = function(d, style, anchor) {
if (!deleted) {
if (!initialized) {
self.canvas.setAttribute("src", self.img.src);
self.appendDisplayElement(self.canvas);
initialized = true;
}
var x = self.anchorPoint[0] - (widthToUse / 2),
y = self.anchorPoint[1] - (heightToUse / 2);
jsPlumb.sizeCanvas(self.canvas, x, y, widthToUse, heightToUse);
}
};
this.paint = function(style, anchor) {
if (self.ready) {
actuallyPaint(style, anchor);
}
else {
window.setTimeout(function() {
self.paint(style, anchor);
}, 200);
}
};
};
/*
* Class: Endpoints.Blank
* An Endpoint that paints nothing (visible) on the screen. Supports cssClass and hoverClass parameters like all Endpoints.
*/
jsPlumb.Endpoints.Blank = function(params) {
var self = this,
_super = jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments);
this.type = "Blank";
DOMElementEndpoint.apply(this, arguments);
this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) {
return [anchorPoint[0], anchorPoint[1],10,0];
};
self.canvas = document.createElement("div");
self.canvas.style.display = "block";
self.canvas.style.width = "1px";
self.canvas.style.height = "1px";
self.canvas.style.background = "transparent";
self.canvas.style.position = "absolute";
self.canvas.className = self._jsPlumb.endpointClass;
jsPlumb.appendElement(self.canvas, params.parent);
this.paint = function(style, anchor) {
jsPlumb.sizeCanvas(self.canvas, self.x, self.y, self.w, self.h);
};
};
/*
* Class: Endpoints.Triangle
* A triangular Endpoint.
*/
/*
* Function: Constructor
*
* Parameters:
*
* width - width of the triangle's base. defaults to 55 pixels.
* height - height of the triangle from base to apex. defaults to 55 pixels.
*/
jsPlumb.Endpoints.Triangle = function(params) {
this.type = "Triangle";
var self = this,
_super = jsPlumb.Endpoints.AbstractEndpoint.apply(this, arguments);
params = params || { };
params.width = params.width || 55;
params.height = params.height || 55;
this.width = params.width;
this.height = params.height;
this._compute = function(anchorPoint, orientation, endpointStyle, connectorPaintStyle) {
var width = endpointStyle.width || self.width,
height = endpointStyle.height || self.height,
x = anchorPoint[0] - (width/2),
y = anchorPoint[1] - (height/2);
return [ x, y, width, height ];
};
};
// ********************************* END OF ENDPOINT TYPES *******************************************************************
// ********************************* OVERLAY DEFINITIONS ***********************************************************************
var AbstractOverlay = jsPlumb.Overlays.AbstractOverlay = function(params) {
var visible = true, self = this;
this.isAppendedAtTopLevel = true;
this.component = params.component;
this.loc = params.location == null ? 0.5 : params.location;
this.endpointLoc = params.endpointLocation == null ? [ 0.5, 0.5] : params.endpointLocation;
this.setVisible = function(val) {
visible = val;
self.component.repaint();
};
this.isVisible = function() { return visible; };
this.hide = function() { self.setVisible(false); };
this.show = function() { self.setVisible(true); };
this.incrementLocation = function(amount) {
self.loc += amount;
self.component.repaint();
};
this.setLocation = function(l) {
self.loc = l;
self.component.repaint();
};
this.getLocation = function() {
return self.loc;
};
};
/*
* Class: Overlays.Arrow
*
* An arrow overlay, defined by four points: the head, the two sides of the tail, and a 'foldback' point at some distance along the length
* of the arrow that lines from each tail point converge into. The foldback point is defined using a decimal that indicates some fraction
* of the length of the arrow and has a default value of 0.623. A foldback point value of 1 would mean that the arrow had a straight line
* across the tail.
*/
/*
* Function: Constructor
*
* Parameters:
*
* length - distance in pixels from head to tail baseline. default 20.
* width - width in pixels of the tail baseline. default 20.
* fillStyle - style to use when filling the arrow. defaults to "black".
* strokeStyle - style to use when stroking the arrow. defaults to null, which means the arrow is not stroked.
* lineWidth - line width to use when stroking the arrow. defaults to 1, but only used if strokeStyle is not null.
* foldback - distance (as a decimal from 0 to 1 inclusive) along the length of the arrow marking the point the tail points should fold back to. defaults to 0.623.
* location - distance (as a decimal from 0 to 1 inclusive) marking where the arrow should sit on the connector. defaults to 0.5.
* direction - indicates the direction the arrow points in. valid values are -1 and 1; 1 is default.
*/
jsPlumb.Overlays.Arrow = function(params) {
this.type = "Arrow";
AbstractOverlay.apply(this, arguments);
this.isAppendedAtTopLevel = false;
params = params || {};
var self = this;
this.length = params.length || 20;
this.width = params.width || 20;
this.id = params.id;
var direction = (params.direction || 1) < 0 ? -1 : 1,
paintStyle = params.paintStyle || { lineWidth:1 },
// how far along the arrow the lines folding back in come to. default is 62.3%.
foldback = params.foldback || 0.623;
this.computeMaxSize = function() { return self.width * 1.5; };
this.cleanup = function() { }; // nothing to clean up for Arrows
this.draw = function(component, currentConnectionPaintStyle) {
var hxy, mid, txy, tail, cxy;
if (component.pointAlongPathFrom) {
if (jsPlumbUtil.isString(self.loc) || self.loc > 1 || self.loc < 0) {
var l = parseInt(self.loc);
hxy = component.pointAlongPathFrom(l, direction * self.length / 2, true),
mid = component.pointOnPath(l, true),
txy = jsPlumbUtil.pointOnLine(hxy, mid, self.length);
}
else if (self.loc == 1) {
hxy = component.pointOnPath(self.loc);
mid = component.pointAlongPathFrom(self.loc, -1);
txy = jsPlumbUtil.pointOnLine(hxy, mid, self.length);
if (direction == -1) {
var _ = txy;
txy = hxy;
hxy = _;
}
}
else if (self.loc == 0) {
txy = component.pointOnPath(self.loc);
mid = component.pointAlongPathFrom(self.loc, 1);
hxy = jsPlumbUtil.pointOnLine(txy, mid, self.length);
if (direction == -1) {
var _ = txy;
txy = hxy;
hxy = _;
}
}
else {
hxy = component.pointAlongPathFrom(self.loc, direction * self.length / 2),
mid = component.pointOnPath(self.loc),
txy = jsPlumbUtil.pointOnLine(hxy, mid, self.length);
}
tail = jsPlumbUtil.perpendicularLineTo(hxy, txy, self.width);
cxy = jsPlumbUtil.pointOnLine(hxy, txy, foldback * self.length);
var d = { hxy:hxy, tail:tail, cxy:cxy },
strokeStyle = paintStyle.strokeStyle || currentConnectionPaintStyle.strokeStyle,
fillStyle = paintStyle.fillStyle || currentConnectionPaintStyle.strokeStyle,
lineWidth = paintStyle.lineWidth || currentConnectionPaintStyle.lineWidth,
info = {
component:component,
d:d,
lineWidth:lineWidth,
strokeStyle:strokeStyle,
fillStyle:fillStyle,
minX:Math.min(hxy.x, tail[0].x, tail[1].x),
maxX:Math.max(hxy.x, tail[0].x, tail[1].x),
minY:Math.min(hxy.y, tail[0].y, tail[1].y),
maxY:Math.max(hxy.y, tail[0].y, tail[1].y)
};
return info;
}
else return {component:component, minX:0,maxX:0,minY:0,maxY:0};
};
};
/*
* Class: Overlays.PlainArrow
*
* A basic arrow. This is in fact just one instance of the more generic case in which the tail folds back on itself to some
* point along the length of the arrow: in this case, that foldback point is the full length of the arrow. so it just does
* a 'call' to Arrow with foldback set appropriately.
*/
/*
* Function: Constructor
* See <Overlays.Arrow> for allowed parameters for this overlay.
*/
jsPlumb.Overlays.PlainArrow = function(params) {
params = params || {};
var p = jsPlumb.extend(params, {foldback:1});
jsPlumb.Overlays.Arrow.call(this, p);
this.type = "PlainArrow";
};
/*
* Class: Overlays.Diamond
*
* A diamond. Like PlainArrow, this is a concrete case of the more generic case of the tail points converging on some point...it just
* happens that in this case, that point is greater than the length of the the arrow.
*
* this could probably do with some help with positioning...due to the way it reuses the Arrow paint code, what Arrow thinks is the
* center is actually 1/4 of the way along for this guy. but we don't have any knowledge of pixels at this point, so we're kind of
* stuck when it comes to helping out the Arrow class. possibly we could pass in a 'transpose' parameter or something. the value
* would be -l/4 in this case - move along one quarter of the total length.
*/
/*
* Function: Constructor
* See <Overlays.Arrow> for allowed parameters for this overlay.
*/
jsPlumb.Overlays.Diamond = function(params) {
params = params || {};
var l = params.length || 40,
p = jsPlumb.extend(params, {length:l/2, foldback:2});
jsPlumb.Overlays.Arrow.call(this, p);
this.type = "Diamond";
};
// abstract superclass for overlays that add an element to the DOM.
var AbstractDOMOverlay = function(params) {
jsPlumb.DOMElementComponent.apply(this, arguments);
AbstractOverlay.apply(this, arguments);
var self = this, initialised = false, jpcl = jsPlumb.CurrentLibrary;
params = params || {};
this.id = params.id;
var div;
var makeDiv = function() {
div = params.create(params.component);
div = jpcl.getDOMElement(div);
div.style["position"] = "absolute";
var clazz = params["_jsPlumb"].overlayClass + " " +
(self.cssClass ? self.cssClass :
params.cssClass ? params.cssClass : "");
div.className = clazz;
params["_jsPlumb"].appendElement(div, params.component.parent);
params["_jsPlumb"].getId(div);
self.attachListeners(div, self);
self.canvas = div;
};
this.getElement = function() {
if (div == null) {
makeDiv();
}
return div;
};
this.getDimensions = function() {
return jpcl.getSize(jpcl.getElementObject(self.getElement()));
};
var cachedDimensions = null,
_getDimensions = function(component) {
if (cachedDimensions == null)
cachedDimensions = self.getDimensions();
return cachedDimensions;
};
/*
* Function: clearCachedDimensions
* Clears the cached dimensions for the label. As a performance enhancement, label dimensions are
* cached from 1.3.12 onwards. The cache is cleared when you change the label text, of course, but
* there are other reasons why the text dimensions might change - if you make a change through CSS, for
* example, you might change the font size. in that case you should explicitly call this method.
*/
this.clearCachedDimensions = function() {
cachedDimensions = null;
};
this.computeMaxSize = function() {
var td = _getDimensions();
return Math.max(td[0], td[1]);
};
//override setVisible
var osv = self.setVisible;
self.setVisible = function(state) {
osv(state); // call superclass
div.style.display = state ? "block" : "none";
};
this.cleanup = function() {
if (div != null) jpcl.removeElement(div);
};
this.paint = function(params, containerExtents) {
if (!initialised) {
self.getElement();
params.component.appendDisplayElement(div);
self.attachListeners(div, params.component);
initialised = true;
}
div.style.left = (params.component.x + params.d.minx) + "px";
div.style.top = (params.component.y + params.d.miny) + "px";
};
this.draw = function(component, currentConnectionPaintStyle) {
var td = _getDimensions();
if (td != null && td.length == 2) {
var cxy = {x:0,y:0};
if (component.pointOnPath) {
var loc = self.loc, absolute = false;
if (jsPlumbUtil.isString(self.loc) || self.loc < 0 || self.loc > 1) {
loc = parseInt(self.loc);
absolute = true;
}
cxy = component.pointOnPath(loc, absolute); // a connection
}
else {
var locToUse = self.loc.constructor == Array ? self.loc : self.endpointLoc;
cxy = { x:locToUse[0] * component.w,
y:locToUse[1] * component.h };
}
var minx = cxy.x - (td[0] / 2),
miny = cxy.y - (td[1] / 2);
return {
component:component,
d:{ minx:minx, miny:miny, td:td, cxy:cxy },
minX:minx,
maxX:minx + td[0],
minY:miny,
maxY:miny + td[1]
};
}
else return {minX:0,maxX:0,minY:0,maxY:0};
};
this.reattachListeners = function(connector) {
if (div) {
self.reattachListenersForElement(div, self, connector);
}
};
};
/*
* Class: Overlays.Custom
* A Custom overlay. You supply a 'create' function which returns some DOM element, and jsPlumb positions it.
* The 'create' function is passed a Connection or Endpoint.
*/
/*
* Function: Constructor
*
* Parameters:
* create - function for jsPlumb to call that returns a DOM element.
* location - distance (as a decimal from 0 to 1 inclusive) marking where the label should sit on the connector. defaults to 0.5.
* id - optional id to use for later retrieval of this overlay.
*
*/
jsPlumb.Overlays.Custom = function(params) {
this.type = "Custom";
AbstractDOMOverlay.apply(this, arguments);
};
jsPlumb.Overlays.GuideLines = function() {
var self = this;
self.length = 50;
self.lineWidth = 5;
this.type = "GuideLines";
AbstractOverlay.apply(this, arguments);
jsPlumb.jsPlumbUIComponent.apply(this, arguments);
this.draw = function(connector, currentConnectionPaintStyle) {
var head = connector.pointAlongPathFrom(self.loc, self.length / 2),
mid = connector.pointOnPath(self.loc),
tail = jsPlumbUtil.pointOnLine(head, mid, self.length),
tailLine = jsPlumbUtil.perpendicularLineTo(head, tail, 40),
headLine = jsPlumbUtil.perpendicularLineTo(tail, head, 20);
return {
connector:connector,
head:head,
tail:tail,
headLine:headLine,
tailLine:tailLine,
minX:Math.min(head.x, tail.x, headLine[0].x, headLine[1].x),
minY:Math.min(head.y, tail.y, headLine[0].y, headLine[1].y),
maxX:Math.max(head.x, tail.x, headLine[0].x, headLine[1].x),
maxY:Math.max(head.y, tail.y, headLine[0].y, headLine[1].y)
};
};
this.cleanup = function() { }; // nothing to clean up for GuideLines
};
/*
* Class: Overlays.Label
* A Label overlay. For all different renderer types (SVG/Canvas/VML), jsPlumb draws a Label overlay as a styled DIV. Version 1.3.0 of jsPlumb
* introduced the ability to set css classes on the label; this is now the preferred way for you to style a label. The 'labelStyle' parameter
* is still supported in 1.3.0 but its usage is deprecated. Under the hood, jsPlumb just turns that object into a bunch of CSS directive that it
* puts on the Label's 'style' attribute, so the end result is the same.
*/
/*
* Function: Constructor
*
* Parameters:
* cssClass - optional css class string to append to css class. This string is appended "as-is", so you can of course have multiple classes
* defined. This parameter is preferred to using labelStyle, borderWidth and borderStyle.
* label - the label to paint. May be a string or a function that returns a string. Nothing will be painted if your label is null or your
* label function returns null. empty strings _will_ be painted.
* location - distance (as a decimal from 0 to 1 inclusive) marking where the label should sit on the connector. defaults to 0.5.
* id - optional id to use for later retrieval of this overlay.
*
*/
jsPlumb.Overlays.Label = function(params) {
var self = this;
this.labelStyle = params.labelStyle || jsPlumb.Defaults.LabelStyle;
this.cssClass = this.labelStyle != null ? this.labelStyle.cssClass : null;
params.create = function() {
return document.createElement("div");
};
jsPlumb.Overlays.Custom.apply(this, arguments);
this.type = "Label";
var label = params.label || "",
self = this,
labelText = null;
/*
* Function: setLabel
* sets the label's, um, label. you would think i'd call this function
* 'setText', but you can pass either a Function or a String to this, so
* it makes more sense as 'setLabel'. This uses innerHTML on the label div, so keep
* that in mind if you need escaped HTML.
*/
this.setLabel = function(l) {
label = l;
labelText = null;
self.clearCachedDimensions();
_update();
self.component.repaint();
};
var _update = function() {
if (typeof label == "function") {
var lt = label(self);
self.getElement().innerHTML = lt.replace(/\r\n/g, "<br/>");
}
else {
if (labelText == null) {
labelText = label;
self.getElement().innerHTML = labelText.replace(/\r\n/g, "<br/>");
}
}
};
this.getLabel = function() {
return label;
};
var superGD = this.getDimensions;
this.getDimensions = function() {
_update();
return superGD();
};
};
// ********************************* END OF OVERLAY DEFINITIONS ***********************************************************************
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-dom-adapter.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the base functionality for DOM type adapters.
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
var canvasAvailable = !!document.createElement('canvas').getContext,
svgAvailable = !!window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"),
// http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
vmlAvailable = function() {
if (vmlAvailable.vml == undefined) {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
vmlAvailable.vml = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return vmlAvailable.vml;
};
/**
Manages dragging for some instance of jsPlumb.
*/
var DragManager = function(_currentInstance) {
var _draggables = {}, _dlist = [], _delements = {}, _elementsWithEndpoints = {},
// elementids mapped to the draggable to which they belong.
_draggablesForElements = {};
/**
register some element as draggable. right now the drag init stuff is done elsewhere, and it is
possible that will continue to be the case.
*/
this.register = function(el) {
var jpcl = jsPlumb.CurrentLibrary;
el = jpcl.getElementObject(el);
var id = _currentInstance.getId(el),
domEl = jpcl.getDOMElement(el),
parentOffset = jpcl.getOffset(el);
if (!_draggables[id]) {
_draggables[id] = el;
_dlist.push(el);
_delements[id] = {};
}
// look for child elements that have endpoints and register them against this draggable.
var _oneLevel = function(p, startOffset) {
if (p) {
for (var i = 0; i < p.childNodes.length; i++) {
if (p.childNodes[i].nodeType != 3 && p.childNodes[i].nodeType != 8) {
var cEl = jpcl.getElementObject(p.childNodes[i]),
cid = _currentInstance.getId(cEl, null, true);
if (cid && _elementsWithEndpoints[cid] && _elementsWithEndpoints[cid] > 0) {
var cOff = jpcl.getOffset(cEl);
_delements[id][cid] = {
id:cid,
offset:{
left:cOff.left - parentOffset.left,
top:cOff.top - parentOffset.top
}
};
_draggablesForElements[cid] = id;
}
_oneLevel(p.childNodes[i]);
}
}
}
};
_oneLevel(domEl);
};
// refresh the offsets for child elements of this element.
this.updateOffsets = function(elId) {
var jpcl = jsPlumb.CurrentLibrary,
el = jpcl.getElementObject(elId),
id = _currentInstance.getId(el),
children = _delements[id],
parentOffset = jpcl.getOffset(el);
if (children) {
for (var i in children) {
var cel = jpcl.getElementObject(i),
cOff = jpcl.getOffset(cel);
_delements[id][i] = {
id:i,
offset:{
left:cOff.left - parentOffset.left,
top:cOff.top - parentOffset.top
}
};
_draggablesForElements[i] = id;
}
}
};
/**
notification that an endpoint was added to the given el. we go up from that el's parent
node, looking for a parent that has been registered as a draggable. if we find one, we add this
el to that parent's list of elements to update on drag (if it is not there already)
*/
this.endpointAdded = function(el) {
var jpcl = jsPlumb.CurrentLibrary, b = document.body, id = _currentInstance.getId(el), c = jpcl.getDOMElement(el),
p = c.parentNode, done = p == b;
_elementsWithEndpoints[id] = _elementsWithEndpoints[id] ? _elementsWithEndpoints[id] + 1 : 1;
while (p != null && p != b) {
var pid = _currentInstance.getId(p, null, true);
if (pid && _draggables[pid]) {
var idx = -1, pEl = jpcl.getElementObject(p), pLoc = jpcl.getOffset(pEl);
if (_delements[pid][id] == null) {
var cLoc = jsPlumb.CurrentLibrary.getOffset(el);
_delements[pid][id] = {
id:id,
offset:{
left:cLoc.left - pLoc.left,
top:cLoc.top - pLoc.top
}
};
_draggablesForElements[id] = pid;
}
break;
}
p = p.parentNode;
}
};
this.endpointDeleted = function(endpoint) {
if (_elementsWithEndpoints[endpoint.elementId]) {
_elementsWithEndpoints[endpoint.elementId]--;
if (_elementsWithEndpoints[endpoint.elementId] <= 0) {
for (var i in _delements) {
if (_delements[i]) {
delete _delements[i][endpoint.elementId];
delete _draggablesForElements[endpoint.elementId];
}
}
}
}
};
this.changeId = function(oldId, newId) {
_delements[newId] = _delements[oldId];
_delements[oldId] = {};
_draggablesForElements[newId] = _draggablesForElements[oldId];
_draggablesForElements[oldId] = null;
};
this.getElementsForDraggable = function(id) {
return _delements[id];
};
this.elementRemoved = function(elementId) {
var elId = _draggablesForElements[elementId];
if (elId) {
delete _delements[elId][elementId];
delete _draggablesForElements[elementId];
}
};
this.reset = function() {
_draggables = {};
_dlist = [];
_delements = {};
_elementsWithEndpoints = {};
};
};
// for those browsers that dont have it. they still don't have it! but at least they won't crash.
if (!window.console)
window.console = { time:function(){}, timeEnd:function(){}, group:function(){}, groupEnd:function(){}, log:function(){} };
window.jsPlumbAdapter = {
headless:false,
appendToRoot : function(node) {
document.body.appendChild(node);
},
getRenderModes : function() {
return [ "canvas", "svg", "vml" ]
},
isRenderModeAvailable : function(m) {
return {
"canvas":canvasAvailable,
"svg":svgAvailable,
"vml":vmlAvailable()
}[m];
},
getDragManager : function(_jsPlumb) {
return new DragManager(_jsPlumb);
},
setRenderMode : function(mode) {
var renderMode;
if (mode) {
mode = mode.toLowerCase();
var canvasAvailable = this.isRenderModeAvailable("canvas"),
svgAvailable = this.isRenderModeAvailable("svg"),
vmlAvailable = this.isRenderModeAvailable("vml");
// now test we actually have the capability to do this.
if (mode === "svg") {
if (svgAvailable) renderMode = "svg"
else if (canvasAvailable) renderMode = "canvas"
else if (vmlAvailable) renderMode = "vml"
}
else if (mode === "canvas" && canvasAvailable) renderMode = "canvas";
else if (vmlAvailable) renderMode = "vml";
}
return renderMode;
}
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-drag.js 0 → 100644
View file @ e34796c6
/*
* this is experimental and probably will not be used. solutions exist for most libraries. but of course if
* i want to support multiple scopes at some stage then i will have to do dragging inside jsPlumb.
*/
;(function() {
window.jsPlumbDrag = function(_jsPlumb) {
var ta = new TouchAdapter();
this.draggable = function(selector) {
var el, elId, da = [], elo, d = false,
isInSelector = function(el) {
if (typeof selector == "string")
return selector === _jsPlumb.getId(el);
for (var i = 0; i < selector.length; i++) {
var _sel = jsPlumb.CurrentLibrary.getDOMElement(selector[i]);
if (_sel == el) return true;
}
return false;
};
ta.bind(document, "mousedown", function(e) {
var target = e.target || e.srcElement;
if (isInSelector(target)) {
el = jsPlumb.CurrentLibrary.getElementObject(target);
elId = _jsPlumb.getId(el);
elo = jsPlumb.CurrentLibrary.getOffset(el);
da = [e.pageX, e.pageY];
d = true;
}
});
ta.bind(document, "mousemove", function(e) {
if (d) {
var dx = e.pageX - da[0],
dy = e.pageY - da[1];
jsPlumb.CurrentLibrary.setOffset(el, {
left:elo.left + dx,
top:elo.top + dy
});
_jsPlumb.repaint(elId);
e.preventDefault();
e.stopPropagation();
}
});
ta.bind(document, "mouseup", function(e) {
el = null;
d = false;
});
};
var isIOS = ((/iphone|ipad/gi).test(navigator.appVersion));
if (isIOS)
_jsPlumb.draggable = this.draggable;
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-endpoint.js 0 → 100644
View file @ e34796c6
;(function() {
var _makeConnectionDragHandler = function(placeholder, _jsPlumb) {
var stopped = false;
return {
drag : function() {
if (stopped) {
stopped = false;
return true;
}
var _ui = jsPlumb.CurrentLibrary.getUIPosition(arguments, _jsPlumb.getZoom());
if (placeholder.element) {
jsPlumb.CurrentLibrary.setOffset(placeholder.element, _ui);
_jsPlumb.repaint(placeholder.element, _ui);
}
},
stopDrag : function() {
stopped = true;
}
};
};
//
// creates a placeholder div for dragging purposes, adds it to the DOM, and pre-computes its offset.
//
var _makeDraggablePlaceholder = function(placeholder, parent, _jsPlumb) {
var n = document.createElement("div");
n.style.position = "absolute";
var placeholderDragElement = jsPlumb.CurrentLibrary.getElementObject(n);
jsPlumb.CurrentLibrary.appendElement(n, parent);
var id = _jsPlumb.getId(placeholderDragElement);
_jsPlumb.updateOffset( { elId : id });
// create and assign an id, and initialize the offset.
placeholder.id = id;
placeholder.element = placeholderDragElement;
};
var _makeFloatingEndpoint = function(paintStyle, referenceAnchor, endpoint, referenceCanvas, sourceElement, _jsPlumb, _newEndpoint) {
var floatingAnchor = new jsPlumb.FloatingAnchor( { reference : referenceAnchor, referenceCanvas : referenceCanvas, jsPlumbInstance:_jsPlumb });
//setting the scope here should not be the way to fix that mootools issue. it should be fixed by not
// adding the floating endpoint as a droppable. that makes more sense anyway!
return _newEndpoint({ paintStyle : paintStyle, endpoint : endpoint, anchor : floatingAnchor, source : sourceElement, scope:"__floating" });
};
jsPlumb.Endpoint = function(params) {
var self = this,
_jsPlumb = params["_jsPlumb"],
jpcl = jsPlumb.CurrentLibrary,
_att = jpcl.getAttribute,
_gel = jpcl.getElementObject,
_ju = jsPlumbUtil,
_getOffset = jpcl.getOffset,
_newConnection = params.newConnection,
_newEndpoint = params.newEndpoint,
_finaliseConnection = params.finaliseConnection,
_fireDetachEvent = params.fireDetachEvent,
floatingConnections = params.floatingConnections;
self.idPrefix = "_jsplumb_e_";
self.defaultLabelLocation = [ 0.5, 0.5 ];
self.defaultOverlayKeys = ["Overlays", "EndpointOverlays"];
this.parent = params.parent;
overlayCapableJsPlumbUIComponent.apply(this, arguments);
params = params || {};
// TYPE
this.getTypeDescriptor = function() { return "endpoint"; };
this.getDefaultType = function() {
return {
parameters:{},
scope:null,
maxConnections:self._jsPlumb.Defaults.MaxConnections,
paintStyle:self._jsPlumb.Defaults.EndpointStyle || jsPlumb.Defaults.EndpointStyle,
endpoint:self._jsPlumb.Defaults.Endpoint || jsPlumb.Defaults.Endpoint,
hoverPaintStyle:self._jsPlumb.Defaults.EndpointHoverStyle || jsPlumb.Defaults.EndpointHoverStyle,
overlays:self._jsPlumb.Defaults.EndpointOverlays || jsPlumb.Defaults.EndpointOverlays,
connectorStyle:params.connectorStyle,
connectorHoverStyle:params.connectorHoverStyle,
connectorClass:params.connectorClass,
connectorHoverClass:params.connectorHoverClass,
connectorOverlays:params.connectorOverlays,
connector:params.connector,
connectorTooltip:params.connectorTooltip
};
};
var superAt = this.applyType;
this.applyType = function(t, doNotRepaint) {
superAt(t, doNotRepaint);
if (t.maxConnections != null) _maxConnections = t.maxConnections;
if (t.scope) self.scope = t.scope;
self.connectorStyle = t.connectorStyle;
self.connectorHoverStyle = t.connectorHoverStyle;
self.connectorOverlays = t.connectorOverlays;
self.connector = t.connector;
self.connectorTooltip = t.connectorTooltip;
self.connectionType = t.connectionType;
self.connectorClass = t.connectorClass;
self.connectorHoverClass = t.connectorHoverClass;
};
// END TYPE
var visible = true, __enabled = !(params.enabled === false);
this.isVisible = function() { return visible; };
this.setVisible = function(v, doNotChangeConnections, doNotNotifyOtherEndpoint) {
visible = v;
if (self.canvas) self.canvas.style.display = v ? "block" : "none";
self[v ? "showOverlays" : "hideOverlays"]();
if (!doNotChangeConnections) {
for (var i = 0; i < self.connections.length; i++) {
self.connections[i].setVisible(v);
if (!doNotNotifyOtherEndpoint) {
var oIdx = self === self.connections[i].endpoints[0] ? 1 : 0;
// only change the other endpoint if this is its only connection.
if (self.connections[i].endpoints[oIdx].connections.length == 1) self.connections[i].endpoints[oIdx].setVisible(v, true, true);
}
}
}
};
/*
Function: isEnabled
Returns whether or not the Endpoint is enabled for drag/drop connections.
*/
this.isEnabled = function() { return __enabled; };
/*
Function: setEnabled
Sets whether or not the Endpoint is enabled for drag/drop connections.
Parameters:
enabled - whether or not the Endpoint is enabled.
*/
this.setEnabled = function(e) { __enabled = e; };
var _element = params.source, _uuid = params.uuid, floatingEndpoint = null, inPlaceCopy = null;
if (_uuid) params.endpointsByUUID[_uuid] = self;
var _elementId = _att(_element, "id");
this.elementId = _elementId;
this.element = _element;
self.setElementId = function(_elId) {
_elementId = _elId;
self.elementId = _elId;
self.anchor.elementId = _elId
};
self.setReferenceElement = function(_el) {
_element = _el;
self.element = _el;
};
var _connectionCost = params.connectionCost;
this.getConnectionCost = function() { return _connectionCost; };
this.setConnectionCost = function(c) {
_connectionCost = c;
};
var _connectionsDirected = params.connectionsDirected;
this.areConnectionsDirected = function() { return _connectionsDirected; };
this.setConnectionsDirected = function(b) { _connectionsDirected = b; };
self.anchor = params.anchor ? _jsPlumb.makeAnchor(params.anchor, _elementId, _jsPlumb) : params.anchors ? _jsPlumb.makeAnchor(params.anchors, _elementId, _jsPlumb) : _jsPlumb.makeAnchor(_jsPlumb.Defaults.Anchor || "TopCenter", _elementId, _jsPlumb);
// ANCHOR MANAGER
if (!params._transient) // in place copies, for example, are transient. they will never need to be retrieved during a paint cycle, because they dont move, and then they are deleted.
_jsPlumb.anchorManager.add(self, _elementId);
var _endpoint = null, originalEndpoint = null;
this.setEndpoint = function(ep) {
var endpointArgs = {
_jsPlumb:self._jsPlumb,
cssClass:params.cssClass,
parent:params.parent,
container:params.container,
tooltip:params.tooltip,
connectorTooltip:params.connectorTooltip,
endpoint:self
};
if (_ju.isString(ep))
_endpoint = new jsPlumb.Endpoints[_jsPlumb.getRenderMode()][ep](endpointArgs);
else if (_ju.isArray(ep)) {
endpointArgs = _ju.merge(ep[1], endpointArgs);
_endpoint = new jsPlumb.Endpoints[_jsPlumb.getRenderMode()][ep[0]](endpointArgs);
}
else {
_endpoint = ep.clone();
}
// assign a clone function using a copy of endpointArgs. this is used when a drag starts: the endpoint that was dragged is cloned,
// and the clone is left in its place while the original one goes off on a magical journey.
// the copy is to get around a closure problem, in which endpointArgs ends up getting shared by
// the whole world.
var argsForClone = jsPlumb.extend({}, endpointArgs);
_endpoint.clone = function() {
var o = new Object();
_endpoint.constructor.apply(o, [argsForClone]);
return o;
};
self.endpoint = _endpoint;
self.type = self.endpoint.type;
};
this.setEndpoint(params.endpoint || _jsPlumb.Defaults.Endpoint || jsPlumb.Defaults.Endpoint || "Dot");
originalEndpoint = _endpoint;
// override setHover to pass it down to the underlying endpoint
var _sh = self.setHover;
self.setHover = function() {
self.endpoint.setHover.apply(self.endpoint, arguments);
_sh.apply(self, arguments);
};
// endpoint delegates to first connection for hover, if there is one.
var internalHover = function(state) {
if (self.connections.length > 0)
self.connections[0].setHover(state, false);
else
self.setHover(state);
};
// bind listeners from endpoint to self, with the internal hover function defined above.
self.bindListeners(self.endpoint, self, internalHover);
this.setPaintStyle(params.paintStyle ||
params.style ||
_jsPlumb.Defaults.EndpointStyle ||
jsPlumb.Defaults.EndpointStyle, true);
this.setHoverPaintStyle(params.hoverPaintStyle ||
_jsPlumb.Defaults.EndpointHoverStyle ||
jsPlumb.Defaults.EndpointHoverStyle, true);
this.paintStyleInUse = this.getPaintStyle();
var originalPaintStyle = this.getPaintStyle();
this.connectorStyle = params.connectorStyle;
this.connectorHoverStyle = params.connectorHoverStyle;
this.connectorOverlays = params.connectorOverlays;
this.connector = params.connector;
this.connectorTooltip = params.connectorTooltip;
this.connectorClass = params.connectorClass;
this.connectorHoverClass = params.connectorHoverClass;
this.isSource = params.isSource || false;
this.isTarget = params.isTarget || false;
var _maxConnections = params.maxConnections || _jsPlumb.Defaults.MaxConnections; // maximum number of connections this endpoint can be the source of.
this.getAttachedElements = function() {
return self.connections;
};
this.canvas = this.endpoint.canvas;
this.connections = params.connections || [];
this.connectorPointerEvents = params["connector-pointer-events"];
this.scope = params.scope || _jsPlumb.getDefaultScope();
this.connectionType = params.connectionType;
this.timestamp = null;
self.reattachConnections = params.reattach || _jsPlumb.Defaults.ReattachConnections;
self.connectionsDetachable = _jsPlumb.Defaults.ConnectionsDetachable;
if (params.connectionsDetachable === false || params.detachable === false)
self.connectionsDetachable = false;
var dragAllowedWhenFull = params.dragAllowedWhenFull || true;
if (params.onMaxConnections)
self.bind("maxConnections", params.onMaxConnections);
this.computeAnchor = function(params) {
return self.anchor.compute(params);
};
this.addConnection = function(connection) {
self.connections.push(connection);
};
this.detach = function(connection, ignoreTarget, forceDetach, fireEvent, originalEvent) {
var idx = _ju.findWithFunction(self.connections, function(c) { return c.id == connection.id}),
actuallyDetached = false;
fireEvent = (fireEvent !== false);
if (idx >= 0) {
// 1. does the connection have a before detach (note this also checks jsPlumb's bound
// detach handlers; but then Endpoint's check will, too, hmm.)
if (forceDetach || connection._forceDetach || connection.isDetachable() || connection.isDetachAllowed(connection)) {
// get the target endpoint
var t = connection.endpoints[0] == self ? connection.endpoints[1] : connection.endpoints[0];
// it would be nice to check with both endpoints that it is ok to detach. but
// for this we'll have to get a bit fancier: right now if you use the same beforeDetach
// interceptor for two endpoints (which is kind of common, because it's part of the
// endpoint definition), then it gets fired twice. so in fact we need to loop through
// each beforeDetach and see if it returns false, at which point we exit. but if it
// returns true, we have to check the next one. however we need to track which ones
// have already been run, and not run them again.
if (forceDetach || connection._forceDetach || (self.isDetachAllowed(connection) /*&& t.isDetachAllowed(connection)*/)) {
self.connections.splice(idx, 1);
// this avoids a circular loop
if (!ignoreTarget) {
t.detach(connection, true, forceDetach);
// check connection to see if we want to delete the endpoints associated with it.
// we only detach those that have just this connection; this scenario is most
// likely if we got to this bit of code because it is set by the methods that
// create their own endpoints, like .connect or .makeTarget. the user is
// not likely to have interacted with those endpoints.
if (connection.endpointsToDeleteOnDetach){
for (var i = 0; i < connection.endpointsToDeleteOnDetach.length; i++) {
var cde = connection.endpointsToDeleteOnDetach[i];
if (cde && cde.connections.length == 0)
_jsPlumb.deleteEndpoint(cde);
}
}
}
_ju.removeElements(connection.getConnector().getDisplayElements(), connection.parent);
_ju.removeWithFunction(params.connectionsByScope[connection.scope], function(c) {
return c.id == connection.id;
});
actuallyDetached = true;
var doFireEvent = (!ignoreTarget && fireEvent)
_fireDetachEvent(connection, doFireEvent, originalEvent);
}
}
}
return actuallyDetached;
};
this.detachAll = function(fireEvent, originalEvent) {
while (self.connections.length > 0) {
self.detach(self.connections[0], false, true, fireEvent, originalEvent);
}
};
this.detachFrom = function(targetEndpoint, fireEvent, originalEvent) {
var c = [];
for ( var i = 0; i < self.connections.length; i++) {
if (self.connections[i].endpoints[1] == targetEndpoint
|| self.connections[i].endpoints[0] == targetEndpoint) {
c.push(self.connections[i]);
}
}
for ( var i = 0; i < c.length; i++) {
if (self.detach(c[i], false, true, fireEvent, originalEvent))
c[i].setHover(false, false);
}
};
this.detachFromConnection = function(connection) {
var idx = _ju.findWithFunction(self.connections, function(c) { return c.id == connection.id});
if (idx >= 0) {
self.connections.splice(idx, 1);
}
};
this.getElement = function() {
return _element;
};
this.setElement = function(el, container) {
// TODO possibly have this object take charge of moving the UI components into the appropriate
// parent. this is used only by makeSource right now, and that function takes care of
// moving the UI bits and pieces. however it would s
var parentId = _jsPlumb.getId(el);
// remove the endpoint from the list for the current endpoint's element
_ju.removeWithFunction(params.endpointsByElement[self.elementId], function(e) {
return e.id == self.id;
});
_element = _gel(el);
_elementId = _jsPlumb.getId(_element);
self.elementId = _elementId;
// need to get the new parent now
var newParentElement = params.getParentFromParams({source:parentId, container:container}),
curParent = jpcl.getParent(self.canvas);
jpcl.removeElement(self.canvas, curParent);
jpcl.appendElement(self.canvas, newParentElement);
// now move connection(s)...i would expect there to be only one but we will iterate.
for (var i = 0; i < self.connections.length; i++) {
self.connections[i].moveParent(newParentElement);
self.connections[i].sourceId = _elementId;
self.connections[i].source = _element;
}
_ju.addToList(params.endpointsByElement, parentId, self);
//_jsPlumb.repaint(parentId);
};
this.getUuid = function() {
return _uuid;
};
/**
* private but must be exposed.
*/
this.makeInPlaceCopy = function() {
var loc = self.anchor.getCurrentLocation(self),
o = self.anchor.getOrientation(self),
inPlaceAnchor = {
compute:function() { return [ loc[0], loc[1] ]},
getCurrentLocation : function() { return [ loc[0], loc[1] ]},
getOrientation:function() { return o; }
};
return _newEndpoint( {
anchor : inPlaceAnchor,
source : _element,
paintStyle : this.getPaintStyle(),
endpoint : params.hideOnDrag ? "Blank" : _endpoint,
_transient:true,
scope:self.scope
});
};
this.isConnectedTo = function(endpoint) {
var found = false;
if (endpoint) {
for ( var i = 0; i < self.connections.length; i++) {
if (self.connections[i].endpoints[1] == endpoint) {
found = true;
break;
}
}
}
return found;
};
/**
* private but needs to be exposed.
*/
this.isFloating = function() {
return floatingEndpoint != null;
};
/**
* returns a connection from the pool; used when dragging starts. just gets the head of the array if it can.
*/
this.connectorSelector = function() {
var candidate = self.connections[0];
if (self.isTarget && candidate) return candidate;
else {
return (self.connections.length < _maxConnections) || _maxConnections == -1 ? null : candidate;
}
};
this.isFull = function() {
return !(self.isFloating() || _maxConnections < 1 || self.connections.length < _maxConnections);
};
this.setDragAllowedWhenFull = function(allowed) {
dragAllowedWhenFull = allowed;
};
this.setStyle = self.setPaintStyle;
/**
* a deep equals check. everything must match, including the anchor,
* styles, everything. TODO: finish Endpoint.equals
*/
this.equals = function(endpoint) {
return this.anchor.equals(endpoint.anchor);
};
// a helper function that tries to find a connection to the given element, and returns it if so. if elementWithPrecedence is null,
// or no connection to it is found, we return the first connection in our list.
var findConnectionToUseForDynamicAnchor = function(elementWithPrecedence) {
var idx = 0;
if (elementWithPrecedence != null) {
for (var i = 0; i < self.connections.length; i++) {
if (self.connections[i].sourceId == elementWithPrecedence || self.connections[i].targetId == elementWithPrecedence) {
idx = i;
break;
}
}
}
return self.connections[idx];
};
this.paint = function(params) {
params = params || {};
var timestamp = params.timestamp, recalc = !(params.recalc === false);
if (!timestamp || self.timestamp !== timestamp) {
var info = _jsPlumb.updateOffset({ elId:_elementId, timestamp:timestamp, recalc:recalc });
var xy = params.offset ? params.offset.o : info.o;
if(xy) {
var ap = params.anchorPoint,connectorPaintStyle = params.connectorPaintStyle;
if (ap == null) {
var wh = params.dimensions || info.s;
if (xy == null || wh == null) {
info = _jsPlumb.updateOffset( { elId : _elementId, timestamp : timestamp });
xy = info.o;
wh = info.s;
}
var anchorParams = { xy : [ xy.left, xy.top ], wh : wh, element : self, timestamp : timestamp };
if (recalc && self.anchor.isDynamic && self.connections.length > 0) {
var c = findConnectionToUseForDynamicAnchor(params.elementWithPrecedence),
oIdx = c.endpoints[0] == self ? 1 : 0,
oId = oIdx == 0 ? c.sourceId : c.targetId,
oInfo = _jsPlumb.getCachedData(oId),
oOffset = oInfo.o, oWH = oInfo.s;
anchorParams.txy = [ oOffset.left, oOffset.top ];
anchorParams.twh = oWH;
anchorParams.tElement = c.endpoints[oIdx];
}
ap = self.anchor.compute(anchorParams);
}
_endpoint.compute(ap, self.anchor.getOrientation(self), self.paintStyleInUse, connectorPaintStyle || self.paintStyleInUse);
_endpoint.paint(self.paintStyleInUse, self.anchor);
self.timestamp = timestamp;
// paint overlays
for ( var i = 0; i < self.overlays.length; i++) {
var o = self.overlays[i];
if (o.isVisible()) {
self.overlayPlacements[i] = o.draw(self.endpoint, self.paintStyleInUse);
o.paint(self.overlayPlacements[i]);
}
}
}
}
};
this.repaint = this.paint;
// is this a connection source? we make it draggable and have the
// drag listener maintain a connection with a floating endpoint.
if (jpcl.isDragSupported(_element)) {
var placeholderInfo = { id:null, element:null },
jpc = null,
existingJpc = false,
existingJpcParams = null,
_dragHandler = _makeConnectionDragHandler(placeholderInfo, _jsPlumb);
var start = function() {
// drag might have started on an endpoint that is not actually a source, but which has
// one or more connections.
jpc = self.connectorSelector();
var _continue = true;
// if not enabled, return
if (!self.isEnabled()) _continue = false;
// if no connection and we're not a source, return.
if (jpc == null && !params.isSource) _continue = false;
// otherwise if we're full and not allowed to drag, also return false.
if (params.isSource && self.isFull() && !dragAllowedWhenFull) _continue = false;
// if the connection was setup as not detachable or one of its endpoints
// was setup as connectionsDetachable = false, or Defaults.ConnectionsDetachable
// is set to false...
if (jpc != null && !jpc.isDetachable()) _continue = false;
if (_continue === false) {
// this is for mootools and yui. returning false from this causes jquery to stop drag.
// the events are wrapped in both mootools and yui anyway, but i don't think returning
// false from the start callback would stop a drag.
if (jpcl.stopDrag) jpcl.stopDrag();
_dragHandler.stopDrag();
return false;
}
// if we're not full but there was a connection, make it null. we'll create a new one.
if (jpc && !self.isFull() && params.isSource) jpc = null;
_jsPlumb.updateOffset( { elId : _elementId });
inPlaceCopy = self.makeInPlaceCopy();
inPlaceCopy.referenceEndpoint = self;
inPlaceCopy.paint();
_makeDraggablePlaceholder(placeholderInfo, self.parent, _jsPlumb);
// set the offset of this div to be where 'inPlaceCopy' is, to start with.
// TODO merge this code with the code in both Anchor and FloatingAnchor, because it
// does the same stuff.
var ipcoel = _gel(inPlaceCopy.canvas),
ipco = _getOffset(ipcoel, _jsPlumb),
po = _jsPlumb.adjustForParentOffsetAndScroll([ipco.left, ipco.top], inPlaceCopy.canvas),
canvasElement = _gel(self.canvas);
jpcl.setOffset(placeholderInfo.element, {left:po[0], top:po[1]});
// when using makeSource and a parent, we first draw the source anchor on the source element, then
// move it to the parent. note that this happens after drawing the placeholder for the
// first time.
if (self.parentAnchor) self.anchor = _jsPlumb.makeAnchor(self.parentAnchor, self.elementId, _jsPlumb);
// store the id of the dragging div and the source element. the drop function will pick these up.
jpcl.setAttribute(canvasElement, "dragId", placeholderInfo.id);
jpcl.setAttribute(canvasElement, "elId", _elementId);
// create a floating endpoint.
// here we test to see if a dragProxy was specified in this endpoint's constructor params, and
// if so, we create that endpoint instead of cloning ourselves.
//if (params.proxy) {
/* var floatingAnchor = new jsPlumb.FloatingAnchor( { reference : self.anchor, referenceCanvas : self.canvas });
floatingEndpoint = _newEndpoint({
paintStyle : params.proxy.paintStyle,
endpoint : params.proxy.endpoint,
anchor : floatingAnchor,
source : placeholderInfo.element,
scope:"__floating"
});
//$(self.canvas).hide();
*/
//self.setPaintStyle(params.proxy.paintStyle);
// if we do this, we have to cleanup the old one. like just remove its display parts
//self.setEndpoint(params.proxy.endpoint);
//}
// else {
floatingEndpoint = _makeFloatingEndpoint(self.getPaintStyle(), self.anchor, _endpoint, self.canvas, placeholderInfo.element, _jsPlumb, _newEndpoint);
self.canvas.style.visibility = "hidden";
// }
if (jpc == null) {
self.anchor.locked = true;
self.setHover(false, false);
// create a connection. one end is this endpoint, the other is a floating endpoint.
jpc = _newConnection({
sourceEndpoint : self,
targetEndpoint : floatingEndpoint,
source : self.endpointWillMoveTo || _element, // for makeSource with parent option. ensure source element is represented correctly.
target : placeholderInfo.element,
anchors : [ self.anchor, floatingEndpoint.anchor ],
paintStyle : params.connectorStyle, // this can be null. Connection will use the default.
hoverPaintStyle:params.connectorHoverStyle,
connector : params.connector, // this can also be null. Connection will use the default.
overlays : params.connectorOverlays,
type:self.connectionType,
cssClass:self.connectorClass,
hoverClass:self.connectorHoverClass
});
// fire an event that informs that a connection is being dragged
_jsPlumb.fire("connectionDrag", jpc);
} else {
existingJpc = true;
jpc.setHover(false);
// if existing connection, allow to be dropped back on the source endpoint (issue 51).
_initDropTarget(ipcoel, false, true);
// new anchor idx
var anchorIdx = jpc.endpoints[0].id == self.id ? 0 : 1;
jpc.floatingAnchorIndex = anchorIdx; // save our anchor index as the connection's floating index.
self.detachFromConnection(jpc); // detach from the connection while dragging is occurring.
// store the original scope (issue 57)
var dragScope = jsPlumb.CurrentLibrary.getDragScope(canvasElement);
jpcl.setAttribute(canvasElement, "originalScope", dragScope);
// now we want to get this endpoint's DROP scope, and set it for now: we can only be dropped on drop zones
// that have our drop scope (issue 57).
var dropScope = jpcl.getDropScope(canvasElement);
jpcl.setDragScope(canvasElement, dropScope);
// now we replace ourselves with the temporary div we created above:
if (anchorIdx == 0) {
existingJpcParams = [ jpc.source, jpc.sourceId, i, dragScope ];
jpc.source = placeholderInfo.element;
jpc.sourceId = placeholderInfo.id;
} else {
existingJpcParams = [ jpc.target, jpc.targetId, i, dragScope ];
jpc.target = placeholderInfo.element;
jpc.targetId = placeholderInfo.id;
}
// lock the other endpoint; if it is dynamic it will not move while the drag is occurring.
jpc.endpoints[anchorIdx == 0 ? 1 : 0].anchor.locked = true;
// store the original endpoint and assign the new floating endpoint for the drag.
jpc.suspendedEndpoint = jpc.endpoints[anchorIdx];
jpc.suspendedEndpoint.setHover(false);
floatingEndpoint.referenceEndpoint = jpc.suspendedEndpoint;
jpc.endpoints[anchorIdx] = floatingEndpoint;
// fire an event that informs that a connection is being dragged
_jsPlumb.fire("connectionDrag", jpc);
}
// register it and register connection on it.
floatingConnections[placeholderInfo.id] = jpc;
_jsPlumb.anchorManager.addFloatingConnection(placeholderInfo.id, jpc);
floatingEndpoint.addConnection(jpc);
// only register for the target endpoint; we will not be dragging the source at any time
// before this connection is either discarded or made into a permanent connection.
_ju.addToList(params.endpointsByElement, placeholderInfo.id, floatingEndpoint);
// tell jsplumb about it
_jsPlumb.currentlyDragging = true;
};
var dragOptions = params.dragOptions || {},
defaultOpts = jsPlumb.extend( {}, jpcl.defaultDragOptions),
startEvent = jpcl.dragEvents["start"],
stopEvent = jpcl.dragEvents["stop"],
dragEvent = jpcl.dragEvents["drag"];
dragOptions = jsPlumb.extend(defaultOpts, dragOptions);
dragOptions.scope = dragOptions.scope || self.scope;
dragOptions[startEvent] = _jsPlumb.wrap(dragOptions[startEvent], start);
// extracted drag handler function so can be used by makeSource
dragOptions[dragEvent] = _jsPlumb.wrap(dragOptions[dragEvent], _dragHandler.drag);
dragOptions[stopEvent] = _jsPlumb.wrap(dragOptions[stopEvent],
function() {
var originalEvent = jpcl.getDropEvent(arguments);
_ju.removeWithFunction(params.endpointsByElement[placeholderInfo.id], function(e) {
return e.id == floatingEndpoint.id;
});
_ju.removeElement(inPlaceCopy.canvas, _element);
_jsPlumb.anchorManager.clearFor(placeholderInfo.id);
var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex;
jpc.endpoints[idx == 0 ? 1 : 0].anchor.locked = false;
// commented out pending decision on drag proxy stuff.
// self.setPaintStyle(originalPaintStyle); // reset to original; may have been changed by drag proxy.
if (jpc.endpoints[idx] == floatingEndpoint) {
// if the connection was an existing one:
if (existingJpc && jpc.suspendedEndpoint) {
// fix for issue35, thanks Sylvain Gizard: when firing the detach event make sure the
// floating endpoint has been replaced.
if (idx == 0) {
jpc.source = existingJpcParams[0];
jpc.sourceId = existingJpcParams[1];
} else {
jpc.target = existingJpcParams[0];
jpc.targetId = existingJpcParams[1];
}
// restore the original scope (issue 57)
jpcl.setDragScope(existingJpcParams[2], existingJpcParams[3]);
jpc.endpoints[idx] = jpc.suspendedEndpoint;
if (jpc.isReattach() || jpc._forceReattach || jpc._forceDetach || !jpc.endpoints[idx == 0 ? 1 : 0].detach(jpc, false, false, true, originalEvent)) {
jpc.setHover(false);
jpc.floatingAnchorIndex = null;
jpc.suspendedEndpoint.addConnection(jpc);
_jsPlumb.repaint(existingJpcParams[1]);
}
jpc._forceDetach = null;
jpc._forceReattach = null;
} else {
// TODO this looks suspiciously kind of like an Endpoint.detach call too.
// i wonder if this one should post an event though. maybe this is good like this.
_ju.removeElements(jpc.getConnector().getDisplayElements(), self.parent);
self.detachFromConnection(jpc);
}
}
// remove floating endpoint _after_ checking beforeDetach
_ju.removeElements( [ placeholderInfo.element[0], floatingEndpoint.canvas ], _element); // TODO: clean up the connection canvas (if the user aborted)
_jsPlumb.dragManager.elementRemoved(floatingEndpoint.elementId);
self.canvas.style.visibility = "visible";
self.anchor.locked = false;
self.paint({recalc:false});
_jsPlumb.fire("connectionDragStop", jpc);
jpc = null;
inPlaceCopy = null;
delete params.endpointsByElement[floatingEndpoint.elementId];
floatingEndpoint.anchor = null;
floatingEndpoint = null;
_jsPlumb.currentlyDragging = false;
});
var i = _gel(self.canvas);
jpcl.initDraggable(i, dragOptions, true);
}
// pulled this out into a function so we can reuse it for the inPlaceCopy canvas; you can now drop detached connections
// back onto the endpoint you detached it from.
var _initDropTarget = function(canvas, forceInit, isTransient, endpoint) {
if ((params.isTarget || forceInit) && jpcl.isDropSupported(_element)) {
var dropOptions = params.dropOptions || _jsPlumb.Defaults.DropOptions || jsPlumb.Defaults.DropOptions;
dropOptions = jsPlumb.extend( {}, dropOptions);
dropOptions.scope = dropOptions.scope || self.scope;
var dropEvent = jpcl.dragEvents['drop'],
overEvent = jpcl.dragEvents['over'],
outEvent = jpcl.dragEvents['out'],
drop = function() {
var originalEvent = jpcl.getDropEvent(arguments),
draggable = _gel(jpcl.getDragObject(arguments)),
id = _att(draggable, "dragId"),
elId = _att(draggable, "elId"),
scope = _att(draggable, "originalScope"),
jpc = floatingConnections[id];
// if this is a drop back where the connection came from, mark it force rettach and
// return; the stop handler will reattach. without firing an event.
var redrop = jpc.suspendedEndpoint && (jpc.suspendedEndpoint.id == self.id ||
self.referenceEndpoint && jpc.suspendedEndpoint.id == self.referenceEndpoint.id) ;
if (redrop) {
jpc._forceReattach = true;
return;
}
if (jpc != null) {
var idx = jpc.floatingAnchorIndex == null ? 1 : jpc.floatingAnchorIndex, oidx = idx == 0 ? 1 : 0;
// restore the original scope if necessary (issue 57)
if (scope) jsPlumb.CurrentLibrary.setDragScope(draggable, scope);
var endpointEnabled = endpoint != null ? endpoint.isEnabled() : true;
if (self.isFull()) {
self.fire("maxConnections", {
endpoint:self,
connection:jpc,
maxConnections:_maxConnections
}, originalEvent);
}
if (!self.isFull() && !(idx == 0 && !self.isSource) && !(idx == 1 && !self.isTarget) && endpointEnabled) {
var _doContinue = true;
// the second check here is for the case that the user is dropping it back
// where it came from.
if (jpc.suspendedEndpoint && jpc.suspendedEndpoint.id != self.id) {
if (idx == 0) {
jpc.source = jpc.suspendedEndpoint.element;
jpc.sourceId = jpc.suspendedEndpoint.elementId;
} else {
jpc.target = jpc.suspendedEndpoint.element;
jpc.targetId = jpc.suspendedEndpoint.elementId;
}
if (!jpc.isDetachAllowed(jpc) || !jpc.endpoints[idx].isDetachAllowed(jpc) || !jpc.suspendedEndpoint.isDetachAllowed(jpc) || !_jsPlumb.checkCondition("beforeDetach", jpc))
_doContinue = false;
}
// these have to be set before testing for beforeDrop.
if (idx == 0) {
jpc.source = self.element;
jpc.sourceId = self.elementId;
} else {
jpc.target = self.element;
jpc.targetId = self.elementId;
}
// ------------ wrap the execution path in a function so we can support asynchronous beforeDrop
// we want to execute this regardless.
var commonFunction = function() {
jpc.floatingAnchorIndex = null;
};
var continueFunction = function() {
// remove this jpc from the current endpoint
jpc.endpoints[idx].detachFromConnection(jpc);
if (jpc.suspendedEndpoint) jpc.suspendedEndpoint.detachFromConnection(jpc);
jpc.endpoints[idx] = self;
self.addConnection(jpc);
// copy our parameters in to the connection:
var params = self.getParameters();
for (var aParam in params)
jpc.setParameter(aParam, params[aParam]);
if (!jpc.suspendedEndpoint) {
if (params.draggable)
jsPlumb.CurrentLibrary.initDraggable(self.element, dragOptions, true);
}
else {
var suspendedElement = jpc.suspendedEndpoint.getElement(), suspendedElementId = jpc.suspendedEndpoint.elementId;
// fire a detach event
_fireDetachEvent({
source : idx == 0 ? suspendedElement : jpc.source,
target : idx == 1 ? suspendedElement : jpc.target,
sourceId : idx == 0 ? suspendedElementId : jpc.sourceId,
targetId : idx == 1 ? suspendedElementId : jpc.targetId,
sourceEndpoint : idx == 0 ? jpc.suspendedEndpoint : jpc.endpoints[0],
targetEndpoint : idx == 1 ? jpc.suspendedEndpoint : jpc.endpoints[1],
connection : jpc
}, true, originalEvent);
}
// finalise will inform the anchor manager and also add to
// connectionsByScope if necessary.
_finaliseConnection(jpc, null, originalEvent);
commonFunction();
};
var dontContinueFunction = function() {
// otherwise just put it back on the endpoint it was on before the drag.
if (jpc.suspendedEndpoint) {
jpc.endpoints[idx] = jpc.suspendedEndpoint;
jpc.setHover(false);
jpc._forceDetach = true;
if (idx == 0) {
jpc.source = jpc.suspendedEndpoint.element;
jpc.sourceId = jpc.suspendedEndpoint.elementId;
} else {
jpc.target = jpc.suspendedEndpoint.element;
jpc.targetId = jpc.suspendedEndpoint.elementId;;
}
jpc.suspendedEndpoint.addConnection(jpc);
jpc.endpoints[0].repaint();
jpc.repaint();
_jsPlumb.repaint(jpc.sourceId);
jpc._forceDetach = false;
}
commonFunction();
};
// --------------------------------------
// now check beforeDrop. this will be available only on Endpoints that are setup to
// have a beforeDrop condition (although, secretly, under the hood all Endpoints and
// the Connection have them, because they are on jsPlumbUIComponent. shhh!), because
// it only makes sense to have it on a target endpoint.
_doContinue = _doContinue && self.isDropAllowed(jpc.sourceId, jpc.targetId, jpc.scope, jpc, self);
if (_doContinue) {
continueFunction();
}
else {
dontContinueFunction();
}
//commonFunction();
}
_jsPlumb.currentlyDragging = false;
delete floatingConnections[id];
_jsPlumb.anchorManager.removeFloatingConnection(id);
}
};
dropOptions[dropEvent] = _jsPlumb.wrap(dropOptions[dropEvent], drop);
dropOptions[overEvent] = _jsPlumb.wrap(dropOptions[overEvent], function() {
var draggable = jpcl.getDragObject(arguments),
id = _att( _gel(draggable), "dragId"),
_jpc = floatingConnections[id];
if (_jpc != null) {
var idx = _jpc.floatingAnchorIndex == null ? 1 : _jpc.floatingAnchorIndex;
// here we should fire the 'over' event if we are a target and this is a new connection,
// or we are the same as the floating endpoint.
var _cont = (self.isTarget && _jpc.floatingAnchorIndex != 0) || (_jpc.suspendedEndpoint && self.referenceEndpoint && self.referenceEndpoint.id == _jpc.suspendedEndpoint.id);
if (_cont)
_jpc.endpoints[idx].anchor.over(self.anchor);
}
});
dropOptions[outEvent] = _jsPlumb.wrap(dropOptions[outEvent], function() {
var draggable = jpcl.getDragObject(arguments),
id = _att( _gel(draggable), "dragId"),
_jpc = floatingConnections[id];
if (_jpc != null) {
var idx = _jpc.floatingAnchorIndex == null ? 1 : _jpc.floatingAnchorIndex;
var _cont = (self.isTarget && _jpc.floatingAnchorIndex != 0) || (_jpc.suspendedEndpoint && self.referenceEndpoint && self.referenceEndpoint.id == _jpc.suspendedEndpoint.id);
if (_cont)
_jpc.endpoints[idx].anchor.out();
}
});
jpcl.initDroppable(canvas, dropOptions, true, isTransient);
}
};
// initialise the endpoint's canvas as a drop target. this will be ignored if the endpoint is not a target or drag is not supported.
_initDropTarget(_gel(self.canvas), true, !(params._transient || self.anchor.isFloating), self);
// finally, set type if it was provided
if (params.type)
self.addType(params.type, params.data, _jsPlumb.isSuspendDrawing());
return self;
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-overlays-guidelines.js 0 → 100644
View file @ e34796c6
// this is really just a test overlay, so its undocumented and doesnt take any parameters. but i was loth to delete it.
jsPlumb.Overlays.GuideLines = function() {
var self = this;
self.length = 50;
self.lineWidth = 5;
this.type = "GuideLines";
AbstractOverlay.apply(this, arguments);
jsPlumb.jsPlumbUIComponent.apply(this, arguments);
this.draw = function(connector, currentConnectionPaintStyle, connectorDimensions) {
var head = connector.pointAlongPathFrom(self.loc, self.length / 2),
mid = connector.pointOnPath(self.loc),
tail = jsPlumbUtil.pointOnLine(head, mid, self.length),
tailLine = jsPlumbUtil.perpendicularLineTo(head, tail, 40),
headLine = jsPlumbUtil.perpendicularLineTo(tail, head, 20);
self.paint(connector, [head, tail, tailLine, headLine], self.lineWidth, "red", null, connectorDimensions);
return [Math.min(head.x, tail.x), Math.min(head.y, tail.y), Math.max(head.x, tail.x), Math.max(head.y,tail.y)];
};
this.computeMaxSize = function() { return 50; };
this.cleanup = function() { }; // nothing to clean up for GuideLines
};
// a test
jsPlumb.Overlays.svg.GuideLines = function() {
var path = null, self = this, path2 = null, p1_1, p1_2;
jsPlumb.Overlays.GuideLines.apply(this, arguments);
this.paint = function(connector, d, lineWidth, strokeStyle, fillStyle) {
if (path == null) {
path = _node("path");
connector.svg.appendChild(path);
self.attachListeners(path, connector);
self.attachListeners(path, self);
p1_1 = _node("path");
connector.svg.appendChild(p1_1);
self.attachListeners(p1_1, connector);
self.attachListeners(p1_1, self);
p1_2 = _node("path");
connector.svg.appendChild(p1_2);
self.attachListeners(p1_2, connector);
self.attachListeners(p1_2, self);
}
_attr(path, {
"d" : makePath(d[0], d[1]),
stroke : "red",
fill : null
});
_attr(p1_1, {
"d" : makePath(d[2][0], d[2][1]),
stroke : "blue",
fill : null
});
_attr(p1_2, {
"d" : makePath(d[3][0], d[3][1]),
stroke : "green",
fill : null
});
};
var makePath = function(d1, d2) {
return "M " + d1.x + "," + d1.y +
" L" + d2.x + "," + d2.y;
};
};
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-renderers-canvas.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the HTML5 canvas renderers. Support for canvas was dropped in 1.4.0.
* This is being kept around because canvas might make a comeback as a single-page solution
* that also supports node rendering.
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
// event binding from jsplumb. canvas no longer supported. but it may make a comeback in
// the form of a single-page canvas.
/*var bindOne = function(event) {
jsPlumb.CurrentLibrary.bind(document, event, function(e) {
if (!_currentInstance.currentlyDragging && renderMode == jsPlumb.CANVAS) {
// try connections first
for (var scope in connectionsByScope) {
var c = connectionsByScope[scope];
for (var i = 0, ii = c.length; i < ii; i++) {
var t = c[i].getConnector()[event](e);
if (t) return;
}
}
for (var el in endpointsByElement) {
var ee = endpointsByElement[el];
for (var i = 0, ii = ee.length; i < ii; i++) {
if (ee[i].endpoint[event](e)) return;
}
}
}
});
};
bindOne("click");bindOne("dblclick");bindOne("mousemove");bindOne("mousedown");bindOne("mouseup");bindOne("contextmenu");
*/
// ********************************* CANVAS RENDERERS FOR CONNECTORS AND ENDPOINTS *******************************************************************
// TODO refactor to renderer common script. put a ref to jsPlumb.sizeCanvas in there too.
var _connectionBeingDragged = null,
_hasClass = function(el, clazz) { return jsPlumb.CurrentLibrary.hasClass(_getElementObject(el), clazz); },
_getElementObject = function(el) { return jsPlumb.CurrentLibrary.getElementObject(el); },
_getOffset = function(el) { return jsPlumb.CurrentLibrary.getOffset(_getElementObject(el)); },
_pageXY = function(el) { return jsPlumb.CurrentLibrary.getPageXY(el); },
_clientXY = function(el) { return jsPlumb.CurrentLibrary.getClientXY(el); };
/*
* Class:CanvasMouseAdapter
* Provides support for mouse events on canvases.
*/
var CanvasMouseAdapter = function() {
var self = this;
self.overlayPlacements = [];
jsPlumb.jsPlumbUIComponent.apply(this, arguments);
jsPlumbUtil.EventGenerator.apply(this, arguments);
/**
* returns whether or not the given event is ojver a painted area of the canvas.
*/
this._over = function(e) {
var o = _getOffset(_getElementObject(self.canvas)),
pageXY = _pageXY(e),
x = pageXY[0] - o.left, y = pageXY[1] - o.top;
if (x > 0 && y > 0 && x < self.canvas.width && y < self.canvas.height) {
// first check overlays
for ( var i = 0; i < self.overlayPlacements.length; i++) {
var p = self.overlayPlacements[i];
if (p && (p[0] <= x && p[1] >= x && p[2] <= y && p[3] >= y))
return true;
}
// then the canvas
var d = self.canvas.getContext("2d").getImageData(parseInt(x, 10), parseInt(y, 10), 1, 1);
return d.data[0] !== 0 || d.data[1] !== 0 || d.data[2] !== 0 || d.data[3] !== 0;
}
return false;
};
var _mouseover = false, _mouseDown = false, _posWhenMouseDown = null, _mouseWasDown = false,
_nullSafeHasClass = function(el, clazz) {
return el !== null && _hasClass(el, clazz);
};
this.mousemove = function(e) {
var pageXY = _pageXY(e), clientXY = _clientXY(e),
ee = document.elementFromPoint(clientXY[0], clientXY[1]),
eventSourceWasOverlay = _nullSafeHasClass(ee, "_jsPlumb_overlay");
var _continue = _connectionBeingDragged === null && (_nullSafeHasClass(ee, "_jsPlumb_endpoint") || _nullSafeHasClass(ee, "_jsPlumb_connector"));
if (!_mouseover && _continue && self._over(e)) {
_mouseover = true;
self.fire("mouseenter", self, e);
return true;
}
// TODO here there is a remote chance that the overlay the mouse moved onto
// is actually not an overlay for the current component. a more thorough check would
// be to ensure the overlay belonged to the current component.
else if (_mouseover && (!self._over(e) || !_continue) && !eventSourceWasOverlay) {
_mouseover = false;
self.fire("mouseexit", self, e);
}
self.fire("mousemove", self, e);
};
this.click = function(e) {
if (_mouseover && self._over(e) && !_mouseWasDown)
self.fire("click", self, e);
_mouseWasDown = false;
};
this.dblclick = function(e) {
if (_mouseover && self._over(e) && !_mouseWasDown)
self.fire("dblclick", self, e);
_mouseWasDown = false;
};
this.mousedown = function(e) {
if(self._over(e) && !_mouseDown) {
_mouseDown = true;
_posWhenMouseDown = _getOffset(_getElementObject(self.canvas));
self.fire("mousedown", self, e);
}
};
this.mouseup = function(e) {
_mouseDown = false;
self.fire("mouseup", self, e);
};
this.contextmenu = function(e) {
if (_mouseover && self._over(e) && !_mouseWasDown)
self.fire("contextmenu", self, e);
_mouseWasDown = false;
};
};
var _newCanvas = function(params) {
var canvas = document.createElement("canvas");
params["_jsPlumb"].appendElement(canvas, params.parent);
canvas.style.position = "absolute";
if (params["class"]) canvas.className = params["class"];
// set an id. if no id on the element and if uuid was supplied it
// will be used, otherwise we'll create one.
params["_jsPlumb"].getId(canvas, params.uuid);
if (params.tooltip) canvas.setAttribute("title", params.tooltip);
return canvas;
};
var CanvasComponent = function(params) {
CanvasMouseAdapter.apply(this, arguments);
var displayElements = [ ];
this.getDisplayElements = function() { return displayElements; };
this.appendDisplayElement = function(el) { displayElements.push(el); };
};
var segmentMultipliers = [null, [1, -1], [1, 1], [-1, 1], [-1, -1] ];
var maybeMakeGradient = function(ctx, style, gradientFunction) {
if (style.gradient) {
var g = gradientFunction();
for ( var i = 0; i < style.gradient.stops.length; i++)
g.addColorStop(style.gradient.stops[i][0], style.gradient.stops[i][1]);
ctx.strokeStyle = g;
}
};
var segmentRenderer = function(segment, ctx, style) {
({
"Straight":function(segment, ctx, style) {
var d = segment.params;
maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x1, d.y1, d.x2, d.y2); });
ctx.beginPath();
if (style.dashstyle && style.dashstyle.split(" ").length === 2) {
// only a very simple dashed style is supported - having two values, which define the stroke length
// (as a multiple of the stroke width) and then the space length (also as a multiple of stroke width).
var ds = style.dashstyle.split(" ");
if (ds.length !== 2) ds = [2, 2];
var dss = [ ds[0] * style.lineWidth, ds[1] * style.lineWidth ],
m = (d.x2- d.x1) / (d.y2 - d.y1),
s = jsPlumbUtil.segment([d.x1, d.y1], [ d.x2, d.y2 ]),
sm = segmentMultipliers[s],
theta = Math.atan(m),
l = Math.sqrt(Math.pow(d.x2 - d.x1, 2) + Math.pow(d.y2 - d.y1, 2)),
repeats = Math.floor(l / (dss[0] + dss[1])),
curPos = [d.x1, d.y1];
// TODO: the question here is why could we not support this in all connector types? it's really
// just a case of going along and asking jsPlumb for the next point on the path a few times, until it
// reaches the end. every type of connector supports that method, after all. but right now its only the
// bezier connector that gives you back the new location on the path along with the x,y coordinates, which
// we would need. we'd start out at loc=0 and ask for the point along the path that is dss[0] pixels away.
// we then ask for the point that is (dss[0] + dss[1]) pixels away; and from that one we need not just the
// x,y but the location, cos we're gonna plug that location back in in order to find where that dash ends.
//
// it also strikes me that it should be trivial to support arbitrary dash styles (having more or less than two
// entries). you'd just iterate that array using a step size of 2, and generify the (rss[0] + rss[1])
// computation to be sum(rss[0]..rss[n]).
for (var i = 0; i < repeats; i++) {
ctx.moveTo(curPos[0], curPos[1]);
var nextEndX = curPos[0] + (Math.abs(Math.sin(theta) * dss[0]) * sm[0]),
nextEndY = curPos[1] + (Math.abs(Math.cos(theta) * dss[0]) * sm[1]),
nextStartX = curPos[0] + (Math.abs(Math.sin(theta) * (dss[0] + dss[1])) * sm[0]),
nextStartY = curPos[1] + (Math.abs(Math.cos(theta) * (dss[0] + dss[1])) * sm[1]);
ctx.lineTo(nextEndX, nextEndY);
curPos = [nextStartX, nextStartY];
}
// now draw the last bit
ctx.moveTo(curPos[0], curPos[1]);
ctx.lineTo(d.x2, d.y2);
}
else {
ctx.moveTo(d.x1, d.y1);
ctx.lineTo(d.x2, d.y2);
}
ctx.stroke();
},
"Bezier":function(segment, ctx, style) {
var d = segment.params;
maybeMakeGradient(ctx, style, function() { return ctx.createLinearGradient(d.x2, d.y2, d.x1, d.y1); });
ctx.beginPath();
ctx.moveTo(d.x1, d.y1);
ctx.bezierCurveTo(d.cp1x, d.cp1y, d.cp2x, d.cp2y, d.x2, d.y2);
ctx.stroke();
},
"Arc":function(segment, ctx, style) {
var d = segment.params;
ctx.beginPath();
// arcTo is supported in most browsers i think; this is what we will use once the arc segment is a little more clever.
// right now its up to the connector to figure out the geometry. well, maybe that's ok.
//ctx.moveTo(d.x1, d.y1);
//ctx.arcTo((d.x1 + d.x2) / 2, (d.y1 + d.y2) / 2, d.r);
ctx.arc(d.cx, d.cy, d.r, d.startAngle, d.endAngle, d.c);
ctx.stroke();
}
})[segment.type](segment, ctx, style);
};
/**
* Class:CanvasConnector
* Superclass for Canvas Connector renderers.
*/
var CanvasConnector = jsPlumb.ConnectorRenderers.canvas = function(params) {
var self = this;
CanvasComponent.apply(this, arguments);
var _paintOneStyle = function(dim, aStyle) {
self.ctx.save();
jsPlumb.extend(self.ctx, aStyle);
var segments = self.getSegments();
for (var i = 0; i < segments.length; i++) {
segmentRenderer(segments[i], self.ctx, aStyle);
}
self.ctx.restore();
};
var self = this,
clazz = self._jsPlumb.connectorClass + " " + (params.cssClass || "");
self.canvas = _newCanvas({
"class":clazz,
_jsPlumb:self._jsPlumb,
parent:params.parent,
tooltip:params.tooltip
});
self.ctx = self.canvas.getContext("2d");
self.appendDisplayElement(self.canvas);
self.paint = function(dim, style) {
if (style != null) {
jsPlumb.sizeCanvas(self.canvas, dim[0], dim[1], dim[2], dim[3]);
if (self.getZIndex())
self.canvas.style.zIndex = self.getZIndex();
if (style.outlineColor != null) {
var outlineWidth = style.outlineWidth || 1,
outlineStrokeWidth = style.lineWidth + (2 * outlineWidth),
outlineStyle = {
strokeStyle:style.outlineColor,
lineWidth:outlineStrokeWidth
};
_paintOneStyle(dim, outlineStyle);
}
_paintOneStyle(dim, style);
}
};
};
/**
* Class:CanvasEndpoint
* Superclass for Canvas Endpoint renderers.
*/
var CanvasEndpoint = function(params) {
var self = this;
CanvasComponent.apply(this, arguments);
var clazz = self._jsPlumb.endpointClass + " " + (params.cssClass || ""),
canvasParams = {
"class":clazz,
_jsPlumb:self._jsPlumb,
parent:params.parent,
tooltip:self.tooltip
};
self.canvas = _newCanvas(canvasParams);
self.ctx = self.canvas.getContext("2d");
self.appendDisplayElement(self.canvas);
this.paint = function(style, anchor) {
jsPlumb.sizeCanvas(self.canvas, self.x, self.y, self.w, self.h);
if (style.outlineColor != null) {
var outlineWidth = style.outlineWidth || 1,
outlineStrokeWidth = style.lineWidth + (2 * outlineWidth);
var outlineStyle = {
strokeStyle:style.outlineColor,
lineWidth:outlineStrokeWidth
};
}
self._paint.apply(this, arguments);
};
};
jsPlumb.Endpoints.canvas.Dot = function(params) {
jsPlumb.Endpoints.Dot.apply(this, arguments);
CanvasEndpoint.apply(this, arguments);
var self = this,
parseValue = function(value) {
try { return parseInt(value); }
catch(e) {
if (value.substring(value.length - 1) == '%')
return parseInt(value.substring(0, value - 1));
}
},
calculateAdjustments = function(gradient) {
var offsetAdjustment = self.defaultOffset, innerRadius = self.defaultInnerRadius;
gradient.offset && (offsetAdjustment = parseValue(gradient.offset));
gradient.innerRadius && (innerRadius = parseValue(gradient.innerRadius));
return [offsetAdjustment, innerRadius];
};
this._paint = function(style, anchor) {
if (style != null) {
var ctx = self.canvas.getContext('2d'), orientation = anchor.getOrientation(self);
jsPlumb.extend(ctx, style);
if (style.gradient) {
var adjustments = calculateAdjustments(style.gradient),
yAdjust = orientation[1] == 1 ? adjustments[0] * -1 : adjustments[0],
xAdjust = orientation[0] == 1 ? adjustments[0] * -1: adjustments[0],
g = ctx.createRadialGradient(d[4], d[4], d[4], d[4] + xAdjust, d[4] + yAdjust, adjustments[1]);
for (var i = 0; i < style.gradient.stops.length; i++)
g.addColorStop(style.gradient.stops[i][0], style.gradient.stops[i][1]);
ctx.fillStyle = g;
}
ctx.beginPath();
ctx.arc(d[4], d[4], d[4], 0, Math.PI*2, true);
ctx.closePath();
if (style.fillStyle || style.gradient) ctx.fill();
if (style.strokeStyle) ctx.stroke();
}
};
};
jsPlumb.Endpoints.canvas.Rectangle = function(params) {
var self = this;
jsPlumb.Endpoints.Rectangle.apply(this, arguments);
CanvasEndpoint.apply(this, arguments);
this._paint = function(style, anchor) {
var ctx = self.canvas.getContext("2d"), orientation = anchor.getOrientation(self);
jsPlumb.extend(ctx, style);
/* canvas gradient */
if (style.gradient) {
// first figure out which direction to run the gradient in (it depends on the orientation of the anchors)
var y1 = orientation[1] == 1 ? d[3] : orientation[1] == 0 ? d[3] / 2 : 0;
var y2 = orientation[1] == -1 ? d[3] : orientation[1] == 0 ? d[3] / 2 : 0;
var x1 = orientation[0] == 1 ? d[2] : orientation[0] == 0 ? d[2] / 2 : 0;
var x2 = orientation[0] == -1 ? d[2] : orientation[0] == 0 ? d[2] / 2 : 0;
var g = ctx.createLinearGradient(x1,y1,x2,y2);
for (var i = 0; i < style.gradient.stops.length; i++)
g.addColorStop(style.gradient.stops[i][0], style.gradient.stops[i][1]);
ctx.fillStyle = g;
}
ctx.beginPath();
ctx.rect(0, 0, d[2], d[3]);
ctx.closePath();
if (style.fillStyle || style.gradient) ctx.fill();
if (style.strokeStyle) ctx.stroke();
};
};
jsPlumb.Endpoints.canvas.Triangle = function(params) {
var self = this;
jsPlumb.Endpoints.Triangle.apply(this, arguments);
CanvasEndpoint.apply(this, arguments);
this._paint = function(style, anchor)
{
var width = d[2], height = d[3], x = d[0], y = d[1],
ctx = self.canvas.getContext('2d'),
offsetX = 0, offsetY = 0, angle = 0,
orientation = anchor.getOrientation(self);
if( orientation[0] == 1 ) {
offsetX = width;
offsetY = height;
angle = 180;
}
if( orientation[1] == -1 ) {
offsetX = width;
angle = 90;
}
if( orientation[1] == 1 ) {
offsetY = height;
angle = -90;
}
ctx.fillStyle = style.fillStyle;
ctx.translate(offsetX, offsetY);
ctx.rotate(angle * Math.PI/180);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(width/2, height/2);
ctx.lineTo(0, height);
ctx.closePath();
if (style.fillStyle || style.gradient) ctx.fill();
if (style.strokeStyle) ctx.stroke();
};
};
/*
* Canvas Image Endpoint: uses the default version, which creates an <img> tag.
*/
jsPlumb.Endpoints.canvas.Image = jsPlumb.Endpoints.Image;
/*
* Blank endpoint in all renderers is just the default Blank endpoint.
*/
jsPlumb.Endpoints.canvas.Blank = jsPlumb.Endpoints.Blank;
/*
* Canvas Bezier Connector. Draws a Bezier curve onto a Canvas element.
*/
jsPlumb.Connectors.canvas.Bezier = function() {
jsPlumb.Connectors.Bezier.apply(this, arguments);
CanvasConnector.apply(this, arguments);
};
/*
* Canvas straight line Connector. Draws a straight line onto a Canvas element.
*/
jsPlumb.Connectors.canvas.Straight = function() {
jsPlumb.Connectors.Straight.apply(this, arguments);
CanvasConnector.apply(this, arguments);
};
jsPlumb.Connectors.canvas.Flowchart = function() {
jsPlumb.Connectors.Flowchart.apply(this, arguments);
CanvasConnector.apply(this, arguments);
};
// ********************************* END OF CANVAS RENDERERS *******************************************************************
jsPlumb.Overlays.canvas.Label = jsPlumb.Overlays.Label;
jsPlumb.Overlays.canvas.Custom = jsPlumb.Overlays.Custom;
/**
* a placeholder right now, really just exists to mirror the fact that there are SVG and VML versions of this.
*/
var CanvasOverlay = function() {
jsPlumb.jsPlumbUIComponent.apply(this, arguments);
};
var AbstractCanvasArrowOverlay = function(superclass, originalArgs) {
superclass.apply(this, originalArgs);
CanvasOverlay.apply(this, originalArgs);
this.paint = function(connector, d, lineWidth, strokeStyle, fillStyle) {
var ctx = connector.ctx;
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.moveTo(d.hxy.x, d.hxy.y);
ctx.lineTo(d.tail[0].x, d.tail[0].y);
ctx.lineTo(d.cxy.x, d.cxy.y);
ctx.lineTo(d.tail[1].x, d.tail[1].y);
ctx.lineTo(d.hxy.x, d.hxy.y);
ctx.closePath();
if (strokeStyle) {
ctx.strokeStyle = strokeStyle;
ctx.stroke();
}
if (fillStyle) {
ctx.fillStyle = fillStyle;
ctx.fill();
}
};
};
jsPlumb.Overlays.canvas.Arrow = function() {
AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]);
};
jsPlumb.Overlays.canvas.PlainArrow = function() {
AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]);
};
jsPlumb.Overlays.canvas.Diamond = function() {
AbstractCanvasArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]);
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-renderers-svg.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the SVG renderers.
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
/**
* SVG support for jsPlumb.
*
* things to investigate:
*
* gradients: https://developer.mozilla.org/en/svg_in_html_introduction
* css:http://tutorials.jenkov.com/svg/svg-and-css.html
* text on a path: http://www.w3.org/TR/SVG/text.html#TextOnAPath
* pointer events: https://developer.mozilla.org/en/css/pointer-events
*
* IE9 hover jquery: http://forum.jquery.com/topic/1-6-2-broke-svg-hover-events
*
*/
;(function() {
// ************************** SVG utility methods ********************************************
var svgAttributeMap = {
"joinstyle":"stroke-linejoin",
"stroke-linejoin":"stroke-linejoin",
"stroke-dashoffset":"stroke-dashoffset",
"stroke-linecap":"stroke-linecap"
},
STROKE_DASHARRAY = "stroke-dasharray",
DASHSTYLE = "dashstyle",
LINEAR_GRADIENT = "linearGradient",
RADIAL_GRADIENT = "radialGradient",
FILL = "fill",
STOP = "stop",
STROKE = "stroke",
STROKE_WIDTH = "stroke-width",
STYLE = "style",
NONE = "none",
JSPLUMB_GRADIENT = "jsplumb_gradient_",
LINE_WIDTH = "lineWidth",
ns = {
svg:"http://www.w3.org/2000/svg",
xhtml:"http://www.w3.org/1999/xhtml"
},
_attr = function(node, attributes) {
for (var i in attributes)
node.setAttribute(i, "" + attributes[i]);
},
_node = function(name, attributes) {
var n = document.createElementNS(ns.svg, name);
attributes = attributes || {};
attributes["version"] = "1.1";
attributes["xmlns"] = ns.xhtml;
_attr(n, attributes);
return n;
},
_pos = function(d) { return "position:absolute;left:" + d[0] + "px;top:" + d[1] + "px"; },
_clearGradient = function(parent) {
for (var i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes[i].tagName == LINEAR_GRADIENT || parent.childNodes[i].tagName == RADIAL_GRADIENT)
parent.removeChild(parent.childNodes[i]);
}
},
_updateGradient = function(parent, node, style, dimensions, uiComponent) {
var id = JSPLUMB_GRADIENT + uiComponent._jsPlumb.idstamp();
// first clear out any existing gradient
_clearGradient(parent);
// this checks for an 'offset' property in the gradient, and in the absence of it, assumes
// we want a linear gradient. if it's there, we create a radial gradient.
// it is possible that a more explicit means of defining the gradient type would be
// better. relying on 'offset' means that we can never have a radial gradient that uses
// some default offset, for instance.
// issue 244 suggested the 'gradientUnits' attribute; without this, straight/flowchart connectors with gradients would
// not show gradients when the line was perfectly horizontal or vertical.
var g;
if (!style.gradient.offset) {
g = _node(LINEAR_GRADIENT, {id:id, gradientUnits:"userSpaceOnUse"});
}
else {
g = _node(RADIAL_GRADIENT, {
id:id
});
}
parent.appendChild(g);
// the svg radial gradient seems to treat stops in the reverse
// order to how canvas does it. so we want to keep all the maths the same, but
// iterate the actual style declarations in reverse order, if the x indexes are not in order.
for (var i = 0; i < style.gradient.stops.length; i++) {
var styleToUse = uiComponent.segment == 1 || uiComponent.segment == 2 ? i: style.gradient.stops.length - 1 - i,
stopColor = jsPlumbUtil.convertStyle(style.gradient.stops[styleToUse][1], true),
s = _node(STOP, {"offset":Math.floor(style.gradient.stops[i][0] * 100) + "%", "stop-color":stopColor});
g.appendChild(s);
}
var applyGradientTo = style.strokeStyle ? STROKE : FILL;
node.setAttribute(STYLE, applyGradientTo + ":url(#" + id + ")");
},
_applyStyles = function(parent, node, style, dimensions, uiComponent) {
if (style.gradient) {
_updateGradient(parent, node, style, dimensions, uiComponent);
}
else {
// make sure we clear any existing gradient
_clearGradient(parent);
node.setAttribute(STYLE, "");
}
node.setAttribute(FILL, style.fillStyle ? jsPlumbUtil.convertStyle(style.fillStyle, true) : NONE);
node.setAttribute(STROKE, style.strokeStyle ? jsPlumbUtil.convertStyle(style.strokeStyle, true) : NONE);
if (style.lineWidth) {
node.setAttribute(STROKE_WIDTH, style.lineWidth);
}
// in SVG there is a stroke-dasharray attribute we can set, and its syntax looks like
// the syntax in VML but is actually kind of nasty: values are given in the pixel
// coordinate space, whereas in VML they are multiples of the width of the stroked
// line, which makes a lot more sense. for that reason, jsPlumb is supporting both
// the native svg 'stroke-dasharray' attribute, and also the 'dashstyle' concept from
// VML, which will be the preferred method. the code below this converts a dashstyle
// attribute given in terms of stroke width into a pixel representation, by using the
// stroke's lineWidth.
if (style[DASHSTYLE] && style[LINE_WIDTH] && !style[STROKE_DASHARRAY]) {
var sep = style[DASHSTYLE].indexOf(",") == -1 ? " " : ",",
parts = style[DASHSTYLE].split(sep),
styleToUse = "";
parts.forEach(function(p) {
styleToUse += (Math.floor(p * style.lineWidth) + sep);
});
node.setAttribute(STROKE_DASHARRAY, styleToUse);
}
else if(style[STROKE_DASHARRAY]) {
node.setAttribute(STROKE_DASHARRAY, style[STROKE_DASHARRAY]);
}
// extra attributes such as join type, dash offset.
for (var i in svgAttributeMap) {
if (style[i]) {
node.setAttribute(svgAttributeMap[i], style[i]);
}
}
},
_decodeFont = function(f) {
var r = /([0-9].)(p[xt])\s(.*)/,
bits = f.match(r);
return {size:bits[1] + bits[2], font:bits[3]};
},
_classManip = function(el, add, clazz) {
var classesToAddOrRemove = clazz.split(" "),
className = el.className,
curClasses = className.baseVal.split(" ");
for (var i = 0; i < classesToAddOrRemove.length; i++) {
if (add) {
if (curClasses.indexOf(classesToAddOrRemove[i]) == -1)
curClasses.push(classesToAddOrRemove[i]);
}
else {
var idx = curClasses.indexOf(classesToAddOrRemove[i]);
if (idx != -1)
curClasses.splice(idx, 1);
}
}
el.className.baseVal = curClasses.join(" ");
},
_addClass = function(el, clazz) { _classManip(el, true, clazz); },
_removeClass = function(el, clazz) { _classManip(el, false, clazz); },
_appendAtIndex = function(svg, path, idx) {
if (svg.childNodes.length > idx) {
svg.insertBefore(path, svg.childNodes[idx]);
}
else svg.appendChild(path);
};
/**
utility methods for other objects to use.
*/
jsPlumbUtil.svg = {
addClass:_addClass,
removeClass:_removeClass,
node:_node,
attr:_attr,
pos:_pos
};
// ************************** / SVG utility methods ********************************************
/*
* Base class for SVG components.
*/
var SvgComponent = function(params) {
var self = this,
pointerEventsSpec = params.pointerEventsSpec || "all",
renderer = {};
jsPlumb.jsPlumbUIComponent.apply(this, params.originalArgs);
self.canvas = null, self.path = null, self.svg = null;
var clazz = params.cssClass + " " + (params.originalArgs[0].cssClass || ""),
svgParams = {
"style":"",
"width":0,
"height":0,
"pointer-events":pointerEventsSpec,
"position":"absolute"
};
self.svg = _node("svg", svgParams);
if (params.useDivWrapper) {
self.canvas = document.createElement("div");
self.canvas.style["position"] = "absolute";
jsPlumb.sizeCanvas(self.canvas,0,0,1,1);
self.canvas.className = clazz;
}
else {
_attr(self.svg, { "class":clazz });
self.canvas = self.svg;
}
params._jsPlumb.appendElement(self.canvas, params.originalArgs[0]["parent"]);
if (params.useDivWrapper) self.canvas.appendChild(self.svg);
// TODO this displayElement stuff is common between all components, across all
// renderers. would be best moved to jsPlumbUIComponent.
var displayElements = [ self.canvas ];
this.getDisplayElements = function() {
return displayElements;
};
this.appendDisplayElement = function(el) {
displayElements.push(el);
};
this.paint = function(style, anchor, extents) {
if (style != null) {
var xy = [ self.x, self.y ], wh = [ self.w, self.h ], p;
if (extents != null) {
if (extents.xmin < 0) xy[0] += extents.xmin;
if (extents.ymin < 0) xy[1] += extents.ymin;
wh[0] = extents.xmax + ((extents.xmin < 0) ? -extents.xmin : 0);
wh[1] = extents.ymax + ((extents.ymin < 0) ? -extents.ymin : 0);
}
if (params.useDivWrapper) {
jsPlumb.sizeCanvas(self.canvas, xy[0], xy[1], wh[0], wh[1]);
xy[0] = 0, xy[1] = 0;
p = _pos([ 0, 0 ]);
}
else
p = _pos([ xy[0], xy[1] ]);
renderer.paint.apply(this, arguments);
_attr(self.svg, {
"style":p,
"width": wh[0],
"height": wh[1]
});
}
};
return {
renderer:renderer
};
};
/*
* Base class for SVG connectors.
*/
var SvgConnector = jsPlumb.ConnectorRenderers.svg = function(params) {
var self = this,
_super = SvgComponent.apply(this, [ {
cssClass:params["_jsPlumb"].connectorClass,
originalArgs:arguments,
pointerEventsSpec:"none",
_jsPlumb:params["_jsPlumb"]
} ]);
_super.renderer.paint = function(style, anchor, extents) {
var segments = self.getSegments(), p = "", offset = [0,0];
if (extents.xmin < 0) offset[0] = -extents.xmin;
if (extents.ymin < 0) offset[1] = -extents.ymin;
// create path from segments.
for (var i = 0; i < segments.length; i++) {
p += jsPlumb.Segments.svg.SegmentRenderer.getPath(segments[i]);
p += " ";
}
var a = {
d:p,
transform:"translate(" + offset[0] + "," + offset[1] + ")",
"pointer-events":params["pointer-events"] || "visibleStroke"
},
outlineStyle = null,
d = [self.x,self.y,self.w,self.h];
// outline style. actually means drawing an svg object underneath the main one.
if (style.outlineColor) {
var outlineWidth = style.outlineWidth || 1,
outlineStrokeWidth = style.lineWidth + (2 * outlineWidth),
outlineStyle = jsPlumb.CurrentLibrary.extend({}, style);
outlineStyle.strokeStyle = jsPlumbUtil.convertStyle(style.outlineColor);
outlineStyle.lineWidth = outlineStrokeWidth;
if (self.bgPath == null) {
self.bgPath = _node("path", a);
_appendAtIndex(self.svg, self.bgPath, 0);
self.attachListeners(self.bgPath, self);
}
else {
_attr(self.bgPath, a);
}
_applyStyles(self.svg, self.bgPath, outlineStyle, d, self);
}
if (self.path == null) {
self.path = _node("path", a);
_appendAtIndex(self.svg, self.path, style.outlineColor ? 1 : 0);
self.attachListeners(self.path, self);
}
else {
_attr(self.path, a);
}
_applyStyles(self.svg, self.path, style, d, self);
};
this.reattachListeners = function() {
if (self.bgPath) self.reattachListenersForElement(self.bgPath, self);
if (self.path) self.reattachListenersForElement(self.path, self);
};
};
// ******************************* svg segment renderer *****************************************************
jsPlumb.Segments.svg = {
SegmentRenderer : {
getPath : function(segment) {
return ({
"Straight":function() {
var d = segment.getCoordinates();
return "M " + d.x1 + " " + d.y1 + " L " + d.x2 + " " + d.y2;
},
"Bezier":function() {
var d = segment.params;
return "M " + d.x1 + " " + d.y1 +
" C " + d.cp1x + " " + d.cp1y + " " + d.cp2x + " " + d.cp2y + " " + d.x2 + " " + d.y2;
},
"Arc":function() {
var d = segment.params,
laf = segment.sweep > Math.PI ? 1 : 0,
sf = segment.anticlockwise ? 0 : 1;
return "M" + segment.x1 + " " + segment.y1 + " A " + segment.radius + " " + d.r + " 0 " + laf + "," + sf + " " + segment.x2 + " " + segment.y2;
}
})[segment.type]();
}
}
};
// ******************************* /svg segments *****************************************************
/*
* Base class for SVG endpoints.
*/
var SvgEndpoint = window.SvgEndpoint = function(params) {
var self = this,
_super = SvgComponent.apply(this, [ {
cssClass:params["_jsPlumb"].endpointClass,
originalArgs:arguments,
pointerEventsSpec:"all",
useDivWrapper:true,
_jsPlumb:params["_jsPlumb"]
} ]);
_super.renderer.paint = function(style) {
var s = jsPlumb.extend({}, style);
if (s.outlineColor) {
s.strokeWidth = s.outlineWidth;
s.strokeStyle = jsPlumbUtil.convertStyle(s.outlineColor, true);
}
if (self.node == null) {
self.node = self.makeNode(s);
self.svg.appendChild(self.node);
self.attachListeners(self.node, self);
}
_applyStyles(self.svg, self.node, s, [ self.x, self.y, self.w, self.h ], self);
_pos(self.node, [ self.x, self.y ]);
};
this.reattachListeners = function() {
if (self.node) self.reattachListenersForElement(self.node, self);
};
};
/*
* SVG Dot Endpoint
*/
jsPlumb.Endpoints.svg.Dot = function() {
jsPlumb.Endpoints.Dot.apply(this, arguments);
SvgEndpoint.apply(this, arguments);
this.makeNode = function(style) {
return _node("circle", {
"cx" : this.w / 2,
"cy" : this.h / 2,
"r" : this.w / 2
});
};
};
/*
* SVG Rectangle Endpoint
*/
jsPlumb.Endpoints.svg.Rectangle = function() {
jsPlumb.Endpoints.Rectangle.apply(this, arguments);
SvgEndpoint.apply(this, arguments);
this.makeNode = function(style) {
return _node("rect", {
"width" : this.w,
"height" : this.h
});
};
};
/*
* SVG Image Endpoint is the default image endpoint.
*/
jsPlumb.Endpoints.svg.Image = jsPlumb.Endpoints.Image;
/*
* Blank endpoint in svg renderer is the default Blank endpoint.
*/
jsPlumb.Endpoints.svg.Blank = jsPlumb.Endpoints.Blank;
/*
* Label overlay in svg renderer is the default Label overlay.
*/
jsPlumb.Overlays.svg.Label = jsPlumb.Overlays.Label;
/*
* Custom overlay in svg renderer is the default Custom overlay.
*/
jsPlumb.Overlays.svg.Custom = jsPlumb.Overlays.Custom;
var AbstractSvgArrowOverlay = function(superclass, originalArgs) {
superclass.apply(this, originalArgs);
jsPlumb.jsPlumbUIComponent.apply(this, originalArgs);
this.isAppendedAtTopLevel = false;
var self = this, path = null;
this.paint = function(params, containerExtents) {
// only draws on connections, not endpoints.
if (params.component.svg && containerExtents) {
if (path == null) {
path = _node("path", {
"pointer-events":"all"
});
params.component.svg.appendChild(path);
self.attachListeners(path, params.component);
self.attachListeners(path, self);
}
var clazz = originalArgs && (originalArgs.length == 1) ? (originalArgs[0].cssClass || "") : "",
offset = [0,0];
if (containerExtents.xmin < 0) offset[0] = -containerExtents.xmin;
if (containerExtents.ymin < 0) offset[1] = -containerExtents.ymin;
_attr(path, {
"d" : makePath(params.d),
"class" : clazz,
stroke : params.strokeStyle ? params.strokeStyle : null,
fill : params.fillStyle ? params.fillStyle : null,
transform : "translate(" + offset[0] + "," + offset[1] + ")"
});
}
};
var makePath = function(d) {
return "M" + d.hxy.x + "," + d.hxy.y +
" L" + d.tail[0].x + "," + d.tail[0].y +
" L" + d.cxy.x + "," + d.cxy.y +
" L" + d.tail[1].x + "," + d.tail[1].y +
" L" + d.hxy.x + "," + d.hxy.y;
};
this.reattachListeners = function() {
if (path) self.reattachListenersForElement(path, self);
};
this.cleanup = function() {
if (path != null) jsPlumb.CurrentLibrary.removeElement(path);
};
};
jsPlumb.Overlays.svg.Arrow = function() {
AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]);
};
jsPlumb.Overlays.svg.PlainArrow = function() {
AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]);
};
jsPlumb.Overlays.svg.Diamond = function() {
AbstractSvgArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]);
};
// a test
jsPlumb.Overlays.svg.GuideLines = function() {
var path = null, self = this, p1_1, p1_2;
jsPlumb.Overlays.GuideLines.apply(this, arguments);
this.paint = function(params, containerExtents) {
if (path == null) {
path = _node("path");
params.connector.svg.appendChild(path);
self.attachListeners(path, params.connector);
self.attachListeners(path, self);
p1_1 = _node("path");
params.connector.svg.appendChild(p1_1);
self.attachListeners(p1_1, params.connector);
self.attachListeners(p1_1, self);
p1_2 = _node("path");
params.connector.svg.appendChild(p1_2);
self.attachListeners(p1_2, params.connector);
self.attachListeners(p1_2, self);
}
var offset =[0,0];
if (containerExtents.xmin < 0) offset[0] = -containerExtents.xmin;
if (containerExtents.ymin < 0) offset[1] = -containerExtents.ymin;
_attr(path, {
"d" : makePath(params.head, params.tail),
stroke : "red",
fill : null,
transform:"translate(" + offset[0] + "," + offset[1] + ")"
});
_attr(p1_1, {
"d" : makePath(params.tailLine[0], params.tailLine[1]),
stroke : "blue",
fill : null,
transform:"translate(" + offset[0] + "," + offset[1] + ")"
});
_attr(p1_2, {
"d" : makePath(params.headLine[0], params.headLine[1]),
stroke : "green",
fill : null,
transform:"translate(" + offset[0] + "," + offset[1] + ")"
});
};
var makePath = function(d1, d2) {
return "M " + d1.x + "," + d1.y +
" L" + d2.x + "," + d2.y;
};
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-renderers-vml.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the VML renderers.
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
// http://ajaxian.com/archives/the-vml-changes-in-ie-8
// http://www.nczonline.net/blog/2010/01/19/internet-explorer-8-document-and-browser-modes/
// http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
var vmlAttributeMap = {
"stroke-linejoin":"joinstyle",
"joinstyle":"joinstyle",
"endcap":"endcap",
"miterlimit":"miterlimit"
},
jsPlumbStylesheet = null;
if (document.createStyleSheet && document.namespaces) {
var ruleClasses = [
".jsplumb_vml", "jsplumb\\:textbox", "jsplumb\\:oval", "jsplumb\\:rect",
"jsplumb\\:stroke", "jsplumb\\:shape", "jsplumb\\:group"
],
rule = "behavior:url(#default#VML);position:absolute;";
jsPlumbStylesheet = document.createStyleSheet();
for (var i = 0; i < ruleClasses.length; i++)
jsPlumbStylesheet.addRule(ruleClasses[i], rule);
// in this page it is also mentioned that IE requires the extra arg to the namespace
// http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
// but someone commented saying they didn't need it, and it seems jsPlumb doesnt need it either.
// var iev = document.documentMode;
//if (!iev || iev < 8)
document.namespaces.add("jsplumb", "urn:schemas-microsoft-com:vml");
//else
// document.namespaces.add("jsplumb", "urn:schemas-microsoft-com:vml", "#default#VML");
}
jsPlumb.vml = {};
var scale = 1000,
_groupMap = {},
_getGroup = function(container, connectorClass) {
var id = jsPlumb.getId(container),
g = _groupMap[id];
if(!g) {
g = _node("group", [0,0,scale, scale], {"class":connectorClass});
//g.style.position=absolute;
//g["coordsize"] = "1000,1000";
g.style.backgroundColor="red";
_groupMap[id] = g;
jsPlumb.appendElement(g, container); // todo if this gets reinstated, remember to use the current jsplumb instance.
//document.body.appendChild(g);
}
return g;
},
_atts = function(o, atts) {
for (var i in atts) {
// IE8 fix: setattribute does not work after an element has been added to the dom!
// http://www.louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/
//o.setAttribute(i, atts[i]);
/*There is an additional problem when accessing VML elements by using get/setAttribute. The simple solution is following:
if (document.documentMode==8) {
ele.opacity=1;
} else {
ele.setAttribute(‘opacity’,1);
}
*/
o[i] = atts[i];
}
},
_node = function(name, d, atts, parent, _jsPlumb, deferToJsPlumbContainer) {
atts = atts || {};
var o = document.createElement("jsplumb:" + name);
if (deferToJsPlumbContainer)
_jsPlumb.appendElement(o, parent);
else
jsPlumb.CurrentLibrary.appendElement(o, parent);
o.className = (atts["class"] ? atts["class"] + " " : "") + "jsplumb_vml";
_pos(o, d);
_atts(o, atts);
return o;
},
_pos = function(o,d, zIndex) {
o.style.left = d[0] + "px";
o.style.top = d[1] + "px";
o.style.width= d[2] + "px";
o.style.height= d[3] + "px";
o.style.position = "absolute";
if (zIndex)
o.style.zIndex = zIndex;
},
_conv = jsPlumb.vml.convertValue = function(v) {
return Math.floor(v * scale);
},
// tests if the given style is "transparent" and then sets the appropriate opacity node to 0 if so,
// or 1 if not. TODO in the future, support variable opacity.
_maybeSetOpacity = function(styleToWrite, styleToCheck, type, component) {
if ("transparent" === styleToCheck)
component.setOpacity(type, "0.0");
else
component.setOpacity(type, "1.0");
},
_applyStyles = function(node, style, component, _jsPlumb) {
var styleToWrite = {};
if (style.strokeStyle) {
styleToWrite["stroked"] = "true";
var strokeColor = jsPlumbUtil.convertStyle(style.strokeStyle, true);
styleToWrite["strokecolor"] = strokeColor;
_maybeSetOpacity(styleToWrite, strokeColor, "stroke", component);
styleToWrite["strokeweight"] = style.lineWidth + "px";
}
else styleToWrite["stroked"] = "false";
if (style.fillStyle) {
styleToWrite["filled"] = "true";
var fillColor = jsPlumbUtil.convertStyle(style.fillStyle, true);
styleToWrite["fillcolor"] = fillColor;
_maybeSetOpacity(styleToWrite, fillColor, "fill", component);
}
else styleToWrite["filled"] = "false";
if(style["dashstyle"]) {
if (component.strokeNode == null) {
component.strokeNode = _node("stroke", [0,0,0,0], { dashstyle:style["dashstyle"] }, node, _jsPlumb);
}
else
component.strokeNode.dashstyle = style["dashstyle"];
}
else if (style["stroke-dasharray"] && style["lineWidth"]) {
var sep = style["stroke-dasharray"].indexOf(",") == -1 ? " " : ",",
parts = style["stroke-dasharray"].split(sep),
styleToUse = "";
for(var i = 0; i < parts.length; i++) {
styleToUse += (Math.floor(parts[i] / style.lineWidth) + sep);
}
if (component.strokeNode == null) {
component.strokeNode = _node("stroke", [0,0,0,0], { dashstyle:styleToUse }, node, _jsPlumb);
}
else
component.strokeNode.dashstyle = styleToUse;
}
_atts(node, styleToWrite);
},
/*
* Base class for Vml endpoints and connectors. Extends jsPlumbUIComponent.
*/
VmlComponent = function() {
var self = this, renderer = {};
jsPlumb.jsPlumbUIComponent.apply(this, arguments);
this.opacityNodes = {
"stroke":null,
"fill":null
};
this.initOpacityNodes = function(vml) {
self.opacityNodes["stroke"] = _node("stroke", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb);
self.opacityNodes["fill"] = _node("fill", [0,0,1,1], {opacity:"0.0"}, vml, self._jsPlumb);
};
this.setOpacity = function(type, value) {
var node = self.opacityNodes[type];
if (node) node["opacity"] = "" + value;
};
var displayElements = [ ];
this.getDisplayElements = function() {
return displayElements;
};
this.appendDisplayElement = function(el, doNotAppendToCanvas) {
if (!doNotAppendToCanvas) self.canvas.parentNode.appendChild(el);
displayElements.push(el);
};
},
/*
* Base class for Vml connectors. extends VmlComponent.
*/
VmlConnector = jsPlumb.ConnectorRenderers.vml = function(params) {
var self = this;
self.strokeNode = null;
self.canvas = null;
var _super = VmlComponent.apply(this, arguments);
var clazz = self._jsPlumb.connectorClass + (params.cssClass ? (" " + params.cssClass) : "");
this.paint = function(style) {
if (style !== null) {
var segments = self.getSegments(), p = { "path":"" },
d = [self.x,self.y,self.w,self.h];
// create path from segments.
for (var i = 0; i < segments.length; i++) {
p.path += jsPlumb.Segments.vml.SegmentRenderer.getPath(segments[i]);
p.path += " ";
}
//*
if (style.outlineColor) {
var outlineWidth = style.outlineWidth || 1,
outlineStrokeWidth = style.lineWidth + (2 * outlineWidth),
outlineStyle = {
strokeStyle : jsPlumbUtil.convertStyle(style.outlineColor),
lineWidth : outlineStrokeWidth
};
for (var aa in vmlAttributeMap) outlineStyle[aa] = style[aa];
if (self.bgCanvas == null) {
p["class"] = clazz;
p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
self.bgCanvas = _node("shape", d, p, params.parent, self._jsPlumb, true);
_pos(self.bgCanvas, d);
self.appendDisplayElement(self.bgCanvas, true);
self.attachListeners(self.bgCanvas, self);
self.initOpacityNodes(self.bgCanvas, ["stroke"]);
}
else {
p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
_pos(self.bgCanvas, d);
_atts(self.bgCanvas, p);
}
_applyStyles(self.bgCanvas, outlineStyle, self);
}
//*/
if (self.canvas == null) {
p["class"] = clazz;
p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
self.canvas = _node("shape", d, p, params.parent, self._jsPlumb, true);
//var group = _getGroup(params.parent); // test of append everything to a group
//group.appendChild(self.canvas); // sort of works but not exactly;
//params["_jsPlumb"].appendElement(self.canvas, params.parent); //before introduction of groups
self.appendDisplayElement(self.canvas, true);
self.attachListeners(self.canvas, self);
self.initOpacityNodes(self.canvas, ["stroke"]);
}
else {
p["coordsize"] = (d[2] * scale) + "," + (d[3] * scale);
_pos(self.canvas, d);
_atts(self.canvas, p);
}
_applyStyles(self.canvas, style, self, self._jsPlumb);
}
};
this.reattachListeners = function() {
if (self.canvas) self.reattachListenersForElement(self.canvas, self);
};
},
/*
*
* Base class for Vml Endpoints. extends VmlComponent.
*
*/
VmlEndpoint = window.VmlEndpoint = function(params) {
VmlComponent.apply(this, arguments);
var vml = null, self = this, opacityStrokeNode = null, opacityFillNode = null;
self.canvas = document.createElement("div");
self.canvas.style["position"] = "absolute";
var clazz = self._jsPlumb.endpointClass + (params.cssClass ? (" " + params.cssClass) : "");
//var group = _getGroup(params.parent);
//group.appendChild(self.canvas);
params["_jsPlumb"].appendElement(self.canvas, params.parent);
this.paint = function(style, anchor) {
var p = { };
jsPlumb.sizeCanvas(self.canvas, self.x, self.y, self.w, self.h);
if (vml == null) {
p["class"] = clazz;
vml = self.getVml([0,0, self.w, self.h], p, anchor, self.canvas, self._jsPlumb);
self.attachListeners(vml, self);
self.appendDisplayElement(vml, true);
self.appendDisplayElement(self.canvas, true);
self.initOpacityNodes(vml, ["fill"]);
}
else {
_pos(vml, [0,0, self.w, self.h]);
_atts(vml, p);
}
_applyStyles(vml, style, self);
};
this.reattachListeners = function() {
if (vml) self.reattachListenersForElement(vml, self);
};
};
// ******************************* vml segments *****************************************************
jsPlumb.Segments.vml = {
SegmentRenderer : {
getPath : function(segment) {
return ({
"Straight":function(segment) {
var d = segment.params;
return "m" + _conv(d.x1) + "," + _conv(d.y1) + " l" + _conv(d.x2) + "," + _conv(d.y2) + " e";
},
"Bezier":function(segment) {
var d = segment.params;
return "m" + _conv(d.x1) + "," + _conv(d.y1) +
" c" + _conv(d.cp1x) + "," + _conv(d.cp1y) + "," + _conv(d.cp2x) + "," + _conv(d.cp2y) + "," + _conv(d.x2) + "," + _conv(d.y2) + " e";
},
"Arc":function(segment) {
var d = segment.params,
xmin = Math.min(d.x1, d.x2),
xmax = Math.max(d.x1, d.x2),
ymin = Math.min(d.y1, d.y2),
ymax = Math.max(d.y1, d.y2),
sf = segment.anticlockwise ? 1 : 0,
pathType = (segment.anticlockwise ? "at " : "wa "),
makePosString = function() {
var xy = [
null,
[ function() { return [xmin, ymin ];}, function() { return [xmin - d.r, ymin - d.r ];}],
[ function() { return [xmin - d.r, ymin ];}, function() { return [xmin, ymin - d.r ];}],
[ function() { return [xmin - d.r, ymin - d.r ];}, function() { return [xmin, ymin ];}],
[ function() { return [xmin, ymin - d.r ];}, function() { return [xmin - d.r, ymin ];}]
][segment.segment][sf]();
return _conv(xy[0]) + "," + _conv(xy[1]) + "," + _conv(xy[0] + (2*d.r)) + "," + _conv(xy[1] + (2*d.r));
};
return pathType + makePosString() + "," + _conv(d.x1) + ","
+ _conv(d.y1) + "," + _conv(d.x2) + "," + _conv(d.y2) + " e";
}
})[segment.type](segment);
}
}
};
// ******************************* /vml segments *****************************************************
// ******************************* vml endpoints *****************************************************
jsPlumb.Endpoints.vml.Dot = function() {
jsPlumb.Endpoints.Dot.apply(this, arguments);
VmlEndpoint.apply(this, arguments);
this.getVml = function(d, atts, anchor, parent, _jsPlumb) { return _node("oval", d, atts, parent, _jsPlumb); };
};
jsPlumb.Endpoints.vml.Rectangle = function() {
jsPlumb.Endpoints.Rectangle.apply(this, arguments);
VmlEndpoint.apply(this, arguments);
this.getVml = function(d, atts, anchor, parent, _jsPlumb) { return _node("rect", d, atts, parent, _jsPlumb); };
};
/*
* VML Image Endpoint is the same as the default image endpoint.
*/
jsPlumb.Endpoints.vml.Image = jsPlumb.Endpoints.Image;
/**
* placeholder for Blank endpoint in vml renderer.
*/
jsPlumb.Endpoints.vml.Blank = jsPlumb.Endpoints.Blank;
// ******************************* /vml endpoints *****************************************************
// ******************************* vml overlays *****************************************************
/**
* VML Label renderer. uses the default label renderer (which adds an element to the DOM)
*/
jsPlumb.Overlays.vml.Label = jsPlumb.Overlays.Label;
/**
* VML Custom renderer. uses the default Custom renderer (which adds an element to the DOM)
*/
jsPlumb.Overlays.vml.Custom = jsPlumb.Overlays.Custom;
/**
* Abstract VML arrow superclass
*/
var AbstractVmlArrowOverlay = function(superclass, originalArgs) {
superclass.apply(this, originalArgs);
VmlComponent.apply(this, originalArgs);
var self = this, path = null;
self.canvas = null;
self.isAppendedAtTopLevel = true;
var getPath = function(d) {
return "m " + _conv(d.hxy.x) + "," + _conv(d.hxy.y) +
" l " + _conv(d.tail[0].x) + "," + _conv(d.tail[0].y) +
" " + _conv(d.cxy.x) + "," + _conv(d.cxy.y) +
" " + _conv(d.tail[1].x) + "," + _conv(d.tail[1].y) +
" x e";
};
this.paint = function(params, containerExtents) {
var p = {}, d = params.d, connector = params.connector;
if (params.strokeStyle) {
p["stroked"] = "true";
p["strokecolor"] = jsPlumbUtil.convertStyle(params.strokeStyle, true);
}
if (params.lineWidth) p["strokeweight"] = params.lineWidth + "px";
if (params.fillStyle) {
p["filled"] = "true";
p["fillcolor"] = params.fillStyle;
}
var xmin = Math.min(d.hxy.x, d.tail[0].x, d.tail[1].x, d.cxy.x),
ymin = Math.min(d.hxy.y, d.tail[0].y, d.tail[1].y, d.cxy.y),
xmax = Math.max(d.hxy.x, d.tail[0].x, d.tail[1].x, d.cxy.x),
ymax = Math.max(d.hxy.y, d.tail[0].y, d.tail[1].y, d.cxy.y),
w = Math.abs(xmax - xmin),
h = Math.abs(ymax - ymin),
dim = [xmin, ymin, w, h];
// for VML, we create overlays using shapes that have the same dimensions and
// coordsize as their connector - overlays calculate themselves relative to the
// connector (it's how it's been done since the original canvas implementation, because
// for canvas that makes sense).
p["path"] = getPath(d);
p["coordsize"] = (connector.w * scale) + "," + (connector.h * scale);
dim[0] = connector.x;
dim[1] = connector.y;
dim[2] = connector.w;
dim[3] = connector.h;
if (self.canvas == null) {
var overlayClass = connector._jsPlumb.overlayClass || "";
var clazz = originalArgs && (originalArgs.length == 1) ? (originalArgs[0].cssClass || "") : "";
p["class"] = clazz + " " + overlayClass;
self.canvas = _node("shape", dim, p, connector.canvas.parentNode, connector._jsPlumb, true);
connector.appendDisplayElement(self.canvas, true);
self.attachListeners(self.canvas, connector);
self.attachListeners(self.canvas, self);
}
else {
_pos(self.canvas, dim);
_atts(self.canvas, p);
}
};
this.reattachListeners = function() {
if (self.canvas) self.reattachListenersForElement(self.canvas, self);
};
this.cleanup = function() {
if (self.canvas != null) jsPlumb.CurrentLibrary.removeElement(self.canvas);
};
};
jsPlumb.Overlays.vml.Arrow = function() {
AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Arrow, arguments]);
};
jsPlumb.Overlays.vml.PlainArrow = function() {
AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.PlainArrow, arguments]);
};
jsPlumb.Overlays.vml.Diamond = function() {
AbstractVmlArrowOverlay.apply(this, [jsPlumb.Overlays.Diamond, arguments]);
};
// ******************************* /vml overlays *****************************************************
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb-util.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG or VML.
*
* This file contains the util functions
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
var pointHelper = function(p1, p2, fn) {
p1 = jsPlumbUtil.isArray(p1) ? p1 : [p1.x, p1.y];
p2 = jsPlumbUtil.isArray(p2) ? p2 : [p2.x, p2.y];
return fn(p1, p2);
};
jsPlumbUtil = {
isArray : function(a) {
return Object.prototype.toString.call(a) === "[object Array]";
},
isString : function(s) {
return typeof s === "string";
},
isBoolean: function(s) {
return typeof s === "boolean";
},
isObject : function(o) {
return Object.prototype.toString.call(o) === "[object Object]";
},
isDate : function(o) {
return Object.prototype.toString.call(o) === "[object Date]";
},
isFunction: function(o) {
return Object.prototype.toString.call(o) === "[object Function]";
},
clone : function(a) {
if (this.isString(a)) return "" + a;
else if (this.isBoolean(a)) return !!a;
else if (this.isDate(a)) return new Date(a.getTime());
else if (this.isFunction(a)) return a;
else if (this.isArray(a)) {
var b = [];
for (var i = 0; i < a.length; i++)
b.push(this.clone(a[i]));
return b;
}
else if (this.isObject(a)) {
var b = {};
for (var i in a)
b[i] = this.clone(a[i]);
return b;
}
else return a;
},
merge : function(a, b) {
var c = this.clone(a);
for (var i in b) {
if (c[i] == null || this.isString(b[i]) || this.isBoolean(b[i]))
c[i] = b[i];
else {
if (this.isArray(b[i])/* && this.isArray(c[i])*/) {
var ar = [];
// if c's object is also an array we can keep its values.
if (this.isArray(c[i])) ar.push.apply(ar, c[i]);
ar.push.apply(ar, b[i]);
c[i] = ar;
}
else if(this.isObject(b[i])) {
// overwite c's value with an object if it is not already one.
if (!this.isObject(c[i]))
c[i] = {};
for (var j in b[i])
c[i][j] = b[i][j];
}
}
}
return c;
},
//
// chain a list of functions, supplied by [ object, method name, args ], and return on the first
// one that returns the failValue. if none return the failValue, return the successValue.
//
functionChain : function(successValue, failValue, fns) {
for (var i = 0; i < fns.length; i++) {
var o = fns[i][0][fns[i][1]].apply(fns[i][0], fns[i][2]);
if (o === failValue) {
return o;
}
}
return successValue;
},
// take the given model and expand out any parameters.
populate : function(model, values) {
// for a string, see if it has parameter matches, and if so, try to make the substitutions.
var getValue = function(fromString) {
var matches = fromString.match(/(\${.*?})/g);
if (matches != null) {
for (var i = 0; i < matches.length; i++) {
var val = values[matches[i].substring(2, matches[i].length - 1)];
if (val) {
fromString = fromString.replace(matches[i], val);
}
}
}
return fromString;
},
// process one entry.
_one = function(d) {
if (d != null) {
if (jsPlumbUtil.isString(d)) {
return getValue(d);
}
else if (jsPlumbUtil.isArray(d)) {
var r = [];
for (var i = 0; i < d.length; i++)
r.push(_one(d[i]));
return r;
}
else if (jsPlumbUtil.isObject(d)) {
var r = {};
for (var i in d) {
r[i] = _one(d[i]);
}
return r;
}
else {
return d;
}
}
};
return _one(model);
},
convertStyle : function(s, ignoreAlpha) {
// TODO: jsPlumb should support a separate 'opacity' style member.
if ("transparent" === s) return s;
var o = s,
pad = function(n) { return n.length == 1 ? "0" + n : n; },
hex = function(k) { return pad(Number(k).toString(16)); },
pattern = /(rgb[a]?\()(.*)(\))/;
if (s.match(pattern)) {
var parts = s.match(pattern)[2].split(",");
o = "#" + hex(parts[0]) + hex(parts[1]) + hex(parts[2]);
if (!ignoreAlpha && parts.length == 4)
o = o + hex(parts[3]);
}
return o;
},
gradient : function(p1, p2) {
return pointHelper(p1, p2, function(_p1, _p2) {
if (_p2[0] == _p1[0])
return _p2[1] > _p1[1] ? Infinity : -Infinity;
else if (_p2[1] == _p1[1])
return _p2[0] > _p1[0] ? 0 : -0;
else
return (_p2[1] - _p1[1]) / (_p2[0] - _p1[0]);
});
},
normal : function(p1, p2) {
return -1 / this.gradient(p1, p2);
},
lineLength : function(p1, p2) {
return pointHelper(p1, p2, function(_p1, _p2) {
return Math.sqrt(Math.pow(_p2[1] - _p1[1], 2) + Math.pow(_p2[0] - _p1[0], 2));
});
},
segment : function(p1, p2) {
return pointHelper(p1, p2, function(_p1, _p2) {
if (_p2[0] > _p1[0]) {
return (_p2[1] > _p1[1]) ? 2 : 1;
}
else if (_p2[0] == _p1[0]) {
return _p2[1] > _p1[1] ? 2 : 1;
}
else {
return (_p2[1] > _p1[1]) ? 3 : 4;
}
});
},
theta : function(p1, p2) {
return pointHelper(p1, p2, function(_p1, _p2) {
var m = jsPlumbUtil.gradient(_p1, _p2),
t = Math.atan(m),
s = jsPlumbUtil.segment(_p1, _p2);
if ((s == 4 || s== 3)) t += Math.PI;
if (t < 0) t += (2 * Math.PI);
return t;
});
},
intersects : function(r1, r2) {
var x1 = r1.x, x2 = r1.x + r1.w, y1 = r1.y, y2 = r1.y + r1.h,
a1 = r2.x, a2 = r2.x + r2.w, b1 = r2.y, b2 = r2.y + r2.h;
return ( (x1 <= a1 && a1 <= x2) && (y1 <= b1 && b1 <= y2) ) ||
( (x1 <= a2 && a2 <= x2) && (y1 <= b1 && b1 <= y2) ) ||
( (x1 <= a1 && a1 <= x2) && (y1 <= b2 && b2 <= y2) ) ||
( (x1 <= a2 && a1 <= x2) && (y1 <= b2 && b2 <= y2) ) ||
( (a1 <= x1 && x1 <= a2) && (b1 <= y1 && y1 <= b2) ) ||
( (a1 <= x2 && x2 <= a2) && (b1 <= y1 && y1 <= b2) ) ||
( (a1 <= x1 && x1 <= a2) && (b1 <= y2 && y2 <= b2) ) ||
( (a1 <= x2 && x1 <= a2) && (b1 <= y2 && y2 <= b2) );
},
segmentMultipliers : [null, [1, -1], [1, 1], [-1, 1], [-1, -1] ],
inverseSegmentMultipliers : [null, [-1, -1], [-1, 1], [1, 1], [1, -1] ],
pointOnLine : function(fromPoint, toPoint, distance) {
var m = jsPlumbUtil.gradient(fromPoint, toPoint),
s = jsPlumbUtil.segment(fromPoint, toPoint),
segmentMultiplier = distance > 0 ? jsPlumbUtil.segmentMultipliers[s] : jsPlumbUtil.inverseSegmentMultipliers[s],
theta = Math.atan(m),
y = Math.abs(distance * Math.sin(theta)) * segmentMultiplier[1],
x = Math.abs(distance * Math.cos(theta)) * segmentMultiplier[0];
return { x:fromPoint.x + x, y:fromPoint.y + y };
},
/**
* calculates a perpendicular to the line fromPoint->toPoint, that passes through toPoint and is 'length' long.
* @param fromPoint
* @param toPoint
* @param length
*/
perpendicularLineTo : function(fromPoint, toPoint, length) {
var m = jsPlumbUtil.gradient(fromPoint, toPoint),
theta2 = Math.atan(-1 / m),
y = length / 2 * Math.sin(theta2),
x = length / 2 * Math.cos(theta2);
return [{x:toPoint.x + x, y:toPoint.y + y}, {x:toPoint.x - x, y:toPoint.y - y}];
},
findWithFunction : function(a, f) {
if (a)
for (var i = 0; i < a.length; i++) if (f(a[i])) return i;
return -1;
},
clampToGrid : function(x, y, grid, dontClampX, dontClampY) {
var _gridClamp = function(n, g) {
var e = n % g,
f = Math.floor(n / g),
inc = e >= (g / 2) ? 1 : 0;
return (f + inc) * g;
};
return [
dontClampX || grid == null ? x : _gridClamp(x, grid[0]),
dontClampY || grid == null ? y : _gridClamp(y, grid[1])
];
},
indexOf : function(l, v) {
return jsPlumbUtil.findWithFunction(l, function(_v) { return _v == v; });
},
removeWithFunction : function(a, f) {
var idx = jsPlumbUtil.findWithFunction(a, f);
if (idx > -1) a.splice(idx, 1);
return idx != -1;
},
remove : function(l, v) {
var idx = jsPlumbUtil.indexOf(l, v);
if (idx > -1) l.splice(idx, 1);
return idx != -1;
},
// TODO support insert index
addWithFunction : function(list, item, hashFunction) {
if (jsPlumbUtil.findWithFunction(list, hashFunction) == -1) list.push(item);
},
addToList : function(map, key, value) {
var l = map[key];
if (l == null) {
l = [], map[key] = l;
}
l.push(value);
return l;
},
/**
* EventGenerator
* Superclass for objects that generate events - jsPlumb extends this, as does jsPlumbUIComponent, which all the UI elements extend.
*/
EventGenerator : function() {
var _listeners = {}, self = this, eventsSuspended = false;
// this is a list of events that should re-throw any errors that occur during their dispatch. as of 1.3.0 this is private to
// jsPlumb, but it seems feasible that people might want to manipulate this list. the thinking is that we don't want event
// listeners to bring down jsPlumb - or do we. i can't make up my mind about this, but i know i want to hear about it if the "ready"
// event fails, because then my page has most likely not initialised. so i have this halfway-house solution. it will be interesting
// to hear what other people think.
var eventsToDieOn = [ "ready" ];
/*
* Binds a listener to an event.
*
* Parameters:
* event - name of the event to bind to.
* listener - function to execute.
*/
this.bind = function(event, listener) {
jsPlumbUtil.addToList(_listeners, event, listener);
return self;
};
/*
* Fires an update for the given event.
*
* Parameters:
* event - event to fire
* value - value to pass to the event listener(s).
* originalEvent - the original event from the browser
*/
this.fire = function(event, value, originalEvent) {
if (!eventsSuspended && _listeners[event]) {
for ( var i = 0; i < _listeners[event].length; i++) {
// doing it this way rather than catching and then possibly re-throwing means that an error propagated by this
// method will have the whole call stack available in the debugger.
if (jsPlumbUtil.findWithFunction(eventsToDieOn, function(e) { return e === event}) != -1)
_listeners[event][i](value, originalEvent);
else {
// for events we don't want to die on, catch and log.
try {
_listeners[event][i](value, originalEvent);
} catch (e) {
jsPlumbUtil.log("jsPlumb: fire failed for event " + event + " : " + e);
}
}
}
}
return self;
};
/*
* Clears either all listeners, or listeners for some specific event.
*
* Parameters:
* event - optional. constrains the clear to just listeners for this event.
*/
this.unbind = function(event) {
if (event)
delete _listeners[event];
else {
_listeners = {};
}
return self;
};
this.getListener = function(forEvent) {
return _listeners[forEvent];
};
this.setSuspendEvents = function(val) {
eventsSuspended = val;
};
this.isSuspendEvents = function() {
return eventsSuspended;
};
},
logEnabled : true,
log : function() {
if (jsPlumbUtil.logEnabled && typeof console != "undefined") {
try {
var msg = arguments[arguments.length - 1];
console.log(msg);
}
catch (e) {}
}
},
group : function(g) { if (jsPlumbUtil.logEnabled && typeof console != "undefined") console.group(g); },
groupEnd : function(g) { if (jsPlumbUtil.logEnabled && typeof console != "undefined") console.groupEnd(g); },
time : function(t) { if (jsPlumbUtil.logEnabled && typeof console != "undefined") console.time(t); },
timeEnd : function(t) { if (jsPlumbUtil.logEnabled && typeof console != "undefined") console.timeEnd(t); },
/**
* helper to remove an element from the DOM.
*/
removeElement : function(element) {
if (element != null && element.parentNode != null) {
element.parentNode.removeChild(element);
}
},
/**
* helper to remove a list of elements from the DOM.
*/
removeElements : function(elements) {
for ( var i = 0; i < elements.length; i++)
jsPlumbUtil.removeElement(elements[i]);
}
};
})();
\ No newline at end of file
ui/lib/jsPlumb/jsPlumb.js 0 → 100644
View file @ e34796c6
This source diff could not be displayed because it is too large. You can view the blob instead.
ui/lib/jsPlumb/mootools.jsPlumb.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the MooTools adapter.
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
;(function() {
/*
* overrides the FX class to inject 'step' functionality, which MooTools does not
* offer, and which makes me sad. they don't seem keen to add it, either, despite
* the fact that it could be useful:
*
* https://mootools.lighthouseapp.com/projects/2706/tickets/668
*
*/
var jsPlumbMorph = new Class({
Extends:Fx.Morph,
onStep : null,
initialize : function(el, options) {
this.parent(el, options);
if (options['onStep']) {
this.onStep = options['onStep'];
}
},
step : function(now) {
this.parent(now);
if (this.onStep) {
try { this.onStep(); }
catch(e) { }
}
}
});
var _droppables = {},
_droppableOptions = {},
_draggablesByScope = {},
_draggablesById = {},
_droppableScopesById = {};
/*
*
*/
var _executeDroppableOption = function(el, dr, event, originalEvent) {
if (dr) {
var id = dr.get("id");
if (id) {
var options = _droppableOptions[id];
if (options) {
if (options[event]) {
options[event](el, dr, originalEvent);
}
}
}
}
};
var _checkHover = function(el, entering) {
if (el) {
var id = el.get("id");
if (id) {
var options = _droppableOptions[id];
if (options) {
if (options['hoverClass']) {
if (entering) el.addClass(options['hoverClass']);
else el.removeClass(options['hoverClass']);
}
}
}
}
};
/**
* adds the given value to the given list, with the given scope. creates the scoped list
* if necessary.
* used by initDraggable and initDroppable.
*/
var _add = function(list, _scope, value) {
var l = list[_scope];
if (!l) {
l = [];
list[_scope] = l;
}
l.push(value);
};
/*
* gets an "element object" from the given input. this means an object that is used by the
* underlying library on which jsPlumb is running. 'el' may already be one of these objects,
* in which case it is returned as-is. otherwise, 'el' is a String, the library's lookup
* function is used to find the element, using the given String as the element's id.
*/
var _getElementObject = function(el) {
return $(el);
};
jsPlumb.CurrentLibrary = {
/**
* adds the given class to the element object.
*/
addClass : function(el, clazz) {
el = jsPlumb.CurrentLibrary.getElementObject(el)
try {
if (el.className.constructor == SVGAnimatedString) {
jsPlumbUtil.svg.addClass(el, clazz);
}
else el.addClass(clazz);
}
catch (e) {
// SVGAnimatedString not supported; no problem.
el.addClass(clazz);
}
},
animate : function(el, properties, options) {
var m = new jsPlumbMorph(el, options);
m.start(properties);
},
appendElement : function(child, parent) {
_getElementObject(parent).grab(child);
},
bind : function(el, event, callback) {
el = _getElementObject(el);
el.addEvent(event, callback);
},
dragEvents : {
'start':'onStart', 'stop':'onComplete', 'drag':'onDrag', 'step':'onStep',
'over':'onEnter', 'out':'onLeave','drop':'onDrop', 'complete':'onComplete'
},
/*
* wrapper around the library's 'extend' functionality (which it hopefully has.
* otherwise you'll have to do it yourself). perhaps jsPlumb could do this for you
* instead. it's not like its hard.
*/
extend : function(o1, o2) {
return $extend(o1, o2);
},
/**
* gets the named attribute from the given element object.
*/
getAttribute : function(el, attName) {
return el.get(attName);
},
getClientXY : function(eventObject) {
return [eventObject.event.clientX, eventObject.event.clientY];
},
getDragObject : function(eventArgs) {
return eventArgs[0];
},
getDragScope : function(el) {
var id = jsPlumb.getId(el),
drags = _draggablesById[id];
return drags[0].scope;
},
getDropEvent : function(args) {
return args[2];
},
getDropScope : function(el) {
var id = jsPlumb.getId(el);
return _droppableScopesById[id];
},
getDOMElement : function(el) {
// MooTools just decorates the DOM elements. so we have either an ID or an Element here.
return typeof(el) == "String" ? document.getElementById(el) : el;
},
getElementObject : _getElementObject,
/*
gets the offset for the element object. this should return a js object like this:
{ left:xxx, top: xxx}
*/
getOffset : function(el) {
var p = el.getPosition();
return { left:p.x, top:p.y };
},
getOriginalEvent : function(e) {
return e.event;
},
getPageXY : function(eventObject) {
return [eventObject.event.pageX, eventObject.event.pageY];
},
getParent : function(el) {
return jsPlumb.CurrentLibrary.getElementObject(el).getParent();
},
getScrollLeft : function(el) {
return null;
},
getScrollTop : function(el) {
return null;
},
getSelector : function(context, spec) {
if (arguments.length == 2) {
return jsPlumb.CurrentLibrary.getElementObject(context).getElements(spec);
}
else
return $$(context);
},
getSize : function(el) {
var s = el.getSize();
return [s.x, s.y];
},
getTagName : function(el) {
var e = jsPlumb.CurrentLibrary.getElementObject(el);
return e != null ? e.tagName : null;
},
/*
* takes the args passed to an event function and returns you an object that gives the
* position of the object being moved, as a js object with the same params as the result of
* getOffset, ie: { left: xxx, top: xxx }.
*/
getUIPosition : function(eventArgs, zoom) {
var ui = eventArgs[0],
el = jsPlumb.CurrentLibrary.getElementObject(ui),
p = el.getPosition();
zoom = zoom || 1;
return { left:p.x / zoom, top:p.y / zoom};
},
hasClass : function(el, clazz) {
return el.hasClass(clazz);
},
initDraggable : function(el, options, isPlumbedComponent) {
var id = jsPlumb.getId(el);
var drag = _draggablesById[id];
if (!drag) {
var originalZIndex = 0,
originalCursor = null,
dragZIndex = jsPlumb.Defaults.DragOptions.zIndex || 2000;
options['onStart'] = jsPlumb.wrap(options['onStart'], function() {
originalZIndex = this.element.getStyle('z-index');
this.element.setStyle('z-index', dragZIndex);
drag.originalZIndex = originalZIndex;
if (jsPlumb.Defaults.DragOptions.cursor) {
originalCursor = this.element.getStyle('cursor');
this.element.setStyle('cursor', jsPlumb.Defaults.DragOptions.cursor);
}
});
options['onComplete'] = jsPlumb.wrap(options['onComplete'], function() {
this.element.setStyle('z-index', originalZIndex);
if (originalCursor) {
this.element.setStyle('cursor', originalCursor);
}
});
// DROPPABLES - only relevant if this is a plumbed component, ie. not just the result of the user making some DOM element
// draggable. this is the only library adapter that has to care about this parameter.
var scope = "" + (options["scope"] || jsPlumb.Defaults.Scope),
filterFunc = function(entry) {
return entry.get("id") != el.get("id");
},
droppables = _droppables[scope] ? _droppables[scope].filter(filterFunc) : [];
if (isPlumbedComponent) {
options['droppables'] = droppables;
options['onLeave'] = jsPlumb.wrap(options['onLeave'], function(el, dr) {
if (dr) {
_checkHover(dr, false);
_executeDroppableOption(el, dr, 'onLeave');
}
});
options['onEnter'] = jsPlumb.wrap(options['onEnter'], function(el, dr) {
if (dr) {
_checkHover(dr, true);
_executeDroppableOption(el, dr, 'onEnter');
}
});
options['onDrop'] = function(el, dr, event) {
if (dr) {
_checkHover(dr, false);
_executeDroppableOption(el, dr, 'onDrop', event);
}
};
}
else
options["droppables"] = [];
drag = new Drag.Move(el, options);
drag.scope = scope;
drag.originalZIndex = originalZIndex;
_add(_draggablesById, el.get("id"), drag);
// again, only keep a record of this for scope stuff if this is a plumbed component (an endpoint)
if (isPlumbedComponent) {
_add(_draggablesByScope, scope, drag);
}
// test for disabled.
if (options.disabled) drag.detach();
}
return drag;
},
initDroppable : function(el, options, isPlumbedComponent, isPermanent) {
var scope = options["scope"];
_add(_droppables, scope, el);
var id = jsPlumb.getId(el);
el.setAttribute("_isPermanentDroppable", isPermanent); // we use this to clear out droppables on drag complete.
_droppableOptions[id] = options;
_droppableScopesById[id] = scope;
var filterFunc = function(entry) { return entry.element != el; },
draggables = _draggablesByScope[scope] ? _draggablesByScope[scope].filter(filterFunc) : [];
for (var i = 0; i < draggables.length; i++) {
draggables[i].droppables.push(el);
}
},
isAlreadyDraggable : function(el) {
return _draggablesById[jsPlumb.getId(el)] != null;
},
isDragSupported : function(el, options) {
return typeof Drag != 'undefined' ;
},
/*
* you need Drag.Move imported to make drop work.
*/
isDropSupported : function(el, options) {
return (typeof Drag != undefined && typeof Drag.Move != undefined);
},
/**
* removes the given class from the element object.
*/
removeClass : function(el, clazz) {
el = jsPlumb.CurrentLibrary.getElementObject(el);
try {
if (el.className.constructor == SVGAnimatedString) {
jsPlumbUtil.svg.removeClass(el, clazz);
}
else el.removeClass(clazz);
}
catch (e) {
// SVGAnimatedString not supported; no problem.
el.removeClass(clazz);
}
},
removeElement : function(element, parent) {
var el = _getElementObject(element);
if (el) el.dispose(); // ??
},
/**
* sets the named attribute on the given element object.
*/
setAttribute : function(el, attName, attValue) {
el.set(attName, attValue);
},
setDraggable : function(el, draggable) {
var draggables = _draggablesById[el.get("id")];
if (draggables) {
draggables.each(function(d) {
if (draggable) d.attach(); else d.detach();
});
}
},
setDragScope : function(el, scope) {
var drag = _draggablesById[el.get("id")];
var filterFunc = function(entry) {
return entry.get("id") != el.get("id");
};
var droppables = _droppables[scope] ? _droppables[scope].filter(filterFunc) : [];
drag[0].droppables = droppables;
},
setOffset : function(el, o) {
_getElementObject(el).setPosition({x:o.left, y:o.top});
},
stopDrag : function() {
for (var i in _draggablesById) {
for (var j = 0; j < _draggablesById[i].length; j++) {
var d = _draggablesById[i][j];
d.stop();
if (d.originalZIndex != 0)
d.element.setStyle("z-index", d.originalZIndex);
}
}
},
/**
* note that jquery ignores the name of the event you wanted to trigger, and figures it out for itself.
* the other libraries do not. yui, in fact, cannot even pass an original event. we have to pull out stuff
* from the originalEvent to put in an options object for YUI.
* @param el
* @param event
* @param originalEvent
*/
trigger : function(el, event, originalEvent) {
originalEvent.stopPropagation();
_getElementObject(el).fireEvent(event, originalEvent);
},
unbind : function(el, event, callback) {
el = _getElementObject(el);
el.removeEvent(event, callback);
}
};
window.addEvent('domready', jsPlumb.init);
})();
ui/lib/jsPlumb/yui.jsPlumb.js 0 → 100644
View file @ e34796c6
/*
* jsPlumb
*
* Title:jsPlumb 1.4.0
*
* Provides a way to visually connect elements on an HTML page, using either SVG, Canvas
* elements, or VML.
*
* This file contains the YUI3 adapter.
*
* Copyright (c) 2010 - 2013 Simon Porritt (http://jsplumb.org)
*
* http://jsplumb.org
* http://github.com/sporritt/jsplumb
* http://code.google.com/p/jsplumb
*
* Dual licensed under the MIT and GPL2 licenses.
*/
/**
* addClass adds a class to the given element
* animate calls the underlying library's animate functionality
* appendElement appends a child element to a parent element.
* bind binds some event to an element
* dragEvents a dictionary of event names
* extend extend some js object with another. probably not overly necessary; jsPlumb could just do this internally.
* getAttribute gets some attribute from an element
* getDragObject gets the object that is being dragged, by extracting it from the arguments passed to a drag callback
* getDragScope gets the drag scope for a given element.
* getElementObject turns an id or dom element into an element object of the underlying library's type.
* getOffset gets an element's offset
* getOriginalEvent gets the original browser event from some wrapper event.
* getScrollLeft gets an element's scroll left. TODO: is this actually used? will it be?
* getScrollTop gets an element's scroll top. TODO: is this actually used? will it be?
* getSize gets an element's size.
* getUIPosition gets the position of some element that is currently being dragged, by extracting it from the arguments passed to a drag callback.
* initDraggable initializes an element to be draggable
* initDroppable initializes an element to be droppable
* isDragSupported returns whether or not drag is supported for some element.
* isDropSupported returns whether or not drop is supported for some element.
* removeClass removes a class from a given element.
* removeElement removes some element completely from the DOM.
* setAttribute sets an attribute on some element.
* setDraggable sets whether or not some element should be draggable.
* setDragScope sets the drag scope for a given element.
* setOffset sets the offset of some element.
*/
(function() {
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function( v, b, s ) {
for( var i = +b || 0, l = this.length; i < l; i++ ) {
if( this[i]===v || s && this[i]==v ) { return i; }
}
return -1;
};
}
var Y;
YUI().use('node', 'dd', 'dd-constrain', 'anim', 'node-event-simulate', function(_Y) {
Y = _Y;
Y.on("domready", function() { jsPlumb.init(); });
});
/**
* adds the given value to the given list, with the given scope. creates the scoped list
* if necessary.
* used by initDraggable and initDroppable.
*/
var _add = function(list, scope, value) {
var l = list[scope];
if (!l) {
l = [];
list[scope] = l;
}
l.push(value);
},
ddEvents = [ "drag:mouseDown", "drag:afterMouseDown", "drag:mouseup",
"drag:align", "drag:removeHandle", "drag:addHandle", "drag:removeInvalid", "drag:addInvalid",
"drag:start", "drag:end", "drag:drag", "drag:over", "drag:enter",
"drag:exit", "drag:drophit", "drag:dropmiss", "drop:over", "drop:enter", "drop:exit", "drop:hit"
],
animEvents = [ "tween" ],
/**
* helper function to curry callbacks for some element.
*/
_wrapper = function(fn) {
return function() {
try {
return fn.apply(this, arguments);
}
catch (e) { }
};
},
/**
* extracts options from the given options object, leaving out event handlers.
*/
_getDDOptions = function(options) {
var o = {};
for (var i in options) if (ddEvents.indexOf(i) == -1) o[i] = options[i];
return o;
},
/**
* attaches all event handlers found in options to the given dragdrop object, and registering
* the given el as the element of interest.
*/
_attachListeners = function(dd, options, eventList) {
for (var ev in options) {
if (eventList.indexOf(ev) != -1) {
var w = _wrapper(options[ev]);
dd.on(ev, w);
}
}
},
_droppables = {},
_droppableOptions = {},
_draggablesByScope = {},
_draggablesById = {},
_droppableScopesById = {},
_checkHover = function(el, entering) {
if (el) {
var id = el.get("id");
if (id) {
var options = _droppableOptions[id];
if (options) {
if (options['hoverClass']) {
if (entering) el.addClass(options['hoverClass']);
else el.removeClass(options['hoverClass']);
}
}
}
}
},
_lastDragObject = null,
_extend = function(o1, o2) {
for (var i in o2)
o1[i] = o2[i];
return o1;
},
_getAttribute = function(el, attributeId) {
return el.getAttribute(attributeId);
},
_getElementObject = function(el) {
if (el == null) return null;
var eee = null;
eee = typeof el == 'string' ? Y.one('#' + el) : el._node ? el : Y.one(el);
return eee;
};
jsPlumb.CurrentLibrary = {
addClass : function(el, clazz) {
jsPlumb.CurrentLibrary.getElementObject(el).addClass(clazz);
},
/**
* animates the given element.
*/
animate : function(el, properties, options) {
var o = _extend({node:el, to:properties}, options),
id = _getAttribute(el, "id");
o["tween"] = jsPlumb.wrap(properties["tween"], function() {
// TODO should use a current instance.
jsPlumb.repaint(id);
});
var a = new Y.Anim(o);
_attachListeners(a, o, animEvents);
a.run();
},
appendElement : function(child, parent) {
_getElementObject (parent).append(child);
},
/**
* event binding wrapper.
*/
bind : function(el, event, callback) {
_getElementObject(el).on(event, callback);
},
dragEvents : {
"start":"drag:start", "stop":"drag:end", "drag":"drag:drag", "step":"step",
"over":"drop:enter", "out":"drop:exit", "drop":"drop:hit"
},
extend : _extend,
getAttribute : _getAttribute,
getClientXY : function(eventObject) {
return [eventObject.clientX, eventObject.clientY];
},
/**
* takes the args passed to an event function and returns you an object representing that which is being dragged.
*/
getDragObject : function(eventArgs) {
// this is a workaround for the unfortunate fact that in YUI3, the 'drop:exit' event does
// not contain a reference to the drag that just exited. single-threaded js to the
// rescue: we'll just keep it for ourselves.
if (eventArgs[0].drag) _lastDragObject = eventArgs[0].drag.el;
return _lastDragObject;
},
getDragScope : function(el) {
var id = jsPlumb.getId(el),
dd = _draggablesById[id];
return dd.scope;
},
getDropEvent : function(args) {
return args[0];
},
getDropScope : function(el) {
var id = jsPlumb.getId(el);
return _droppableScopesById[id];
},
getDOMElement : function(el) {
if (typeof(el) == "String")
return document.getElementById(el);
else if (el._node)
return el._node;
else return el;
},
getElementObject : _getElementObject,
getOffset : function(el) {
var o = Y.DOM.getXY(el._node);
return {left:o[0], top:o[1]};
},
getOriginalEvent : function(e) {
return e._event;
},
getPageXY : function(eventObject) {
return [eventObject.pageX, eventObject.pageY];
},
getParent : function(el) {
return jsPlumb.CurrentLibrary.getElementObject(el).get("parentNode");
},
getScrollLeft : function(el) {
return 0;
},
getScrollTop : function(el) {
return 0;
},
getSelector : function(context, spec) {
var _convert = function(s) { return s && s ._nodes ? s._nodes : []; };
if (arguments.length == 2) {
return _convert(jsPlumb.CurrentLibrary.getElementObject(context).all(spec));
}
else {
return _convert(Y.all(context));
}
},
getSize : function(el) {
return [ el._node.offsetWidth, el._node.offsetHeight ];
},
getTagName : function(el) {
var e = jsPlumb.CurrentLibrary.getElementObject(el);
return e != null && e._node != null ? e._node.tagName : null;
},
getUIPosition : function(args, zoom) {
zoom = zoom || 1;
var n = args[0].currentTarget.el._node,
o = Y.DOM.getXY(n);
return {left:o[0] / zoom, top:o[1] / zoom};
},
hasClass : function(el, clazz) {
return el.hasClass(clazz);
},
initDraggable : function(el, options, isPlumbedComponent) {
var _opts = _getDDOptions(options),
id = jsPlumb.getId(el);
_opts.node = "#" + id;
var dd = new Y.DD.Drag(_opts),
containment = options.constrain2node || options.containment;
dd.el = el;
if (containment) {
dd.plug(Y.Plugin.DDConstrained, {
constrain2node: containment
});
}
if (isPlumbedComponent) {
var scope = options['scope'] || jsPlumb.Defaults.Scope;
dd.scope = scope;
_add(_draggablesByScope, scope, dd);
}
_draggablesById[id] = dd;
_attachListeners(dd, options, ddEvents);
},
initDroppable : function(el, options) {
var _opts = _getDDOptions(options),
id = jsPlumb.getId(el);
_opts.node = "#" + id;
var dd = new Y.DD.Drop(_opts);
_droppableOptions[id] = options;
options = _extend({}, options);
var scope = options['scope'] || jsPlumb.Defaults.Scope;
_droppableScopesById[id] = scope;
options["drop:enter"] = jsPlumb.wrap(options["drop:enter"], function(e) {
if (e.drag.scope !== scope) return true;
_checkHover(el, true);
}, true);
options["drop:exit"] = jsPlumb.wrap(options["drop:exit"], function(e) {
_checkHover(el, false);
});
options["drop:hit"] = jsPlumb.wrap(options["drop:hit"], function(e) {
if (e.drag.scope !== scope) return true;
_checkHover(el, false);
}, true);
_attachListeners(dd, options, ddEvents);
},
isAlreadyDraggable : function(el) {
el = _getElementObject(el);
return el.hasClass("yui3-dd-draggable");
},
isDragSupported : function(el) { return true; },
isDropSupported : function(el) { return true; },
removeClass : function(el, clazz) {
jsPlumb.CurrentLibrary.getElementObject(el).removeClass(clazz);
},
removeElement : function(el) { _getElementObject(el).remove(); },
setAttribute : function(el, attributeName, attributeValue) {
el.setAttribute(attributeName, attributeValue);
},
/**
* sets the draggable state for the given element
*/
setDraggable : function(el, draggable) {
var id = jsPlumb.getId(el),
dd = _draggablesById[id];
if (dd) dd.set("lock", !draggable);
},
setDragScope : function(el, scope) {
var id = jsPlumb.getId(el),
dd = _draggablesById[id];
if (dd) dd.scope = scope;
},
setOffset : function(el, o) {
el = _getElementObject(el);
el.set("top", o.top);
el.set("left", o.left);
},
stopDrag : function() {
Y.DD.DDM.stopDrag();
},
trigger : function(el, event, originalEvent) {
originalEvent.stopPropagation();
_getElementObject(el).simulate(event, {
pageX:originalEvent.pageX,
pageY:originalEvent.pageY,
clientX:originalEvent.clientX,
clientY:originalEvent.clientY
});
},
/**
* event unbinding wrapper.
*/
unbind : function(el, event, callback) {
_getElementObject(el).detach(event, callback);
}
};
})();
\ No newline at end of file
ui/src/demo-helper-jquery.js 0 → 100644
View file @ e34796c6
/*
* This file contains the JS that handles the first init of each jQuery demonstration, and also switching
* between render modes.
*/
jsPlumb.bind("ready", function() {
jsPlumb.DemoList.init();
// chrome fix.
document.onselectstart = function () { return false; };
// render mode
var resetRenderMode = function(desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
$(".rmode").removeClass("selected");
$(".rmode[mode='" + newMode + "']").addClass("selected");
$(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
$(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
$(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());
jsPlumbDemo.init();
};
$(".rmode").bind("click", function() {
var desiredMode = $(this).attr("mode");
if (jsPlumbDemo.reset) jsPlumbDemo.reset();
jsPlumb.reset();
resetRenderMode(desiredMode);
});
resetRenderMode(jsPlumb.SVG);
});
\ No newline at end of file
ui/src/demo-list.js 0 → 100644
View file @ e34796c6
;(function() {
var entries = [
{ id:"demo", name:"jsPlumb Home", about:"Main jsPlumb demo page. Contains a bit of everything" },
{ id:"flowchartConnectorsDemo", name:"Flowchart", about:"Demonstration of the Flowchart connectors" },
{ id:"draggableConnectorsDemo", name:"Draggable Connections", about:"Demonstration of drag and drop connections" },
{ id:"perimeterAnchorsDemo", name:"Perimeter Anchors", about:"Demonstration of perimeter anchors" },
{ id:"stateMachineDemo", name:"State Machine", about:"Demonstration of the State Machine Connectors and Continuous Anchors" },
{ id:"chartDemo", name:"Chart Demonstration", about:"Simple Chart Demo" },
{ id:"anchorDemo", name:"Sources and Targets", about:"Demonstration of how to make whole elements Connection sources and targets" },
{ id:"dynamicAnchorsDemo", name:"Dynamic Anchors", about:"Demonstration of Dynamic Anchors" },
{ id:"dragAnimDemo", name:"Animation", about:"Drag/drop demo with animation" }
],
libraries = [
{id:"jquery", name:"jQuery"},
{id:"mootools", name:"MooTools"},
{id:"yui3", name:"YUI3"}
],
prepareOtherLibraryString = function(demoId, library) {
var s = "", demoInfo = jsPlumb.DemoList.find(demoId);
for (var i = 0; i < libraries.length; i++) {
var c = libraries[i].id == library ? "selected" : "";
s += '<a class="' + c + '" href="../' + libraries[i].id + '/' + demoId + '.html" title="Use ' + libraries[i].name + ' as the support library">' + libraries[i].name + '</a>&nbsp;';
}
return s;
},
demoSelectorString = (function() {
var s = '&nbsp;<h5>select:</h5><select id="demoSelector" class="demoSelector" title="Select a demo">';
for (var i = 0; i < entries.length; i++) {
s += '<option value="' + entries[i].id + '.html">' + entries[i].name + '</option>';
}
s += '</select>';
return s;
})();
jsPlumb.DemoList = {
find:function(id) {
for (var i = 0; i < entries.length; i++) {
if (entries[i].id === id) {
var next = i < entries.length - 1 ? i + 1 : 0,
prev = i > 0 ? i - 1 : entries.length - 1;
return {
current:entries[i],
prev:entries[prev],
next:entries[next],
idx:i
};
}
}
},
init : function() {
var bod = document.body,
demoId = bod.getAttribute("data-demo-id"),
library = bod.getAttribute("data-library"),
libraryString = '<div class="otherLibraries"></div>' + prepareOtherLibraryString(demoId, library),
demoInfo = jsPlumb.DemoList.find(demoId);
if (demoInfo) {
var prevString = '|&nbsp;<h5>prev:</h5><a href="' + demoInfo.prev.id + '.html" title="View previous demo">' + demoInfo.prev.name + '</a>',
nextString = '&nbsp;<h5>next:</h5><a href="' + demoInfo.next.id + '.html" title="View next demo">' + demoInfo.next.name + '</a>',
menuString = '<a href="../doc/usage.html" class="mplink">Documentation</a>' +
'&nbsp;|&nbsp;<a href="../apidocs">API docs</a>' +
'&nbsp;|&nbsp;<a href="../../tests/qunit-all.html">qUnit tests</a>' +
'&nbsp;|&nbsp;<a href="mailto:simon.porritt@gmail.com" class="mplink">Contact</a>' +
'&nbsp;|&nbsp;<a href="http://github.com/sporritt/jsplumb/" class="mplink">GitHub</a>' +
'&nbsp;|&nbsp;<a href="https://groups.google.com/forum/?fromgroups#!forum/jsplumb" class="mplink">Google Group</a>' +
'&nbsp;|&nbsp;<a href="http://code.google.com/p/jsplumb/issues/list" class="mplink">Issues</a>';
document.getElementById("render").innerHTML = libraryString + prevString + demoSelectorString+ nextString;
var m = document.createElement("div");
m.className = "menu";
m.innerHTML = menuString;
document.getElementById("header").appendChild(m);
var ds = document.getElementById("demoSelector");
ds.selectedIndex = demoInfo.idx;
ds.onchange = function() {
window.location.href = ds.options[ds.selectedIndex].value;
};
}
}
};
})();
\ No newline at end of file
ui/src/flowchartConnectorsDemo.js 0 → 100644
View file @ e34796c6
;(function() {
window.jsPlumbDemo = {
init : function() {
jsPlumb.importDefaults({
// default drag options
DragOptions : { cursor: 'pointer', zIndex:2000 },
// default to blue at one end and green at the other
EndpointStyles : [{ fillStyle:'#225588' }, { fillStyle:'#558822' }],
// blue endpoints 7 px; green endpoints 11.
Endpoints : [ [ "Dot", {radius:7} ], [ "Dot", { radius:11 } ]],
// the overlays to decorate each connection with. note that the label overlay uses a function to generate the label text; in this
// case it returns the 'labelText' member that we set on each connection in the 'init' method below.
ConnectionOverlays : [
[ "Arrow", { location:0.9 } ],
[ "Label", {
location:0.1,
id:"label",
cssClass:"aLabel"
}]
]
});
// this is the paint style for the connecting lines..
var connectorPaintStyle = {
lineWidth:5,
strokeStyle:"#deea18",
joinstyle:"round",
outlineColor:"#EAEDEF",
outlineWidth:7
},
// .. and this is the hover style.
connectorHoverStyle = {
lineWidth:7,
strokeStyle:"#2e2aF8"
},
// the definition of source endpoints (the small blue ones)
sourceEndpoint = {
endpoint:"Dot",
paintStyle:{ fillStyle:"#225588",radius:7 },
isSource:true,
connector:[ "Flowchart", { stub:[40, 60], gap:10 } ],
connectorStyle:connectorPaintStyle,
hoverPaintStyle:connectorHoverStyle,
connectorHoverStyle:connectorHoverStyle,
dragOptions:{},
overlays:[
[ "Label", {
location:[0.5, 1.5],
label:"Drag",
cssClass:"endpointSourceLabel"
} ]
]
},
// a source endpoint that sits at BottomCenter
// bottomSource = jsPlumb.extend( { anchor:"BottomCenter" }, sourceEndpoint),
// the definition of target endpoints (will appear when the user drags a connection)
targetEndpoint = {
endpoint:"Dot",
paintStyle:{ fillStyle:"#558822",radius:11 },
hoverPaintStyle:connectorHoverStyle,
maxConnections:-1,
dropOptions:{ hoverClass:"hover", activeClass:"active" },
isTarget:true,
overlays:[
[ "Label", { location:[0.5, -0.5], label:"Drop", cssClass:"endpointTargetLabel" } ]
]
},
init = function(connection) {
connection.getOverlay("label").setLabel(connection.sourceId.substring(6) + "-" + connection.targetId.substring(6));
connection.bind("editCompleted", function(o) {
if (typeof console != "undefined")
console.log("connection edited. path is now ", o.path);
});
};
var allSourceEndpoints = [], allTargetEndpoints = [];
_addEndpoints = function(toId, sourceAnchors, targetAnchors) {
for (var i = 0; i < sourceAnchors.length; i++) {
var sourceUUID = toId + sourceAnchors[i];
allSourceEndpoints.push(jsPlumb.addEndpoint(toId, sourceEndpoint, { anchor:sourceAnchors[i], uuid:sourceUUID }));
}
for (var j = 0; j < targetAnchors.length; j++) {
var targetUUID = toId + targetAnchors[j];
allTargetEndpoints.push(jsPlumb.addEndpoint(toId, targetEndpoint, { anchor:targetAnchors[j], uuid:targetUUID }));
}
};
_addEndpoints("window4", ["TopCenter", "BottomCenter"], ["LeftMiddle", "RightMiddle"]);
_addEndpoints("window2", ["LeftMiddle", "BottomCenter"], ["TopCenter", "RightMiddle"]);
_addEndpoints("window3", ["RightMiddle", "BottomCenter"], ["LeftMiddle", "TopCenter"]);
_addEndpoints("window1", ["LeftMiddle", "RightMiddle"], ["TopCenter", "BottomCenter"]);
// listen for new connections; initialise them the same way we initialise the connections at startup.
jsPlumb.bind("jsPlumbConnection", function(connInfo, originalEvent) {
init(connInfo.connection);
});
// make all the window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"), { grid: [20, 20] });
// THIS DEMO ONLY USES getSelector FOR CONVENIENCE. Use your library's appropriate selector method!
//jsPlumb.draggable(jsPlumb.getSelector(".window"));
// connect a few up
jsPlumb.connect({uuids:["window2BottomCenter", "window3TopCenter"], editable:true});
jsPlumb.connect({uuids:["window2LeftMiddle", "window4LeftMiddle"], editable:true});
jsPlumb.connect({uuids:["window4TopCenter", "window4RightMiddle"], editable:true});
jsPlumb.connect({uuids:["window3RightMiddle", "window2RightMiddle"], editable:true});
jsPlumb.connect({uuids:["window4BottomCenter", "window1TopCenter"], editable:true});
jsPlumb.connect({uuids:["window3BottomCenter", "window1BottomCenter"], editable:true});
//
//
// listen for clicks on connections, and offer to delete connections on click.
//
jsPlumb.bind("click", function(conn, originalEvent) {
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn);
});
jsPlumb.bind("connectionDrag", function(connection) {
console.log("connection " + connection.id + " is being dragged");
});
jsPlumb.bind("connectionDragStop", function(connection) {
console.log("connection " + connection.id + " was dragged");
});
}
};
})();
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7